[1단계 - 장바구니] 리바이(성은우) 미션 제출합니다.

.github/pull_request_template.md

@@ -0,0 +1,58 @@
+## 📦 장바구니 미션
+
+이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 합니다.
+
+### 1단계
+
+- 클라이언트 상태를 효과적으로 모델링하고 관리할 수 있다.
+- Jest, React Testing Library(RTL)를 활용하여 주요 기능에 대한 테스트를 작성할 수 있다.
+
+## 🕵️ 셀프 리뷰(Self-Review)
+
+### 제출 전 체크 리스트
+
+- [ ] 기능 요구 사항을 모두 구현했고, 정상적으로 동작하는지 확인했나요?
+- [ ] RTL 테스트 케이스를 모두 작성했나요?
+- [ ] 배포한 데모 페이지에 정상적으로 접근할 수 있나요?
+
+  - 배포 링크 기입: **\_\_**
+
+- [ ] 리뷰어가 장바구니 추가를 쉽게 할 수 있도록 Curl 명령어를 DM 으로 전달해주세요.
+
+  ```
+  curl -X 'POST' \
+  '<url>' \
+  -H 'accept: */*' \
+  -H 'Authorization: Basic <토큰>' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "productId": 1,
+  "quantity": 1
+  }'
+  ```
+
+### 리뷰 요청 & 논의하고 싶은 내용
+
+### 1) 상태 설계 의도
+
+### 2) 이번 단계에서 가장 많이 고민했던 문제와 해결 과정에서 배운 점
+
+### 3) 이번 리뷰를 통해 논의하고 싶은 부분
+
+---
+
+## ✅ 리뷰어 체크 포인트
+
+<!-- 리뷰어가 이 PR을 검토할 때 중점적으로 확인할 사항입니다.
+코드의 완성도뿐만 아니라, 리뷰이가 구현 과정에서 어떤 고민과 결정을 하며 학습했는지도 함께 고려해 주세요. -->
+
+### 1. 클라이언트 상태관리
+
+- 원본상태/파생상태를 적절히 구분하여 선언하였나요?
+- React state 를 불필요하게 선언한 부분은 없나요?
+- 상태 관리 로직의 책임이 적절히 응집/분리되었나요? (ex. reducer, hook, Context)
+
+### 2. MSW/Test
+
+- 주요 기능을 적절히 정의하였나요?
+- 주요 기능/예외에 대한 테스트가 충분히 이루어졌나요?

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env*

README.md

@@ -1 +1,18 @@
-# react-shopping-cart
+# 1단계.
+
+react-shopping-cart
+
+# 기능 요구 명세서
+
+- [x] /cart-items API를 호출하여 장바구니 상품 데이터를 불러온다.
+- [x]불러온 데이터를 기반으로 클라이언트 상태를 구성하고 관리한다.
+  - 개별 상품의 선택 여부, 결제 금액, 배송비 등의 상태를 관리한다.
+- [x]상품 선택에 따른 결제 금액, 배송비 등의 동적인 변경 사항을 처리한다.
+  - 진입 시, 전체 선택 되어 있는 것이 디폴트이다.
+  - 상품 선택/해제 시 결제 금액을 동적으로 변경한다.
+  - 결제 금액이 10만원 이상일 경우 배송비는 무료이다.
+- [x] 장바구니 상품의 수량을 변경할 수 있다.
+- [x] 장바구니에 담긴 상품을 제거할 수 있다.
+
+- [x] 장바구니에 상품이 없을 시 UI 보여줌
+- [x] 주문을 완료하면 주문 확인 페이지로 라우팅

__test__/cart.test.tsx

