# infinith-web

INFINITH 실서비스 프런트엔드. React 19 + Vite 6 + TypeScript + Tailwind 4.

## Quick start

```bash
# 1. 의존성
npm install

# 2. 환경변수
cp .env.example .env.development
# 기본값으로도 동작 (Vite proxy + API_KEY=change-me-dev-only)

# 3. 백엔드 기동 확인 (별도 터미널)
#    cd ../infinith-api && docker compose up -d
#    curl http://localhost:8000/health

# 4. 프런트 dev 서버
npm run dev
# → http://localhost:5173
```

## Scripts

| 명령 | 설명 |
|---|---|
| `npm run dev` | Vite 개발 서버 (port 5173, `/api/*` 프록시 → :8000) |
| `npm run build` | 프로덕션 번들 (`dist/`) |
| `npm run preview` | 빌드 결과 로컬 확인 |
| `npm run lint` | `tsc --noEmit` (타입 체크) |
| `npm run gen-types` | 백엔드 OpenAPI → `src/api-types/schema.d.ts` 재생성 |

## 구조

```
src/
├─ main.tsx              # React entry + BrowserRouter
├─ App.tsx               # 라우트 정의
├─ index.css             # Tailwind 4 @theme — brand 색상 토큰
├─ pages/                # Landing / AnalysisStart / AnalysisLoading / Report / Plan
├─ components/report/    # 23개 리포트 컴포넌트 (프로토타입에서 복사)
├─ hooks/
│  ├─ useAnalysis.ts     # POST /analyses + 상태 폴링
│  └─ useReport.ts       # GET /reports/{id} — DEMO_REPORTS 하드코딩 제거
├─ lib/
│  ├─ apiClient.ts       # axios + X-API-Key 헤더
│  ├─ transformReport.ts # 프로토타입 이식
│  └─ transformPlan.ts
├─ types/                # report.ts, plan.ts, studio.ts (프로토타입 이식)
└─ api-types/            # openapi-typescript 자동 생성 (gitignored)
```

## 타입 동기화 (백엔드 ↔ 프런트)

계약 변경 시:

1. **백엔드:** `app/schemas/*.py` 수정 + `poetry run uvicorn app.main:app` 실행
2. **프런트:** `npm run gen-types` — `src/api-types/schema.d.ts` 재생성
3. 컴포넌트에서 `import type { components } from '@/api-types/schema'` 로 사용

MVP 기간에는 `useAnalysis.ts` 등에 로컬 인터페이스도 유지 (참조용). 계약 안정화 시 제거.

## 관련 문서

- [../infinith-api/docs/API_CONTRACT.md](../infinith-api/docs/API_CONTRACT.md) — 백엔드 계약 단일 진실 소스
- [../infinith-api/docs/ONBOARDING.md](../infinith-api/docs/ONBOARDING.md) — 백엔드 온보딩

## 프로토타입과 분리 원칙

- 프로토타입 `INFINITH/` 레포는 **읽기 전용 참조**. 수정 금지 (영업 데모/광고 촬영용 유지)
- 공유하는 것: `types/*.ts`, `lib/transform*.ts`, `components/report/*` — 파일 복사로 이식
- `useReport.ts` 의 `DEMO_REPORTS` 매핑은 **MVP 에서 제거** — API-only

## 배포 (Vercel)

```bash
# 최초 1회
vercel link
vercel env add VITE_API_BASE_URL      # production URL
vercel env add VITE_API_KEY

# 배포
npm run build
vercel --prod
```