# InsuRo 이미지 편집기 — 이미지 업로드 시 크래시 수정

## 작업 레벨: Lv.2

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

## 배경
이미지 편집기에서 파일 업로드 시 React DOM 에러로 흰 화면 크래시 발생.

## 에러 상세
```
NotFoundError: Failed to execute 'insertBefore' on 'Node': 
The node before which the new node is to be inserted is not a child of this node.
```
파일 업로드 → 이미지 로드 시 fabric.js Canvas가 DOM 노드를 조작하면서 React의 가상 DOM과 충돌.

## 추정 원인
task-2201에서 추가한 Canvas 초기화 retry 로직(`setTimeout(initCanvas, 100)`)이 문제일 수 있음:
- Canvas가 아직 완전히 마운트되지 않은 상태에서 초기화
- 또는 이미지 로드 시 Canvas DOM 조작이 React 렌더 사이클과 충돌
- `src/pages/ImageEditor.tsx` line 232~263 영역 (useEffect 내 initCanvas)

## 수정 방향
1. fabric.js Canvas 초기화를 React 렌더 사이클과 안전하게 분리
   - `useRef` + `useCallback`으로 Canvas 인스턴스 관리
   - DashboardLayout 로딩 완료 후 초기화 보장
2. 이미지 로드 함수(`loadImage`)에서 DOM 조작 순서 확인
3. 상태 변경(`setImageLoaded` 등)이 Canvas DOM 조작과 동시에 일어나지 않도록 `requestAnimationFrame` 또는 `queueMicrotask`로 분리
4. ErrorBoundary 추가하여 크래시 시 흰 화면 대신 에러 메시지 표시

## 디버깅 방법
1. `npm run dev`로 개발 서버 실행 (port 8080 또는 다른 포트)
2. 브라우저에서 /tools/image-editor 접속
3. 이미지 파일 업로드
4. 콘솔 에러 확인 + 정상 로드 확인

## affected_files
- `src/pages/ImageEditor.tsx` (수정)

## 검증 시나리오
1. 이미지 편집기 접속 → UI 정상 표시
2. 이미지 파일 업로드 → Canvas에 이미지 정상 표시 (크래시 없음)
3. 크롭/필터 등 기본 기능 동작 확인
4. `npm run build` 성공
5. 빌드 후 dist에서도 이미지 업로드 정상 동작

## 주의사항
- 수정 후 반드시 `npm run build` 실행하여 프로덕션 빌드 갱신
- 기존 기능(크롭/필터/오버레이/AI) 회귀 없어야 함