dpdpdndn 블로그

FE-02-limited-drop-types-api

NEW2 min read

[FE-02] LimitedDrop 타입 + API 엔드포인트 함수

작업 내용 (설계 의도)

변경 사항

근거: design-fe-app.md “API 연동 표” + BE TDD “API 계약”.

한정판 회차 조회·구매 API 계약을 타입과 엔드포인트 함수로 확립하는 공통 선행 산출물. 후행 훅 티켓(FE-03/04)이 이를 import한다.

  • api/types.ts(추가): LimitedDropResponse {dropId, productId, status, openAt, closeAt, remaining, perUserLimit}, LimitedDropStatus = 'SCHEDULED'|'OPEN'|'SOLD_OUT'|'CLOSED', PurchaseLimitedDropRequest {quantity}, LimitedDropPurchaseResponse {orderId, dropId, status}.
  • api/limitedDrops.ts(신규): getLimitedDrop(dropId) = GET /limited-drops/{dropId}; purchaseLimitedDrop(dropId, {quantity}, {userId, idempotencyKey}) = POST /limited-drops/{dropId}/orders (헤더 X-User-Id·Idempotency-Key). 모든 호출 getBeClient() 경유(직접 fetch 금지).
  • 응답 상태코드(202/425/409/429/403)를 판별 가능한 결과 타입/에러 매핑 유틸 포함.

의존

  • 없음 (FE-03/04가 이 티켓에 의존)

다이어그램

처리 흐름

sequenceDiagram
    participant H as 훅(FE-03/04)
    participant A as api/limitedDrops
    participant B as getBeClient(axios)
    H->>A: getLimitedDrop(id)
    A->>B: GET /limited-drops/{id}
    B-->>A: LimitedDropResponse
    A-->>H: typed

테스트 케이스

  • getLimitedDrop이 200 응답을 LimitedDropResponse로 반환한다.
  • purchaseLimitedDrop이 X-User-Id·Idempotency-Key 헤더와 {quantity} body를 보낸다.
  • 202 응답을 LimitedDropPurchaseResponse로 파싱한다.
  • 409/429/403/425 응답 상태코드를 판별 가능한 결과로 매핑한다.
  • 404 응답 시 조회 에러를 던진다.

그래프 뷰