🎯 도서 상세 페이지를 제작합니다.

📗 Today I Learned

도서 상세 페이지

useBook.ts

import { useEffect, useState } from 'react';
import { BookDetail } from '../models/book.model';
import { fetchBook, likeBook, unlikeBook } from '../api/books.api';
import { useAuthStore } from '../store/authStore';
import { useAlert } from './useAlert';
import { addCart } from '../api/carts.api';

export const useBook = (bookId: string | undefined) => {
  const [book, setBook] = useState<BookDetail | null>(null);
  const { isLoggedIn } = useAuthStore();
  const showAlert = useAlert();
  const [cartAdded, setCartAdded] = useState(false);

  const likeToggle = () => {
    if (!isLoggedIn) {
      showAlert('로그인이 필요합니다.');
      return;
    }

    if (!book) return;

    if (book.liked) {
      unlikeBook(book.id).then(() => {
        setBook({
          ...book,
          liked: false,
          likes: book.likes - 1,
        });
      });
    } else {
      likeBook(book.id).then(() => {
        setBook({
          ...book,
          liked: true,
          likes: book.likes + 1,
        });
      });
    }
  };

  const addToCart = (quantity: number) => {
    if (!book) return;

    addCart({
      bookId: book.id,
      quantity: quantity,
    }).then(() => {
      setCartAdded(true);
      setTimeout(() => {
        setCartAdded(false);
      }, 3000);
    });
  };

  useEffect(() => {
    if (!bookId) return;

    fetchBook(bookId).then((book) => {
      setBook(book);
    });
  }, [bookId]);

  return { book, likeToggle, addToCart, cartAdded };
};

책 정보(book), 좋아요 추가(likeToggle), 장바구니 추가 (addToCart), 장바구니에 추가 되었는지의 여부(cartAdded)를 내보내는 도서 상태 관리 커스텀 훅입니다.

• book : 현재 도서 정보를 저장합니다. (BookDetail | null 타입)

• isLoggedIn : 사용자가 로그인한 상태인지 여부를 가져옵니다. (useAuthStore 훅 사용)

• showAlert : 알림을 표시하는 함수입니다. (로그인 필요할 때 사용)

• cartAdded : 장바구니 추가 완료 여부를 저장합니다. (true / false)

• likeToggle : 도서의 좋아요 상태를 토글하는 함수입니다.

  • 이미 좋아요한 경우 unlikeBook 호출 ( 좋아요 - 1 )

  • 좋아요하지 않은 경우 likeBook 호출 ( 좋아요 + 1 )

• addToCart : 현재 도서를 장바구니에 지정 수량만큼 추가하는 함수입니다.

  • 추가 완료 시 cartAdded를 true로 바꾸고 3초 뒤 false로 초기화합니다.

  • useEffect : bookId가 있을 때 도서 상세 정보를 API로 불러와서 book에 저장합니다.

---

bookDetail.tsx

import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import { useBook } from '../hooks/useBook';
import { getImgSrc } from '../utils/image';
import Title from '../components/common/Title';
import { BookDetail as IBookDetail } from '../models/book.model';
import { formatDate, formatNumber } from '../utils/format';
import { Link } from 'react-router-dom';
import { Theme } from '../style/theme';
import EllipsisBox from '../components/common/EllipsisBox';
import LikeButton from '../components/book/LikeButton';
import AddToCart from '../components/book/AddToCart';

const bookInfoList = [
  {
    label: '카테고리',
    key: 'categoryName',
    filter: (book: IBookDetail) => (
      <Link to={`/books?category_id=${book.category_id}`}>
        {book.categoryName}
      </Link>
    ),
  },
  {
    label: '포맷',
    key: 'form',
  },
  {
    label: '페이지',
    key: 'pages',
  },
  {
    label: 'ISBN',
    key: 'isbn',
  },
  {
    label: '출간일',
    key: 'pubDate',
    filter: (book: IBookDetail) => {
      return formatDate(book.pubDate);
    },
  },
  {
    label: '가격',
    key: 'price',
    filter: (book: IBookDetail) => {
      return `${formatNumber(book.price)}원`;
    },
  },
];

