# 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` 이동