[D2C-40] 주문 상품 기반 리뷰 작성 화면 구현

[jjunier]

개요

본 PR은 D2C-40 주문 상품 기반 리뷰 작성 화면 구현 결과를 develop 브랜치에 반영하기 위한 PR입니다.

D2C-40에서는 사용자가 주문 내역 화면에서 결제 완료된 주문 상품을 기준으로 리뷰 작성 화면에 진입하고, 해당 주문 상품에 대한 리뷰를 작성할 수 있도록 구현했습니다.

본 PR에서는 주문 상품 기반 리뷰 작성 CTA, 리뷰 작성 화면, 상품 추천 여부 및 별점 입력, 리뷰 생성 API 연동, 상품 상세 페이지 내 리뷰 목록 표시를 추가하여 구매 이후 사용자 피드백 흐름을 보완합니다.

---

포함 범위

주문 내역 기반 리뷰 작성 진입

• 주문 내역 내 결제 완료 주문 상품에 리뷰 작성 CTA 추가
• 결제 전/결제 실패 주문 상품에는 리뷰 작성 CTA 미표시
• 리뷰 작성 CTA 클릭 시 리뷰 작성 화면으로 이동
• product_id, order_item_id, product_name 기반 리뷰 작성 대상 전달

리뷰 작성 화면

• 리뷰 작성 페이지 라우트 추가
• 리뷰 작성 대상 상품 정보 표시
• 리뷰 작성 상품에서 상품 상세 페이지로 이동 가능한 CTA 추가
• 상품 추천 여부 선택 기능 추가
  • 추천
  • 비추천
• 상품 추천 여부 필수 입력 검증 추가
• 별점 버튼 기반 평점 입력 기능 추가
• 평점 필수 입력 검증 추가
• 리뷰 제목 선택 입력 항목 추가
• 상세 리뷰 선택 입력 항목 추가
• 리뷰 제목 미입력 시 기본 문구 저장
• 상세 리뷰 작성 시 상품 추천 여부와 상세 리뷰가 함께 저장되도록 처리
• 리뷰 등록 성공/실패 피드백 처리
• 비로그인 상태 접근 안내
• 잘못된 리뷰 작성 접근 안내

리뷰 생성 API 연동

• 리뷰 생성 API client 추가
• 리뷰 생성 요청 타입 추가
• 리뷰 생성 응답 타입 추가
• 구매 완료 주문 상품 기준 리뷰 생성 연동
• 중복 리뷰 작성 시 안내 메시지 처리
• 구매 완료되지 않은 상품 리뷰 작성 실패 메시지 처리

상품 상세 페이지 리뷰 표시

• 상품별 리뷰 목록 조회 API 추가
• 상품 상세 페이지에서 DB에 저장된 리뷰 목록 조회
• 상품 상세 페이지 하단에 상품 리뷰 섹션 추가
• 리뷰 수 및 평균 평점 표시
• 리뷰 제목, 작성자, 작성일, 별점, 추천 여부, 상세 리뷰 표시
• 상품 목록에서 다시 상품 상세 페이지로 진입해도 리뷰가 유지되도록 개선
• 리뷰 카드 UI 및 별점 위치 조정
• 작성자명 뒤에 님 suffix 표시

백엔드 리뷰 목록 조회 보완

• 상품별 리뷰 목록 조회 응답 스키마 추가
• 상품별 리뷰 목록 조회 서비스 추가
• 상품별 리뷰 목록 조회 라우트 추가
• visible 상태 리뷰만 조회
• 리뷰 목록 최신순 정렬
• 평균 평점 및 총 리뷰 수 계산

스타일 보완

• 리뷰 작성 페이지 UI 스타일 추가
• 상품 추천/비추천 버튼 스타일 추가
• 별점 버튼 스타일 추가
• 필수 항목 라벨 스타일 추가
• 상품 리뷰 카드 스타일 추가
• 상품 리뷰 섹션 레이아웃 보완
• 반응형 레이아웃 보완

---

검증 결과

D2C-40 브랜치 기준으로 백엔드 리뷰 테스트를 실행하여 정상 통과를 확인했습니다.

cd apps/api
python -m pytest ./tests/test_reviews.py -v

백엔드 전체 테스트를 실행하여 정상 통과를 확인했습니다.

cd apps/api
python -m pytest ./tests -v

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

cd apps/web
npm run typecheck

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

cd apps/web
npm run build

수동 확인 항목:

• 결제 완료 주문 상품에 리뷰 작성 버튼 표시 확인
• 결제 전 주문 상품에는 리뷰 작성 버튼 미표시 확인
• 결제 실패 주문 상품에는 리뷰 작성 버튼 미표시 확인
• 리뷰 작성 버튼 클릭 시 리뷰 작성 화면 이동 확인
• 리뷰 작성 상품 정보 표시 확인
• 상품 상세 보기 버튼 동작 확인
• 상품 추천 여부 미선택 시 경고 메시지 확인
• 평점 미선택 시 경고 메시지 확인
• 별점 버튼으로 평점 선택 확인
• 리뷰 제목 선택 입력 확인
• 상세 리뷰 선택 입력 확인
• 리뷰 제목 미입력 시 기본 문구 저장 확인
• 상세 리뷰 작성 시 상품 추천 여부와 상세 리뷰가 함께 표시되는지 확인
• 리뷰 등록 성공 후 상품 상세 페이지 이동 확인
• 상품 상세 페이지에서 등록한 리뷰 표시 확인
• 상품 목록에서 다시 상품 상세 페이지에 진입해도 리뷰가 유지되는지 확인
• 상품 상세 페이지 새로고침 후에도 리뷰가 유지되는지 확인
• 평균 평점 및 리뷰 수 표시 확인
• 중복 리뷰 작성 시 안내 메시지 확인
• 작성자명 뒤 님 표시 확인

---

브랜치 통합 방식

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

feature/D2C-40-order-item-review-form
→ develop

develop 병합 후에는 주문 상품 기반 리뷰 작성 및 상품 상세 리뷰 조회 흐름이 Sprint 2 구매 이후 피드백 흐름에 반영됩니다.

---

향후 브랜치 운영 원칙

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

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

---

체크리스트

• D2C-40 브랜치를 develop 기준으로 분기
• 주문 내역 내 리뷰 작성 CTA 추가
• 결제 완료 주문 상품 기준 리뷰 작성 진입 구현
• 리뷰 작성 화면 구현
• 상품 추천 여부 입력 구현
• 별점 기반 평점 입력 구현
• 상품 추천 여부 필수 검증 구현
• 평점 필수 검증 구현
• 리뷰 제목 선택 입력 구현
• 상세 리뷰 선택 입력 구현
• 리뷰 생성 API 연동
• 리뷰 생성 타입 및 API client 추가
• 상품별 리뷰 목록 조회 API 추가
• 상품 상세 페이지 리뷰 목록 조회 구현
• 상품 상세 페이지 리뷰 카드 UI 구현
• 평균 평점 및 리뷰 수 표시 구현
• 리뷰 작성 후 상품 상세 페이지에서 리뷰 유지 확인
• 리뷰 관련 Backend 테스트 통과 확인
• Backend 전체 테스트 통과 확인
• Frontend typecheck 통과 확인
• Frontend build 통과 확인