dpdpdndn 블로그

FE-07-list-screen

NEW2 min read

[FE-07] S1 플래그 목록 화면

작업 내용 (설계 의도)

변경 사항

/admin/feature-flags 목록 화면을 구현한다. status/type 필터, 목록 테이블, 4상태(loading/empty/error/success) 처리, “플래그 추가” 단일 CTA. 근거 설계: ../design-fe-web.md “S1 와이어프레임 / 화면별 상태 표”.

  • web/app/admin/feature-flags/page.tsx(컨테이너, “use client”): useFeatureFlags(filters) 소비, 상태 분기 렌더.
  • web/app/admin/feature-flags/_components/FeatureFlagFilters.tsx: status/type select(지역 useState).
  • web/app/admin/feature-flags/_components/FeatureFlagTable.tsx: 행에 key·TypeBadge·StatusBadge·StrategySummary·수정 링크. 행 클릭 → /admin/feature-flags/[key].
  • 빈 상태: 플래그 0건 → “등록된 플래그가 없습니다” + [+ 플래그 추가] CTA(User Scenario 8). 필터 결과 0건은 별도 문구.
  • 오류: role="alert" 배너 + 다시 시도.
  • 색은 토큰만, 라이트/다크 확인. accent는 CTA 한 곳.

의존

  • FE-04 (useFeatureFlags)
  • FE-05 (StatusBadge/TypeBadge/StrategySummary)

다이어그램

처리 흐름

sequenceDiagram
    participant U as 운영자
    participant P as page.tsx
    participant H as useFeatureFlags
    U->>P: /admin/feature-flags 진입
    P->>H: fetch(filters)
    H-->>P: {data,isLoading,error}
    P-->>U: 로딩/빈/오류/테이블 렌더
    U->>P: 플래그 추가 클릭
    P-->>U: /new 이동

테스트 케이스

  • 로딩 중 로딩 표시가 나타난다
  • 플래그 0건이면 빈 상태 문구와 “플래그 추가” CTA가 보인다
  • 오류 시 alert 배너와 다시 시도 버튼이 보이고, 클릭 시 refetch한다
  • 데이터가 있으면 각 행에 key·상태 배지·전략 요약이 렌더된다
  • status 필터를 ARCHIVED로 바꾸면 해당 필터로 재조회한다
  • 행 클릭 시 상세 경로로 이동한다

그래프 뷰