# nomadcode-web project rules

## 응답 언어

- 기본 응답은 한국어로 작성한다.

## 프로젝트 개요

`nomadcode-web`는 NomadCode Server의 React 웹 프론트엔드다. 현재는 Agent Chat, Project Manage, Settings 화면을 가진 초기 scaffold이며, 일부 기능은 mock 또는 placeholder 상태다. 장기적으로 `nomadcode-core` task API, 프로젝트 메타데이터, 설정/통합 상태를 연결하는 운영 UI를 담당한다.

## 기술 스택

- React `19`
- TypeScript `6`
- Vite `8`
- TanStack Router
- TanStack Query
- Zustand
- lucide-react icon
- Plain CSS

## 프로젝트 특화 컨벤션

- 라우팅은 `src/app/router.tsx`에서 TanStack Router route tree로 관리한다.
- 서버 상태 조회와 비동기 API 호출은 TanStack Query를 우선 사용한다.
- 클라이언트 UI 상태는 Zustand store에 두되, 서버 원천 데이터와 섞지 않는다.
- 현재 placeholder 함수는 실제 API 연결 전환 지점이다. 실제 연동 시 mock 로그만 제거하지 말고 에러 처리, loading 상태, 타입 계약을 함께 갱신한다.
- UI 컴포넌트는 기존 `Button`, `Card`, `EmptyState` 패턴과 `global.css` class naming을 우선 따른다.
- 아이콘은 기존처럼 `lucide-react`를 사용한다.
- `dist/`, `node_modules/`, `*.tsbuildinfo`, local env 파일은 생성물로 보고 직접 편집하지 않는다.

## 검증

- 타입 확인: `npm run check`
- 전체 검증: `npm run verify`

## 도메인 매핑

| 경로 패턴 | 도메인 | rules.md |
|----------|--------|----------|
| `src/main.tsx`, `src/app/**`, `src/layout/**`, `src/components/common/**`, `src/styles/global.css`, `index.html`, `vite.config.ts` | ui-shell | `agent-ops/rules/project/domain/ui-shell/rules.md` |
| `src/routes/AgentPage.tsx`, `src/components/agent/**`, `src/stores/agentStore.ts` | agent-workspace | `agent-ops/rules/project/domain/agent-workspace/rules.md` |
| `src/routes/ProjectsPage.tsx`, `src/components/projects/**`, `src/stores/projectStore.ts`, `src/api/projects.ts` | project-workspace | `agent-ops/rules/project/domain/project-workspace/rules.md` |
| `src/routes/SettingsPage.tsx`, `src/components/settings/**`, `src/api/client.ts`, `src/api/settings.ts`, `src/api/tasks.ts`, `.env.example` | backend-integration | `agent-ops/rules/project/domain/backend-integration/rules.md` |

## 스킬 라우팅

현재 프로젝트 전용 스킬은 없다. 반복 작업이 안정적으로 드러난 뒤 `agent-ops/skills/project/`에 추가한다.