export default function BookDetail() {
  const { bookId } = useParams();
  const { book, likeToggle } = useBook(bookId);

  if (!book) return null;

  return (
    <StyledBookDetail>
      <header className='header'>
        <div className='content'>
          <img src={getImgSrc(book.img)} alt={book.title} />
        </div>
        <div className='info'>
          <Title size='large' color='text'>
            {book.title}
          </Title>
          {bookInfoList.map((item) => (
            <dl>
              <dt>{item.label}</dt>
              <dd>
                {item.filter
                  ? item.filter(book)
                  : book[item.key as keyof IBookDetail]}
              </dd>
            </dl>
          ))}
          <dl>
            <dt>카테고리</dt>
            <dd>{book.categoryName}</dd>
          </dl>
          <p className='summary'>{book.summary}</p>
          <div className='like'>
            <LikeButton book={book} onClick={likeToggle} />
          </div>
          <div className='add-cart'>
            <AddToCart book={book} />
          </div>
        </div>
      </header>
      <div className='content'>
        <Title size='medium'>상세 설명</Title>
        <EllipsisBox lineLimit={2}>{book.detail}</EllipsisBox>
        <Title size='medium'>목차</Title>
        <p className='index'>{book.contents}</p>
      </div>
    </StyledBookDetail>
  );
}

const StyledBookDetail = styled.div<{ theme: Theme }>`
  .header {
    display: flex;
    align-items: start;
    gap: 24px;
    padding: 0 0 24px 0;

    .img {
      flex: 1;
      img {
        width: 100%;
        height: auto;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;

      dl {
        display: flex;
        margin: 0;
      }
      dt {
        width: 80px;
        color: ${({ theme }) => theme.color.background};
      }

      a {
        color: ${({ theme }) => theme.color.primary};
      }
    }
  }
`;

도서 상세 정보를 보여주는 페이지 컴포넌트입니다.

• bookInfoList : 도서 기본 정보를 표시할 항목 리스트입니다.

• bookId : URL 파라미터에서 가져온 도서 ID입니다. (useParams 사용)

• book, likeToggle : useBook 훅을 통해 가져온 현재 도서 정보와 좋아요 토클 함수입니다.

• header에 이미지와 책 이름, 카테고리, 포맷, 페이지, ISBN, 출간일 가격을 소개하고, content에는 상세설명과 목차를 설명합니다.

---

LikeButton.tsx

import styled from 'styled-components';
import { BookDetail } from '../../models/book.model';
import Button from '../common/Button';
import { FaHeart } from 'react-icons/fa';

interface Props {
  book: BookDetail;
  onClick: () => void;
}

export default function LikeButton({ book, onClick }: Props) {
  return (
    <StyledLikeButton
      size='medium'
      scheme={book.liked ? 'like' : 'normal'}
      onClick={onClick}
    >
      <FaHeart />
      {book.likes}
    </StyledLikeButton>
  );
}

const StyledLikeButton = styled(Button)`
  display: flex;
  gap: 6px;

  svg {
    color: inherit;
    * {
      color: inherit;
    }
  }
`;

책 정보(book)와 클릭 시 함수(onClick)를 넘겨 받아서 실행시키는 좋아요 버튼 컴포넌트입니다.

---

AddToCart.tsx

import styled from 'styled-components';
import { BookDetail } from '../../models/book.model';
import InputText from '../common/InputText';
import Button from '../common/Button';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Theme } from '../../style/theme';
import { useBook } from '../../hooks/useBook';

interface Props {
  book: BookDetail;
}

