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

@@ -40,14 +40,15 @@ function Empty() {
   )
 }
 
-function Controlled() {
+// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it.
+function Controlled({ showValue = true }: { showValue?: boolean }) {
   const [value, setValue] = useState("nuxt")
   return (
     <div className="grid gap-2">
       <Field label="선택됨 (controlled)" id="cb-controlled">
         <Combobox id="cb-controlled" controlled options={frameworks} value={value} onValueChange={setValue} />
       </Field>
-      <span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${value}`}</span>
+      {showValue ? <span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${value}`}</span> : null}
     </div>
   )
 }
@@ -99,9 +100,8 @@ function SelectComparison() {
 }
 
 const sections = [
-  { id: "empty", label: "Empty placeholder + search (Remix is a disabled option)", node: <Empty /> },
-  { id: "controlled", label: "Selected, controlled", node: <Controlled /> },
-  { id: "medium", label: "Medium size", node: <Medium /> },
+  { id: "empty", label: "Placeholder", node: <Empty /> },
+  { id: "controlled", label: "Selected", node: <Controlled showValue={false} /> },
   { id: "long", label: "Long option", node: <LongLabel /> },
   { id: "disabled", label: "Disabled", node: <Disabled /> },
 ]
@@ -121,19 +121,16 @@ export const All: Story = {
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Combobox"
-        description="Popover + Command · 짧은 목록은 Select 사용"
-      />
-      <StorySection title="Overview" description="Escape로 닫으면 Trigger로 focus 복귀">{board("empty")}</StorySection>
-      <StorySection title="Sizes" description="기본값: Large · 같은 size의 Select와 비교">
-        <StateBoard
-          min={320}
-          states={[
-            ...sections.filter((s) => s.id === "medium").map((s) => ({ id: s.id, label: s.label, children: s.node })),
-            { id: "select-comparison", label: "Select / Combobox visual comparison", wide: true, children: <SelectComparison /> },
-          ]}
-        />
+      <StoryPageHeader title="Combobox" />
+      <StorySection title="Overview">{board("empty")}</StorySection>
+      <StorySection title="Sizes">
+        {/* The field label already names the size, so the Medium specimen has no separate example title. */}
+        <div className="grid gap-10">
+          <div className="max-w-sm">
+            <Medium />
+          </div>
+          <StateBoard min={320} states={[{ id: "select-comparison", label: "Select / Combobox", wide: true, children: <SelectComparison /> }]} />
+        </div>
       </StorySection>
       <StorySection title="States">{board("controlled", "disabled")}</StorySection>
       <StorySection title="Usage">{board("long")}</StorySection>