feat: integrate latest HMDesign design system updates

src/patterns/gnb.stories.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, type CSSProperties, type MouseEvent, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { BellIcon, ChartColumnIcon, LayoutGridIcon, SearchIcon, SettingsIcon, type LucideIcon } from "lucide-react"
+import { BellIcon, ChartColumnIcon, SearchIcon, SettingsIcon, type LucideIcon } from "lucide-react"
 import {
   Avatar,
   AvatarFallback,
@@ -52,6 +52,7 @@ import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/compon
 // the content, White 2-depth panel, text-only profile); every part inside is an HM component. The menu data, the user and the current
 // location below are local sample data for this Story only (no network, no auth, no router). The desktop / mobile switch follows the
 // viewport (1024px): narrow the Story to 390px to see the hamburger and the Sheet menu.
+// GNBUser's default accessible name includes both the visible name and description; explicit labels must preserve them.
 
 type Destination = { id: string; label: string }
 type NavItem = { id: string; label: string; children?: Destination[] }
@@ -339,7 +340,7 @@ function StickyPage() {
 // Consumer-owned data and route state; every menu face/disclosure is an existing public LNB part.
 type SidebarNode = { id: string; label: string; icon?: LucideIcon; children?: SidebarNode[] }
 const sidebarNodes: SidebarNode[] = [
-  { id: "dashboard", label: "대시보드", icon: LayoutGridIcon },
+  { id: "dashboard", label: "대시보드" },
   {
     id: "projects", label: "프로젝트 관리", children: [
       { id: "projects/design", label: "디자인 관리", children: [
@@ -366,7 +367,7 @@ const sidebarGnbItems: NavItem[] = navItems.map(item => item.id === "projects" ?
   ],
 } : item)
 
-function SidebarPage({ fullHeight = false }: { fullHeight?: boolean }) {
+function SidebarPage({ fullHeight = false, color = "green" }: { fullHeight?: boolean; color?: "green" | "brown" }) {
   const [current, setCurrent] = useState("projects/design/tokens")
   const [groups, setGroups] = useState<Record<string, boolean>>({ projects: true, "projects/design": true })
   const [mobileOpen, setMobileOpen] = useState(false)
@@ -400,7 +401,7 @@ function SidebarPage({ fullHeight = false }: { fullHeight?: boolean }) {
     <LNBMobileLink key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>{node.label}</LNBMobileLink>
   ))
   return (
-    <div data-hm-gnb-layout="sidebar" style={{ height: fullHeight ? "100dvh" : 560 }}>
+    <div data-hm-gnb-layout="sidebar" data-hm-color={color} style={{ height: fullHeight ? "100dvh" : 560 }}>
       <Bar items={sidebarGnbItems} current={current} onCurrent={setCurrent}
         mobileMenuOpen={mobileOpen} onMobileMenuOpenChange={setMobileOpen}
         mobileChildren={<div data-slot="lnb-mobile-nav">{mobileMenu(sidebarNodes)}</div>} />
@@ -485,9 +486,10 @@ export const All: Story = {
         <StickyPage />
       </StorySection>
       <StorySection title="Usage · GNB Sidebar"
-        description="GNB ONLY 내부 Sidebar입니다. 기존 LNB 메뉴를 그대로 사용하고 외곽 배경만 Green Light 2로 바꿉니다. 모바일은 GNB의 단일 Sheet에 같은 메뉴를 표시합니다.">
+        description="기존 Reference 전용 콘텐츠 LNB입니다. 본문과 같은 배경, 세로 구분선 하나, 아이콘 기본 생략·화살표 유지. 신규 AI GNB_ONLY 화면에는 Sidebar를 생성하지 않습니다.">
         <SidebarPage />
       </StorySection>
+      <StorySection title="Usage · Brown 콘텐츠 LNB" description="기존 Reference의 Brown 선택·Hover를 비교합니다. Green 선택색을 혼용하지 않습니다."><SidebarPage color="brown" /></StorySection>
     </StoryPage>
   ),
 }