[D2C-39] 주문 내역 확인 및 결제 상태 확인 흐름 구현

[jjunier]

개요

본 PR은 D2C-39 주문 내역 확인 및 결제 상태 확인 흐름 구현 결과를 develop 브랜치에 반영하기 위한 PR입니다.

D2C-39에서는 사용자가 주문 내역 화면에서 주문 생성, 결제 실패, 결제 성공 이력을 각각 확인할 수 있도록 주문 내역 조회 흐름을 구현했습니다.

기존에는 하나의 주문 번호에 대해 최종 주문/결제 상태만 확인할 수 있었으나, 본 PR에서는 주문 생성 이벤트와 결제 시뮬레이션 이벤트를 별도 주문 이력으로 분리하여 동일 주문 번호의 상태 변화 과정을 화면에서 추적할 수 있도록 개선했습니다.

또한 결제 상태 필터, 날짜별 주문 그룹화, KST 기준 시간 표시, 주문/결제 상태 배지, 주문 상품 및 금액 요약 표시를 추가하여 D2C Commerce Prototype의 구매 이후 확인 흐름을 보완했습니다.

---

포함 범위

주문 내역 화면 및 조회 흐름

• 주문 내역 페이지 UI 구성
• 로그인 사용자 기준 주문 내역 API 연동
• 주문 내역이 없을 때 빈 상태 표시
• 비로그인 상태 주문 내역 접근 안내
• 주문 목록 최신순 표시
• 주문 내역 날짜별 그룹화
• 주문번호, 주문 상태, 결제 상태 표시
• 주문 상품 목록 표시
• 상품 금액, 할인 금액, 쿠폰, 최종 결제 금액 표시

결제 상태 필터 흐름

• 결제 상태 필터 추가
  • 모두
  • 결제 성공
  • 결제 실패
  • 결제 전
• 결제 상태별 주문 수 표시
• 선택한 결제 상태에 맞는 주문 목록 필터링
• 선택한 조건에 해당하는 주문이 없을 때 안내 메시지 표시
• 날짜 그룹 기준으로 필터링된 주문만 표시

주문 이력 이벤트 구조 개선

• 주문 생성 이벤트와 결제 시뮬레이션 이벤트를 별도 이력으로 반환
• 동일 주문번호에 대해 주문 생성, 결제 실패, 결제 성공 이벤트를 각각 별도 카드로 표시
• 이벤트 단위 식별자인 order_history_id 추가
• 이벤트 유형을 나타내는 history_event_type 추가
• 이벤트 발생 시각을 나타내는 history_event_at 추가
• 결제 이벤트 식별을 위한 payment_id 추가
• 프론트엔드 렌더링 key를 주문번호 단위에서 이벤트 단위로 변경

주문 상태 및 결제 상태 표시

• 주문 상태 라벨 표시
  • 주문 생성
  • 주문 실패
  • 주문 완료
• 결제 상태 라벨 표시
  • 결제 전
  • 결제 실패
  • 결제 성공
• 주문 상태와 결제 상태를 분리하여 배지로 표시
• 결제 성공 상태는 초록 계열 배지로 표시
• 결제 실패 상태는 빨간 계열 배지로 표시
• 결제 전 상태는 중립 계열 배지로 표시

KST 기준 시간 처리 개선

• 주문 생성 시간, 결제 실패 시간, 결제 성공 시간을 KST 기준으로 통일
• 백엔드에서 CURRENT_TIMESTAMP와 datetime.now() 혼용 제거
• 주문 생성 서비스에서 주문 및 주문 항목 생성 시간을 KST 기준으로 저장
• 결제 서비스에서 결제 요청, 결제 성공, 결제 실패 시간을 KST 기준으로 저장
• 주문 내역 조회 시 history_event_at 기준으로 최신순 정렬
• 주문 내역 화면에서 KST 기준 날짜 그룹 및 시간 표시 적용

체크아웃 및 장바구니 상태 보완

