# InsuRo 이미지 편집기 — 작업 공간을 이미지에 맞춤

## 작업 레벨: Lv.2

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

## 문제
이미지 업로드 시 캔버스가 브라우저 영역 전체에 고정되어, 이미지 주변에 넓은 회색 여백이 남음.
Photoshop처럼 작업 공간이 이미지에 한정되어야 함.

## 현재 코드 분석
`src/pages/ImageEditor.tsx`:
- L241-244: `getCanvasSize()` — 컨테이너(브라우저 영역) 크기로 캔버스 생성
- L385-397: 이미지 로드 후 캔버스 90%에 fit 스케일링 → 중앙 배치 → 여백 넓음
- fabric.Canvas 크기가 컨테이너에 종속

## 수정 사항

### 1. 이미지 로드 후 캔버스를 이미지 크기에 맞춤
`loadImage()` 함수 (L370~):

```typescript
// 기존: 캔버스 크기 고정, 이미지를 캔버스에 맞춤
const cw = canvas.getWidth();
const ch = canvas.getHeight();
const scale = Math.min((cw * 0.9) / iw, (ch * 0.9) / ih, 1);

// 변경: 컨테이너 내에서 이미지 비율 유지하며 캔버스 크기 조정
const containerRect = containerRef.current!.getBoundingClientRect();
const maxW = containerRect.width;
const maxH = containerRect.height;
const scale = Math.min(maxW / iw, maxH / ih, 1);
const canvasW = Math.round(iw * scale);
const canvasH = Math.round(ih * scale);

canvas.setDimensions({ width: canvasW, height: canvasH });
img.set({ left: 0, top: 0, scaleX: scale, scaleY: scale });
```

### 2. 컨테이너 스타일 변경
캔버스를 컨테이너 중앙에 배치:
```tsx
{/* Center: Canvas area */}
<div className="flex-1 relative overflow-auto flex items-center justify-center bg-gray-100" ref={containerRef}>
  {/* 캔버스가 이미지 크기에 맞춰 가운데 정렬 */}
</div>
```

### 3. 배경 처리
- 캔버스 배경: 흰색 또는 투명 체커보드 (이미지 영역만)
- 컨테이너 배경: `bg-gray-100` (이미지 바깥 영역)

### 4. 윈도우 리사이즈 대응
handleResize에서도 이미지 크기 기준으로 캔버스 재조정.

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — 캔버스 크기 로직 + 컨테이너 스타일)

## 검증 시나리오
1. 작은 이미지(200x200) 업로드 → 캔버스가 이미지에 맞춤 (여백 없이 가운데)
2. 큰 이미지(4000x3000) 업로드 → 컨테이너에 fit되면서 비율 유지
3. 세로 긴 이미지 → 세로에 맞춤
4. 이미지 업로드 전 → 드롭존 표시 (기존 동작 유지)
5. 크롭/리사이즈 도구 정상 작동
6. npm run build 성공