# task-2203: InsuRo 이미지 편집기 크래시 수정

## 결과: 완료

## PR
- https://github.com/JonghyukJeon/InsuRo/pull/40 (머지 완료)

## 문제
이미지 편집기에서 파일 업로드 시 `NotFoundError: Failed to execute 'insertBefore' on 'Node'` 에러 발생, 흰 화면 크래시.

## 근본 원인
task-2201에서 추가된 Canvas 초기화 retry 로직(`setTimeout(initCanvas, 100)`)이 React의 DOM reconciliation과 경합:

1. **Canvas 초기화 race condition**: `setTimeout`으로 반복 시도하면서, React가 아직 DOM을 정리하지 않은 상태에서 fabric.js가 `new fabric.Canvas()`로 DOM 노드를 조작
2. **이미지 로드 시 동시 조작**: `canvas.add(img)` (fabric DOM 조작)과 `setImageLoaded(true)` (React 상태 변경 → 리렌더링)이 동일 마이크로태스크에서 실행되어, React가 reconciliation 중 fabric이 이동시킨 노드를 `insertBefore`로 삽입하려다 실패

## 수정 내용

### 1. Canvas 초기화 안정화 (`ImageEditor.tsx` line 234~267)
- `setTimeout` retry 로직 완전 제거
- `canvasInitializedRef` 플래그로 이중 초기화 방지
- canvas element가 이미 DOM에 있을 때만 초기화 실행
- cleanup에서 `fabricRef.current = null` 설정으로 dangling reference 방지

### 2. 이미지 로드 상태 변경 분리 (`ImageEditor.tsx` line 355~413)
- `canvas.add(img)` + `canvas.renderAll()` 이후 React 상태 변경을 `requestAnimationFrame()`으로 다음 프레임으로 지연
- fabric의 DOM 조작이 완료된 후에 React 리렌더링이 발생하도록 보장
- async 이미지 로딩 중 canvas가 dispose된 경우를 위한 guard 추가

## 검증
- `npm run build` 성공
- dist 갱신 완료

## 변경 파일
- `src/pages/ImageEditor.tsx` (50 insertions, 43 deletions)