# InsuRo PDF 편집기 — Phase 2: 서명 + 오버레이

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

## 배경
Phase 1에서 PDF 뷰어 + 합치기/나누기/페이지 관리가 완성됨. `src/pages/PdfEditor.tsx` (818줄). Phase 2에서는 서명 + 오버레이 기능을 추가한다.

## 기술 스택 추가
- **서명 그리기**: react-signature-canvas — `npm install react-signature-canvas @types/react-signature-canvas`
- **PDF 수정**: pdf-lib (이미 설치됨) — embedPng, drawImage, drawText

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

### 1. 서명 그리기
- react-signature-canvas 컴포넌트
- 펜 색상 선택 (검정/파랑/빨강)
- 펜 굵기 조절
- "지우기" 버튼 (서명 다시 그리기)
- 서명 완료 → PNG 데이터 URL 생성

### 2. 서명 이미지 업로드
- 파일 선택으로 서명 이미지 업로드 (PNG/JPG)
- 투명 배경 서명 이미지 지원

### 3. 서명을 PDF에 삽입
- 서명 이미지를 PDF 페이지에 삽입 (pdf-lib embedPng + drawImage)
- 삽입 위치: 클릭으로 위치 지정 또는 드래그
- 크기 조절 가능
- 미리보기에서 서명 위치 확인 후 "적용"
- 적용 후 PDF 다운로드

### 4. 텍스트 오버레이
- PDF 페이지에 텍스트 추가 (pdf-lib drawText)
- 폰트, 크기, 색상 선택
- 위치 지정 (클릭 또는 좌표 입력)
- "사본", "확인완료", 날짜 등 프리셋

### 5. 이미지 오버레이
- 이미지 파일을 PDF 페이지에 삽입 (도장, 로고 등)
- 위치/크기 조절
- pdf-lib embedPng/embedJpg + drawImage

### 6. 폼 채우기
- PDF 폼 필드 자동 감지 (pdf-lib getForm)
- 텍스트 필드, 체크박스, 드롭다운 표시
- 값 입력/선택 → 저장

## affected_files
- `src/pages/PdfEditor.tsx` (수정 — 서명/오버레이 탭 추가)
- `src/hooks/usePdfSignature.ts` (신규 — 서명 로직 훅)
- `src/components/pdf-editor/SignaturePanel.tsx` (신규 — 서명 UI)
- `package.json` (수정 — react-signature-canvas 추가)

## 검증 시나리오
1. 서명 그리기 → 검정 펜 → "적용" → PDF에 서명 삽입 → 다운로드 확인
2. 서명 이미지 업로드 → PDF에 삽입 → 다운로드 확인
3. 텍스트 "확인완료" 삽입 → 위치 지정 → 다운로드에 반영
4. 로고 이미지 삽입 → PDF에 표시 → 다운로드 확인
5. 폼 있는 PDF 열기 → 필드 표시 → 값 입력 → 저장
6. 기존 Phase 1 기능 정상 (합치기/나누기/페이지 관리)
7. `npm run build` 성공

## 주의사항
- PdfEditor.tsx 구조를 유지하면서 훅/컴포넌트 분리
- 서명 위치 지정은 react-pdf 렌더링 좌표와 pdf-lib 좌표 변환 필요 (Y축 반전)
- pdf-lib 좌표계: 좌하단 원점, react-pdf/DOM: 좌상단 원점