# KINTEX AI 전시관리 — Frontend

React 18 + Vite 5 + TypeScript. 백엔드(Spring Boot :8080) 계약(`_workspace/01_backend_contracts.md`) 기반.

## 개발
```bash
npm install
npm run dev        # Vite 개발 서버 :5173 (/api·/ws → :8080 프록시)
npm run typecheck  # tsc -b (타입 체크)
npm run build      # tsc -b && vite build
```

`.env.example` → `.env` 복사. `VITE_BACKEND_ORIGIN`으로 백엔드 오리진 지정(기본 `http://localhost:8080`).

## 구조
- `src/styles/tokens.css` — 디자인 토큰 **단일 출처**(design.md §1). 하드코딩 금지, 이 변수만 참조.
- `src/api/` — `client`(JWT·봉투·오류코드), `endpoints`(계약 래퍼), `types`(응답 shape), `websocket`(STOMP RenderJob).
- `src/store/authStore.ts` — 인증/워크스페이스 상태(zustand).
- `src/components/ui/` — StatusBadge·DdayChip·AiLabel·Button·AiImage(워터마크 상시)·States.
- `src/components/layout/AppShell.tsx` — 인증 셸(사이드바+상단바).
- `src/screens/login/` — SCR-01 로그인·워크스페이스·초대(등록업체 차단).
- `src/screens/floorplan/` — SCR-03 배치 에디터(SVG 캔버스·AI 자동배치·검증).

## 원칙
- 백엔드 응답 shape과 정확히 일치. 불일치는 `_workspace/02_frontend_progress.md`에 기록.
- AI 생성 이미지 워터마크·고지문 제거 불가. 접근성 WCAG AA.
- 캔버스 편집은 데스크톱 전용(모바일은 뷰어+승인).