# Task-2201 보고서: InsuRo 이미지/PDF 편집기 E2E 검증 + 버그 수정

## 작업자: 다그다 (개발3팀장)
## 일시: 2026-04-26
## PR: https://github.com/JonghyukJeon/InsuRo/pull/39 (merged)
## 브랜치: task-2201-dev3 → main

---

## 발견된 버그 및 수정 내역

### Bug 1: [Critical] 이미지 편집기 — Canvas 초기화 실패 → 이미지 로드 불가
- **근본 원인**: DashboardLayout의 `useOnboardingRedirect()` 훅이 `onboardingLoading=true` 상태일 때 children을 렌더하지 않고 Loader 스피너만 표시. 이 시점에서 ImageEditor의 `useEffect`가 이미 실행되었으나 `canvasElRef.current`가 null이어서 Fabric.js Canvas 초기화가 skip됨. 이후 onboarding 로딩이 완료되어 children이 렌더되어도 `useEffect`가 재실행되지 않아 Canvas가 영구적으로 초기화되지 않는 상태
- **수정**:
  1. `useEffect` 내에서 `canvasElRef.current`가 null이면 100ms 간격으로 retry하는 로직 추가
  2. cleanup 시 retry timer 해제 및 안전한 dispose 처리
  3. blob/data URL에 `crossOrigin: null` 적용 (불필요한 CORS 요청 방지)
- **파일**: `src/pages/ImageEditor.tsx`

### Bug 2: [Critical] 사이드바 메뉴 미등록
- **근본 원인**: 두 개의 독립된 네비게이션 설정이 존재:
  - `routes.ts` — 라우트 정의 + AppSidebar용 section 매핑 (이미지/PDF 편집기 등록됨)
  - `navigationConfig.ts` — TopNavBar + ContextSubMenu용 하드코딩 항목 (이미지/PDF 편집기 **누락**)
  - 현재 UI는 `navigationConfig.ts` 기반 네비게이션을 사용하므로 사이드바에 미표시
- **수정**:
  1. `navigationConfig.ts`의 "분석 & 도구" 섹션에 PDF 편집기, 이미지 편집기 추가
  2. 인포키워드도 함께 추가 (premiumOnly 플래그 포함)
  3. 메디스캔 아이콘을 Sparkles → Search로 수정 (routes.ts와 일치)
- **파일**: `src/components/navigation/navigationConfig.ts`

### 추가 수정: 인포키워드 section 누락
- `routes.ts`에서 인포키워드에 `section: "분석&도구"` 추가 (AppSidebar 호환)
- **파일**: `src/config/routes.ts`

---

## E2E 검증 결과

### 이미지 편집기

1. 이미지 로드: **PASS** — Fabric.js Canvas 초기화 확인 (708x603, lower-canvas + upper-canvas 정상 생성). FabricImage.fromURL blob URL 로드 정상
2. 크롭: **SKIP** — 파일 업로드 이벤트 트리거 한계 (Playwright 환경)
3. 필터 (밝기 슬라이더): **SKIP** — 위와 동일
4. 좌우 반전: **SKIP** — 위와 동일
5. Undo: **SKIP** — 위와 동일
6. 텍스트 삽입: **SKIP** — 위와 동일
7. 모자이크: **SKIP** — 위와 동일
8. 다운로드: **SKIP** — 위와 동일
9. 콜라주: **SKIP** — 위와 동일
10. 사이드바 메뉴 접근: **PASS** — "분석 & 도구" 사이드바에 "이미지 편집기" 메뉴 표시 확인

### PDF 편집기

1. PDF 로드: **SKIP** — Playwright 환경 한계
2. 줌 인/아웃: **SKIP**
3. 합치기: **SKIP**
4. 나누기: **SKIP**
5. 서명: **SKIP**
6. 변환: **SKIP**
7. 주석: **SKIP**
8. 사이드바 메뉴 접근: **PASS** — "분석 & 도구" 사이드바에 "PDF 편집기" 메뉴 표시 확인

### E2E 테스트 제한 사항
- Mock 인증 세션(localStorage 주입)을 사용하여 AuthGuard를 우회했으나, Supabase API 호출은 401 에러 반환
- Playwright의 file input setFiles/fileChooser가 React의 synthetic onChange를 트리거하지 못하는 환경 한계로 파일 업로드 기반 시나리오 검증 불가
- Canvas 초기화 및 FabricImage.fromURL 동작은 `page.evaluate`를 통한 직접 JS 실행으로 검증 완료

---

## 추가 개선 필요사항
- **jszip 패키지 누락**: `useImageBatch.ts`에서 jszip을 import하나 package.json에 미등록. 빌드 시 `npm install jszip` 필요 (이번 작업에서 설치 완료, package-lock.json에 반영됨)
- **네비게이션 설정 이중화**: `routes.ts`와 `navigationConfig.ts`가 독립적으로 관리되어 동기화 이슈 발생 위험. 장기적으로 단일 source-of-truth로 통합 권장
- **콘텐츠 캘린더 사이드바 누락**: `routes.ts`에 등록되어 있으나 `navigationConfig.ts`의 "AI 마케팅" 섹션에 미포함
- **프로덕션 E2E 테스트**: 실제 Supabase 인증 환경에서의 전체 시나리오 테스트 필요

---

## npm run build 결과
- ✅ 빌드 성공 (12.02s)
- 153 precache entries (5537.83 KiB)