React UI Playground

장바구니

장바구니에 담긴 상품의 수량을 바꾸거나 상품을 삭제합니다. 소계, 배송비, 합계는 장바구니 내용에 맞춰 자동으로 계산됩니다.

이 코드는 파일 1개로 되어 있습니다.

CartPage.tsx

장바구니 페이지

사용 방법 (Next.js)

내 프로젝트에서 이 화면을 띄우기까지의 3단계입니다

  1. 1

    터미널에서 사용할 컴포넌트와 라이브러리를 설치 (한 번만)

    npx shadcn@latest add button
    npm i lucide-react

    아직 shadcn/ui를 설치하지 않은 프로젝트라면 먼저 npx shadcn@latest init 을 한 번 실행합니다

  2. 2

    파일을 이 위치에 붙여넣기

    my-app/
├─ components/
│   └─ cart/
│       └─ CartPage.tsx   ← 위의 창에서 복사한 것
└─ app/
    └─ cart/
        └─ page.tsx   ← 3단계에서 만든다

    폴더가 없으면 만듭니다.

  3. 3

    페이지 파일에서 불러오기

    import CartPage from "@/components/cart/CartPage"

export default function Page() {
  return <CartPage />
}

    app/cart/page.tsx 에 씁니다. npm run dev 로 실행하고 /cart 로 가면 보입니다

핵심 포인트

  1. 1

    목록에서 하나만 바꾸거나 삭제하기

    수량을 바꿀 때는 map으로 "이 상품의 수량만 바뀐" 새 목록을 만듭니다. 삭제할 때는 filter로 "이 상품을 뺀 나머지" 새 목록을 만듭니다. 원래 목록을 직접 건드리지 않습니다.

  2. 2

    합계는 저장하지 않고 매번 계산하기

    소계, 배송비, 합계는 state에 넣지 않고 매번 장바구니 내용에서 계산합니다. 내용이 바뀌면 합계도 자연스럽게 맞춰집니다(저장해 두면 오히려 숫자가 어긋나는 원인이 됩니다).

  3. 3

    장바구니가 비었을 때의 화면 준비하기

    모두 삭제하면 "장바구니가 비어 있습니다"를 표시합니다. 빈 목록과 ₩0 합계만 보이면 고장 난 것처럼 보입니다.

사용한 도구

UI 컴포넌트(버튼)

shadcn/ui →

아이콘(＋와 −)

lucide-react →

누르면 제2부의 비교 페이지로