style(storybook): refine data display story layout

src/components/card.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Button } from "@hm-design/ui"
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardSurface } from "@hm-design/ui"
 import { Input } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import type { BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Story structure follows Button / Input / Select: one representative "Card" Story shows the ui_viz cases on one page,
@@ -34,6 +34,23 @@ function Specimen({ surface = "surface", action, title = "프로젝트 정보",
   )
 }
 
+// Story-only equal-column board for this page: 3 columns on PC, 2 / 1 on narrower widths. Variants and Usage share it,
+// so a Usage cell has the same width as one Variants cell. Label markup/colors match StateBoard (shared component untouched).
+function CardBoard({ states }: { states: BoardState[] }) {
+  return (
+    <div className="grid grid-cols-1 items-start gap-x-6 gap-y-8 min-[640px]:grid-cols-2 min-[900px]:grid-cols-3">
+      {states.map(({ id, label, children }) => (
+        <section className="grid min-w-0 content-start gap-3" key={id} data-overview-state={id} aria-label={label}>
+          <header className="grid gap-2 border-b border-black/10 pb-2">
+            <h3 className="text-sm font-medium text-muted-foreground">{label}</h3>
+          </header>
+          {children}
+        </section>
+      ))}
+    </div>
+  )
+}
+
 function FormSpecimen() {
   return (
     <Card>
@@ -42,7 +59,7 @@ function FormSpecimen() {
       </CardHeader>
       <CardContent>
         <div className="grid gap-2">
-          <label htmlFor="card-form-name" className="text-sm font-medium text-muted-foreground">
+          <label htmlFor="card-form-name" className="text-sm font-medium text-foreground">
             프로젝트명
           </label>
           <Input id="card-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
@@ -63,7 +80,7 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-// Representative Story: the common Story page (Overview → Variants → Usage) with every ui_viz case. Named after the component, as in ui_viz.
+// Representative Story: the common Story page (Variants → Usage) with every ui_viz case. Named after the component, as in ui_viz.
 // It is the only Card entry in the default sidebar, so Storybook shows Card as a single 1-depth item.
 export const All: Story = {
   name: "Card",
@@ -71,20 +88,17 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Card" />
-      <StorySection title="Overview">
-        <StateBoard min={360} states={[{ id: "surface", label: "White", children: <Specimen /> }]} />
-      </StorySection>
       <StorySection title="Variants">
-        <StateBoard
-          min={360}
+        <CardBoard
           states={[
+            { id: "surface", label: "White", children: <Specimen /> },
             { id: "content", label: "Content (Beige)", children: <Specimen surface="content" /> },
             { id: "action", label: "Title + Action", children: <Specimen action /> },
           ]}
         />
       </StorySection>
       <StorySection title="Usage">
-        <StateBoard min={360} states={[{ id: "form", label: "본문 조합 · Input", children: <FormSpecimen /> }]} />
+        <CardBoard states={[{ id: "form", label: "본문 조합 · Input", children: <FormSpecimen /> }]} />
       </StorySection>
     </StoryPage>
   ),