style(storybook): refine overlay story layout

src/components/popover.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Button, Input, Popover, PopoverClose, PopoverContent, PopoverTrigger } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Popover is a non-modal Radix overlay (Portal). The representative Story opens the real panels from their triggers;
@@ -33,7 +34,7 @@ function FormPanel() {
       </PopoverTrigger>
       <PopoverContent align="start" aria-label="프로젝트 이름 변경">
         <div className="grid gap-3">
-          <label htmlFor="popover-name" className="text-sm font-medium text-muted-foreground">
+          <label htmlFor="popover-name" className="text-sm font-medium text-foreground">
             프로젝트명
           </label>
           <Input id="popover-name" size="medium" placeholder="프로젝트명을 입력하세요" />
@@ -55,22 +56,18 @@ function FormPanel() {
   )
 }
 
-function Aligned() {
+function Aligned({ align }: { align: "start" | "center" | "end" }) {
   return (
-    <div className="flex w-full max-w-md justify-between gap-3">
-      {(["start", "center", "end"] as const).map((align) => (
-        <Popover key={align}>
-          <PopoverTrigger asChild>
-            <Button variant="primary" appearance="outline" size="sm">
-              {`align ${align}`}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent align={align} side="bottom" aria-label={`정렬 예제: ${align}`}>
-            <p>{`align="${align}"`}</p>
-          </PopoverContent>
-        </Popover>
-      ))}
-    </div>
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="primary" appearance="outline" size="sm">
+          {`align ${align}`}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={align} side="bottom" aria-label={`정렬 예제: ${align}`}>
+        <p>{`align="${align}"`}</p>
+      </PopoverContent>
+    </Popover>
   )
 }
 
@@ -78,20 +75,39 @@ const meta = { title: "Components/Overlay/Popover", component: Popover, paramete
 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: Overview is merged into Variants (Basic is its first item); each align trigger sits in its own column.
 export const All: Story = {
   name: "Popover",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Popover" />
-      <StorySection title="Overview">
-        <Info />
-      </StorySection>
       <StorySection title="Variants">
-        <Aligned />
+        <SpecimenGrid
+          states={[
+            { id: "basic", label: "Basic", children: <Info /> },
+            { id: "align-start", label: "Align Start", children: <Aligned align="start" /> },
+            { id: "align-center", label: "Align Center", children: <Aligned align="center" /> },
+            { id: "align-end", label: "Align End", children: <Aligned align="end" /> },
+          ]}
+        />
       </StorySection>
       <StorySection title="Usage">
-        <FormPanel />
+        <SpecimenGrid states={[{ id: "form", label: "Form", children: <FormPanel /> }]} />
       </StorySection>
     </StoryPage>
   ),