# CASTAD - Marketing Automation Frontend

마케팅 자동화를 위한 React 기반 프론트엔드 애플리케이션.
CASTAD 프론트엔드 프로젝트 입니다.

## 기술 스택

- React 19
- TypeScript
- Vite 6

## 처리 흐름

```
1. Landing Page
   └── URL 입력 → 비즈니스 분석 시작

2. Loading
   └── URL 크롤링 및 데이터 수집

3. Analysis Result
   └── 크롤링 결과 확인 (이미지, 비즈니스 정보)

4. Login
   └── 사용자 인증

5. Generation Flow (Dashboard)
   ├── 새 프로젝트 만들기
   ├── 비즈니스 설정
   ├── 에셋 관리
   ├── 사운드 스튜디오
   └── 콘텐츠 생성 완료
```

## 로컬 실행

```bash
# 의존성 설치
npm install

# recharts 설치 (대시보드용 차트 라이브러리)
npm install recharts

# 개발 서버 실행 (http://localhost:3000)
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 미리보기
npm run preview
```

## 환경 변수

| 변수 | 기본값 | 설명 |
|---|---|---|
| `VITE_API_URL` | `http://40.82.133.44` | castad 백엔드 (ADO2·썰박스) |
| `VITE_P2V_URL` | `http://localhost:8010` | Poster to Video 서버 (포스터 영상·스타일링) |

### 포스터 파이프라인 (Poster to Video)

'포스터 영상'(F1)·'포스터 스타일'(F2) 탭은 castad 백엔드가 아니라 **별도 P2V 서버**를 직접
호출한다(`src/utils/p2vApi.ts`). 붙이려면 세 가지가 필요하다:

1. P2V 서버 기동 — 저장소는 `o2o-ado2-poster-to-video`, 기본 포트 8010
2. 서버의 `P2V_ALLOWED_ORIGINS` 에 이 프론트 오리진 추가 (예: `http://localhost:3000`)
3. 첫 진입 시 화면에 뜨는 입력창에 서버의 `P2V_ACCESS_KEY` 입력 (브라우저에 저장된다)

인증이 단일 팀 키라 **내부 시연 범위**다. 대외 공개 시에는 castad 백엔드에 `/p2v/*` 프록시를
세워 카카오 인증·크레딧 차감을 얹고, 프론트는 `p2vApi.ts` 한 파일만 그쪽으로 돌리면 된다.

포스터 스타일링(F2)은 영화 포스터 레퍼런스가 저작권 자산이라 **결과물의 외부 공개·상업 사용을
금한다**(퍼블릭 도메인 명화 제외). 화면 상단과 템플릿 배지로 등급을 표시한다.

## Docker 실행

```bash
# 이미지 빌드 및 컨테이너 실행
docker-compose up --build

# 백그라운드 실행
docker-compose up -d --build

# 컨테이너 중지
docker-compose down
```

접속 URL: http://localhost:3000