feat: integrate latest HMDesign design system updates

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