# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

INFINITH Demo — AI 마케팅 분석 플랫폼의 프론트엔드 데모. 성형외과(뷰성형외과)를 대상으로 YouTube/Instagram/Facebook/웹사이트를 분석하고, 변환 전략/로드맵/KPI를 제안하는 마케팅 리포트를 보여준다. 현재는 mock 데이터 기반이며 실제 API 연동은 미구현 상태.

## Commands

- `npm run dev` — 개발 서버 (port 3000)
- `npm run build` — 프로덕션 빌드
- `npm run lint` — TypeScript 타입 체크 (`tsc --noEmit`)
- 테스트 프레임워크 없음

## Architecture

**Stack:** React 19 + TypeScript + Vite 6 + Tailwind CSS 4 + React Router 7

**Routes** (`src/main.tsx`):
- `/` — 랜딩 페이지
- `/report/loading` — 분석 로딩 (Navbar/Footer 숨김)
- `/report/:id` — 마케팅 분석 리포트
- `/plan/:id` — 마케팅 플랜
- `/studio/:id` — 콘텐츠 스튜디오 (AI 이미지 생성)
- `/channels` — 채널 연결
- `/distribute` — 콘텐츠 배포
- `/performance` — 성과 분석

**Data flow:**
1. Pages → custom hooks (`useReport`, `useMarketingPlan`) → mock data (`src/data/`)
2. Hooks return `{ data, isLoading, error }` 패턴 (100ms delay로 API 시뮬레이션)
3. `ScreenshotContext`로 리포트 스크린샷 데이터 공유
4. `useExportPDF` 훅으로 리포트 → PDF 변환

**Type definitions** in `src/types/`:
- `report.ts` — `MarketingReport` 및 하위 타입 (YouTubeAudit, InstagramAudit, etc.)
- `plan.ts` — 마케팅 플랜 타입
- `studio.ts` — 콘텐츠 스튜디오 타입

**AI Integration:** `src/services/geminiImageGen.ts` — Gemini 2.5 Flash로 이미지 생성. `GEMINI_API_KEY` 환경변수 필요.

## Styling

- Tailwind CSS 4 (`@theme` directive in `src/index.css`)
- 폰트: Pretendard (sans), Playfair Display (serif/headings)
- 색상: `primary-900` (#0A1128), `accent` (#6C5CE7)
- 상태 색상: `status-critical`, `status-warning`, `status-good`, `status-info` (각각 bg/text/border/dot 변형)
- `glass-card` 클래스: 반투명 글래스모피즘 카드
- 애니메이션: Motion (framer-motion 후속) 사용

## Path Alias

`@/` → 프로젝트 루트 (tsconfig.json + vite.config.ts 모두 설정됨)

## Deployment

Vercel (SPA 모드 — 모든 경로 `/index.html`로 리라이트)