14-3 상세 페이지

14-3 상세 페이지

상세 페이지 요구사항

---

• 각 도서 상세 정보
• 좋아요 버튼과 좋아요/취소 기능
• 수량을 입력하여 장바구니 담기(추가)

{
  path: "/book/:bookId",
  element: (
    <Layout>
    	<BookDetail />
    </Layout>
    ),
}

라우터에서 bookId를 통해 각 도서에 해당하는 상세페이지를 보여줍니다.

bookList의 책들 중 클릭한 bookItem의 도서의 상세정보를 보여주려면

BookItem.tsx

interface Props {
  book: Book;
  view?: ViewMode;
}

function BookItem({ book,  view } : Props) {
  return(
    <BookItemStyle view={view}>
      <Link to={`/book/${book.id}`}>
		~

Link to로 book.id를 받아서 해당 도서의 정보를 보여줍니다.

Link to

React에서는 SPA(single page application)방식으로 브라우저를 표시합니다.

• <a href="주소주소"> 는 클릭하면 해당 주소로 이동을 하는 것
• <Link to={{pathname: '/경로', search: "?query=abc"}}></Link> 방식은 페이지를 새로고침하거나 이동하는 것이 아니라, URL을 바꿔서 해당 컴포넌트만 변경하는 것

chat gpt
🧠 설명
pathname: 이동할 경로 (기본 경로)
search: 쿼리스트링 (예: ?sort=asc)
hash: 앵커 링크 (예: #section3)
state: 페이지 이동 시 함께 전달할 임시 데이터 (컴포넌트 간 전달용)

좋아요

useBook.ts

~    
  const { isLoggedIn } = useAuthStore();
  const showAlert = useAlert();

  const likeToggle = () => {
    
    //권한 확인
	if (!isLoggedIn) {
      showAlert('로그인이 필요합니다');
      return;		// !!! 여기서 return 해주지 않으면 아래로 프로세스가 진행되버리니까 주의할 것
    }
    
    if (!book) return;	// 책 정보를 찾을 수 없는 경우 (null 인 경우)
    
    if (book.liked) {  //좋아요가 있음 -> 취소 가능하게
      unlikeBook(book.id).then(() => {
        setBook({
          ...book,
          liked: false,
          likes: book.likes -1,
        })
      })
    } else { // 좋아요가 없음 -> 좋아요 가능하게
      likedBook(book.id).then(() => {
        // 성공
        setBook({ // 약관적 업데이트
          ...book,
          liked: true,
          likes: book.likes + 1,
      })
    }
~