lee-hyeon-cheolandClaude Fable 5.1
d4a5f20787
- backend apps/stats: GET /api/v1/admin/stats?from&to → totals / byUser / byDay. ChatMessage(assistant) 집계만, is_superuser 아니면 403. 테스트 3개 - frontend features/admin: 요약 카드 4개(요청·토큰·비용·평균 응답), 일별 토큰 막대(div), 사용자별 표, 기간 프리셋(오늘/7/30/90일). 헤더에 ADMIN 만 아이콘. 테스트 2개 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
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 같이 띄우고):
/→ ProtectedRoute가/login으로 redirecthappy@pwc.com / a1234로그인 →/chat이동- 헤더에 이메일 보임
/me클릭 → 내 정보 표시/chat메시지 보내면 SSE echo로 토큰 단위 누적- Logout →
/login이동