dpdpdndn 블로그

FE-09-edit-screen

NEW3 min read

[FE-09] S3 플래그 수정 화면 (수정·아카이브·재활성)

작업 내용 (설계 의도)

변경 사항

/admin/feature-flags/[key] 수정 화면을 구현한다. description·strategy 수정, 상태 전이 액션(아카이브/재활성), 상태 보호 UI(ARCHIVED면 입력 비활성). 근거 설계: ../design-fe-web.md “S3 와이어프레임 / 상태 전이 UI / 상태 표”.

  • web/app/admin/feature-flags/[key]/page.tsx(컨테이너): useFeatureFlag(key)로 프리필, 저장/아카이브/재활성 mutation.
  • key·type은 읽기전용 헤더. “변경 이력 보기” 링크 → /[key]/audit-logs.
  • 저장: updateFeatureFlag(key,input) → 토스트. 아카이브: archiveFeatureFlag → 재활성 버튼 노출. 재활성: activateFeatureFlag.
  • 상태 보호: ARCHIVED면 StrategyForm disabled + 저장 비활성, “재활성”만 노출(BE 409 규칙 UI 선반영, User Scenario 9).
  • 404 → “플래그를 찾을 수 없습니다” 빈 상태 + 목록 링크. 409(이미 상태/ARCHIVED 수정) → alert 배너.
  • 위험 액션(아카이브)은 destructive-outline로 시각 분리(토스 절제).

롤백

신규 라우트 파일 삭제로 진입점 제거.

의존

  • FE-04 (useFeatureFlag/update/archive/activate)
  • FE-06 (StrategyForm)
  • FE-05 (StatusBadge/TypeBadge)

다이어그램

처리 흐름

sequenceDiagram
    participant U as 운영자
    participant P as [key]/page
    participant H as useFeatureFlag
    participant M as mutation
    U->>P: 상세 진입
    P->>H: fetch(key)
    H-->>P: flag or 404
    U->>P: 아카이브 클릭
    P->>M: archive(key)
    M-->>P: 200 → 재활성 버튼 노출

테스트 케이스

  • 진입 시 기존 값(description/strategy)이 폼에 프리필된다
  • 변경 저장 클릭 시 updateFeatureFlag가 호출되고 저장 토스트가 뜬다
  • 아카이브 클릭 시 archiveFeatureFlag가 호출되고 재활성 버튼이 노출된다
  • ARCHIVED 상태면 전략 입력이 비활성이고 저장 버튼이 없다
  • 404면 “찾을 수 없습니다” 빈 상태와 목록 링크가 보인다
  • 409(이미 ARCHIVED) 응답 시 alert 배너가 뜬다
  • “변경 이력 보기” 클릭 시 audit-logs 경로로 이동한다

그래프 뷰