[Admin] 지역 대표 이미지 업로드·크롭 UI 연동

[bottlenote-app]

PR 제목 (Title)

[Admin] 지역 대표 이미지 업로드·크롭 UI 연동

변경 사항 (Changes)

• Workspace #277의 지역 대표 이미지 업로드/크롭 UI를 Region 생성·수정 화면에 연동했습니다.
• 체크리스트
  • JPG/PNG/WebP 선택, 자유 비율·1:1·4:3·16:9 선택, 크롭 영역 드래그·모서리 핸들 리사이즈 및 WebP 품질 조절 모달을 추가했습니다.
  • 크롭 선택 영역 모서리에 원본 기준 가로 × 세로 px 값을 실시간 표시합니다.
  • 처리 결과의 해상도·파일 크기·증감률을 표시하고, 저장 클릭 시에만 admin/region 경로로 업로드합니다.
  • 기존 이미지 미리보기·교체·삭제와 목록 썸네일을 추가했으며, 공용 ImageUpload/배너 동작은 변경하지 않았습니다.
  • 자유 비율 크롭 좌표·선택 영역 픽셀 표시, 이미지 필드 상태, 저장 시 지연 업로드, Region 목록 썸네일 테스트를 추가했습니다.

변경 이유 (Reason for Changes)

• Region API의 imageUrl 계약이 개발 환경에 배포된 뒤, 운영자가 지역 대표 이미지를 원하는 비율과 영역으로 정리해 저장할 수 있도록 Workspace #277을 구현합니다.
• 자유 비율을 선택하면 크롭 선택 영역의 가로·세로를 독립적으로 조절할 수 있고, 모서리 표기로 현재 선택 크기를 즉시 확인할 수 있습니다.
• 크롭 중간 결과를 S3에 남기지 않고, 최종 WebP 결과만 저장 시 업로드하도록 했습니다.

테스트 방법 (Test Procedure)

• pnpm test:run — 43 files, 302 tests passed
• pnpm build — TypeScript build 및 Vite production build passed
• 자유 비율 선택 뒤 드래그·리사이즈한 크롭 픽셀이 원본 이미지 좌표로 변환되어 WebP 전처리에 전달되는지, 선택 영역 모서리의 픽셀 표기가 갱신되는지 검증했습니다.
• 이미지 선택 → 크롭 적용 상태에서는 S3 요청이 없고, 저장 클릭 시 WebP 업로드 후 Region 수정 payload에 URL이 포함되는지 MSW 기반 테스트로 검증했습니다.

참고 사항 (Additional Information)

• 입력 제한: JPG/PNG/WebP, 최대 20 MiB. 출력 제한: 긴 변 1600px, 최대 5 MiB.
• 기본 크롭 비율은 1:1이며, 자유 비율 또는 1:1·4:3·16:9을 선택할 수 있습니다. 기본 WebP 품질은 70이며 40~95 범위에서 조절할 수 있습니다.
• 모서리 표기는 전처리 전 원본 이미지 기준의 선택 크기이며, 실제 저장 결과 해상도는 최대 긴 변 1600px 정책을 적용한 뒤 결과 패널에 표시합니다.
• Workspace: [FE 요청] 지역 대표 이미지 업로드/크롭 UI 연동 workspace#277