# InsuRo 이미지 편집기 + PDF 편집기 UX 피드백 수정

## 작업 레벨: 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 편집기] 버그 + UX 개선 (3건)

#### PDF-1: 탭 전환 시 흰 화면 (크리티컬)
- **현상**: PDF 업로드 후 합치기/나누기/서명/변환/주석 탭으로 이동하면 흰 화면 크래시
- **기존 수정**: task-2206에서 `pdfBytes.slice(0)` 7곳 적용했으나, 여전히 발생
- **원인 추정**: 탭 전환 시 react-pdf Document 컴포넌트가 unmount/remount되면서 내부적으로 ArrayBuffer를 소비. 또는 탭 전환 시 PDF 데이터 state가 리셋되는 문제
- **요구**: 어떤 탭으로 이동하든 업로드한 PDF는 유지되어야 함. 탭별 컨텐츠만 변경
- **디버깅 방법**: 먼저 PdfEditor.tsx를 읽고, 탭 전환 시 pdfBytes state가 어떻게 관리되는지 추적. console.log로 탭 전환 시점의 state 변화 확인

#### PDF-2: 서명 위치/크기 조절 기능
- **현상**: 서명 삽입은 되지만, 삽입된 서명의 위치 이동과 크기 조절이 안 됨
- **요구**: 서명 삽입 후 드래그로 위치 이동, 모서리 핸들로 크기 조절 가능
- **참고**: fabric.js의 Object 조작처럼 드래그+리사이즈 핸들

#### PDF-3: "적용하기" → 다운로드 UX 플로우
- **현상**: 서명 등 편집 후 바로 다운로드 경로가 불명확
- **요구 UX 플로우**:
  1. 서명/주석 등 편집 작업 수행
  2. "적용하기" 버튼 클릭 → 모든 편집 내용을 PDF에 confirm
  3. 적용 후 "다운로드" 가능
- **구현**: 상단 "편집 저장" 버튼이 이 역할을 하되, 클릭 시 편집 내용 적용 → 즉시 다운로드 트리거

---

### [이미지 편집기] UX 개선 (3건)

#### IMG-0: 다크모드 통일
- **현상**: 이미지 편집기만 다크모드, 나머지 화면은 라이트모드
- **요구**: 인슈로 전체 테마와 통일 (라이트모드 기반)
- **수정**: ImageEditor.tsx와 관련 컴포넌트의 다크 배경(bg-gray-900 등)을 라이트 테마로 변경. 캔버스 영역은 회색 배경 유지 가능하지만, 사이드 패널/툴바는 라이트 테마

#### IMG-1: 파일 열기 시 이미지 센터링
- **현상**: 이미지 업로드 시 좌측 상단에 붙어서 표시됨
- **요구**: 이미지가 뷰어 영역 가운데에 자동 위치 + 적절한 크기로 fit
- **수정**: fabric.js canvas에서 이미지 로드 후 `canvas.centerObject(img)` 또는 viewport 중앙 계산 적용

#### IMG-2: 왼쪽 도구 메뉴 펼치기/접기
- **현상**: 아이콘만 표시, hover 시 툴팁으로 메뉴명 표시
- **요구**: 토글 버튼으로 아이콘+텍스트 전체 펼치기 ↔ 아이콘만 접기 전환
- **수정**: 사이드 도구바에 펼치기/접기 토글 추가. 펼침 상태에서는 아이콘 + 메뉴명 텍스트 표시

## affected_files
- `src/pages/PdfEditor.tsx` (수정 — PDF-1, PDF-2, PDF-3)
- `src/hooks/usePdfSignature.ts` (수정 — PDF-2)
- `src/components/pdf-editor/SignaturePanel.tsx` (수정 — PDF-2)
- `src/pages/ImageEditor.tsx` (수정 — IMG-0, IMG-1, IMG-2)
- `src/components/image-editor/AIPanel.tsx` (수정 — IMG-0 테마)
- `src/components/image-editor/OverlayPanel.tsx` (수정 — IMG-0 테마)

## 우선순위
1. PDF-1 (흰 화면 크래시) — 크리티컬
2. IMG-0 (다크모드 통일) — 눈에 띄는 UI 불일치
3. IMG-1 (이미지 센터링) — 기본 UX
4. PDF-2 + PDF-3 (서명 조절 + 적용 플로우)
5. IMG-2 (메뉴 펼치기/접기)

## 검증 시나리오
1. PDF 업로드 → 뷰어에서 정상 렌더링 → 서명 탭 전환 → 흰 화면 없이 서명 패널 표시 → 합치기/나누기/변환/주석 탭 전환 → 모두 정상
2. 서명 삽입 → 드래그로 위치 이동 → 모서리 핸들로 크기 조절 → "적용하기" → 다운로드
3. 이미지 편집기: 라이트모드로 표시 (다른 페이지와 테마 통일)
4. 이미지 업로드 시 캔버스 중앙에 자동 배치
5. 왼쪽 도구 메뉴 펼치기/접기 토글 동작
6. npm run build 성공