@@ -0,0 +1,121 @@
+import { MemoryRouter } from 'react-router';
+import CartPage from '../src/pages/CartPage/CartPage';
+import { CartProvider } from '../src/shared/context/CartProvider';
+import { screen, render, within, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it } from 'vitest';
+import { DELIVERY_FEE, DELIVERY_FEE_THRESHOLD } from '../src/features/cart/constants/orderPriceSummary';
+import { server } from '../src/mocks/server';
+import { http, HttpResponse } from 'msw';
+
+const BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+function renderCartPage() {
+  return render(
+    <MemoryRouter initialEntries={['/']}>
+      <CartProvider>
+        <CartPage />
+      </CartProvider>
+    </MemoryRouter>
+  );
+}
+
+describe('빈 장바구니 테스트', () => {
+  it('장바구니에 상품이 없으면 EmptyCartItemUI가 보인다', async () => {
+    server.use(
+      http.get(`${BASE_URL}/cart-items*`, () => {
+        return HttpResponse.json({ content: [] });
+      })
+    );
+
+    renderCartPage();
+
+    const emptyMessage = await screen.findByText('장바구니에 담은 상품이 없습니다.');
+    expect(emptyMessage).toBeInTheDocument();
+  });
+});
+
+describe('장바구니에 상품이 1개 이상일 때의 Vitest + RTL 테스트', () => {
+  beforeEach(() => {
+    renderCartPage();
+  });
+
+  it('장바구니가 1개 이상일 때 장바구니 페이지에 장바구니 카드들이 잘 렌더링된다.', async () => {
+    const cartItemCards = await screen.findAllByTestId('cart-item-card');
+    expect(cartItemCards.length).toBeGreaterThan(0);
+  });
+
+  it('장바구니에서 체크박스를 누르면 배송비를 고려하여 해당 금액이 반영된다.', async () => {
+    const user = userEvent.setup();
+
+    const cartItemCards = await screen.findAllByTestId('cart-item-card');
+    const allSelectCheckbox = screen.getByLabelText('전체 선택');
+
+    await user.click(allSelectCheckbox);
+
+    const firstCard = cartItemCards[0];
+    const checkbox = within(firstCard).getByRole('checkbox');
+
+    const priceElement = within(firstCard).getByTestId('card-item-price');
+    const expectedPriceText = priceElement.textContent?.trim() || '';
+
+    // 쉼표 제거 후 숫자 변환
+    const itemPrice = parseInt(expectedPriceText.replace(/,/g, ''), 10);
+
+    const deliveryFeeElement = screen.getByTestId('delivery-fee');
+    const expectedDeliveryFeeText = deliveryFeeElement.textContent?.trim() || '';
+
+    let expectedTotal = itemPrice;
+    if (itemPrice > DELIVERY_FEE_THRESHOLD) {
+      expect(expectedDeliveryFeeText).toBe('0원');
+    } else {
+      expect(expectedDeliveryFeeText).toContain('3,000원');
+      expectedTotal += DELIVERY_FEE;
+    }
+
+    const totalPurchasePrice = screen.getByTestId('total-purchase-price');
+
+    await user.click(checkbox);
+
+    await waitFor(() => {
+      expect(totalPurchasePrice.textContent).toContain(expectedTotal.toLocaleString() + '원');
+    });
+  });
+
+  it('장바구니에서 상품을 삭제하면 해당 상품이 화면에서 사라진다.', async () => {
+    const user = userEvent.setup();
+
+    const cartItemCards = await screen.findAllByTestId('cart-item-card');
+    const firstCard = cartItemCards[0];
+
+    const deleteButton = within(firstCard).getByRole('button', { name: '삭제' });
+
+    await user.click(deleteButton);
+
+    const updatedCartItemCards = await screen.queryAllByTestId('cart-item-card');
+
+    await waitFor(() => {
+      expect(updatedCartItemCards.length).toBe(cartItemCards.length - 1);
+    });
+  });
+
+  it('장바구니에서 + 버튼을 누르면 현재 수량보다 1 증가한다.', async () => {
+    const user = userEvent.setup();
+
+    const cartItemCards = await screen.findAllByTestId('cart-item-card');
+
+    const firstCard = cartItemCards[0];
+
+    const quantityPlusButton = within(firstCard).getByRole('button', { name: '+' });
+    const quantityElement = within(firstCard).getByTestId('card-item-quantity');
+
+    const initialQuantity = parseInt(quantityElement.textContent ?? '1', 10);
+
+    await user.click(quantityPlusButton);
+
+    await waitFor(() => {
+      const updatedQuantity = parseInt(quantityElement.textContent ?? '0', 10);
+      expect(updatedQuantity).toBe(initialQuantity + 1);
+    });
+  });
+});