refactor(storybook): simplify component and preview examples

Drop page / section descriptions, state notes and repeated captions from
the representative Stories of 44 components, the Patterns, Center
Graphic and OrgChart pages. Value readouts, spec lists and captions hide
only on the representative page; hidden verification Stories keep them.
Tabs Default API and the Filter Bar draft / applied counts move to the
hidden DefaultApi and DraftApplied Stories; Center Overview is hidden
with its direct URL kept. Story IDs are unchanged.

Align the component, pattern and OrgChart docs with the pages, point the
quality reference check at the DraftApplied Story, and make the P8
styles check expect no section header on the preview-only Expanded page.

src/components/toggle.stories.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { BoldIcon, ItalicIcon, StarIcon } from "lucide-react"
 import { Toggle, ToggleGroup, ToggleGroupItem } from "@hm-design/ui"
@@ -63,34 +62,9 @@ function Disabled() {
   )
 }
 
-function Controlled() {
-  const [pressed, setPressed] = useState(false)
-  return (
-    <div className="flex items-center gap-3">
-      <Toggle variant="outline" pressed={pressed} onPressedChange={setPressed}>
-        알림
-      </Toggle>
-      <span className="text-sm text-muted-foreground" data-testid="controlled">{`pressed = ${String(pressed)}`}</span>
-    </div>
-  )
-}
-
-// className extension: the consumer's width / rounded utilities win over the default look.
-function Extended() {
-  return (
-    <Toggle variant="outline" className="w-40 rounded-full">
-      w-40 rounded-full
-    </Toggle>
-  )
-}
-
 const sections = [
   { id: "offon", label: "Off / On", node: <OffOn /> },
-  { id: "icon", label: "Icon-only and icon + text", node: <WithIcon /> },
-  { id: "sizes", label: "Sizes", node: <Sizes /> },
   { id: "disabled", label: "Disabled", node: <Disabled /> },
-  { id: "controlled", label: "Controlled", node: <Controlled /> },
-  { id: "extended", label: "className extension", node: <Extended /> },
 ]
 
 const meta = { title: "Components/Form/Toggle", component: Toggle, parameters: { layout: "padded" } } satisfies Meta<typeof Toggle>
@@ -107,24 +81,22 @@ export const All: Story = {
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Toggle"
-        description="Toggle Group과 같은 눌림(On) 상태 기준"
-      />
+      <StoryPageHeader title="Toggle" />
       <StorySection title="Overview">{board("offon")}</StorySection>
-      <StorySection title="단독 · 연결 그룹" description="단독 = 독립 선택 · spacing=0 그룹 = 연결 형태">
-        <div className="grid gap-4">
-          <div><p className="mb-2">단독 · 독립 선택</p><Toggle variant="outline">알림</Toggle></div>
-          <div><p className="mb-2">연결 그룹 · 단일 선택</p><ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="정렬"><ToggleGroupItem value="left">왼쪽</ToggleGroupItem><ToggleGroupItem value="center">가운데</ToggleGroupItem><ToggleGroupItem value="right">오른쪽</ToggleGroupItem></ToggleGroup></div>
-          <div><p className="mb-2">연결 그룹 · 다중 선택</p><ToggleGroup type="multiple" variant="outline" defaultValue={["bold"]} aria-label="글자 스타일"><ToggleGroupItem value="bold">굵게</ToggleGroupItem><ToggleGroupItem value="italic">기울임</ToggleGroupItem></ToggleGroup></div>
-        </div>
+      <StorySection title="단독 · 연결 그룹">
+        <StateBoard
+          min={360}
+          states={[
+            { id: "single-toggle", label: "단독", children: <Toggle variant="outline">알림</Toggle> },
+            { id: "group-single", label: "연결 그룹 · 단일 선택", children: <ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="정렬"><ToggleGroupItem value="left">왼쪽</ToggleGroupItem><ToggleGroupItem value="center">가운데</ToggleGroupItem><ToggleGroupItem value="right">오른쪽</ToggleGroupItem></ToggleGroup> },
+            { id: "group-multiple", label: "연결 그룹 · 다중 선택", children: <ToggleGroup type="multiple" variant="outline" defaultValue={["bold"]} aria-label="글자 스타일"><ToggleGroupItem value="bold">굵게</ToggleGroupItem><ToggleGroupItem value="italic">기울임</ToggleGroupItem></ToggleGroup> },
+          ]}
+        />
       </StorySection>
       <StorySection title="Sizes">
         <Sizes />
       </StorySection>
-      <StorySection title="Variants">{board("icon")}</StorySection>
-      <StorySection title="States">{board("disabled", "controlled")}</StorySection>
-      <StorySection title="Usage">{board("extended")}</StorySection>
+      <StorySection title="States">{board("disabled")}</StorySection>
     </StoryPage>
   ),
 }