FE-08-create-screen

[FE-08] S2 플래그 생성 화면

작업 내용 (설계 의도)

변경 사항

/admin/feature-flags/new 생성 화면을 구현한다. 한 화면 한 과업 + 하단 단일 CTA(토스 송금 패턴). key·type·description·strategy 입력, 서버 400 에러 표면화. 근거 설계: ../design-fe-web.md “S2 와이어프레임 / 상태 표”.

• web/app/admin/feature-flags/new/page.tsx(컨테이너): 제출 시 createFeatureFlag(input) 호출, 201→토스트+/admin/feature-flags 이동.
• web/app/admin/feature-flags/new/FeatureFlagCreateForm.tsx: key(형식 안내)·type select·description·StrategyForm(FE-06) 조합. 폼 상태는 지역 useState. 생성 화면 전용 파일 — 수정 화면(FE-09)과 폼 파일을 공유하지 않는다(같은 wave Single Writer 회피). 공유는 하위 StrategyForm(FE-06)까지만.
• 클라이언트 검증: CreateFeatureFlagInputSchema로 제출 전 검증, 필드 인라인 에러.
• 서버 검증: 400(key 중복·percentage>100·variant>4·weight≠100·EXPERIMENT아닌데variant)은 폼 상단 role="alert" 배너.
• 제출 중 CTA 비활성 + 스피너.
• 색 토큰만, 라이트/다크 확인.

롤백

신규 라우트 파일 삭제. FE-11 nav 미노출 시 진입점 없음.

의존

• FE-04 (createFeatureFlag)
• FE-06 (StrategyForm)

다이어그램

처리 흐름

sequenceDiagram
    participant U as 운영자
    participant F as CreateForm
    participant A as createFeatureFlag
    U->>F: key/type/strategy 입력 후 생성
    F->>F: CreateFeatureFlagInputSchema.parse
    F->>A: create(input)
    A-->>F: 201 or 400
    F-->>U: 토스트+목록 이동 or 에러 배너

테스트 케이스

• 유효 입력으로 생성 클릭 시 createFeatureFlag가 호출되고 성공 토스트 후 목록으로 이동한다
• key 중복 400 응답 시 폼 상단 alert 배너가 뜨고 화면 이동하지 않는다
• 필수(key) 누락 시 인라인 에러가 뜨고 제출되지 않는다
• 종류를 EXPERIMENT로 바꾸면 전략 폼이 variant 입력으로 전환된다
• 제출 중에는 생성 버튼이 비활성된다
• weight 합이 100이 아니면 생성 버튼이 비활성된다