style(storybook): refine patterns data and layout stories

src/patterns/gnb.stories.tsx

@@ -46,6 +46,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // GNB is a composition pattern. Layout visual reference is the ui-viz GNB (green 70px bar, centered menu, Beige current item joined to
@@ -308,12 +309,14 @@ function Bar({
 }
 
 // The bar with the content that follows it (the GNB Mode page owns this part; here it only shows the join).
-function Page({ children, label }: { children: ReactNode; label?: string }) {
+// `compact` is for the representative page only: it trims the connected area's height and padding (the 12px join and rounded corners stay).
+const compactContentStyle: CSSProperties = { ...contentStyle, minHeight: 0, padding: 16 }
+function Page({ children, label, compact = false }: { children: ReactNode; label?: string; compact?: boolean }) {
   return (
     <div>
       {children}
-      <div style={contentStyle}>
-        <p className="text-sm text-muted-foreground">{label ?? "연결된 콘텐츠 영역: GNB는 자기 높이와 12px 접점까지만 차지합니다."}</p>
+      <div style={compact ? compactContentStyle : contentStyle}>
+        {label === "" ? null : <p className="text-sm text-muted-foreground">{label ?? "연결된 콘텐츠 영역: GNB는 자기 높이와 12px 접점까지만 차지합니다."}</p>}
       </div>
     </div>
   )
@@ -426,50 +429,60 @@ const meta = { title: "Patterns/Layout/GNB", component: GNB, parameters: { layou
 export default meta
 type Story = StoryObj<typeof meta>
 
-// Representative Story: the green bar with a current item, an open 2-depth panel, long labels, a logo, the optional utility icons and
-// sticky. Menus and the user menu open for real. Narrow the page to 390px for the mobile bar (hamburger → Sheet).
-// Each GNB fills its specimen parent inside the same Inner as the page and section headings.
-// The representative page names the connected area only; the verification Stories keep the default 12px join note.
-const contentLabel = "콘텐츠 영역"
+// Representative Story: Variants (Default, Long Labels) and States (Navigation Menu Open). Menus and the user menu open for real.
+// Narrow the page to 390px for the mobile bar (hamburger → Sheet). Each GNB fills its specimen parent inside the same Inner as the
+// page and section headings. The connected-area note shows once (Default); the verification Stories keep the default 12px join note.
+// With Logo, Utilities, Sticky, GNB Sidebar and Brown Sidebar live in their own verification Stories.
 export const All: Story = {
   name: "GNB",
   render: () => (
     <StoryPage>
       <StoryPageHeader title="GNB" />
-      <StorySection title="Overview">
-        <Page label={contentLabel}>
-          <Bar />
-        </Page>
+      <StorySection title="Variants">
+        <StateBoard
+          states={[
+            {
+              id: "default",
+              label: "Default",
+              wide: true,
+              children: (
+                <Page compact label="콘텐츠 영역">
+                  <Bar />
+                </Page>
+              ),
+            },
+            {
+              id: "long-labels",
+              label: "Long Labels",
+              wide: true,
+              children: (
+                <Page compact label="">
+                  <Bar items={longNavItems} person={longUser} eyebrow="한맥기술 인프라 통합 시스템" brand="스마트 시설물 통합 관리 시스템" />
+                </Page>
+              ),
+            },
+          ]}
+        />
       </StorySection>
-      <StorySection title="States · Navigation Menu Open">
-        <div style={{ minHeight: 360 }}>
-          <Page label="프로젝트 > 진행 중 프로젝트">
-            <Bar initial="projects/active" openMenu="projects" />
-          </Page>
-        </div>
+      {/* The open 2-depth panel ends 238px below the bar's top; the wrapper reserves that room so it never overlaps the page below. */}
+      <StorySection title="States">
+        <StateBoard
+          states={[
+            {
+              id: "navigation-menu-open",
+              label: "Navigation Menu Open",
+              wide: true,
+              children: (
+                <div style={{ minHeight: 248 }}>
+                  <Page compact label="프로젝트 > 진행 중 프로젝트">
+                    <Bar initial="projects/active" openMenu="projects" />
+                  </Page>
+                </div>
+              ),
+            },
+          ]}
+        />
       </StorySection>
-      <StorySection title="Variants · Long Labels">
-        <Page label={contentLabel}>
-          <Bar items={longNavItems} person={longUser} eyebrow="한맥기술 인프라 통합 시스템" brand="스마트 시설물 통합 관리 시스템" />
-        </Page>
-      </StorySection>
-      <StorySection title="Variants · With Logo">
-        <Page label={contentLabel}>
-          <Bar logo={testLogo} />
-        </Page>
-      </StorySection>
-      <StorySection title="Variants · Utilities">
-        <Page label={contentLabel}>
-          <Bar utilities />
-        </Page>
-      </StorySection>
-      <StorySection title="Usage · Sticky">
-        <StickyPage />
-      </StorySection>
-      <StorySection title="Usage · GNB Sidebar">
-        <SidebarPage showCurrent={false} />
-      </StorySection>
-      <StorySection title="Usage · Brown 콘텐츠 LNB"><SidebarPage color="brown" showCurrent={false} /></StorySection>
     </StoryPage>
   ),
 }
@@ -477,6 +490,8 @@ export const All: Story = {
 export const Default: Story = { tags: ["verification"], render: () => <Page><Bar /></Page> }
 export const Sticky: Story = { tags: ["verification"], render: () => <StickyPage /> }
 export const Sidebar: Story = { tags: ["verification"], name: "GNB Sidebar", render: () => <SidebarPage fullHeight /> }
+// Brown content LNB: same condition the representative page used to show (560px frame, no route readout).
+export const BrownSidebar: Story = { tags: ["verification"], name: "Brown Sidebar", render: () => <SidebarPage color="brown" showCurrent={false} /> }
 export const NavigationMenuOpen: Story = {
   tags: ["verification"],
   name: "Navigation Menu Open",