• 주문 생성 후 장바구니로 돌아가도 pending order가 유지되도록 개선
• 동일 장바구니 상태에서는 기존 주문 ID를 복원
• 장바구니 상품 추가, 삭제, 수량 변경 시 pending order 제거
• 결제 성공 시 cart_id와 pending order 제거
• 결제 실패 시에는 주문/장바구니 상태를 유지하여 결제 재시뮬레이션이 가능하도록 보완
• 사용자 변경 시 기존 cart_id와 pending order가 재사용되지 않도록 저장소 정리

테스트 보완

• 주문 내역 조회 테스트 통과 확인
• 주문 생성 테스트 통과 확인
• 결제 성공/실패 시뮬레이션 테스트 통과 확인
• 백엔드 전체 테스트 통과 확인
• 프론트엔드 타입 체크 및 빌드 통과 확인

---

검증 결과

feature/D2C-39-order-history-payment-status-flow 브랜치 기준으로 백엔드 테스트를 실행하여 정상 통과를 확인했습니다.

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

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

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

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

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

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

cd apps/web
npm run typecheck

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

cd apps/web
npm run build

수동 확인 항목:

• /orders 주문 내역 화면 렌더링 확인
• 비로그인 상태에서 주문 내역 접근 안내 확인
• 주문 내역이 없을 때 빈 상태 표시 확인
• 주문 생성 시 주문: 주문 생성, 결제: 결제 전 이력 표시 확인
• 결제 실패 시 주문: 주문 실패, 결제: 결제 실패 이력 표시 확인
• 결제 성공 시 주문: 주문 완료, 결제: 결제 성공 이력 표시 확인
• 동일 주문번호에 대해 주문 생성/결제 실패/결제 성공 이벤트가 각각 별도 카드로 표시되는지 확인
• 결제 상태 필터 모두 선택 시 전체 주문 이력 표시 확인
• 결제 상태 필터 결제 성공 선택 시 결제 성공 이력만 표시 확인
• 결제 상태 필터 결제 실패 선택 시 결제 실패 이력만 표시 확인
• 결제 상태 필터 결제 전 선택 시 결제 전 이력만 표시 확인
• 결제 상태별 주문 수 표시 확인
• 주문 내역 날짜별 그룹화 확인
• 주문 생성/결제 실패/결제 성공 시간이 KST 기준 현재 시간으로 표시되는지 확인
• 주문 상품 목록 표시 확인
• 상품 금액, 할인 금액, 쿠폰, 최종 결제 금액 표시 확인
• 체크아웃에서 주문 생성 후 장바구니로 돌아갔다가 다시 체크아웃 진입 시 동일 주문 ID 복원 확인
• 장바구니 상품 추가/삭제/수량 변경 시 pending order 제거 확인
• 결제 성공 시 cart_id 및 pending order 제거 확인
• 결제 실패 시 장바구니 및 pending order 유지 확인

---

브랜치 통합 방식

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

feature/D2C-39-order-history-payment-status-flow
→ develop

develop 병합 후에는 주문 내역 확인 및 결제 상태 확인 흐름이 Sprint 2 구매 이후 확인 흐름에 반영됩니다.

---

향후 브랜치 운영 원칙

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

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

---

체크리스트

• D2C-39 브랜치를 develop 기준으로 분기
• 주문 내역 화면 구현
• 주문 내역 API client 추가
• 주문 내역 타입 추가
• 결제 상태 필터 구현
• 결제 상태별 주문 수 표시 구현
• 주문 내역 날짜별 그룹화 구현
• 주문 생성/결제 시뮬레이션 이벤트 분리 표시
• 이벤트 단위 주문 이력 식별자 추가
• 동일 주문번호의 여러 이벤트 렌더링 처리
• 주문 상태 및 결제 상태 배지 표시
• 주문 상품 목록 및 금액 요약 표시
• KST 기준 주문/결제 시간 처리 보완
• pending order 상태 관리 보완
• 장바구니 변경 시 pending order 제거 처리
• 결제 성공 시 cart_id 및 pending order 제거 처리
• 주문 내역 관련 Backend 테스트 통과 확인
• 주문/결제 관련 Backend 테스트 통과 확인
• Backend 전체 테스트 통과 확인
• Frontend typecheck 통과 확인
• Frontend build 통과 확인