leehc991028andClaude Fable 5.1
9c6b28782d
DESIGN_SYSTEM.md 의 Dark Workspace 토큰을 shadcn 토큰으로 이식(다크 기본, radius 8px, success/warning/shadow-float), 시스템 산세리프, PwC 로고(LogoMark). 목록·새 대화·대화· 로그인 화면을 가운데 760px 열로 통일하고, 떠 있던 테마·로그아웃 상자는 상단 바로, 말풍선은 다크 토큰(AI 답변은 상자 없이), ABAP 흰 에디터 룩은 라이트 모드에서만. 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이동