CODE_ASSISTANT/2_frontend

2_frontend — React SPA 템플릿

Vite + React + TypeScript + Tailwind + shadcn/ui + Zustand + TanStack Query 기반. 백엔드(1_backend/, FastAPI + SSE + JWT)와 연동.

시작하기

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