# 배너 에디터 Phase 2: 마무리 + 레이어/투명도 편집 기능 추가

## 배경
task-1344.1(1팀)에서 배너 에디터 기본 구조가 생성됐으나 토큰 소진으로 미완성. .done/보고서 없음.

## 기존 산출물 (확인 후 이어서 작업)
- `dashboard/components/BannerEditorView.js` (905줄) — 프론트엔드 컴포넌트
- `dashboard/server.py` — API 3개 라우트 추가됨:
  - `GET /api/banner-editor/list`
  - `GET /api/banner-editor/html/<banner_id>`
  - `POST /api/banner-editor/save`
- `dashboard/components/App.js` — 탭 등록

## Phase 2 작업

### 1. 기존 코드 동작 검증
- 대시보드 서버 재시작 (`python3 dashboard/server.py`)
- 배너 에디터 탭 진입 → 배너 목록 로드 확인
- 배너 선택 → HTML 로드 + 편집 기능 확인
- PNG Export 기능 확인
- 오류 있으면 수정

### 2. 추가 기능 구현 (제이회장님 요청)

#### 텍스트 박스/컨테이너 편집
- 텍스트 박스 선택 시 **리사이즈 핸들** (8방향) 표시
- 드래그로 너비/높이 조절
- 텍스트 박스 위치 드래그 이동

#### 사각형 레이어 (오버레이 패널, 뱃지 배경 등)
- 사각형 요소 선택 → 리사이즈/이동 가능
- **배경색** 변경 (컬러 피커)
- **투명도** 조절 (opacity 슬라이더, 0~1 범위, 0.01 단위)
- **둥글기** 조절 (border-radius 슬라이더, 0~50px)
- **그림자** on/off + 세기 조절 (box-shadow)

#### 레이어 관리
- 레이어 목록 패널 (좌측 또는 우측)
- 레이어 순서 변경 (z-index 드래그)
- 레이어 보이기/숨기기 토글
- 레이어 잠금/해제 (편집 방지)

#### 기존 텍스트 편집 기능 보강
- 폰트 크기 슬라이더
- 자간 letter-spacing 슬라이더 (-0.1em ~ 0.1em)
- 행간 line-height 슬라이더
- 폰트 굵기 드롭다운
- 텍스트 색상 컬러 피커
- 인라인 텍스트 편집 (더블클릭)

### 3. PNG Export 개선
- html2canvas 또는 dom-to-image로 클라이언트 사이드 캡처
- 원본 해상도 유지 (1200x628 / 1080x1080)
- "다운로드" + "서버 저장" 2가지 옵션

### 4. UX 개선
- 원본 복원 버튼
- Undo/Redo (Ctrl+Z / Ctrl+Shift+Z)
- 선택 요소 하이라이트 (파란 테두리)
- 속성 패널은 우측 사이드바 형태

## 대상 파일
- 수정: `dashboard/components/BannerEditorView.js`
- 수정: `dashboard/server.py` (필요 시 API 보강)
- 수정: `dashboard/components/App.js` (필요 시)

## 참고
- 배너 HTML 템플릿 구조: gen_m*.py 스크립트에서 생성되는 HTML 확인
- 배너 경로: `/home/jay/workspace/output/google-ads/banners/m1/`, `m2/`, `m3/`
- 대시보드 서버: `http://100.76.130.39:8000`