style(storybook): refine patterns data and layout stories

src/patterns/lnb.stories.tsx

@@ -619,28 +619,6 @@ const mobileViewport = {
   globals: { viewport: { value: "hmMobile", isRotated: false } },
 }
 
-// Representative-board preview of a Story at a fixed viewport. The LNB/bar switch is a viewport media query, so the board embeds the
-// verification Story (the same `Standalone` composition) in an iframe of that width instead of rebuilding it in a narrow container.
-// Each iframe is its own document, so the closed Sheets do not share a portal or focus with the board.
-function ViewportPreview({ story, label, width, height, args }: { story: string; label: string; width: number; height: number; args?: string }) {
-  return (
-    <figure className="grid min-w-0 content-start gap-2">
-      <figcaption className="text-sm text-muted-foreground">
-        {label} · {width}px
-      </figcaption>
-      <div className="max-w-full overflow-x-auto">
-        <iframe
-          title={`${label} ${width}px`}
-          src={`iframe.html?id=patterns-layout-lnb--${story}&viewMode=story${args ? `&args=${args}` : ""}`}
-          width={width}
-          height={height}
-          className="box-content block border border-black/10"
-        />
-      </div>
-    </figure>
-  )
-}
-
 // `hm-lnb-story` (display: contents, see lnb.stories.css) scopes the 212px min width and 14px menu font to this Story only.
 const meta = { title: "Patterns/Layout/LNB", component: LNB, decorators: [(Story) => <div className="hm-lnb-story"><Story /></div>], parameters: { layout: "fullscreen", controls: { disable: true } } } satisfies Meta<typeof LNB>
 export default meta
@@ -653,19 +631,11 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="LNB" />
-      <StorySection title="Overview">
-        <StateBoard
-          min={560}
-          states={[
-            { id: "selected", label: "Selected", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} dividers={false} /> },
-            { id: "third-selected", label: "3뎁스 · Selected", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": true }} dividers={false} /> },
-          ]}
-        />
-      </StorySection>
       <StorySection title="States">
         <StateBoard
           min={560}
           states={[
+            { id: "selected", label: "Selected", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} dividers={false} /> },
             { id: "expanded", label: "Expanded", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: true }} /> },
             { id: "states-third-selected", label: "3뎁스 · Selected", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": true }} /> },
           ]}
@@ -680,25 +650,12 @@ export const All: Story = {
           ]}
         />
       </StorySection>
-      <StorySection title="Usage · Scroll">
-        <StateBoard
-          min={560}
-          states={[
-            { id: "scroll", label: "Scroll", children: <ResponsiveSpecimen nodes={simpleNav(false, true)} initial="overview" initialOpen={{ tasks: true }} height={460} dividers={false} /> },
-            { id: "third-scroll", label: "3뎁스 · Scroll", children: <ResponsiveSpecimen nodes={thirdLevelNav(true, true)} initial="projects/design/layout" initialOpen={{ projects: true, "projects/design": true }} longLabels height={460} dividers={false} /> },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="Usage · Standalone 반응형">
-        <div className="flex flex-wrap items-start gap-6">
-          <ViewportPreview story="standalone-desktop" label="Desktop" width={1024} height={640} args="dividers:!false" />
-          <ViewportPreview story="standalone-mobile" label="Mobile" width={390} height={640} />
-        </div>
-      </StorySection>
     </StoryPage>
   ),
 }
 
+// Usage examples live in their own verification Stories: Scroll, Third Level Scroll, LNB Standalone Desktop / Mobile (and Mobile Menu Open).
+
 export const Default: Story = { tags: ["verification"], render: () => <Menu initial={null} groupOpen={false} /> }
 export const Selected: Story = { tags: ["verification"], render: () => <Menu dividers={false} /> }
 export const Expanded: Story = { tags: ["verification"], render: () => <Menu initial={null} /> }
@@ -754,8 +711,7 @@ export const WithGNB: Story = {
 
 // LNB without a GNB, responsive. Desktop (>= 1024px): the column. Mobile (<= 1023px): the column is hidden and the connected-content
 // column becomes a full-width stack whose first row opens a Sheet with the same tree, selected item and every depth.
-// `dividers` is a Story arg (default true: the Story itself keeps its group dividers). The representative board's Desktop preview
-// opens this Story with `&args=dividers:!false` (see ViewportPreview) to show it without them.
+// `dividers` is a Story arg (default true: the Story itself keeps its group dividers).
 export const StandaloneDesktop: StoryObj<{ dividers: boolean }> = {
   tags: ["verification"],
   name: "LNB Standalone Desktop",