48 lines
1.7 KiB
Markdown
48 lines
1.7 KiB
Markdown
# 2_frontend — React SPA 템플릿
|
|
|
|
Vite + React + TypeScript + Tailwind + shadcn/ui + Zustand + TanStack Query 기반.
|
|
백엔드(`1_backend/`, FastAPI + SSE + JWT)와 연동.
|
|
|
|
## 시작하기
|
|
|
|
```bash
|
|
npm install
|
|
cp .env.example .env
|
|
npm run dev # http://localhost:5173
|
|
```
|
|
|
|
백엔드도 같이 띄울 것: `cd ../1_backend && uv run uvicorn main:app --reload --reload-dir src --port 8001 --app-dir src`
|
|
|
|
## 주요 명령
|
|
|
|
| 명령 | 설명 |
|
|
| ---------------- | ------------------ |
|
|
| `npm run dev` | dev 서버 (5173) |
|
|
| `npm run build` | 프로덕션 빌드 |
|
|
| `npm run lint` | ESLint |
|
|
| `npm run test` | Vitest 단위 테스트 |
|
|
| `npm run format` | Prettier 포맷 |
|
|
|
|
자세한 설계: `../docs/superpowers/specs/2026-05-05-frontend-template-design.md`
|
|
|
|
## 검증 완료 (2026-05-05)
|
|
|
|
- 부트스트랩 (Vite + TS + Tailwind + ESLint + Prettier 설정)
|
|
- core lib (tokenStore, api client + 401 refresh, SSE wrapper, queryClient, cn)
|
|
- shared (shadcn/ui core, Layout, ProtectedRoute, ErrorBoundary)
|
|
- features/auth (schemas, store, api, hooks, components, pages)
|
|
- features/users (api, hooks, MePage)
|
|
- features/chat (store, SSE wrapper, hook, components, ChatPage)
|
|
- routing + Provider 와이어업
|
|
|
|
테스트 34개 통과, lint 깨끗, build 성공.
|
|
|
|
수동 시나리오 검증 (백엔드 8001 + 프론트 5173 같이 띄우고):
|
|
|
|
1. `/` → ProtectedRoute가 `/login` 으로 redirect
|
|
2. `happy@pwc.com / a1234` 로그인 → `/chat` 이동
|
|
3. 헤더에 이메일 보임
|
|
4. `/me` 클릭 → 내 정보 표시
|
|
5. `/chat` 메시지 보내면 SSE echo로 토큰 단위 누적
|
|
6. Logout → `/login` 이동
|