# InsuRo 이미지 편집기 — Phase 4: 콜라주 + 일괄 처리

## 작업 레벨: Lv.2

## 프로젝트 시스템 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`

## 배경
Phase 1~3 완료. 현재 구조:
- `src/pages/ImageEditor.tsx` — 메인 에디터
- `src/hooks/useImageOverlay.ts` — 오버레이 훅 (748줄)
- `src/hooks/useImageAI.ts` — AI 기능 훅
- `src/components/image-editor/OverlayPanel.tsx` — 오버레이 UI (879줄)
- `src/components/image-editor/AIPanel.tsx` — AI UI

Phase 4에서 콜라주 + 일괄 처리 2개 기능을 추가한다. 이미지 편집기 최종 Phase.

## 구현 기능

### 1. 콜라주
- 여러 이미지 업로드 (2~9장)
- 레이아웃 템플릿 선택:
  - 2분할 (가로/세로)
  - 3분할 (1+2, 2+1)
  - 4분할 (2x2)
  - 6분할 (2x3, 3x2)
  - 자유 배치
- 각 셀에 이미지 배치 (드래그앤드롭)
- 셀 간 간격 조절 (0~20px)
- 배경색 선택
- 완성된 콜라주를 하나의 이미지로 다운로드

### 2. 일괄 처리
- 여러 이미지 동시 업로드
- 일괄 적용 가능한 작업:
  - 리사이즈 (가로 또는 세로 기준)
  - 필터 적용 (Phase 1 필터 12종 중 선택)
  - 포맷 변환 (PNG/JPG/WebP)
  - 품질 조절
  - 좌우/상하 반전
  - 회전
- 미리보기 (썸네일 격자)
- "전체 적용" → ZIP 다운로드 (또는 개별 다운로드)
- ZIP 생성: JSZip 라이브러리 사용 (`npm install jszip`)

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — 콜라주/일괄 모드 추가)
- `src/hooks/useImageCollage.ts` (신규)
- `src/hooks/useImageBatch.ts` (신규)
- `src/components/image-editor/CollagePanel.tsx` (신규)
- `src/components/image-editor/BatchPanel.tsx` (신규)
- `package.json` (수정 — jszip 추가)

## 검증 시나리오
1. 4장 업로드 → 2x2 템플릿 → 간격 5px → 콜라주 다운로드
2. 10장 업로드 → 리사이즈 800px 가로 + 세피아 필터 → 전체 적용 → ZIP 다운로드
3. 기존 Phase 1~3 기능 정상 동작
4. `npm run build` 성공

## goal_assertions (auto-generated)
- `npm install jszip`
- `npm run build`