feat: Flyway 형상 뷰어 UI 개선 및 새로고침 버튼 추가

[Ryan-Dia]

What

• 파이프라인 라벨 변경: MERGE_PENDING → "dev 반영" 🔵, DB_APPLIED → "prod 반영" 🟢
• 순서 역전 경고 표시:
  • 같은 테이블: ⚠ 컬럼 역전 (빨간 테두리) / 🔀 순서 역전 (주황 테두리)
  • 다른 테이블 간 역전: 표시 없음 (문제 없으므로)
  • 선택 마이그레이션의 SQL 패널 상단에 경고 블록 표시
• 🔄 새로고침 버튼 추가 — 클릭 시 서버 캐시 초기화 후 최신 데이터 재조회
• 클라이언트 staleTime 30초 → 1시간으로 조정 (서버 캐시 TTL과 동기화)
• WipRegisterForm 중복 제출 방지 (disabled={!canSubmit || isPending || !!data})
• SQL 패널 높이 고정 540px → calc(100vh - 400px); min-height: 400px

Why

• 파이프라인 라벨이 배포 흐름과 맞지 않아 혼동을 줬음 (main=prod, server-dev=dev)
• out-of-order 적용 시 순서 역전 여부를 사전에 시각적으로 인지할 필요가 있음
• 서버 캐시 TTL이 1시간으로 늘어 수동 갱신 수단이 필요해짐

How

• STATUS_META: 라벨 및 색상 업데이트
• leapfrogSeverityMap: 버전별 최악 severity 집계 (COLUMN > TABLE)
• RowButton: $leapfrogSeverity prop으로 테두리 색상 분기
• LeapfrogBadge: severity별 배지 렌더링
• DetailContent: leapfrogs prop으로 SQL 패널 경고 블록 표시
• flywayQueries.mutation.refreshCache() + DELETE /flyway/cache 연동

[jaeyoung-kwon]

🤖 PR Review

Flyway 형상 뷰어 UI 개선 PR. leapfrog severity 계층(COLUMN > TABLE) 집계 로직이 정확하고, 새로고침 버튼의 query invalidation 패턴(queryClient.invalidateQueries)도 올바르게 연결되어 있습니다. staleTime 30s → 1h 변경은 서버 캐시 TTL 동기화 목적으로 설계 의도가 명확합니다. WipRegisterForm의 !!data 중복 제출 방지도 적절합니다.

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

참고

• admin/src/pages/flyway/FlywayViewer.tsx:55-60 — 캐시 새로고침 실패 시 사용자 피드백 없음
  useMutation에 onError 핸들러가 없어 DELETE /flyway/cache 요청이 실패해도 버튼이 조용히 원래 상태로 돌아갑니다. 사용자는 새로고침이 실패했는지 알 수 없어 오래된 데이터를 계속 보게 될 수 있습니다. onError 콜백에서 토스트 메시지나 에러 상태 표시를 추가하면 UX가 개선됩니다.

📋 검증 과정

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

---

_{🤖 Claude PR Review}

---

Generated by Claude Code

[jaeyoung-kwon]

📝 린트 오류 (prettier)

FlywayViewer.tsx 128번 줄 새로고침 버튼에 prettier 포맷 오류가 있어 CI가 실패합니다.

// 현재 (lint 오류)
<Button
  type="button"
  onClick={() => refresh()}
  disabled={isRefreshing}
>

// 수정 필요
<Button type="button" onClick={() => refresh()} disabled={isRefreshing}>

pnpm --filter @bombom/admin lint -- --fix 또는 저장 시 prettier 자동 포맷으로 해결할 수 있습니다.

---

Generated by Claude Code

[Ryan-Dia]

@jaeyoung-kwon

아래 내용 Husky 도입하면 간단하게 해결 되지 않나요?

FlywayViewer.tsx 128번 줄 새로고침 버튼에 prettier 포맷 오류가 있어 CI가 실패합니다.

// 현재 (lint 오류)
<Button
type="button"
onClick={() => refresh()}
disabled={isRefreshing}

// 수정 필요
<Button type="button" onClick={() => refresh()} disabled={isRefreshing}>
pnpm --filter @bombom/admin lint -- --fix 또는 저장 시 prettier 자동 포맷으로 해결할 수 있습니다.

[JeLee-river]

아래 내용 Husky 도입하면 간단하게 해결 되지 않나요?

이거 상추가 작업하기로 해서, 일단은 린트에러만 수정하고 바로 머지해도 될 것 같아요~!