# InsuRo 이미지 편집기 — 사이드바 토글 버튼 위치 수정

## 작업 레벨: Lv.1

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

## 문제
이미지 편집기 왼쪽 사이드바의 펼치기/접기 토글 버튼(`>`)이 메뉴 아이콘 영역과 겹침.
제이회장님 지시: "영역의 좌측이 메뉴 전체 오른쪽에 딱 붙어서 위치해야 해"

## 현재 코드
`src/pages/ImageEditor.tsx` (966-972줄):
```tsx
<button
  onClick={() => setSidebarExpanded(!sidebarExpanded)}
  className="absolute -right-3 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-6 h-12 rounded-r-xl bg-white border border-l-0 border-gray-200 shadow-sm text-gray-400 hover:text-gray-700 hover:bg-gray-50 transition-colors"
  title={sidebarExpanded ? "메뉴 접기" : "메뉴 펼치기"}
>
```

- `absolute -right-3`: 사이드바 오른쪽 끝에서 -12px 위치 → 버튼 절반이 사이드바 위에 겹침
- 버튼 크기: `w-6` (24px)

## 수정 사항

### 토글 버튼 위치 조정
`-right-3` → `right-0 translate-x-full` 또는 `-right-6` (버튼 전체가 사이드바 바깥으로)

**핵심**: 버튼의 **왼쪽 가장자리**가 사이드바 컨테이너의 **오른쪽 끝**에 딱 붙어야 함.

방법 1 (추천): 
```tsx
className="absolute right-0 translate-x-full top-1/2 -translate-y-1/2 ..."
```
→ right-0(사이드바 끝) + translate-x-full(자기 너비만큼 오른쪽)로 사이드바 바로 바깥에 위치

방법 2:
```tsx
className="absolute -right-6 top-1/2 -translate-y-1/2 ..."
```
→ -right-6(-24px)로 w-6 버튼 전체를 바깥으로 이동

### 주의
- 사이드바 컨테이너에 `overflow-visible` 이미 설정되어 있음 (932줄) → 버튼이 잘리지 않음
- 버튼이 캔버스 영역과 겹치지 않는지 확인

## affected_files
- `src/pages/ImageEditor.tsx` (수정 — 토글 버튼 className 위치 값 변경)

## 검증 시나리오
1. 사이드바 접힘 상태 → 토글 버튼이 메뉴 아이콘과 겹치지 않음
2. 토글 버튼 왼쪽이 사이드바 오른쪽 끝에 딱 붙어 있음
3. 펼치기/접기 기능 정상 작동
4. 캔버스 영역과 겹치지 않음
5. npm run build 성공