# InsuRo 이미지 편집기 — 이미지 캔버스 중앙 배치 수정 (v5)

## 작업 레벨: Lv.2

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`

## 버그 설명
이미지 편집기에서 이미지를 업로드하면 **캔버스 좌상단(0,0)에 고정**되어 표시됨.
편집 영역(캔버스) 가운데에 이미지가 위치해야 하는데, 4회 수정(task-2289, 2293, 2295, 2297) 후에도 여전히 미해결.

## E2E 테스트 결과 (2026-04-29 Playwright 확인)
- 640x480 테스트 이미지 업로드 → 캔버스 708x603
- 픽셀 샘플링: 이미지가 (0,0)부터 약 350x320 영역에 렌더링
- 예상: scale=1 (640<708, 480<603), left=34, top=61 → 실제: left=0, top=0

## 코드 분석 (현재 상태)
파일: `src/pages/ImageEditor.tsx`

### loadImageToCanvas (라인 390~456)
```tsx
const containerRect = containerRef.current!.getBoundingClientRect();
const maxW = containerRect.width;   // 708
const maxH = containerRect.height;  // 603
const scale = Math.min(maxW / iw, maxH / ih, 1);  // 1

canvas.setDimensions({ width: canvasW, height: canvasH });

img.set({
  left: (canvasW - imgW) / 2,  // (708 - 640) / 2 = 34
  top: (canvasH - imgH) / 2,   // (603 - 480) / 2 = 61
  scaleX: scale, scaleY: scale,
});
```

### 코드는 맞아 보이지만 실제 렌더링은 (0,0)
가능한 원인 추정:
1. **fabric.js 내부 좌표 변환** — `originX/originY` 기본값이 `left/top`이 아닐 수 있음
2. **HiDPI/devicePixelRatio** — 캔버스 내부 해상도가 CSS 크기와 다를 수 있음  
3. **비동기 타이밍** — `setDimensions` 후 즉시 `img.set`이 적용되지 않을 수 있음
4. **fabric.js v6 API 차이** — `left/top`이 `originX/originY`와 결합되어 다르게 동작

## 수정 방법

### 1. originX/originY를 center로 설정하여 중앙 배치
```tsx
img.set({
  left: canvasW / 2,
  top: canvasH / 2,
  originX: 'center',
  originY: 'center',
  scaleX: scale,
  scaleY: scale,
  selectable: false,
  evented: false,
});
```
이 방식이 fabric.js에서 중앙 배치하는 표준 방법.

### 2. handleResize (라인 265~291)에도 동일하게 적용
```tsx
img.set({
  left: canvasW / 2,
  top: canvasH / 2,
  originX: 'center',
  originY: 'center',
  scaleX: scale,
  scaleY: scale,
});
```

### 3. 디버깅 로그 추가 (개발 중만)
이미지 로드 직후 실제 left/top/scaleX/scaleY 값을 console.log로 출력하여 확인.
수정 완료 후 로그 제거.

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — loadImageToCanvas + handleResize 중앙 배치)

## 검증 시나리오
1. 640x480 이미지 업로드 → 편집영역 가운데에 이미지 표시 (좌우/상하 여백 균등)
2. 1920x1080 이미지 업로드 → 캔버스에 맞게 축소 + 가운데 배치
3. 200x200 작은 이미지 → 원본 크기 + 가운데 배치
4. 브라우저 리사이즈 → 이미지가 여전히 가운데 유지
5. 크롭/필터/회전 등 편집 기능 정상 동작
6. npm run build 성공

## 참고
- containerRef: 라인 1021의 `<div className="flex-1 relative overflow-hidden ...">`
- canvasContainerRef: 라인 1057의 `<div ref={canvasContainerRef} className="block" />`
- fabric.js v6 (FabricImage.fromURL 사용 중)
- 기존 4회 수정 이력: task-2289(CSS overflow), task-2293(overflow-hidden), task-2295(CSS absolute), task-2297(JS 직접 제어)