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)
   ├── 새 프로젝트 만들기
   ├── 비즈니스 설정
   ├── 에셋 관리
   ├── 사운드 스튜디오
   └── 콘텐츠 생성 완료

로컬 실행

# 의존성 설치
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 실행

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

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

# 컨테이너 중지
docker-compose down

접속 URL: http://localhost:3000