feat: Flyway 뷰어 UI 개선 — 순서역전 표시 / dev·prod 파이프라인

[Ryan-Dia]

📌 What

Flyway 형상 뷰어의 시각적 표현을 개선합니다.

• 파이프라인 레이블: 머지·배포 대기 → dev 반영 / DB 서버 반영 → prod 반영
• 순서역전 마이그레이션 행에 직접 배지 및 컬러 좌측 선 추가
• SQL 패널에 순서역전 경고 블록 추가

❓ Why

• 기존엔 상단 배너에만 역전 경고가 표시되어 어떤 행인지 한눈에 파악하기 어려웠음
• "머지·배포 대기"라는 레이블이 의미를 직관적으로 전달하지 못했음
• main=prod, server-dev=dev 브랜치 체계에 맞게 레이블을 명확화 필요

🔧 How

• STATUS_META: MERGE_PENDING → 'dev 반영', DB_APPLIED → 'prod 반영'
• leapfrogSeverityMap: version별 worst severity(COLUMN > TABLE) Map 계산
• RowButton: $leapfrogSeverity prop으로 COLUMN(빨간)/TABLE(주황) 좌측 세로선 분리
• LeapfrogBadge 인라인 배지: '⚠ 컬럼 역전' / '🔀 순서 역전'
• DetailContent: leapfrogs prop 수신 후 SQL 위에 LeapfrogWarning 블록 렌더링
  (공유 테이블/컬럼 하이라이트, 강/약 구분 배경색)
• 다른 테이블을 건드리는 순서역전은 표시 없음 (현재와 동일)

👀 Review Point

• 순서역전 없는 행은 아무 표시 없는지 확인
• 컬럼 역전(빨강) / 테이블 역전(주황) 색상 구분
• SQL 패널 경고 블록 — 강/약 배경색 및 공유 오브젝트 표시

[jaeyoung-kwon]

🤖 PR Review

⚠️ 수정이 필요한 리뷰 코멘트가 있습니다.

UI 개선 방향과 구현이 전반적으로 올바르나, WipRegisterForm에서 성공 후 폼 초기화 또는 버튼 비활성화가 없어 GitHub 이슈가 중복 생성될 수 있습니다.

🚨 0 Critical · ⚠️ 1 Major · 📝 2 Minor

수정 필요

• admin/src/pages/flyway/WipRegisterForm.tsx:26 — WipRegisterForm 성공 후 중복 제출 가능

  onSuccess에서 쿼리 무효화만 수행하고 폼 상태를 초기화하지 않습니다. 제출 성공 후에도 canSubmit이 true로 유지되어 사용자가 실수로 다시 "저장"을 누르면 동일한 내용으로 GitHub 이슈가 중복 생성됩니다.

  수정 방법: onSuccess에서 폼 필드를 초기화(setDescription(''), setPlannedVersion(defaultVersion) 등)하거나, 버튼 disabled 조건에 !!data를 추가(disabled={!canSubmit || isPending || !!data})하여 중복 제출을 방지하세요.

  Claude 검증: 변경 diff의 admin/src/pages/flyway/WipRegisterForm.tsx:26-31 기준으로 확인했습니다. (confidence 0.88).

참고

• admin/src/pages/flyway/FlywayViewer.tsx:475 — leapfrogBackground — COLUMN 심각도에서 active 상태 미반영
  leapfrogBackground 함수는 active 파라미터를 TABLE 심각도에서만 사용합니다(active ? '#FFFBEB' : '#FFFEF5'). COLUMN 심각도 행이 선택(active)되어도 배경색이 동일(#FFF5F5)하여 선택 여부를 시각적으로 구분할 수 없습니다. COLUMN 케이스에도 active 분기 추가를 고려하세요.

• admin/src/pages/flyway/FlywayViewer.tsx:455 — Panes 컨테이너 높이 540px 하드코딩
  height: 540px은 고정값이라 화면 높이나 상단 콘텐츠 양에 따라 패널이 잘리거나 불필요하게 짧아질 수 있습니다. calc(100vh - Npx) 또는 flex: 1 + 부모 overflow: hidden 방식을 고려하세요.

📋 검증 과정

• Claude structured review 결과 중 확신도가 있는 항목만 정리했습니다.
• Critical/Major는 inline comment로 게시하고, Minor는 참고 항목으로 summary에 포함합니다.
• 자동 생성된 OpenAPI 타입 선언 파일과 lock 파일은 리뷰 대상에서 제외합니다.
• routeTree.gen.ts(*.gen.ts)는 생성 파일로 리뷰에서 제외했습니다.

---

_{🤖 Claude PR Review}

---

Generated by Claude Code