infinith-web

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

Quick start

# 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/ONBOARDING.md — 백엔드 온보딩

프로토타입과 분리 원칙

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

배포 (Vercel)

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

# 배포
npm run build
vercel --prod