lee-hyeon-cheolandClaude Fable 5.1
5998944f09
세션 생성(OpenCode 왕복)이 느리면 헤로 화면에 '응답 중' 만 떠서 안 넘어간 것처럼 보였고, 실패하면 pending 이 안 풀려 영원히 갇혔음. - 전송 순간 헤로 → 내 말풍선 + 시머(SessionChatPage 첫 화면과 같은 모양) - mutate 콜백 패턴(SnapUserControls 와 동일): onSuccess 이동, onError 헤로 복귀 + 토스트 - 테스트 3개(훅 mock, SnippetPalettePage.test 패턴) 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이동