# 관리 앱 (Vue)

태그 규칙을 관리하고 활동 기록을 본다. Vite + Vue 3 SFC + TanStack Query (:5281). 클라이언트 공통 규칙은 `docs/clients.md`, 이 파일이 이 앱에서는 우선한다.

## 구조

```
index.html               # 진입 HTML
src/
├── main.ts              # 진입점: VueQueryPlugin · style.css
├── App.vue              # 관리 화면: 태그 규칙(목록 · 추가 · 삭제) · 활동 기록(최근 것부터)
└── style.css            # 색 토큰(라이트/다크) · 화면 스타일
vite.config.ts           # 개발 서버 :5281 · /api 프록시 (→ gateway)
package.json · tsconfig.json
Dockerfile               # 이미지: dist 를 nginx 가 내주고 /api 는 API_URL(실행할 때, 기본 http://gateway:8003)로 (clients/nginx.conf.template)
```

## 명령

```bash
pnpm dev · build · typecheck · lint · format   # vite (:5281) · vite build · vue-tsc -p . · oxlint · oxfmt
docker build --build-context workspace=../../.. .   # 이미지 (이 폴더에서)
```

## 규칙

- 서버: tags 와 activity 둘. `createClient<tags.paths>({ name: 'tags' })` · `createClient<activity.paths>({ name: 'activity' })` (같은 출처).
  vite 프록시는 `/api` 를 `API_URL`(기본 gateway :8003)로 넘기고, gateway 가 `/api/tags` · `/api/activity` 를 각 서버로 나눈다. notes 는 부르지 않는다.
- 화면은 `useQuery(api.query(경로))`, 규칙 추가 · 삭제는 `useMutation` 뒤 `invalidateQueries({ queryKey: tagsApi.query('/api/tags/rules').queryKey })`.
  활동 기록은 읽기만 한다(쓰는 것은 notes 가 gRPC 로).
- 타입체크는 `vue-tsc` 라 이 앱만 TS 6(`catalog:ts6`)이다. vue-tsc 는 TS 의 JS API 를 쓰는데 TS 7 에는 아직 없다.
- 템플릿에서 `v-html` 은 쓰지 않는다(`{{ }}` 만). vue-query 가 쓰는 vue-demi 의 설치 스크립트는 꺼져 있다(기본 파일이 Vue 3 용).