export default function AddToCart({ book }: Props) {
  const [quantity, setQuantity] = useState<number>(1);
  const { addToCart, cartAdded } = useBook(book.id.toString());
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuantity(Number(e.target.value));
  };

  const handleIncrease = () => {
    setQuantity(quantity + 1);
  };
  const handleDecrease = () => {
    if (quantity === 1) return;
    setQuantity(quantity - 1);
  };

  return (
    <StyledAddToCart $added={cartAdded}>
      <div>
        <InputText
          inputType='number'
          value={quantity}
          onChange={handleChange}
        />
        <Button size='medium' scheme='normal' onClick={handleIncrease}>
          +
        </Button>
        <Button size='medium' scheme='normal' onClick={handleDecrease}>
          -
        </Button>
      </div>
      <Button
        size='medium'
        scheme='primary'
        onClick={() => addToCart(quantity)}
      >
        장바구니
      </Button>
      <div className='added'>
        <p>장바구니에 추가되었습니다.</p>
        <Link to='/carts'>장바구니로 이동</Link>
      </div>
    </StyledAddToCart>
  );
}

interface AddToCartStyleProps {
  $added: boolean;
}

const StyledAddToCart = styled.div<AddToCartStyleProps>`
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .added {
    position: absolute;
    right: 0;
    bottom: -90px;
    background: ${({ theme }) => (theme as Theme).color.secondary};
    border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};
    padding: 8px 12px;
    opacity: ${({ $added }) => ($added ? '1' : '0')};
    transition: all 0.5s ease;

    p {
      padding: 0 0 8px 0;
      margin: 0;
    }
  }
`;

장바구니 추가 기능을 제공하는 컴포넌트입니다.

• handleChange : 수량 입력창의 값을 변경할 때 호출하는 함수입니다.

• handleIncrease : 수량을 1 증가시키는 함수입니다.

• handleDecrease : 수량이 1보다 크면 1 감소시키는 함수입니다.

---

EllipsisBox.tsx

import { useState } from 'react';
import styled from 'styled-components';
import Button from './Button';
import { FaAngleDown } from 'react-icons/fa';

interface Props {
  children: React.ReactNode;
  lineLimit: number;
}

export default function EllipsisBox({ children, lineLimit }: Props) {
  const [expanded, setExpanded] = useState(false);

  return (
    <StyledEllipsisBox lineLimit={lineLimit} $expanded={expanded}>
      <p>{children}</p>
      <div className='toggle'>
        <Button
          size='small'
          scheme='normal'
          onClick={() => setExpanded(!expanded)}
        >
          {expanded ? '접기' : '펼치기'} <FaAngleDown />
        </Button>
      </div>
    </StyledEllipsisBox>
  );
}

interface EllipsisBoxStyleProps {
  lineLimit: number;
  $expanded: boolean;
}

const StyledEllipsisBox = styled.div<EllipsisBoxStyleProps>`
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: ${({ lineLimit, $expanded }) =>
      $expanded ? 'none' : lineLimit};
    -webkit-box-orient: vertical;
    padding: 20px 0 0 0;
    margin: 0;
  }

  .toggle {
    display: flex;
    justify-content: end;
    svg {
      transform: ${({ $expanded }) =>
        $expanded ? 'rotate(180deg)' : 'rotate(0)'};
    }
  }
`;

펼치기/접기 기능을 제공하는 텍스트 박스입니다.

• children : 컴포넌트 내부에 표시할 텍스트 또는 콘텐츠입니다.

• lineLimit : 기본으로 보여줄 텍스트 줄의 개수입니다.

• expanded : 현재 박스가 펼쳐져 있는지 여부입니다. (true / false)

• text-overflow: ellipsis; : 텍스트가 잘릴 때 말줄임표(...)를 표시할 때 사용하는 속성입니다.

• display: -webkit-box; : flexbox처럼 박스를 다루는 레이아웃 방식입니다.

🤔 왜 -webkit을 써야할까?

텍스트 줄 수를 제한(clamp)를 하려면 기본 CSS 스펙에는 없기 때문에 브라우저 독자 기술을 써야합니다.
브라우저마다 다르게 지원하기 때문에 -webkit-을 붙여야 크롬, 사파리 같은 브라우저에서 동작할 수 있습니다.

---

상세 페이지 결과 화면

---

✏️ 회고

기본 CSS에서 제공하지 않는 기술들을 브라우저 독자 기술로 사용하는 방법이 있는 줄 몰랐다. 브라우저 독자 기술이다보니 안정적이진 않기 때문에 W3C에서도 다양한 CSS 기술들이 지원되었으면 좋겠다.