# InsuRo 이미지 편집기 — 이미지 위치 중앙 정렬 (v3)

## 작업 레벨: Lv.1

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

## 버그 설명
이미지 편집기에서 이미지를 불러오면 **좌측 상단에 고정**되어 표시됨. 편집 영역 중앙에 위치해야 하는데 좌상단 꼭짓점에 붙어있고 아래에 빈 회색 공간이 많음.

## 원인 분석 (아누 확인 완료)

1. **라인 996**: 부모 컨테이너는 `flex items-center justify-center`로 중앙 정렬 시도
2. **라인 1032**: 캔버스 컨테이너 div는 `className="block"`만 있음
3. fabric.js 캔버스가 이 div 안에 동적 생성되는데, div 자체가 flex item으로서 중앙에 위치하지 않음
4. `overflow-hidden`으로 바꾸면서 스크롤이 사라졌지만, 캔버스가 좌상단에 붙는 문제는 해결 안 됨

## 수정 방법

### 핵심: 캔버스 컨테이너를 정확히 중앙에 배치

**방법 A (CSS)**: 캔버스 컨테이너에 absolute + transform 중앙 정렬
```tsx
// Before (라인 1032):
<div ref={canvasContainerRef} className="block" />

// After:
<div ref={canvasContainerRef} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
```

**방법 B (Fabric.js 캔버스 위치 조정)**: 캔버스 크기를 컨테이너 전체 크기로 설정하고, 이미지를 캔버스 중앙에 배치
```tsx
// 라인 410-417에서 이미지 위치를 중앙으로
img.set({
  left: (canvasW - iw * scale) / 2,   // 수평 중앙
  top: (canvasH - ih * scale) / 2,    // 수직 중앙
  scaleX: scale,
  scaleY: scale,
  selectable: false,
  evented: false,
});
```

★ 방법 A가 더 깔끔. fabric.js 캔버스 자체를 화면 중앙에 두면 됨.
★ 두 방법을 조합해도 됨 (캔버스 중앙 + 이미지 left/top 0,0)

### 추가: 리사이즈 핸들러에서도 동일 적용
라인 266-297의 리사이즈 핸들러에서도 캔버스 크기 재계산 시 동일 로직 적용.

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — 캔버스 컨테이너 중앙 정렬)

## 검증 시나리오
1. 작은 이미지(647x640) 불러오기 → 편집 영역 **중앙에** 표시
2. 큰 세로 이미지(1888x2230) 불러오기 → 영역에 fit + 중앙
3. 큰 가로 이미지 → 동일하게 중앙
4. 이미지 아래 빈 회색 공간 최소화
5. 크롭/텍스트 추가 등 편집 기능 정상
6. npm run build 성공