# InsuRo 이미지 편집기 UX 피드백 수정 (3건)

## 작업 레벨: Lv.1

## 프로젝트 시스템 3문서
- DevSystem: `/home/jay/workspace/memory/plans/anu-guide-system/plan.md`

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`
- 배포: Cloudflare Pages (GitHub push → CI → 자동 배포)

## ★ 제이회장님 실사용 피드백 (2026-04-26)

### IMG-0: 다크모드 → 라이트모드 통일 (우선)
- **현상**: 이미지 편집기만 다크모드(bg-gray-900 등), 나머지 인슈로 화면은 라이트모드
- **요구**: 인슈로 전체 테마와 통일. 라이트모드 기반으로 변경
- **수정 범위**:
  - 좌측 도구 사이드바: 다크 배경 → 라이트 배경 (bg-white, border-gray-200 등)
  - 우측 속성 패널: 다크 배경 → 라이트 배경
  - 상단 툴바: 다크 배경 → 라이트 배경
  - 캔버스 영역: 밝은 회색 배경(bg-gray-100) 유지 가능 (편집 영역이므로)
  - 텍스트 색상: text-gray-300/400 → text-gray-700/800 등
- **참고**: 다른 페이지(`src/pages/` 하위)의 스타일링 패턴을 참고하여 일관성 유지

### IMG-1: 파일 열기 시 이미지 가운데 자동 배치
- **현상**: 이미지 업로드 시 캔버스 좌측 상단에 붙어서 표시됨
- **요구**: 이미지가 뷰어 영역 가운데에 자동 위치 + 적절한 크기로 fit
- **수정**: 이미지 로드 후 fabric.js에서:
  ```
  canvas.centerObject(img)
  // 또는 뷰포트 크기 대비 이미지 스케일 조절 + 중앙 배치
  canvas.setViewportTransform([1, 0, 0, 1, offsetX, offsetY])
  ```

### IMG-2: 왼쪽 도구 메뉴 펼치기/접기 토글
- **현상**: 아이콘만 표시, hover 시 툴팁으로 메뉴명 표시
- **요구**: 토글 버튼(사이드바 하단 또는 상단)으로 아이콘+텍스트 펼치기 ↔ 아이콘만 접기 전환
- **펼침 상태**: 아이콘 + 메뉴명 텍스트 가로 배치 (예: 🔲 크롭, ↔ 리사이즈)
- **접힘 상태**: 아이콘만 (현재와 동일)
- **수정**: ImageEditor.tsx에서 사이드바 width를 state로 관리, 토글 버튼 추가

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — IMG-0, IMG-1, IMG-2)
- `src/components/image-editor/AIPanel.tsx` (수정 — IMG-0 테마)
- `src/components/image-editor/OverlayPanel.tsx` (수정 — IMG-0 테마)

## 검증 시나리오
1. 이미지 편집기 페이지: 라이트모드로 표시 (다른 페이지와 테마 통일)
2. 이미지 업로드 시 캔버스 중앙에 자동 배치, 적절한 크기로 fit
3. 왼쪽 도구 메뉴 토글: 펼치기 → 아이콘+텍스트, 접기 → 아이콘만
4. 기존 편집 기능(크롭, 회전, 필터, 텍스트 등)에 영향 없음
5. npm run build 성공