# InsuRo PDF 편집기 UX 피드백 수정 (3건)

## 작업 레벨: Lv.2

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

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`
- 배포: Cloudflare Pages (GitHub push → CI → 자동 배포)

## ★ 제이회장님 실사용 피드백 (2026-04-26)

### PDF-1: 탭 전환 시 흰 화면 (크리티컬)
- **현상**: PDF 업로드 후 합치기/나누기/서명/변환/주석 탭으로 이동하면 흰 화면 크래시
- **기존 수정 이력**: task-2206에서 `pdfBytes.slice(0)` 7곳 적용했으나, 제이회장님이 실 사용 시 여전히 흰 화면 발생 확인
- **원인 추정**: 탭 전환 시 react-pdf Document 컴포넌트가 unmount/remount되면서 내부적으로 ArrayBuffer를 소비하거나, 탭 전환 로직에서 PDF state가 리셋되는 문제. 또는 ErrorBoundary 부재
- **핵심 요구**: **어떤 탭으로 이동하든 업로드한 PDF 파일은 유지되어야 함.** 탭별 컨텐츠만 변경
- **디버깅**: PdfEditor.tsx 전체를 읽고 탭 전환 시 state 흐름 추적. `pdfBytes`/`pdfUrl` state가 탭 전환 시 어떻게 변하는지 확인. 필요시 ErrorBoundary 추가

### PDF-2: 서명 위치/크기 조절 기능
- **현상**: 서명 삽입은 되지만, 삽입된 서명의 위치 이동과 크기 조절이 안 됨
- **요구**: 서명 삽입 후
  - 드래그로 위치 이동
  - 모서리 핸들로 크기 조절 (리사이즈)
  - 서명 삭제 버튼
- **구현**: canvas 위에 서명 이미지를 overlay로 배치, CSS transform + drag 핸들로 조작

### PDF-3: "적용하기" → 다운로드 UX 플로우
- **현상**: 서명 등 편집 후 다운로드 경로가 불명확
- **요구 UX 플로우**:
  1. 서명/주석 등 편집 작업 수행
  2. "적용하기" 버튼 클릭 → 모든 편집 내용을 PDF에 반영 (confirm)
  3. 적용 완료 후 "다운로드" 버튼 활성화 → 편집된 PDF 다운로드
- **구현**: 상단 "편집 저장" 버튼을 "적용하기"로 변경하거나, 별도 "적용하기" 추가. 적용 후 "다운로드" 버튼 활성화

## affected_files
- `src/pages/PdfEditor.tsx` (수정)
- `src/hooks/usePdfSignature.ts` (수정)
- `src/components/pdf-editor/SignaturePanel.tsx` (수정)

## 검증 시나리오
1. PDF 업로드 → 뷰어에서 정상 렌더링 → 서명 탭 클릭 → 흰 화면 없이 서명 패널 표시
2. 합치기/나누기/변환/주석 모든 탭 전환 → 크래시 없음, PDF 유지
3. 서명 삽입 → 드래그로 위치 이동 → 모서리로 크기 조절 → 정상 동작
4. "적용하기" 클릭 → 편집 반영 → "다운로드" 클릭 → 편집된 PDF 다운로드 성공
5. npm run build 성공