1128 도서 상세 페이지 구현

도서 상세 페이지

pages에서 BookDetail 생성
App.tsx에서 라우터 생성
BookItem 링크 생성
BookDetail에서 bookId 얻기

• useParams(); 사용

fetch 함수와 useBook 훅 생성

• books.spi.ts
• hooks>useBook.tsx

BookDetail에서 useBook 함수로 book 정보 가져오기
※ 얼리 리턴 : book이 만약 없을 경우 null 리턴

BookDetail 내용 뿌리기

• dl, dt 정의 태그
• 키, 배열 구조화
• 구조화된 것 map
• price 포맷화. filter 키 추가 : formatNumber 사용
• date 포맷화 : formatDate 사용
  • dayjs 모듈 활용 : npm i dayjs
• 카테고리 링크 적용
• summary, 좋아요, 장바구니 위치 잡기

상세 설명 더보기 토글 버튼 구현
방법1)

.content {
        /*글자수가 많은 경우 가리기 가능*/
        .detail {
            height: 200px;
            overflow: hidden;
        }
    }

방법2)

.content {
        .detail {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;  /* 4줄까지 보여준다 */
            -webkit-box-orient: vertical    /* 방향 */
        }
    }

공통 컴포넌트로 빼서 구현

• styled-component에 boolean 선언 x : $ 붙여서 해결

---

좋아요 구현

button컴포넌트 styled 직접 구현

function LikeButton({ book, onClick }: Props) {
  return (
    <LikeButtonStyle size="small" scheme="normal" onClick={onClick}>
        <FaHeart />
        {book.likes}
    </LikeButtonStyle>
  );
}

const LikeButtonStyle = styled(Button)``;

export default LikeButton;

 

토글버튼 기능 구현

• useBook.ts
• books.api.ts에서 fetch 함수 선언

※ 낙관적 업데이트란?

2025.11.28 - [프레임워크\라이브러리/React] - [React Query] 낙관적 업데이트

[React Query] 낙관적 업데이트

 

로그인 하지 않았을 때 좋아요 처리

• useAuthStore에서 로그인 상태 가져오고 if 처리

const { isloggedIn }= useAuthStore();
const showAlert = useAlert();

// 좋아요 토글 버튼
const likeToggle = () => {
    // 권한 확인
    if(!isloggedIn){
        showAlert("로그인이 필요합니다.");
        return;
    }

---

장바구니 구현

AddToCart.tsx 생성

• 수량 증감 버튼 만들기

장바구니 fetcher 생성

장바구니 이동 박스 만들기

addToCart useBook 으로 이동