87 lines
2.9 KiB
Markdown
87 lines
2.9 KiB
Markdown
# 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
|
|
```
|