dpdpdndn 블로그

FE-07-purchase-flow-screen

NEW3 min read

[FE-07] 구매 진행·결과 화면 (S2)

작업 내용 (설계 의도)

변경 사항

근거: design-fe-app.md “S2 와이어프레임” · “실패 경로·엣지”.

app/limited-drop/[id]/purchase.tsx(신규): 수량 선택 → 제출 → 결과 phase 머신 컨테이너. 20000TPS 스파이크의 대기·거부 UX를 담당.

  • usePurchaseLimitedDrop 소비 + useReducer phase(idle/submitting/admitted/throttled/soldOut/closed/tooEarly/limit/error).
  • QuantityStepper(perUserLimit 상한) + PriceSummary + 단일 “구매 확정” CTA.
  • 제출 후: submitting 전면 오버레이 “구매 처리 중” → 결과 뷰.
    • admitted(202): “구매 성공 [결제하기]” → /payment/new?orderType=GOODS&orderId=....
    • throttled(429): warning “접속이 몰리고 있어요” + 자동 재시도(최대 2회, 동일 idempotencyKey) + “지금 재시도”.
    • soldOut/closed/tooEarly/limit: 결과 뷰(정상 실패, 비난조 금지) + “상세로”.
    • error(5xx/네트워크): “일시 오류 [다시 시도]” + OfflineBanner.
  • submitting/결과 중 뒤로가기·중복 제출 잠금.
  • 토스 패턴: 처리 중 전면 + 결과 분리. 라이트/다크 both.

롤백: 신규 화면만 추가.

의존

  • FE-01 (테마), FE-04 (usePurchaseLimitedDrop), FE-05 (QuantityStepper)

다이어그램

처리 흐름

sequenceDiagram
    participant U as 사용자
    participant S as S2 화면
    participant M as usePurchaseLimitedDrop
    U->>S: 구매 확정
    S->>S: phase=submitting (전면 오버레이)
    S->>M: purchase({quantity})
    M-->>S: admitted|throttled|soldOut|limit|error
    alt admitted
        S-->>U: "결제하기" → payment/new
    else throttled
        S-->>U: 자동 재시도(동일 key)
    else soldOut/limit
        S-->>U: 결과 뷰 → 상세로
    end

테스트 케이스

  • 수량이 perUserLimit을 초과하지 않는다(증가 버튼 disabled).
  • 제출 시 submitting 오버레이를 표시하고 중복 제출을 막는다.
  • 202 응답 시 “결제하기”를 노출하고 payment/new로 이동한다.
  • 429 응답 시 “접속이 몰리고 있어요”와 자동 재시도를 표시한다(동일 idempotencyKey).
  • 409 SoldOut 시 “마감” 결과 뷰(오류 아님)를 표시한다.
  • 403 시 “1인당 N개까지” 안내를 표시한다.
  • 5xx·네트워크 오류 시 “다시 시도” 버튼을 표시한다.
  • 라이트/다크 두 모드에서 렌더된다.

그래프 뷰