# InsuRo 이미지 편집기 — Phase 1: 에디터 셸 + 기본 편집

## 작업 레벨: Lv.3

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

## 작업 3문서 (이미지 편집기)
- 계획서: `/home/jay/workspace/memory/plans/insuro-image-editor/plan.md`
- 맥락노트: `/home/jay/workspace/memory/plans/insuro-image-editor/context-notes.md`
- 체크리스트: `/home/jay/workspace/memory/plans/insuro-image-editor/checklist.md`

## 배경
InsuRo "분석 & 도구" 메뉴에 웹 기반 이미지 편집기를 추가한다. Phase 1은 에디터의 기반 구조와 기본 편집 기능을 구현한다.

## 기술 스택
- **Canvas 엔진**: fabric.js (v6) — `npm install fabric`
- **UI**: Shadcn UI + Tailwind (InsuRo 기존 디자인 시스템)
- **라우트**: `/tools/image-editor`
- **레이아웃**: DashboardLayout (기존 MediScan.tsx 참고)

## 구현 기능 (Phase 1 범위)

### 1. 에디터 셸
- `src/pages/ImageEditor.tsx` 새 페이지 생성
- DashboardLayout 래퍼
- fabric.js Canvas 초기화 (반응형 크기)
- 좌측: 도구 패널 (아이콘 버튼)
- 상단: 파일 열기/저장/Undo/Redo 버튼
- 우측 또는 하단: 속성 패널 (선택 도구의 옵션)

### 2. 이미지 로드
- 파일 선택 버튼 + 드래그앤드롭 영역
- 이미지를 Canvas에 로드 (fabric.Image.fromURL)
- 지원 포맷: JPG, PNG, WebP, HEIC, BMP, GIF

### 3. 기본 편집
- **크롭**: 드래그로 영역 선택 → 잘라내기. 비율 고정 옵션 (자유, 1:1, 4:3, 16:9, A4)
- **리사이즈**: 가로/세로 픽셀 입력 또는 퍼센트 (비율 유지 토글)
- **회전**: 90°/180°/270° 버튼 + 자유각도 슬라이더
- **반전**: 좌우 반전, 상하 반전 버튼

### 4. 필터 12종
fabric.js 필터 또는 Canvas 2D API로 구현:
1. 밝기 (Brightness) — 슬라이더 -100~+100
2. 대비 (Contrast) — 슬라이더 -100~+100
3. 색온도 — 슬라이더 (차갑게↔따뜻하게)
4. 샤프닝 (Sharpen) — Convolution 필터
5. 블러 (Blur) — 슬라이더 0~20
6. 채도 (Saturation) — 슬라이더 -100~+100
7. 그레이스케일 — 토글
8. 세피아 — 토글
9. 비네팅 — 슬라이더 0~100
10. 노이즈 (Noise) — 슬라이더 0~100
11. HDR 효과 — 프리셋 (밝기+대비+채도 조합)
12. 감마 보정 — 슬라이더 0.5~2.0

★ 필터는 여러 개 중첩 적용 가능해야 함
★ 필터 적용 시 실시간 프리뷰

### 5. Undo/Redo
- Canvas 상태 히스토리 스택 (최대 50단계)
- Ctrl+Z / Ctrl+Y 키보드 단축키

### 6. 다운로드
- 포맷 선택: PNG, JPG, WebP
- JPG/WebP: 품질 슬라이더 (1~100)
- 파일명 자동 생성 (원본명_edited.ext)

### 7. EXIF 메타데이터 제거
- 다운로드 시 자동 제거 (Canvas를 거치면 자연스럽게 제거됨)
- 별도 "EXIF 제거" 버튼도 제공

### 8. Before/After 비교
- 슬라이더를 좌우로 드래그하면 원본/편집본 비교
- 토글 버튼으로 원본 보기

### 9. 라우트 등록
- `src/config/routes.ts`에 `/tools/image-editor` 추가
- 메뉴에 "이미지 편집기" 항목 추가 (Lucide 아이콘: ImageIcon 또는 Edit3)

## affected_files
- `src/pages/ImageEditor.tsx` (신규)
- `src/config/routes.ts` (수정 — 라우트 추가)
- `package.json` (수정 — fabric 의존성 추가)

## 검증 시나리오
1. /tools/image-editor 접근 → 에디터 UI 표시
2. 이미지 드래그앤드롭 → Canvas에 로드
3. 크롭 → 영역 선택 → 잘라내기 동작
4. 필터 적용 → 실시간 프리뷰 → 중첩 적용
5. 좌우반전 → 이미지 반전 확인
6. Undo 3회 → 원래대로 복원
7. JPG 80% 품질로 다운로드 → 파일 생성 확인
8. Before/After 슬라이더 동작
9. `npm run build` 성공

## 주의사항
- fabric.js v6는 ESM 전용 — vite 환경에서 호환 확인 필요
- Canvas 크기는 윈도우 리사이즈에 반응형으로 조정
- 모바일 대응 불필요 (데스크탑 우선)
- 플랜 게이팅은 Phase 4에서 일괄 적용 예정 — Phase 1에서는 전체 오픈