# 대시보드 배너 에디터 탭 구축

## 목적
대시보드(http://100.76.130.39:8000)에 "배너 에디터" 탭 추가. 제이회장님이 노트북 브라우저에서 직접 배너의 텍스트 위치/크기/자간 등을 드래그&드롭으로 미세 조정하고, 수정 결과를 PNG로 저장할 수 있도록.

## 핵심 기능

### 1. 배너 목록
- `/home/jay/workspace/output/google-ads/banners/m1/`, `m2/`, `m3/` 스캔
- 각 배너의 썸네일 + 이름 표시
- 클릭 시 에디터 모드 진입

### 2. 에디터 캔버스
배너의 HTML 템플릿을 로드하여 편집 가능한 캔버스 제공:

**편집 가능 요소:**
- 텍스트 요소 선택 → 드래그로 위치 이동
- 선택한 텍스트의 속성 편집 패널:
  - 폰트 크기 (슬라이더 또는 숫자 입력)
  - 자간 letter-spacing (슬라이더)
  - 행간 line-height (슬라이더)
  - 폰트 굵기 font-weight (드롭다운)
  - 텍스트 색상 (컬러 피커)
  - 텍스트 내용 편집 (인라인 에디팅)
- CTA 버튼: 크기 조절, 텍스트 편집, 색상 변경
- 반투명 오버레이: opacity 슬라이더

**편집 불가 요소:**
- 배경 이미지 (Gemini 생성 배경은 그대로 유지)

### 3. PNG Export
- "PNG 저장" 버튼 클릭 → html2canvas 또는 dom-to-image로 캡처
- 원본 해상도 유지 (1200x628 / 1080x1080)
- 서버에 저장 + 다운로드 제공

### 4. 원본 복원
- "원본 복원" 버튼 → 수정 전 상태로 되돌리기
- 수정 히스토리 (undo/redo) 지원

## 기술 구현

### 서버 (server.py)
- `GET /api/banner-editor/list` — 배너 목록 (파일명, 사이즈, 썸네일 경로)
- `GET /api/banner-editor/html/<banner_id>` — 배너 HTML 템플릿 반환
  - gen_*.py 스크립트에서 HTML 추출 또는 별도 HTML 파일 생성
- `POST /api/banner-editor/save` — 수정된 HTML을 Playwright로 렌더링하여 PNG 저장

### 프론트엔드 (components/BannerEditorView.js)
- React 컴포넌트
- 배너 HTML을 iframe 또는 div에 로드
- 텍스트 요소에 드래그 핸들 오버레이
- 우측 속성 편집 패널
- html2canvas로 클라이언트 사이드 PNG 캡처 (또는 서버 사이드 Playwright 렌더링)

### HTML 템플릿 추출
현재 gen_*.py 스크립트에서 HTML을 생성하는 부분을 분리:
- 각 배너의 HTML을 `banners/{m1|m2|m3}/{banner_id}.html`로 저장
- 에디터에서 이 HTML을 로드하여 편집
- 편집 후 수정된 HTML을 서버로 전송 → Playwright로 PNG 렌더링

## 참고
- 대시보드 서버: `/home/jay/workspace/dashboard/server.py`
- 대시보드 컴포넌트: `/home/jay/workspace/dashboard/components/`
- 기존 배너 스크립트: `/home/jay/workspace/tools/ai-image-gen/gen_m*.py`
- 배너 출력: `/home/jay/workspace/output/google-ads/banners/`

## UI 참고
- 기존 대시보드 탭 스타일과 통일
- Canva/Figma 같은 직관적 에디터 UX 참고
- 모바일 대응 불필요 (노트북 브라우저 전용)

## 변경 대상
- 수정: `dashboard/server.py` (API 엔드포인트 추가)
- 수정: `dashboard/components/App.js` (탭 추가)
- 신규: `dashboard/components/BannerEditorView.js`
- 신규: HTML 템플릿 파일들 (gen_*.py에서 추출)