dpdpdndn 블로그

FE-10-audit-log-screen

NEW3 min read

[FE-10] S5 변경 이력(감사 로그) 화면

작업 내용 (설계 의도)

변경 사항

/admin/feature-flags/[key]/audit-logs 변경 이력 화면을 구현한다. 플래그별 변경 이력 페이징 테이블, before→after를 사람이 읽는 전략 요약으로. 근거 설계: ../design-fe-web.md “S5 와이어프레임 / 상태 표”.

  • web/app/admin/feature-flags/[key]/audit-logs/page.tsx(컨테이너): useFlagAuditLogs(key,page,size) 소비 — data는 canonical FeatureFlagAuditLogPageView({logs,total,page,size,totalPages}).
  • 테이블: 시각(로케일)·ChangeTypeBadge(FE-05)·변경자(#{actorUserId})·before→after(StrategySummary로 변환, before null이면 “(없음)”). 목록은 data.logs.
  • 페이징: total 기반 “1 / N” 총페이지 표시 + 이전/다음(기존 audit-logs 화면 패턴 재사용, 지역 state page). totalPages는 훅의 canonical 뷰에서 받는다(배열 전용 폴백 없음).
  • 4상태: 로딩 aria-busy, 이력 0건 “변경 이력이 없습니다”, 404/오류 alert+재시도, 성공 테이블.
  • 색 토큰만, 라이트/다크 확인.

의존

  • FE-04 (useFlagAuditLogs)
  • FE-05 (ChangeTypeBadge/StrategySummary)

다이어그램

처리 흐름

sequenceDiagram
    participant U as 운영자
    participant P as audit-logs/page
    participant H as useFlagAuditLogs
    U->>P: 이력 진입
    P->>H: fetch(key,page)
    H-->>P: logs or 빈/오류
    U->>P: 다음 페이지
    P->>H: fetch(key,page+1)

테스트 케이스

  • 이력이 있으면 각 행에 변경 유형 배지와 before→after 요약이 렌더된다
  • before가 null인 CREATED 행은 “(없음) → …”로 표시된다
  • 이력 0건이면 “변경 이력이 없습니다” 문구가 보인다
  • 오류 시 alert와 다시 시도 버튼이 보인다
  • total 기반 총페이지가 “1 / N”으로 표시된다(예: total 25·size 10 → “1 / 3”)
  • 마지막 페이지에서 다음 버튼이 비활성된다
  • 다음/이전 페이지 버튼으로 페이지를 이동한다
  • 로딩 중 aria-busy 표시가 나타난다

그래프 뷰