dpdpdndn 블로그

FE-06-detail-countdown-screen

NEW2 min read

[FE-06] 한정판 상세·카운트다운 화면 (S1)

작업 내용 (설계 의도)

변경 사항

근거: design-fe-app.md “S1 와이어프레임” · “화면별 상태 표”.

app/limited-drop/[id]/index.tsx(신규): 회차 상태를 표시하고 구매로 진입하는 컨테이너 화면.

  • useLimitedDrop(조회) + useCountdown(openAt) 소비.
  • 상태별 hero/CTA: SCHEDULED=카운트다운+비활성 CTA”판매 시작 전”, OPEN=RemainingStockBar+활성”구매하기”(→ S2), SOLD_OUT=비활성”재고 소진”, CLOSED=비활성”판매 종료”.
  • 화면 상태: loading(스피너), error(404”없는 회차”/5xx”불러오지 못함 [다시 시도]”), success(상태별 렌더).
  • openAt 도달 시 CTA 활성화 + 1회 refetch로 서버 동기화.
  • 토스 패턴: 단일 CTA, accent 1곳, 카운트다운 hero. 라이트/다크 both.

의존

  • FE-01 (테마), FE-03 (useLimitedDrop·useCountdown), FE-05 (컴포넌트)

다이어그램

처리 흐름

sequenceDiagram
    participant U as 사용자
    participant S as S1 화면
    participant Q as useLimitedDrop
    U->>S: 진입
    S->>Q: getLimitedDrop(id)
    Q-->>S: status/remaining/openAt
    S-->>U: 상태별 hero + CTA
    U->>S: 구매하기(OPEN) → S2

테스트 케이스

  • 조회 중 loading 스피너를 표시한다.
  • 404 응답 시 “없는 회차” 에러 UI를 표시한다.
  • SCHEDULED일 때 카운트다운과 비활성 “판매 시작 전” CTA를 표시한다.
  • OPEN일 때 남은 수량과 활성 “구매하기” CTA를 표시한다.
  • SOLD_OUT일 때 비활성 “재고 소진”을 표시한다.
  • openAt 도달 시 CTA가 활성화된다.
  • 라이트/다크 두 모드에서 렌더된다.

그래프 뷰