feat: integrate latest HMDesign design system updates

examples/publisher-list/README.md

@@ -0,0 +1,22 @@
+# 공개 HM Component로 새 React 화면 제작·실행
+
+GNB_ONLY를 선택했다. 단일 서비스 목록은 전역 Header와 모바일 메뉴를 사용하며 Sidebar를 추가하지 않는다. 실제 `@hm-design/ui`의 GNB·PageHeader·Card·FilterBar·Select·Button·DataTable을 렌더링한다. Storybook helper는 사용하지 않는다.
+
+Git Clone 저장소 루트에서 AGENTS.md를 먼저 읽고 Node.js 20.x의 20.19 이상 또는 22.12 이상과 npm을 준비한다. 검증 버전은 Node 20.20.1 / npm 10.8.2다. 다음 순서로 실행한다.
+
+```sh
+npm ci
+npm run build:packages
+npm run dev:publisher-example
+```
+
+콘솔의 실제 주소를 연다. 기본 포트는 5173이며 사용 중이면 Vite가 다른 포트를 안내한다. 기존 프로세스를 종료하지 않는다. 이름 입력은 초안이며 조회 또는 Enter로 적용하고 초기화로 복원한다. 390px에서는 표의 내부 가로 스크롤을 사용한다.
+
+새 화면을 만들려면 이 폴더를 복사한 뒤 제목·data·columns와 필요한 HM Component 조합을 변경한다. CSS entry와 공개 package import를 유지한다. 검증은 루트에서 다음과 같이 한 번 실행하고 실제 브라우저 결과를 확인한다.
+
+```sh
+npm run build:publisher-example
+node scripts/ai-generation-guard.mjs --target examples/publisher-list --scope FULL_SCREEN --mode GNB_ONLY --result index.html
+```
+
+Guard의 RENDER-002는 실제 렌더링이 정적 검사만으로 확인되지 않았다는 NOT VERIFIED 표시다. 브라우저에서 검색·초기화·모바일 메뉴·utility 적용을 별도로 검증한다. `npm ci`에는 npm registry 접근이 필요하다. 현재 Git Clone에는 사전 빌드 화면이 포함되지 않는다. 위 개발 서버에서 실제 React 화면을 확인하며 Storybook은 별도 `npm run storybook`으로 6024에서 열람한다.

examples/publisher-list/hm-theme.css

@@ -0,0 +1 @@
+@import "@hm-design/ui/theme.css";

examples/publisher-list/index.css

@@ -0,0 +1,5 @@
+@import "tailwindcss" source("./");
+@import "@hm-design/ui/tailwind.css";
+@import "../../src/list-screen.css";
+.publisher-example { min-height: 100dvh; background: var(--hm-sem-bg-content); color: var(--hm-sem-fg-primary); }
+.publisher-example-main { display: grid; min-width: 0; gap: var(--hm-card-padding); padding: var(--hm-gnb-padding-x); }

examples/publisher-list/index.html

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="ko"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>HMDesign 사용자 목록 예제</title><link rel="icon" href="data:," /></head><body><div id="root"></div><script type="module" src="./main.tsx"></script></body></html>

examples/publisher-list/main.tsx

@@ -0,0 +1,32 @@
+import { StrictMode, useState } from "react"
+import { createRoot } from "react-dom/client"
+import { GNB, GNBBrand, GNBMobileMenu, GNBMobileLink, PageHeader, PageHeaderContent, PageHeaderTitle, PageHeaderDescription, Card, CardContent, FilterBar, FilterBarSearch, FilterBarActions, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button, DataTable, DataTableColumnHeader, useDataTable, type DataTableColumnDef } from "@hm-design/ui"
+import "./index.css"
+import "./hm-theme.css"
+
+// GNB_ONLY: a small list page has one service header and mobile menu. No sidebar.
+type User = { id: string; name: string; department: string }
+const users: User[] = [{ id: "1", name: "김한맥", department: "디자인" }, { id: "2", name: "이한맥", department: "개발" }, { id: "3", name: "박한맥", department: "디자인" }]
+const columns: DataTableColumnDef<User>[] = [{ accessorKey: "name", header: ({ column }) => <DataTableColumnHeader column={column} title="이름" /> }, { accessorKey: "department", header: "부서" }]
+function PublisherList() {
+  const [query, setQuery] = useState("")
+  const [department, setDepartment] = useState("all")
+  const table = useDataTable({ columns, data: users, getRowId: row => row.id })
+  const apply = () => { table.setGlobalFilter(query || undefined); table.getColumn("department")?.setFilterValue(department === "all" ? undefined : department) }
+  const reset = () => { setQuery(""); setDepartment("all"); table.resetGlobalFilter(true); table.resetColumnFilters(true) }
+  return <div className="publisher-example">
+    <GNB><GNBMobileMenu title="사용자 메뉴"><GNBMobileLink href="#users" active>사용자 목록</GNBMobileLink></GNBMobileMenu><GNBBrand href="#users"><span><small>HMDesign</small><strong>사용자 관리</strong></span></GNBBrand></GNB>
+    <main id="users" className="publisher-example-main">
+      <PageHeader><PageHeaderContent><PageHeaderTitle>사용자 목록</PageHeaderTitle><PageHeaderDescription>부서와 검색어를 입력한 뒤 조회합니다.</PageHeaderDescription></PageHeaderContent></PageHeader>
+      <Card className="min-w-0"><CardContent><div className="grid min-w-0 gap-4">
+        <form onSubmit={event => { event.preventDefault(); apply() }}><FilterBar className="hm-list-search-basic">
+          <Select value={department} onValueChange={setDepartment}><SelectTrigger size="medium" aria-label="부서"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="all">전체 부서</SelectItem><SelectItem value="디자인">디자인</SelectItem><SelectItem value="개발">개발</SelectItem></SelectContent></Select>
+          <FilterBarSearch value={query} onValueChange={setQuery} placeholder="이름 검색" />
+          <FilterBarActions><Button type="submit" variant="primary" appearance="solid">조회</Button><Button type="button" variant="cancel" appearance="outline" onClick={reset}>초기화</Button></FilterBarActions>
+        </FilterBar></form>
+        <DataTable table={table} emptyMessage="조건에 맞는 사용자가 없습니다." />
+      </div></CardContent></Card>
+    </main>
+  </div>
+}
+createRoot(document.getElementById("root")!).render(<StrictMode><PublisherList /></StrictMode>)

examples/publisher-list/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.app.json",
+  "compilerOptions": { "composite": false, "noEmit": true, "types": ["vite/client"], "tsBuildInfoFile": "../../_local/publisher-example.tsbuildinfo" },
+  "include": ["main.tsx", "vite.config.ts"]
+}

examples/publisher-list/vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import tailwindcss from "@tailwindcss/vite"
+import { fileURLToPath } from "node:url"
+export default defineConfig({ root: fileURLToPath(new URL("./", import.meta.url)), publicDir: fileURLToPath(new URL("../../public", import.meta.url)), base: "./", plugins: [react(), tailwindcss()], server: { host: "127.0.0.1" } })