# InsuRo 이미지 편집기 — Phase 2: 오버레이 기능

## 작업 레벨: 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`

## 배경
Phase 1에서 fabric.js v6 기반 에디터 셸 + 기본 편집(크롭/리사이즈/회전/반전/필터 12종/Undo/Redo/다운로드/Before-After)이 완성됨. `src/pages/ImageEditor.tsx` (1441줄). Phase 2에서는 오버레이 기능을 추가한다.

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

### 1. 텍스트 삽입
- "텍스트 추가" 버튼 → Canvas에 IText 오브젝트 추가
- 폰트 선택 (기본 5종: 나눔고딕, 나눔명조, 맑은 고딕, Arial, Courier)
- 폰트 크기, 색상, 굵기, 기울임, 밑줄
- 더블클릭으로 텍스트 수정 (fabric.js IText 기본 지원)
- 드래그로 위치 이동, 핸들로 크기 조절

### 2. 스티커/이모티콘/이모지/로고 삽입
- 이모지 피커 (카테고리별: 표정, 손, 기호, 사무, 보험 관련)
- 이미지 파일 업로드로 로고/스티커 삽입
- Canvas에 fabric.Image로 추가
- 드래그 이동, 핸들로 크기/회전 조절

### 3. 드로잉/마크업
- 자유 그리기 모드 (fabric.js freeDrawingBrush)
- 펜 굵기 슬라이더 (1~20px)
- 펜 색상 선택 (색상 팔레트)
- 형광펜 모드 (반투명)
- 도형: 화살표, 직선, 네모, 동그라미
- 도형도 드래그로 이동/크기 조절 가능

### 4. 모자이크/블러 영역
- "모자이크" 도구 선택 → 드래그로 영역 지정
- 선택 영역을 pixelate 처리 (8x8 또는 16x16 블록)
- 또는 블러 처리 옵션
- 개인정보(주민번호, 이름) 마스킹용

### 5. 프레임/테두리
- 테두리 추가: 색상, 두께 (1~30px) 선택
- 둥근 모서리 (border-radius)
- 그림자 효과 (offset, blur, 색상)
- 프레임 프리셋 (심플/우아한/사진 프레임)

### 6. 워터마크 추가
- 텍스트 워터마크: "COPY", "사본", "확인완료", 커스텀 텍스트
- 반투명도 조절 (10~90%)
- 위치: 중앙, 좌하단, 우하단, 타일(반복)
- 각도 조절 (기본 -45°)
- 이미지 워터마크 (로고 업로드)

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — 기존 1441줄에 오버레이 기능 추가)

## 검증 시나리오
1. 텍스트 삽입 → 폰트/색상 변경 → 드래그 이동 → 다운로드에 반영
2. 이모지 삽입 → 크기 조절 → 다운로드에 반영
3. 펜으로 자유 그리기 → 빨간 화살표 그리기 → 다운로드에 반영
4. 모자이크 영역 선택 → 픽셀화 처리 확인
5. 프레임 적용 → 다운로드에 반영
6. 워터마크 "사본" 반투명 삽입 → 다운로드에 반영
7. Undo로 오버레이 요소 제거 가능
8. `npm run build` 성공

## 주의사항
- ImageEditor.tsx가 이미 1441줄이므로, 컴포넌트 분리 고려 (hooks 또는 하위 컴포넌트)
- 기존 Phase 1 기능 절대 깨뜨리지 말 것
- Undo/Redo가 오버레이 요소에도 동작해야 함