dpdpdndn 블로그

FE-05-badge-summary-components

NEW2 min read

[FE-05] 재사용 프레젠테이션 컴포넌트 (배지·전략 요약)

작업 내용 (설계 의도)

변경 사항

S1·S3·S5가 공유하는 순수 프레젠테이션 컴포넌트를 정의한다. props만 받아 렌더하고 비즈니스 로직은 없다(no-logic-in-component). 색은 FE-02 시맨틱 토큰만 사용한다(no-hardcoded-color). 근거 설계: ../design-fe-web.md “컴포넌트 트리 / 재사용 식별”.

  • web/app/admin/feature-flags/_components/StatusBadge.tsx: ACTIVE→bg-success/15 text-success, ARCHIVED→bg-muted text-muted-foreground.
  • web/app/admin/feature-flags/_components/TypeBadge.tsx: RELEASE/OPERATIONAL/EXPERIMENT/ENTITLEMENT 라벨 배지(중립 bg-accent text-accent-foreground, 색 남용 없이 라벨로 구분 — 토스 절제 패턴).
  • web/app/admin/feature-flags/_components/ChangeTypeBadge.tsx: CREATED/UPDATED/ARCHIVED/ACTIVATED 라벨 배지.
  • web/app/admin/feature-flags/_components/StrategySummary.tsx: strategy를 사람이 읽는 문자열로 — “전역 ON”/“50% 롤아웃”/“plan=PREMIUM”/“A:50, B:50”. 변환 로직은 _components 내 순수 유틸(strategyLabel.ts)로 분리.
  • 모든 컴포넌트 라이트/다크 두 모드에서 확인(토큰 자동 대응).

의존

  • FE-01 (타입)
  • FE-02 (success/warning 토큰)

다이어그램

클래스 의존

flowchart LR
    Types["schemas.ts FE-01"] --> Badge["StatusBadge/TypeBadge/ChangeTypeBadge"]
    Types --> Summary["StrategySummary + strategyLabel"]
    Tokens["tokens FE-02"] --> Badge
    Badge --> Screens["S1/S3/S5"]
    Summary --> Screens

테스트 케이스

  • StatusBadge에 ACTIVE 전달 시 “ACTIVE” 텍스트와 success 계열 클래스로 렌더된다
  • StatusBadge에 ARCHIVED 전달 시 muted 계열로 렌더된다
  • StrategySummary가 PERCENTAGE_ROLLOUT 50을 “50% 롤아웃”으로 표시한다
  • StrategySummary가 VARIANT_BUCKETING을 “A:50, B:50”으로 표시한다
  • TypeBadge가 4종 타입 각각의 라벨을 렌더한다
  • 컴포넌트에 하드코딩 색(#·gray-·green-)이 없다

그래프 뷰