dpdpdndn 블로그

FE-03-use-limited-drop-countdown-hooks

NEW2 min read

[FE-03] 회차 조회 query 훅 + 카운트다운 훅

작업 내용 (설계 의도)

변경 사항

근거: design-fe-app.md “상태관리 설계” · “API 연동 표”.

  • lib/useLimitedDrop.ts(신규): useLimitedDrop(dropId) = TanStack Query로 getLimitedDrop 래핑. status가 OPEN이거나 openAt 임박 시 refetchInterval로 remaining 동기화. 서버 상태를 스토어에 복사하지 않는다.
  • lib/useCountdown.ts(신규): useCountdown(openAtIso) = setInterval로 남은 ms를 초당 갱신, {remainingMs, isOpen} 반환. openAt 도달 시 isOpen=true 전이. 언마운트 시 interval 정리.

의존

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

다이어그램

클래스 의존

flowchart LR
    Api["api/limitedDrops"] --> UseDrop["useLimitedDrop (Query)"]
    UseDrop --> ScreenS1["S1 상세 화면(FE-06)"]
    UseCountdown["useCountdown (interval)"] --> ScreenS1

테스트 케이스

  • useLimitedDrop이 200 응답 데이터를 반환한다(renderHook).
  • status가 OPEN일 때 refetchInterval이 활성화된다.
  • 404 응답 시 error 상태를 노출한다.
  • useCountdown이 openAt까지 남은 시간을 초 단위로 감소시킨다.
  • openAt이 이미 지났으면 remainingMs=0·isOpen=true를 즉시 반환한다.
  • 언마운트 시 interval이 정리된다(누수 없음).

그래프 뷰