# 가벼운 웹 앱 (순수 TS)

프레임워크 없는 메모 앱. Vite (:5283). 클라이언트 공통 규칙은 `docs/clients.md`, 이 파일이 이 앱에서는 우선한다.

## 구조

```
index.html               # 진입 HTML
src/
├── main.ts              # 메모 화면: api.get · post · delete 뒤 목록(태그 칩)을 다시 그린다
└── style.css            # 색 토큰(라이트/다크) · 여러 화면이 함께 쓰는 스타일
vite.config.ts           # 개발 서버 :5283 · /api 프록시
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 (:5283) · vite build · tsc -p . (TS 7) · oxlint · oxfmt
docker build --build-context workspace=../../.. .   # 이미지 (이 폴더에서)
```

## 규칙

- 서버: notes 하나. `createClient<notes.paths>()` (같은 출처). vite 프록시가 `/api` 를 `API_URL`(기본 gateway :8003)로 넘기고, gateway 가 notes 로 보낸다.
- 프레임워크가 없어 `api.get` · `api.post` · `api.delete` 를 그대로 쓰고, 쓴 뒤 목록을 다시 받는다. 화면 문자열(메모 · 태그)은 `textContent` 로만 넣는다.
- 스타일: 전역 `src/style.css` 는 색 토큰(라이트/다크)과 여러 화면이 함께 쓰는 것(지금은 카드 · 입력칸 · 버튼 · 머리글)만.
  한 컴포넌트만 쓰는 스타일은 옆의 `Component.css` 에 두고 그 컴포넌트에서 import 한다. 엔트리는 `style.css` 를 먼저 import.