쇼핑몰 상세 조회 페이지를 Dynamic Routes로 URL을 /malls/[mallName]
로 설정해놓았고,
쇼핑몰 상세 조회 API인 /auth/malls/{mallId}
를 호출하기 위해 mallName
을 mallId
로 변환해야 하는 상황
전체 쇼핑몰의 id
와 name
리스트를 받아오는 API인 /malls/list
를 호출하는 getMallsList()
함수를 먼저 구현한 뒤,
export const mallNameToMallId = async (mallName: string) => {
const mallsList = await getMallsList();
return mallsList.filter((mall) => mall.name === mallName)[0].id;
};
불러온 쇼핑몰 리스트에서 mallName
과 name
이 일치하는 쇼핑몰의 id
를 리턴하도록 mallNameToId
함수를 구현하였다.
mallName
이 한글로 된 쇼핑몰 페이지에 들어갔더니 mallNameToMallId(mallName)
가 undefined
를 반환하며 제대로 작동되지 않는 것을 발견하였다.
params.mallName
을 console.log()
로 찍어보니 %EC%97%98%EB%AC%B4%EB%93%9C
와 같이 출력이 되었다.
mallNameToMallId(decodeURI(mallName))
decodeURI()
함수를 사용하여 인코딩된 URL을 디코딩한다
참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI