# InsuRo 이미지 편집기 — 이미지 fit 재수정 (v2)

## 작업 레벨: Lv.1

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

## 버그 설명
task-2289에서 이미지 fit을 수정했으나 여전히 문제:
- 세로로 긴 이미지(1888x2230) 업로드 시 아래쪽이 잘리고 빈 회색 영역이 많음
- 이미지가 작업영역 전체를 채우지 못함

## 원인 분석 (아누 확인 완료)
`src/pages/ImageEditor.tsx`:

1. **라인 996**: `overflow-auto` → 이미지가 컨테이너보다 크면 스크롤 발생. `overflow-hidden`이어야 함
2. **라인 404**: `Math.min(maxW/iw, maxH/ih)` 는 contain 방식으로 맞지만, containerRef의 높이가 화면 가용 높이와 다를 수 있음
3. **컨테이너 높이 문제**: flex-1이지만 실제 렌더링 시 getBoundingClientRect()가 반환하는 height가 화면 가용 높이보다 작을 수 있음

## 수정 방법

### 1. 컨테이너 overflow 변경
```tsx
// Before (라인 996):
<div className="flex-1 relative overflow-auto flex items-center justify-center bg-gray-100" ref={containerRef}>

// After:
<div className="flex-1 relative overflow-hidden flex items-center justify-center bg-gray-100" ref={containerRef}>
```

### 2. 캔버스 크기 계산 시 여백 확보
라인 401-406에서 컨테이너 크기를 가져올 때 상하 여백(padding)을 고려:
```tsx
const containerRect = containerRef.current!.getBoundingClientRect();
const maxW = containerRect.width - 20;   // 좌우 10px 여백
const maxH = containerRect.height - 20;  // 상하 10px 여백
const scale = Math.min(maxW / iw, maxH / ih, 1);  // 1 이하로 제한 (확대 방지)
```

★ `Math.min(..., 1)` 추가 — 작은 이미지를 확대하지 않도록. 원본보다 커지면 안 됨.

### 3. 이미지 위치 중앙 정렬 확인
캔버스가 컨테이너 중앙에 위치하는지 확인. flex items-center justify-center로 이미 중앙이지만, 캔버스 크기가 컨테이너보다 크면 overflow-hidden으로 잘릴 수 있으므로 scale이 정확해야 함.

### 4. 윈도우 리사이즈 대응
라인 266-297의 리사이즈 핸들러에서도 동일한 로직 적용 (maxW-20, maxH-20, scale ≤ 1).

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — overflow-hidden + 캔버스 크기 계산 보정)

## 검증 시나리오
1. 세로로 긴 이미지(1888x2230) 업로드 → 작업영역에 꽉 차게 표시 (스크롤 없음)
2. 가로로 긴 이미지 업로드 → 동일하게 fit
3. 작은 이미지 업로드 → 확대 없이 원본 크기 (또는 적절한 크기)
4. 빈 회색 영역 최소화
5. 크롭 기능 정상 동작
6. 브라우저 리사이즈 시 이미지 재조정
7. npm run build 성공