[FEAT] 상세 페이지 구현

[eonseok-jeon]

🔥 Related Issues

• closed [ FEAT ] 상세 페이지 구현 #10

👻 작업 내용

• 상세 페이지 퍼블리싱
• 상세 페이지 API 연결
• 상세 페이지 링크 연결

✅ PR Point

• 상세 페이지에 데이터 전달을 어떻게 해야 할까요?
  search 페이지에서 데이터들을 쫘라락 받는데
  그렇다면 각 책에 대한 상세 페이지 정보도 다 받아온다는 건데
  이를 상세 페이지에 어떻게 전달을 해야할 지 고민을 했습니다.

원래는
state를 하나 만들어서 상세 페이지 클릭 시 해당 인덱스 번호를 넘겨줘서

{ !isDetailPageClicked && <Search /> }
{ isDetailPageClicked && <Detail /> }

이런 식으로 하고 props로 search page에서 받은 데이터를 detail page에 넘겨주려고 했는데,
클릭된 책이 무엇인지 인덱스 찾아야 하고, 그에 맞는 데이터 전달해야 하고 추가적인 task가 많을 거 같아서
그냥 동적 router 설정하고

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <Error />,
    children: [
      { index: true, element: <Onboarding /> },
      {
        path: '/search',
        children: [
          {
            index: true,
            element: <Search />,
          },
          { path: ':title', element: <Detail /> },
        ],
      },
    ],
  },
]);

params로 책 제목 넘겨준 뒤 해당 책제목으로 한 번 더 API 요청 하는 식으로 진행하였습니다!

export default function Detail() {
  const { title } = useParams();
  const { data } = useSWR(`https://dapi.kakao.com/v3/search/book?query=${title}`, fetcher);

  return (
    <DetailWrapper>
      {data && (
        <DetailBox>
          <img src={data[0].thumbnail} alt="book-cover" width={270} height={400} />
          <article>
            <h1 css={mainTitle}>{data[0].title}</h1>
            <div css={bookInfo}>
              <span>{data[0].authors}</span>
              <span>{data[0].publisher}</span>
              <span>{data[0].price}</span>
            </div>
            <p css={bookContent}>{data[0].contents}</p>
          </article>
        </DetailBox>
      )}
    </DetailWrapper>
  );
}

이렇게 할 때 우려되는 부분이 불필요한 API 요청을 한 번 더 하게 된 것이 아닌가 싶었는데요

보통 이런 상품 페이지의 상세 페이지를 클릭할 때, 한 번 더 API 요청을 하는지 어떻게 하는지 궁금했습니다!!!!

😡 Trouble Shooting

👀 스크린샷 / GIF / 링크

📚 Reference