dpdpdndn 블로그

FE-04-use-purchase-mutation-hook

NEW2 min read

[FE-04] 구매 mutation 훅 + Idempotency-Key 유틸

작업 내용 (설계 의도)

변경 사항

근거: design-fe-app.md “API 연동 표” · “실패 경로·엣지”.

  • lib/usePurchaseLimitedDrop.ts(신규): usePurchaseLimitedDrop(dropId) = TanStack Query mutation으로 purchaseLimitedDrop 래핑. 응답 상태코드를 phase 결과로 매핑 — 202→admitted, 409 SoldOut→soldOut, 409 Closed→closed, 429→throttled, 403→limit, 425→tooEarly, 5xx/네트워크→error.
  • Idempotency-Key 유틸(기존 ticketOrders.ts의 UUID 생성 패턴 재사용): 구매 시도당 1회 생성, 429 자동 재시도 시 동일 키 재사용(BE 멱등 정합).
  • X-User-Id는 기존 useCurrentUserId() 사용.

롤백: 신규 훅만 추가, 기존 흐름 무변경.

의존

  • FE-02 (api/limitedDrops, 타입)

다이어그램

처리 흐름

sequenceDiagram
    participant S as S2 화면(FE-07)
    participant M as usePurchaseLimitedDrop
    participant A as api/limitedDrops
    S->>M: purchase({quantity}, idempotencyKey)
    M->>A: POST orders
    A-->>M: 202 | 409 | 429 | 403 | 425
    M-->>S: admitted | soldOut | throttled | limit | tooEarly | error

테스트 케이스

  • 202 응답을 admitted 결과로 매핑한다.
  • 409 SoldOut을 soldOut, 429를 throttled, 403을 limit, 425를 tooEarly로 매핑한다.
  • 429 재시도 시 최초와 동일한 Idempotency-Key를 재사용한다.
  • 5xx·네트워크 오류를 error 결과로 매핑한다.
  • 구매 시도마다 새 Idempotency-Key가 생성된다(재시도 아닌 신규 시도).

그래프 뷰