[D2C-34] 상품 탐색·상세·장바구니 담기 흐름 main 통합

[jjunier]

개요

본 PR은 develop 브랜치에 병합된 D2C-33, D2C-34 상품 탐색 및 장바구니 담기 흐름 구현 결과를 main 브랜치에 반영하기 위한 PR입니다.

D2C-33에서는 사용자가 카테고리별 상품 목록을 탐색하고, 상품 카드에서 상세 화면으로 이동할 수 있는 상품 목록 화면을 구현했습니다.

D2C-34에서는 상품 상세 화면에서 상품 정보를 확인하고, 수량을 선택한 뒤 장바구니에 상품을 담을 수 있는 흐름을 구현했습니다.

본 PR에서는 develop에서 검증된 상품 탐색, 상품 상세, 장바구니 담기 흐름을 main에 병합하여 Sprint 2 프론트엔드의 두 번째 기능 기준점을 정리합니다.

---

포함 범위

D2C-33 카테고리/상품 목록 화면 및 상품 탐색 흐름 구현

• 카테고리 목록 API 연동
• 상품 목록 API 연동
• 카테고리 선택 기반 상품 필터링 구현
• 상품 상세 페이지 이동 경로 연결
• 상품 목록 Header 영역 구성
• 카테고리 필터 chip UI 구성
• 상품 카드 grid UI 구성
• 브랜드명, 상품명, 상품 상태, 판매가, 정가 표시
• 로딩 / 빈 목록 / 에러 상태 처리
• 12개 / 24개 / 48개씩 보기 옵션 구현
• 클라이언트 페이지네이션 구현
• 페이지 이동 또는 표시 개수 변경 시 상품 목록 상단 자동 스크롤 구현
• FastAPI CORS middleware 추가
• Vite 개발 서버 origin 허용
• GET 요청에서 불필요한 Content-Type header 전송 방지

D2C-34 상품 상세 화면 및 장바구니 담기 흐름 구현

• 상품 상세 API 연동
• 상품명, 브랜드명, 상품 상태, 정가, 판매가 표시
• 상품 상세 placeholder 이미지 영역 구성
• 상품 목록으로 돌아가기 동선 구성
• 상품 상세 화면 전용 레이아웃 및 반응형 스타일 추가
• 수량 선택 UI 구현
• 수량 증가/감소 버튼 구현
• 수량 직접 입력 처리
• localStorage 기반 사용자 상태 확인
• 비로그인 상태에서 장바구니 담기 제한 및 로그인/회원가입 안내 표시
• 저장된 cart_id가 없을 경우 장바구니 생성
• 생성된 cart_id를 localStorage에 저장
• 장바구니 상품 담기 API 연동
• 장바구니 담기 성공/실패 메시지 표시
• 장바구니 화면 이동 CTA 제공
• 상품 상세 및 장바구니 관련 타입/서비스 모듈 추가
• Vite public favicon 추가 및 index.html 반영

---

검증 결과

develop 브랜치 기준으로 프론트엔드 타입 체크를 실행하여 정상 통과를 확인했습니다.

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

수동 확인 항목:

• http://localhost:5173/products 접속 확인
• 카테고리 목록 표시 확인
• 전체 상품 목록 표시 확인
• 카테고리 선택 시 상품 목록 필터링 확인
• 12개 / 24개 / 48개씩 보기 옵션 동작 확인
• 이전 / 다음 페이지 이동 확인
• 페이지 이동 시 상품 목록 상단 자동 스크롤 확인
• 상품 카드 클릭 시 상품 상세 페이지 이동 확인
• 상품 상세 정보 표시 확인
• 수량 증가/감소 및 직접 입력 확인
• 비로그인 상태에서 장바구니 담기 시 로그인 안내 표시 확인
• 테스트 사용자 정보가 localStorage에 있을 때 장바구니 생성 및 상품 담기 확인
• 장바구니 담기 성공/실패 메시지 표시 확인
• 장바구니 보기 버튼 이동 확인
• favicon 표시 및 불필요한 favicon 404 로그 해소 확인

---

브랜치 통합 방식

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

feature/D2C-33-product-list-navigation
→ develop

feature/D2C-34-product-detail-cart-flow
→ develop

develop
→ main

main 병합 후에는 상품 목록 탐색, 상품 상세 조회, 장바구니 담기까지 이어지는 사용자 흐름이 배포 기준 브랜치에 반영됩니다.

---

향후 브랜치 운영 원칙

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

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

---

체크리스트

• D2C-33 브랜치를 develop에 병합
• D2C-34 브랜치를 develop에 병합
• 카테고리/상품 목록 API 연동 포함
• 상품 목록 필터링 및 페이지네이션 포함
• 상품 상세 API 연동 포함
• 수량 선택 및 장바구니 담기 흐름 포함
• 비로그인 상태 안내 처리 포함
• CORS 설정 및 API client 보완 포함
• favicon 보완 포함
• develop 기준 프론트엔드 typecheck / build / dev 확인
• .env, node_modules, dist, cache 파일이 커밋에 포함되지 않도록 확인
• main 병합 완료
• main 기준 최종 확인