dpdpdndn 블로그

FE-05-limited-drop-components

NEW2 min read

[FE-05] 한정판 전용 프레젠테이션 컴포넌트

작업 내용 (설계 의도)

변경 사항

근거: design-fe-app.md “컴포넌트 트리” · “화면별 상태 표”.

한정판 화면이 공유하는 순수 프레젠테이션 컴포넌트를 components/limitedDrop/에 신설한다(로직 없음, props 입력, 테마 토큰 소비, 라이트/다크 both).

  • CountdownTimer: remainingMs prop → HH:MM:SS 표시, 0이면 “오픈” 표기. 라이브 리전 접근성.
  • DropStatusBadge: status prop → 라벨/톤(SCHEDULED=중립, OPEN=accent, SOLD_OUT/CLOSED=muted/danger).
  • RemainingStockBar: remaining/limited prop → 남은 수량 바.
  • QuantityStepper: value·max(perUserLimit)·onChange → 수량 증감(경계 disabled).

의존

  • FE-01 (테마 프리미티브/토큰)

다이어그램

클래스 의존

flowchart LR
    Themed["ThemedView/Text(FE-01)"] --> Countdown["CountdownTimer"]
    Themed --> Badge["DropStatusBadge"]
    Themed --> Bar["RemainingStockBar"]
    Themed --> Stepper["QuantityStepper"]

테스트 케이스

  • CountdownTimer가 remainingMs를 HH:MM:SS로 표시한다.
  • remainingMs=0이면 “오픈”으로 표기한다.
  • DropStatusBadge가 status별 라벨을 표시한다(SCHEDULED/OPEN/SOLD_OUT/CLOSED).
  • QuantityStepper가 max에서 증가 버튼을 disabled 처리한다.
  • 라이트/다크 두 모드에서 토큰 색으로 렌더된다.
  • 각 컴포넌트가 하드코딩 색 없이 토큰만 사용한다.

그래프 뷰