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/button.stories.tsx

@@ -71,24 +71,32 @@ const stack = "grid gap-6"
 const heading = "text-base font-bold"
 const note = "text-sm text-muted-foreground"
 
+const appearances = [
+  ["brand", "Brand"],
+  ["solid", "Standard Solid"],
+  ["outline", "Standard Outline"],
+] as const
+
+function RoleRow({ appearance }: { appearance: (typeof appearances)[number][0] }) {
+  return (
+    <div className={row}>
+      {rolesFor(appearance).map(([variant, label]) => (
+        <Button key={variant} variant={variant} appearance={appearance}>
+          {label}
+        </Button>
+      ))}
+    </div>
+  )
+}
+
 function RolesBoard() {
   return (
     <div className={stack}>
-      {(
-        [
-          ["brand", "Brand"],
-          ["solid", "Standard Solid"],
-          ["outline", "Standard Outline"],
-        ] as const
-      ).map(([appearance, title]) => (
+      {appearances.map(([appearance, title]) => (
         <section key={appearance}>
           <h3 className={heading}>{title}</h3>
-          <div className={`${row} mt-3`}>
-            {rolesFor(appearance).map(([variant, label]) => (
-              <Button key={variant} variant={variant} appearance={appearance}>
-                {label}
-              </Button>
-            ))}
+          <div className="mt-3">
+            <RoleRow appearance={appearance} />
           </div>
         </section>
       ))}
@@ -118,7 +126,7 @@ function SizesBoard() {
   )
 }
 
-// `showNote={false}` keeps the representative page UI-only; the verification Stories keep the state notes.
+// `showNote={false}` keeps the representative page UI-only; the verification Story keeps the note and the Activated readout.
 function BrandStates({ showNote = true }: { showNote?: boolean }) {
   const [count, setCount] = useState(0)
   return (
@@ -132,7 +140,7 @@ function BrandStates({ showNote = true }: { showNote?: boolean }) {
           Disabled
         </Button>
       </div>
-      <output aria-live="polite">Activated: {count}</output>
+      {showNote ? <output aria-live="polite">Activated: {count}</output> : null}
       {showNote ? (
         <p className={note}>
           Hover와 Pressed는 Storybook이 고정한 상태입니다. Interact 위에서 실제 Hover·Pressed·포인터 이탈을 확인합니다. Disabled는 실행되지 않습니다.
@@ -149,15 +157,17 @@ const standardStates = [
   ["Disabled", { disabled: true }],
 ] as const
 
-function StandardStateTable({ appearance, title }: { appearance: "solid" | "outline"; title: string }) {
+// Without `title` the table sits under a StateBoard label (representative page) and drops the Role column:
+// every button already shows its role name, so the row header would repeat it.
+function StandardStateTable({ appearance, title }: { appearance: "solid" | "outline"; title?: string }) {
   return (
     <section className="min-w-0">
-      <h3 className={heading}>{title}</h3>
-      <div className="mt-3 min-w-0 max-w-full overflow-x-auto">
+      {title ? <h3 className={heading}>{title}</h3> : null}
+      <div className={`${title ? "mt-3 " : ""}min-w-0 max-w-full overflow-x-auto`}>
         <table className="w-full border-collapse [&_td]:p-3 [&_th]:p-3 [&_th]:text-left">
           <thead>
             <tr>
-              <th scope="col">Role</th>
+              {title ? <th scope="col">Role</th> : null}
               {standardStates.map(([state]) => (
                 <th scope="col" key={state}>
                   {state}
@@ -168,7 +178,7 @@ function StandardStateTable({ appearance, title }: { appearance: "solid" | "outl
           <tbody>
             {rolesFor(appearance).map(([variant, label]) => (
               <tr key={variant}>
-                <th scope="row">{label}</th>
+                {title ? <th scope="row">{label}</th> : null}
                 {standardStates.map(([state, props]) => (
                   <td key={state}>
                     <Button variant={variant} appearance={appearance} {...props}>
@@ -227,22 +237,22 @@ export const All: Story = {
   parameters: { layout: "fullscreen" },
   render: () => (
     <StoryPage>
-      <StoryPageHeader title="Button" description="variant = 역할(색) · appearance = Brand / Standard Solid / Standard Outline · size = 높이" />
-      <StorySection title="Overview" description="기본값: Brand · Primary · Medium 34px">
+      <StoryPageHeader title="Button" />
+      <StorySection title="Overview">
         <Button>Button</Button>
       </StorySection>
-      <StorySection title="Sizes" description="28 / 34 / 42px · 위 Brand, 아래 Standard Solid">
+      <StorySection title="Sizes">
         <SizesBoard />
       </StorySection>
-      <StorySection title="Variants" description="appearance별 허용 역할 조합">
-        <RolesBoard />
+      <StorySection title="Variants">
+        <StateBoard states={appearances.map(([appearance, label]) => ({ id: `roles-${appearance}`, label, wide: true, children: <RoleRow appearance={appearance} /> }))} />
       </StorySection>
-      <StorySection title="States" description="Hover·Pressed는 Storybook 고정 상태">
+      <StorySection title="States">
         <StateBoard
-          min={1200}
           states={[
-            { id: "brand-states", label: "Brand", children: <BrandStates showNote={false} /> },
-            { id: "standard-states", label: "Standard Solid · Standard Outline", children: <StandardStatesBoard showNote={false} /> },
+            { id: "brand-states", label: "Brand", wide: true, children: <BrandStates showNote={false} /> },
+            { id: "standard-solid-states", label: "Standard Solid", wide: true, children: <StandardStateTable appearance="solid" /> },
+            { id: "standard-outline-states", label: "Standard Outline", wide: true, children: <StandardStateTable appearance="outline" /> },
           ]}
         />
       </StorySection>