84 lines
2.8 KiB
Markdown
84 lines
2.8 KiB
Markdown
# Functional Design Plan — Unit 1: Project Scaffold & Infrastructure
|
|
|
|
## Unit Context
|
|
- Unit: Unit 1 — Project Scaffold & Infrastructure
|
|
- Type: Frontend (Vite + React + TypeScript)
|
|
- Depends on: Unit 0 (CORS + cookie-based auth ready)
|
|
- Goals:
|
|
- Initialize frontend workspace with TanStack Router, shadcn/ui, Tailwind v4
|
|
- Set primary color to `#ac0000`
|
|
- Provide `ApiClient` and `AuthContext` foundations aligned with cookie-based auth (httpOnly refresh cookie, access token in memory)
|
|
|
|
## Plan Checklist
|
|
- [ ] Confirm scaffold strategy and tools via questions below
|
|
- [ ] Generate folder structure (`src/api`, `src/auth`, `src/components`, `src/routes`)
|
|
- [ ] Install and configure dependencies (TanStack Router, @tanstack/react-query, Tailwind v4, shadcn/ui)
|
|
- [ ] Configure Tailwind theme with primary color `#ac0000`
|
|
- [ ] Initialize TanStack Router with root route and placeholders
|
|
- [ ] Create `AuthContext` (in-memory access token + user) and `useAuth` hook
|
|
- [ ] Create `ApiClient` (fetch wrapper) with `credentials: 'include'` and 401 handling
|
|
- [ ] Add `.env.example` with `VITE_API_BASE_URL`
|
|
- [ ] README: local dev instructions
|
|
|
|
---
|
|
|
|
Please answer the following questions by filling in the letter after each `[Answer]:` tag.
|
|
|
|
## Question 1: Package manager
|
|
A) pnpm (recommended)
|
|
B) npm
|
|
C) yarn
|
|
X) Other (please describe after the [Answer]: tag below)
|
|
|
|
[Answer]:
|
|
|
|
## Question 2: Router choice
|
|
A) TanStack Router (required by NFR-01)
|
|
B) React Router
|
|
X) Other (please describe after the [Answer]: tag below)
|
|
|
|
[Answer]:
|
|
|
|
## Question 3: UI foundation
|
|
A) Tailwind v4 + shadcn/ui (recommended)
|
|
B) Tailwind v4 only (no shadcn/ui)
|
|
X) Other (please describe after the [Answer]: tag below)
|
|
|
|
[Answer]:
|
|
|
|
## Question 4: Primary color integration (`#ac0000`)
|
|
A) Tailwind theme config (extend colors + use via utility classes)
|
|
B) CSS variables (root-level var, consumed by components)
|
|
X) Other (please describe after the [Answer]: tag below)
|
|
|
|
[Answer]:
|
|
|
|
## Question 5: HTTP client layer
|
|
A) Fetch wrapper (`ApiClient`) with `credentials: 'include'` + JSON helpers (recommended)
|
|
B) Axios instance with `withCredentials: true`
|
|
X) Other (please describe after the [Answer]: tag below)
|
|
|
|
[Answer]:
|
|
|
|
## Question 6: API base URL source
|
|
A) `import.meta.env.VITE_API_BASE_URL` (from `.env`)
|
|
B) Derive from `window.location.origin` + `/api`
|
|
X) Other (please describe after the [Answer]: tag below)
|
|
|
|
[Answer]:
|
|
|
|
## Question 7: Session bootstrap behavior
|
|
A) On app mount, attempt silent refresh (uses httpOnly cookie) to hydrate `AuthContext` (recommended)
|
|
B) Do not auto-refresh on mount; rely on login flow and 401 handling
|
|
X) Other (please describe after the [Answer]: tag below)
|
|
|
|
[Answer]:
|
|
|
|
## Question 8: Linting/formatting baseline
|
|
A) ESLint (recommended) + Prettier with sensible defaults
|
|
B) ESLint only
|
|
C) None for now
|
|
X) Other (please describe after the [Answer]: tag below)
|
|
|
|
[Answer]:
|