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

구조

index.html # 진입 HTML폴더 구조

• main.ts진입점: VueQueryPlugin · style.css
• App.vue관리 화면: 태그 규칙(목록 · 추가 · 삭제) · 활동 기록(최근 것부터)
• style.css색 토큰(라이트/다크) · 화면 스타일

명령

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 용).