style(storybook): refine form component stories

src/components/slider.stories.tsx

@@ -12,7 +12,7 @@ function Labeled({ label, children, valueText }: { label: string; children: Reac
   return (
     <div className="grid gap-3">
       <div className="flex justify-between text-sm">
-        <span className="font-medium">{label}</span>
+        <span className="font-medium text-foreground">{label}</span>
         <span className="text-muted-foreground" data-testid="value">{valueText}</span>
       </div>
       {children}
@@ -32,8 +32,8 @@ function Single() {
 function Range() {
   const [value, setValue] = useState([25, 75])
   return (
-    <Labeled label="가격 범위" valueText={`${value[0]} – ${value[1]}`}>
-      <Slider aria-label="가격 범위" value={value} onValueChange={setValue} max={100} step={1} minStepsBetweenThumbs={5} />
+    <Labeled label="범위" valueText={`${value[0]} – ${value[1]}`}>
+      <Slider aria-label="범위"value={value} onValueChange={setValue} max={100} step={1} minStepsBetweenThumbs={5} />
     </Labeled>
   )
 }
@@ -71,20 +71,35 @@ const meta = { title: "Components/Form/Slider", component: Slider, parameters: {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
-  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
-)
+// Representative-page layout (Storybook presentation only): 4 equal columns on PC (iframe width 1000px and up), shrinking to
+// fit below that (200px minimum per column). Each specimen sits in its own single-column StateBoard (min larger than any
+// column), so StateBoard's auto-fill grid cannot leave an empty or stretched track. A section with fewer than 4 specimens
+// keeps the same column width and leaves the remaining tracks empty.
+function SpecimenGrid({ ids }: { ids: string[] }) {
+  return (
+    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] min-[1000px]:grid-cols-4">
+      {ids.map((id) => {
+        const s = sections.find((section) => section.id === id)!
+        return <StateBoard key={id} min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
+      })}
+    </div>
+  )
+}
 
 // Representative Story: the common Story page; the sections group the same specimens.
+// Overview is merged into Variants (Single is its first item). `Vertical` centers its Slider in its column.
 export const All: Story = {
   name: "Slider",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Slider" />
-      <StorySection title="Overview">{board("single")}</StorySection>
-      <StorySection title="Variants">{board("range", "step", "vertical")}</StorySection>
-      <StorySection title="States">{board("disabled")}</StorySection>
+      <StorySection title="Variants">
+        <SpecimenGrid ids={["single", "range", "step", "vertical"]} />
+      </StorySection>
+      <StorySection title="States">
+        <SpecimenGrid ids={["disabled"]} />
+      </StorySection>
     </StoryPage>
   ),
 }