# InsuRo 이미지 편집기 — Phase 3: AI/고급 기능

## 작업 레벨: 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 (에디터 셸 + 기본 편집) + Phase 2 (오버레이 6종) 완료. 현재 구조:
- `src/pages/ImageEditor.tsx` — 에디터 메인 (Phase 1)
- `src/hooks/useImageOverlay.ts` — 오버레이 로직 훅 (748줄)
- `src/components/image-editor/OverlayPanel.tsx` — 오버레이 UI (879줄)

Phase 3에서는 AI/고급 기능 4종을 추가한다.

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

### 1. 워터마크 삭제 (★1순위)
- 사용자가 워터마크 영역을 드래그로 선택
- 선택 영역을 주변 픽셀로 인페인팅 (Canvas 2D API)
- 구현 방식: 선택 영역의 각 픽셀을 주변 8방향 비-워터마크 픽셀 평균으로 대체
- 반복 적용 가능 (여러 번 정제)
- 또는 간단 방식: 선택 영역에 주변 색상 샘플링 + 가우시안 블렌딩

### 2. 배경 제거 + 투명 배경
- @imgly/background-removal 라이브러리 사용 (클라이언트 WASM, 서버 불필요)
- `npm install @imgly/background-removal`
- "배경 제거" 버튼 클릭 → 처리 중 로딩 표시 → 피사체만 남기고 배경 투명
- 결과를 Canvas에 반영
- PNG로 다운로드 시 투명 배경 유지

### 3. 서류 스캔 보정
- 기울기 자동 교정: Hough Transform 또는 간단한 에지 감지로 기울기 추정 → 자동 회전
- 명암 강화: 대비 자동 조정 (히스토그램 평탄화 효과)
- 흰 배경 정리: 그림자/배경 불균일 제거
- "스캔 보정" 원클릭 프리셋: 기울기 보정 + 대비 강화 + 샤프닝 조합

### 4. 색상 교체
- 스포이트로 교체할 색상 선택 (Canvas에서 클릭)
- 새 색상 선택 (색상 피커)
- 허용 범위 슬라이더 (0~100%) — 유사 색상까지 포함
- Canvas ImageData에서 해당 색상 범위 픽셀을 새 색상으로 교체

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — AI 도구 아이콘 + 패널 추가)
- `src/hooks/useImageAI.ts` (신규 — AI 기능 로직 훅)
- `src/components/image-editor/AIPanel.tsx` (신규 — AI 도구 UI)
- `package.json` (수정 — @imgly/background-removal 추가)

## 검증 시나리오
1. 워터마크 영역 선택 → 인페인팅 → 워터마크 흐려짐/제거 확인
2. 배경 제거 → 피사체만 남음 → PNG 투명 배경 다운로드
3. 기울어진 서류 사진 → "스캔 보정" → 수평 보정 + 선명해짐
4. 빨간색 영역 선택 → 파란색으로 교체 → 적용 확인
5. 기존 Phase 1/2 기능 정상 동작 (회귀 없음)
6. `npm run build` 성공

## 주의사항
- @imgly/background-removal은 WASM 파일 로딩이 필요 — vite 환경 설정 확인
- 배경 제거는 첫 실행 시 모델 다운로드(~10MB)로 느릴 수 있음 — 로딩 표시 필수
- 워터마크 삭제는 완벽한 제거가 아닌 "블렌딩" 수준 — 사용자 기대치 관리
- 기존 훅/패널 구조를 따라 useImageAI.ts + AIPanel.tsx로 분리