# InsuRo 이미지/PDF 편집기 — E2E 검증 + 버그 수정

## 작업 레벨: Lv.2

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

## 작업 3문서
- 이미지 편집기: `/home/jay/workspace/memory/plans/insuro-image-editor/`
- PDF 편집기: `/home/jay/workspace/memory/plans/insuro-pdf-editor/`

## 배경
이미지 편집기(Phase 1~4)와 PDF 편집기(Phase 1~4)가 전부 구현 완료됐으나, 프로덕션(insuro.biz) E2E 테스트에서 치명적 버그 2건이 발견됨.

## 발견된 버그 (반드시 수정)

### Bug 1: [Critical] 이미지 편집기 — 이미지 로드 안 됨
- **증상**: 파일 선택 후 Canvas에 이미지가 표시되지 않음. "이미지를 드래그하거나" 플레이스홀더가 그대로 유지
- **위치**: `src/pages/ImageEditor.tsx` — 파일 업로드 핸들러 또는 `FabricImage.fromURL` 호출부
- **추정 원인**: fabric.js v6의 `FabricImage.fromURL`이 blob URL 또는 data URL에서 실패하거나, change 이벤트 핸들러가 제대로 바인딩 안 됨
- **디버깅 방법**: 
  1. 브라우저 콘솔에서 에러 확인 (Playwright console_messages)
  2. input[type=file] change 이벤트 핸들러 확인
  3. FileReader.readAsDataURL → FabricImage.fromURL 흐름 추적
  4. 실제 브라우저에서 파일 업로드 테스트

### Bug 2: [Critical] 사이드바 메뉴 미등록
- **증상**: "분석 & 도구" 사이드바에 이미지 편집기/PDF 편집기 메뉴 항목이 없음. URL 직접 입력으로만 접근 가능
- **위치**: `src/config/routes.ts` — 라우트는 등록되었으나 사이드바 메뉴 configuration에 누락된 것으로 추정
- **확인 방법**: routes.ts에서 이미지 편집기/PDF 편집기 라우트가 "분석 & 도구" 섹션의 sidebarItems에 포함되었는지 확인
- **수정**: 해당 섹션에 메뉴 항목 추가 (이미지 편집기: ImageIcon, PDF 편집기: FileText)

## E2E 검증 (버그 수정 후)

### 이미지 편집기 (`/tools/image-editor`)
Playwright로 실제 브라우저에서 테스트:
1. 이미지 파일 업로드 → Canvas에 표시되는지 확인
2. 크롭 도구 → 영역 선택 → 적용
3. 필터 (밝기 슬라이더) → 실시간 프리뷰
4. 좌우 반전 → 이미지 반전 확인
5. Undo → 원복 확인
6. 텍스트 삽입 → 폰트 변경
7. 모자이크 → 영역 처리
8. 다운로드 (JPG) → 파일 생성
9. 콜라주 모드 → 여러 이미지 배치
10. 사이드바 메뉴에서 접근 가능한지 확인

### PDF 편집기 (`/tools/pdf-editor`)
1. PDF 파일 업로드 → 뷰어에 렌더링
2. 줌 인/아웃
3. 합치기 탭 → PDF 2개 업로드 → 합치기 → 다운로드
4. 나누기 탭 → 페이지 범위 입력 → 추출
5. 서명 탭 → 서명 그리기 → PDF에 삽입
6. 변환 탭 → Word→PDF (서버 연동 확인)
7. 주석 탭 → 하이라이트 → 적용
8. 사이드바 메뉴에서 접근 가능한지 확인

## 테스트 자료
- 테스트 이미지: Python PIL로 생성 가능 (`python3 -c "from PIL import Image; img=Image.new('RGB',(800,600),'blue'); img.save('/tmp/test.png')"`)
- 테스트 PDF: `python3 -c "from reportlab.lib.pagesizes import A4; from reportlab.pdfgen import canvas; c=canvas.Canvas('/tmp/test.pdf', pagesize=A4); c.drawString(100,700,'Test PDF'); c.save()"` 또는 MediScan 샘플 PDF 사용

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — 이미지 로드 버그 수정)
- `src/config/routes.ts` (수정 — 사이드바 메뉴 추가)

## 검증 시나리오
1. 이미지 편집기에서 이미지 업로드 → Canvas에 표시 ✅
2. "분석 & 도구" 사이드바에 이미지 편집기/PDF 편집기 메뉴 표시 ✅
3. 이미지 편집기 10개 시나리오 중 최소 8개 PASS
4. PDF 편집기 8개 시나리오 중 최소 6개 PASS
5. `npm run build` 성공
6. 발견된 추가 이슈는 보고서에 상세 기록

## 보고서 형식
검증 결과를 아래 형식으로 정리:
```
### 이미지 편집기
1. 이미지 로드: [PASS/FAIL] — 상세
2. 크롭: [PASS/FAIL] — 상세
...

### PDF 편집기
1. PDF 로드: [PASS/FAIL] — 상세
...

### 추가 개선 필요사항
- [항목]: 설명
```

## goal_assertions (auto-generated)
- `python3 -c "from PIL import Image; img=Image.new('RGB',(800,600),'blue'); img.save('/tmp/test.png')"`
- `python3 -c "from reportlab.lib.pagesizes import A4; from reportlab.pdfgen import canvas; c=canvas.Canvas('/tmp/test.pdf', pagesize=A4); c.drawString(100,700,'Test PDF'); c.save()"`
- `npm run build`