[D2C-37] 장바구니 화면 및 상품 제거/주문 진입 흐름 구현

[jjunier]

개요

본 PR은 D2C-37 장바구니 화면 및 상품 제거/주문 진입 흐름 구현 작업을 develop 브랜치에 통합하기 위한 PR입니다.

D2C-34에서 구현한 상품 상세 기반 장바구니 담기 흐름 이후, 사용자가 장바구니 화면에서 담긴 상품을 확인하고 수량을 조정하거나 상품을 제거한 뒤 주문 단계로 진입할 수 있도록 장바구니 화면을 구현했습니다.

이번 작업에서는 장바구니 조회, 상품 제거, 수량 변경, 주문 요약, 체크아웃 진입 동선, 상품 목록 카드의 빠른 장바구니 담기 기능, 장바구니 조회 응답 보완을 포함했습니다.

---

포함 범위

장바구니 화면 구현

• 장바구니 페이지 UI 구성
• 로그인 상태 기반 장바구니 접근 처리
• 비로그인 상태에서 로그인/회원가입 안내 표시
• cart_id가 없는 경우 빈 장바구니 안내 표시
• 장바구니 상품 목록 렌더링
• 상품명, 브랜드명, 수량, 단가, 상품별 합계 금액 표시
• 장바구니 주문 요약 카드 구성
• 총 상품 종류, 총 수량, 총 결제 예정 금액 표시
• 계속 쇼핑하기 동선 제공
• 체크아웃 화면 진입 CTA 제공

장바구니 상품 관리 기능

• GET /carts/{cart_id} 장바구니 상세 조회 연동
• DELETE /carts/{cart_id}/items/{cart_item_id} 장바구니 상품 제거 연동
• PATCH /carts/{cart_id}/items/{cart_item_id} 장바구니 상품 수량 변경 API 추가
• 장바구니 화면에서 + / - 버튼 기반 수량 변경 구현
• 직접 수량 입력 후 focus out 시 수량 변경 반영
• 수량 1에서 감소 시 상품 제거 처리
• 수량 변경 및 제거 후 장바구니 목록 재조회
• 수량 변경 실패 시 에러 메시지 표시

상품 목록 빠른 장바구니 담기

• 상품 목록 카드 우측 하단 장바구니 담기 버튼 추가
• 기본 수량 1개로 빠른 장바구니 담기 처리
• cart_id가 없을 경우 장바구니 생성 후 상품 담기
• 비로그인 상태에서 빠른 담기 시 로그인 안내 메시지 표시
• 빠른 담기 성공/실패 피드백 표시
• 상품 카드 클릭 이동과 장바구니 버튼 클릭 이벤트 충돌 방지

백엔드 응답 보완

• 장바구니 상세 조회 응답 item에 brand_name 추가
• 장바구니 조회 schema에 브랜드명 필드 추가
• 장바구니 상품 수량 수정 요청 schema 추가
• 장바구니 상품 수량 수정 service 및 route 추가
• router prefix 중복 문제를 수정하여 PATCH route 정상 등록

안정화 및 UX 보완

• 장바구니 화면 진입 시 반복 API 호출 문제 수정
• getStoredUser() 객체 참조 대신 userId 기준 effect dependency 안정화
• 수량 변경 성공 시 불필요한 성공 박스 표시 제거
• 수량과 금액 변경 자체가 피드백이 되도록 UI 흐름 정리
• 장바구니 및 상품 카드 관련 반응형 스타일 보완

---

검증 결과

프론트엔드 타입 체크를 실행하여 정상 통과를 확인했습니다.

cd apps/web
npm run typecheck

프론트엔드 빌드를 실행하여 정상 통과를 확인했습니다.

cd apps/web
npm run build

프론트엔드 개발 서버와 백엔드 서버를 함께 실행하여 장바구니 흐름을 수동 확인했습니다.

cd apps/api
uvicorn backend.main:app --reload

cd apps/web
npm run dev

수동 확인 항목:

• 로그인 상태에서 상품 상세 화면의 장바구니 담기 동작 확인
• 상품 목록 카드의 빠른 장바구니 담기 동작 확인
• /cart 진입 시 장바구니 상품 목록 표시 확인
• 장바구니 상품명, 브랜드명, 수량, 단가, 합계 금액 표시 확인
• + 버튼 클릭 시 수량 증가 확인
• - 버튼 클릭 시 수량 감소 확인
• 수량 1에서 - 클릭 시 상품 제거 확인
• 직접 수량 입력 후 focus out 시 수량 변경 확인
• 수량 변경 후 총 수량 및 총 결제 예정 금액 갱신 확인
• 상품 제거 버튼 동작 확인
• 장바구니가 비었을 때 빈 상태 표시 확인
• 주문 단계로 이동 버튼을 통한 /checkout 이동 확인
• 장바구니 조회 API가 반복 호출되지 않는 것 확인

---

브랜치 통합 방식

이번 PR의 통합 흐름은 아래와 같습니다.

feature/D2C-37-cart-order-entry-flow
→ develop

D2C-37 병합 후에는 develop 브랜치에서 D2C-38 전용 feature 브랜치를 새로 분기하여 체크아웃·쿠폰 적용·주문/결제 시뮬레이션 흐름 구현을 진행합니다.

---

향후 브랜치 운영 원칙

Sprint 2에서는 아래 브랜치 운영 원칙을 유지합니다.

• Jira 이슈키별 독립 feature 브랜치 생성
• 각 feature 브랜치는 develop에서 분기
• 작업 완료 후 develop으로 개별 PR 생성
• PR 단위로 CI 검증 후 병합
• 의미 있는 사용자 흐름 단위가 완료되면 develop을 main에 병합
• main은 배포 기준 브랜치로 유지
• 기능 작업이 누적된 장기 브랜치는 지양

---

체크리스트

• develop 브랜치에서 분기한 feature 브랜치에서 작업
• D2C-37 이슈키를 PR 제목과 설명에 포함
• 장바구니 화면 UI 구현
• 비로그인 상태 장바구니 접근 안내 처리
• 장바구니 상세 조회 API 연동
• 장바구니 상품 목록 렌더링
• 장바구니 상품 제거 API 연동
• 장바구니 상품 수량 변경 API 추가
• 장바구니 수량 증가/감소 및 직접 입력 구현
• 장바구니 주문 요약 카드 구현
• 체크아웃 화면 진입 동선 구현
• 상품 목록 빠른 장바구니 담기 기능 구현
• 장바구니 조회 응답에 브랜드명 포함
• 장바구니 반복 조회 문제 수정
• .env, node_modules, dist, cache 파일이 커밋에 포함되지 않도록 확인
• 로컬에서 프론트엔드 typecheck / build / dev 실행 확인