style(storybook): refine overlay story layout

src/components/sheet.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"
 // Usage: preserved native label fixtures do not define a new-screen exception. Use public Label
 // for supported fields (docs/components/label.md §5); copy only actions requested by the screen.
 import { Button, Input, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Sheet is a modal Radix overlay (Portal), so the representative Story is a row of triggers that open the real Sheet for each
@@ -68,7 +69,7 @@ function FormCase({ defaultOpen }: { defaultOpen?: boolean }) {
   return (
     <Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보">
       <div className="grid gap-2">
-        <label htmlFor="sheet-form-name" className="text-sm font-medium text-muted-foreground">
+        <label htmlFor="sheet-form-name" className="text-sm font-medium text-foreground">
           프로젝트명
         </label>
         <Input id="sheet-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
@@ -93,29 +94,44 @@ const meta = { title: "Components/Overlay/Sheet", component: Sheet, parameters:
 export default meta
 type Story = StoryObj<typeof meta>
 
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
+// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty. The trigger keeps its
+// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
+function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
+  return (
+    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
+      ))}
+    </div>
+  )
+}
+
+// Representative Story: the common Story page. Overview is merged into Variants (Right is its first item).
 export const All: Story = {
   name: "Sheet",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Sheet"
-      />
-      <StorySection title="Overview">
-        <SideCase side="right" />
-      </StorySection>
+      <StoryPageHeader title="Sheet" />
       <StorySection title="Variants">
-        <div className="flex flex-wrap gap-3">
-          <SideCase side="left" />
-          <SideCase side="top" />
-          <SideCase side="bottom" />
-        </div>
+        <SpecimenGrid
+          states={[
+            { id: "right", label: "Right", children: <SideCase side="right" /> },
+            { id: "left", label: "Left", children: <SideCase side="left" /> },
+            { id: "top", label: "Top", children: <SideCase side="top" /> },
+            { id: "bottom", label: "Bottom", children: <SideCase side="bottom" /> },
+          ]}
+        />
       </StorySection>
       <StorySection title="Usage">
-        <div className="flex flex-wrap gap-3">
-          <FormCase />
-          <LongCase />
-        </div>
+        <SpecimenGrid
+          states={[
+            { id: "form", label: "Form", children: <FormCase /> },
+            { id: "long-content", label: "Long Content", children: <LongCase /> },
+          ]}
+        />
       </StorySection>
     </StoryPage>
   ),