# InsuRo PDF 편집기 — Phase 1: 뷰어 + 기본 편집

## 작업 레벨: Lv.3

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

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

## 배경
InsuRo "분석 & 도구" 메뉴에 웹 기반 PDF 편집기를 추가한다. Phase 1은 PDF 뷰어 + 기본 편집(합치기/나누기/페이지 관리) 기능을 구현한다.

## 기술 스택
- **PDF 뷰어**: react-pdf (pdfjs-dist 기반) — `npm install react-pdf`
- **PDF 조작**: pdf-lib — `npm install pdf-lib`
- **UI**: Shadcn UI + Tailwind (InsuRo 기존 디자인 시스템)
- **라우트**: `/tools/pdf-editor`
- **레이아웃**: DashboardLayout (기존 MediScan.tsx 참고)

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

### 1. PDF 뷰어
- `src/pages/PdfEditor.tsx` 새 페이지 생성
- DashboardLayout 래퍼
- react-pdf로 PDF 렌더링
- 줌 인/아웃 (25%~400%, 슬라이더 또는 +/- 버튼)
- 페이지 네비게이션 (이전/다음, 페이지 번호 입력)
- 파일 열기 (파일 선택 + 드래그앤드롭)

### 2. 페이지 썸네일 사이드바
- 좌측 사이드바에 모든 페이지 썸네일 표시
- 클릭 시 해당 페이지로 이동
- 드래그로 페이지 순서 변경 (재정렬)
- 선택한 페이지 삭제 버튼
- 선택한 페이지 회전 버튼 (90° 단위)

### 3. PDF 합치기
- "파일 추가" 버튼으로 여러 PDF 업로드
- 파일 목록에서 순서 드래그로 변경
- "합치기" 버튼 → pdf-lib로 병합 → 다운로드
- 진행률 표시

### 4. PDF 나누기
- 페이지 범위 지정 (예: 1-3, 5, 7-10)
- 또는 썸네일에서 체크박스로 페이지 선택
- "추출" 버튼 → pdf-lib로 선택 페이지 추출 → 다운로드

### 5. 라우트 등록
- `src/config/routes.ts`에 `/tools/pdf-editor` 추가
- 메뉴에 "PDF 편집기" 항목 추가 (Lucide 아이콘: FileText)

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

## 검증 시나리오
1. /tools/pdf-editor 접근 → PDF 편집기 UI 표시
2. PDF 파일 드래그앤드롭 → 뷰어에 렌더링
3. 줌 인/아웃 동작
4. 페이지 썸네일 클릭 → 해당 페이지 이동
5. 썸네일 드래그로 페이지 순서 변경
6. PDF 3개 업로드 → 합치기 → 다운로드 (페이지 수 합산 확인)
7. 5페이지 PDF에서 2-4페이지 추출 → 3페이지 PDF 다운로드
8. 페이지 삭제 → 다운로드에 반영
9. 페이지 90° 회전 → 다운로드에 반영
10. `npm run build` 성공

## 주의사항
- react-pdf는 pdfjs-dist worker 파일 설정 필요 (vite 환경)
- pdf-lib는 기존 PDF의 텍스트를 수정할 수 없음 (PDF 특성) — Phase 2에서 오버레이로 대체
- 대용량 PDF (100페이지+) 성능 고려 — 썸네일은 lazy 렌더링
- 기존 이미지 편집기(ImageEditor.tsx)와 UI 일관성 유지