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/patterns/dashboard-layout.stories.tsx

@@ -430,14 +430,8 @@ const frame = (height?: number): CSSProperties | undefined => (height ? ({ "--hm
 export function DashboardAll() {
   return (
     <StoryPage>
-      <StoryPageHeader
-        title="Dashboard"
-        description="DASHBOARD 단일 모드 · 48px Compact Header + 상태 필터 + 콘텐츠"
-      />
-      <StorySection
-        title="Overview"
-        description="최소 폭 960px · 좁으면 가로 스크롤"
-      >
+      <StoryPageHeader title="Dashboard" />
+      <StorySection title="Overview">
         <DashboardScreen mode="compact" />
       </StorySection>
     </StoryPage>

src/patterns/data-table.stories.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import {
-  Card, CardContent, PageHeader, PageHeaderContent, PageHeaderTitle, PageHeaderDescription,
+  Card, CardContent, CardHeader, CardTitle,
   Badge,
   Button,
   Combobox,
@@ -118,9 +118,10 @@ function WithFilterBar({ extended = true }: { extended?: boolean }) {
     setSearch(""); setStatus("all"); setDate(undefined); setDepartment(undefined)
     table.resetGlobalFilter(true); table.resetColumnFilters(true)
   }
-  return <div className="grid min-w-0 gap-4">
-    <PageHeader><PageHeaderContent><PageHeaderTitle>사용자 목록</PageHeaderTitle><PageHeaderDescription>조건을 입력한 뒤 조회합니다.</PageHeaderDescription></PageHeaderContent></PageHeader>
-    <Card className="min-w-0"><CardContent>
+  // The list title belongs to the list: Card title → search → table inside the one white Card.
+  return <Card className="min-w-0">
+    <CardHeader><CardTitle>사용자 목록</CardTitle></CardHeader>
+    <CardContent>
       <div className="grid min-w-0 gap-4">
         <div className="hm-data-table-tools">
           <form className="hm-data-table-search" onSubmit={event => { event.preventDefault(); apply() }}>
@@ -139,8 +140,8 @@ function WithFilterBar({ extended = true }: { extended?: boolean }) {
         </div>
         <DataTable table={table} emptyMessage="조건에 맞는 사용자가 없습니다." />
       </div>
-    </CardContent></Card>
-  </div>
+    </CardContent>
+  </Card>
 }
 
 const meta = { title: "Patterns/Data/Data Table", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
@@ -153,15 +154,12 @@ export const All: Story = {
   parameters: { layout: "fullscreen" },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Data Table"
-        description="선택 · 정렬 · 열 표시 · 페이지 이동"
-      />
+      <StoryPageHeader title="Data Table" />
       <StorySection title="Overview">
         <Basic />
       </StorySection>
-      <StorySection title="기본 목록 검색" description="8px 간격 가운데 정렬 · 열 버튼은 공간 부족 시만 다음 행 · 제목은 Card 밖"><WithFilterBar extended={false} /></StorySection>
-      <StorySection title="추가 조건 목록 검색" description="부서·등록일 구성은 왼쪽 정렬 · 모바일 버튼 행은 우측 정렬"><WithFilterBar /></StorySection>
+      <StorySection title="기본 목록 검색"><WithFilterBar extended={false} /></StorySection>
+      <StorySection title="추가 조건 목록 검색"><WithFilterBar /></StorySection>
     </StoryPage>
   ),
 }

src/patterns/filter-bar.stories.tsx

@@ -24,7 +24,9 @@ const categories = [
   { value: "safety", label: "안전" },
 ]
 
-function Full() {
+// `showStatus` is for the hidden DraftApplied Story only: scripts/verify-quality-reference.mjs reads the
+// input / applied counts there. The representative page shows the controls without the readout.
+function Full({ showStatus = false }: { showStatus?: boolean }) {
   const searchId = useId()
   const [search, setSearch] = useState("")
   const [status, setStatus] = useState("all")
@@ -67,9 +69,11 @@ function Full() {
           </Button>
         </FilterBarActions>
       </FilterBar>
-      <p className="text-sm text-muted-foreground" role="status">
-        입력한 조건 {active}개 · 조회 적용 조건 {applied}개
-      </p>
+      {showStatus ? (
+        <p className="text-sm text-muted-foreground" role="status">
+          입력한 조건 {active}개 · 조회 적용 조건 {applied}개
+        </p>
+      ) : null}
     </div>
   )
 }
@@ -79,24 +83,19 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative Story: search, Select, Combobox, Date Picker and the actions row. Narrow it to 390px to see the wrapping.
+// The Usage / Do & Don't rules live in docs/patterns/filter-bar.md.
 export const All: Story = {
   name: "Filter Bar",
   parameters: { layout: "fullscreen" },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Filter Bar"
-        description="HM 컨트롤을 children으로 조합 · 값은 소비 코드 소유 · Data Table 비의존"
-      />
-      <StorySection title="Overview" description="좁은 폭에서 줄바꿈">
+      <StoryPageHeader title="Filter Bar" />
+      <StorySection title="Overview">
         <Full />
       </StorySection>
-      <StorySection title="Usage" description="list-extended / list-basic · 390px에서 검색·액션 줄바꿈">
-        <p>입력은 draft로 유지하고 조회에만 적용합니다. 초기화는 입력과 적용값을 함께 비웁니다. 목록은 PageHeader 밖의 흰 Card 하나에 검색과 결과를 함께 배치합니다.</p>
-      </StorySection>
-      <StorySection title="Do & Don't" description="요구한 조건과 액션만 구성합니다.">
-        <p>Do: 공개 Label과 control ID 연결, Solid Green 조회와 Outline Gray 초기화. Don't: Story에 보이는 분류·날짜·메뉴·CSV를 요구사항 없이 추가하거나 임의 토큰으로 색을 지정하지 않습니다.</p>
-      </StorySection>
     </StoryPage>
   ),
 }
+
+// Draft vs applied query contract (docs/patterns/filter-bar.md §9); read by scripts/verify-quality-reference.mjs.
+export const DraftApplied: Story = { tags: ["verification"], name: "Draft / Applied", render: () => <Full showStatus /> }

src/patterns/gnb.stories.tsx

@@ -367,7 +367,8 @@ const sidebarGnbItems: NavItem[] = navItems.map(item => item.id === "projects" ?
   ],
 } : item)
 
-function SidebarPage({ fullHeight = false, color = "green" }: { fullHeight?: boolean; color?: "green" | "brown" }) {
+// `showCurrent={false}` keeps the representative page UI-only; the verification Story keeps the raw route readout.
+function SidebarPage({ fullHeight = false, color = "green", showCurrent = true }: { fullHeight?: boolean; color?: "green" | "brown"; showCurrent?: boolean }) {
   const [current, setCurrent] = useState("projects/design/tokens")
   const [groups, setGroups] = useState<Record<string, boolean>>({ projects: true, "projects/design": true })
   const [mobileOpen, setMobileOpen] = useState(false)
@@ -412,7 +413,7 @@ function SidebarPage({ fullHeight = false, color = "green" }: { fullHeight?: boo
         <main data-hm-gnb-main>
           <div style={{ padding: contentStyle.padding }}>
             <h2 className="text-lg font-bold">프로젝트 업무 화면</h2>
-            <p className="mt-2 text-sm text-muted-foreground" data-current-menu>선택: {current}</p>
+            {showCurrent ? <p className="mt-2 text-sm text-muted-foreground" data-current-menu>선택: {current}</p> : null}
             <p className="mt-4 text-sm">선택한 메뉴의 콘텐츠를 표시합니다.</p>
           </div>
         </main>
@@ -428,67 +429,47 @@ type Story = StoryObj<typeof meta>
 // Representative Story: the green bar with a current item, an open 2-depth panel, long labels, a logo, the optional utility icons and
 // sticky. Menus and the user menu open for real. Narrow the page to 390px for the mobile bar (hamburger → Sheet).
 // Each GNB fills its specimen parent inside the same Inner as the page and section headings.
+// The representative page names the connected area only; the verification Stories keep the default 12px join note.
+const contentLabel = "콘텐츠 영역"
 export const All: Story = {
   name: "GNB",
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="GNB"
-        description="1024px 이상 Desktop 메뉴 · 1023px 이하 햄버거 → Sheet"
-      />
-      <StorySection
-        title="Overview"
-        description="현재 위치 Beige · hover Black 10% · 하위 패널은 hover / click"
-      >
-        <Page>
+      <StoryPageHeader title="GNB" />
+      <StorySection title="Overview">
+        <Page label={contentLabel}>
           <Bar />
         </Page>
       </StorySection>
-      <StorySection
-        title="States · Navigation Menu Open"
-        description="하위 현재 위치 Beige · 긴 하위 이름은 패널 폭 확장"
-      >
+      <StorySection title="States · Navigation Menu Open">
         <div style={{ minHeight: 360 }}>
           <Page label="프로젝트 > 진행 중 프로젝트">
             <Bar initial="projects/active" openMenu="projects" />
           </Page>
         </div>
       </StorySection>
-      <StorySection
-        title="Variants · Long Labels"
-        description="브랜드·사용자는 말줄임 · 메뉴는 줄바꿈 없이 영역에서 잘림"
-      >
-        <Page>
+      <StorySection title="Variants · Long Labels">
+        <Page label={contentLabel}>
           <Bar items={longNavItems} person={longUser} eyebrow="한맥기술 인프라 통합 시스템" brand="스마트 시설물 통합 관리 시스템" />
         </Page>
       </StorySection>
-      <StorySection
-        title="Variants · With Logo"
-        description="로고는 있을 때만 원본 비율 · 테스트 이미지(한맥 로고 아님)"
-      >
-        <Page>
+      <StorySection title="Variants · With Logo">
+        <Page label={contentLabel}>
           <Bar logo={testLogo} />
         </Page>
       </StorySection>
-      <StorySection
-        title="Variants · Utilities"
-        description="선택 사항 · 검색·알림은 GNBUtilities에 ghost Button 아이콘 조합"
-      >
-        <Page>
+      <StorySection title="Variants · Utilities">
+        <Page label={contentLabel}>
           <Bar utilities />
         </Page>
       </StorySection>
-      <StorySection
-        title="Usage · Sticky"
-        description="스크롤 영역 상단에 고정"
-      >
+      <StorySection title="Usage · Sticky">
         <StickyPage />
       </StorySection>
-      <StorySection title="Usage · GNB Sidebar"
-        description="기존 Reference 전용 · 신규 AI GNB_ONLY 화면에는 Sidebar 생성 금지">
-        <SidebarPage />
+      <StorySection title="Usage · GNB Sidebar">
+        <SidebarPage showCurrent={false} />
       </StorySection>
-      <StorySection title="Usage · Brown 콘텐츠 LNB" description="Brown 선택·Hover · Green 선택색 혼용 금지"><SidebarPage color="brown" /></StorySection>
+      <StorySection title="Usage · Brown 콘텐츠 LNB"><SidebarPage color="brown" showCurrent={false} /></StorySection>
     </StoryPage>
   ),
 }

src/patterns/lnb.stories.tsx

@@ -469,9 +469,6 @@ function ResponsiveSpecimen({
         {/* Content paints above the navigation join strip, within the same LNB Mode. */}
         <div className="relative min-w-0 flex-1 max-lg:rounded-t-[var(--hm-lnb-mobile-join)] bg-[var(--hm-sem-bg-content)] p-[34px] lg:rounded-l-[var(--hm-lnb-join)]" data-story-slot="connected-content">
           <h2 className="text-lg font-bold">연결된 콘텐츠</h2>
-          <p className="text-sm text-muted-foreground" data-current-menu>
-            선택: {current ?? "없음"}
-          </p>
         </div>
       </div>
     </div>
@@ -586,9 +583,6 @@ function Standalone({ mobileOpen = false, profileOpen = false }: { mobileOpen?:
         </div>
         <main className="relative min-h-0 min-w-0 flex-1 overflow-auto max-lg:rounded-t-[var(--hm-lnb-mobile-join)] bg-[var(--hm-sem-bg-content)] p-[34px] lg:rounded-l-[var(--hm-lnb-join)]" data-story-slot="connected-content">
           <h2 className="text-lg font-bold">연결된 콘텐츠</h2>
-          <p className="text-sm text-muted-foreground" data-current-menu>
-            선택: {current}
-          </p>
         </main>
       </div>
     </div>
@@ -633,29 +627,26 @@ export const All: Story = {
   name: "LNB",
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="LNB"
-        description="1024px 이상 표시 · 1023px 이하 모바일 메뉴로 대체"
-      />
-      <StorySection title="Overview" description="모든 뎁스 18px · 선택 Beige 면 + 초록 글자">
+      <StoryPageHeader title="LNB" />
+      <StorySection title="Overview">
         <StateBoard
           min={560}
           states={[
             { id: "selected", label: "Selected", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} /> },
-            { id: "third-selected", label: "3뎁스 메뉴 · 선택", note: "3뎁스 20px 들여쓰기 · 1px 그린 연결선", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": true }} /> },
+            { id: "third-selected", label: "3뎁스 · Selected", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": true }} /> },
           ]}
         />
       </StorySection>
-      <StorySection title="States" description="선택 경로의 상위는 접혀도 노란색">
+      <StorySection title="States">
         <StateBoard
           min={560}
           states={[
-            { id: "default", label: "Default · 기존 LNB", note: "선택 없음 · 그룹 접힘 · Hover Black 10%", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: false }} /> },
-            { id: "expanded", label: "Expanded · 2뎁스 펼침", note: "하위 선택 없이 펼친 그룹: Black 8% 면 + 1px 초록 선.", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: true }} /> },
-            { id: "selected-child", label: "Selected Child · 2뎁스 선택", note: "하위 선택: 상위 이름·화살표가 노란색, 하위는 Beige.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="tasks/list" initialOpen={{ tasks: true }} /> },
-            { id: "collapsed-with-selection", label: "Collapsed With Selection · 접힘", note: "하위가 선택된 채 접힌 그룹도 상위가 노란색을 유지합니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="tasks/list" initialOpen={{ tasks: false }} /> },
-            { id: "third-second-collapsed", label: "3뎁스 메뉴 · 2뎁스 접힘", note: "접어도 선택 경로 1·2뎁스 표시 유지", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": false }} /> },
-            { id: "third-first-collapsed", label: "3뎁스 메뉴 · 1뎁스 접힘", note: "접어도 노란색 유지 · open 상태는 화면이 관리", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: false, "projects/design": true }} /> },
+            { id: "default", label: "Default", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: false }} /> },
+            { id: "expanded", label: "Expanded", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: true }} /> },
+            { id: "selected-child", label: "Selected Child", children: <ResponsiveSpecimen nodes={simpleNav()} initial="tasks/list" initialOpen={{ tasks: true }} /> },
+            { id: "collapsed-with-selection", label: "Collapsed With Selection", children: <ResponsiveSpecimen nodes={simpleNav()} initial="tasks/list" initialOpen={{ tasks: false }} /> },
+            { id: "third-second-collapsed", label: "3뎁스 · 2뎁스 접힘", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": false }} /> },
+            { id: "third-first-collapsed", label: "3뎁스 · 1뎁스 접힘", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: false, "projects/design": true }} /> },
           ]}
         />
       </StorySection>
@@ -663,24 +654,21 @@ export const All: Story = {
         <StateBoard
           min={560}
           states={[
-            { id: "with-logo", label: "With Logo · 로고 있음(테스트 이미지)", note: "로고는 서비스명 위 · 없으면 서비스명만", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} logo={testLogo} /> },
-            { id: "long", label: "Long labels", note: "긴 이름은 줄바꿈되며 항목 높이가 늘어납니다.", children: <ResponsiveSpecimen nodes={simpleNav(true)} initial="tasks/list" initialOpen={{ tasks: true }} longLabels /> },
+            { id: "with-logo", label: "With Logo", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} logo={testLogo} /> },
+            { id: "long", label: "Long Labels", children: <ResponsiveSpecimen nodes={simpleNav(true)} initial="tasks/list" initialOpen={{ tasks: true }} longLabels /> },
           ]}
         />
       </StorySection>
-      <StorySection title="Usage · Scroll" description="메뉴 영역만 세로 스크롤 · 브랜드·프로필 고정">
+      <StorySection title="Usage · Scroll">
         <StateBoard
           min={560}
           states={[
             { id: "scroll", label: "Scroll", children: <ResponsiveSpecimen nodes={simpleNav(false, true)} initial="overview" initialOpen={{ tasks: true }} height={460} /> },
-            { id: "third-scroll", label: "3뎁스 메뉴 · Scroll", note: "스크롤 영역: 브랜드 아래 ~ 프로필 위", children: <ResponsiveSpecimen nodes={thirdLevelNav(true, true)} initial="projects/design/layout" initialOpen={{ projects: true, "projects/design": true }} longLabels height={460} /> },
+            { id: "third-scroll", label: "3뎁스 · Scroll", children: <ResponsiveSpecimen nodes={thirdLevelNav(true, true)} initial="projects/design/layout" initialOpen={{ projects: true, "projects/design": true }} longLabels height={460} /> },
           ]}
         />
       </StorySection>
-      <StorySection
-        title="Usage · LNB Standalone 반응형 (GNB 없음)"
-        description="1023px 이하는 모바일 바 + Sheet"
-      >
+      <StorySection title="Usage · Standalone 반응형">
         <div className="flex flex-wrap items-start gap-6">
           <ViewportPreview story="standalone-desktop" label="Desktop" width={1024} height={640} />
           <ViewportPreview story="standalone-mobile" label="Mobile" width={390} height={640} />

src/patterns/loading-screen.stories.tsx

@@ -32,10 +32,7 @@ export const All: Story = {
   parameters: { layout: "fullscreen" },
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Loading Screen"
-        description="Inline은 부모 영역, fullscreen은 viewport 전체"
-      />
+      <StoryPageHeader title="Loading Screen" />
       <StorySection title="Overview">
         <LoadingScreen />
       </StorySection>

src/patterns/page-header.stories.tsx

@@ -12,7 +12,7 @@ import {
   PageHeaderContent,
   PageHeaderDescription,
   PageHeaderTitle,
-  Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
   Tabs, TabsContent, TabsList, TabsTrigger,
 } from "@hm-design/ui"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
@@ -31,14 +31,11 @@ export const All: Story = {
   name: "Page Header",
   render: () => (
     <StoryPage>
-      <StoryPageHeader
-        title="Page Header"
-        description="기본형은 제목 중심 · 설명·액션·Breadcrumb는 선택"
-      />
+      <StoryPageHeader title="Page Header" />
       <StorySection title="Overview">
         <PageHeader><PageHeaderContent><PageHeaderTitle>업무 현황</PageHeaderTitle></PageHeaderContent></PageHeader>
       </StorySection>
-      <StorySection title="Breadcrumb 포함형" description="제목→설명 8px · Header→Tabs 20px">
+      <StorySection title="Breadcrumb 포함형">
         <PageHeader>
           <PageHeaderContent>
             <Breadcrumb>
@@ -71,8 +68,7 @@ export const All: Story = {
             <TabsTrigger value="completed">완료 업무</TabsTrigger>
           </TabsList>
           <TabsContent value="mine" className="px-0 py-6">
-            <Table>
-              <TableCaption>내 업무 일정 예시</TableCaption>
+            <Table aria-label="내 업무">
               <TableHeader><TableRow><TableHead scope="col">업무</TableHead><TableHead scope="col">마감일</TableHead><TableHead scope="col">상태</TableHead></TableRow></TableHeader>
               <TableBody>
                 <TableRow><TableCell>화면 설계서 검토</TableCell><TableCell>10월 14일</TableCell><TableCell>검토</TableCell></TableRow>
@@ -81,8 +77,7 @@ export const All: Story = {
             </Table>
           </TabsContent>
           <TabsContent value="completed" className="px-0 py-6">
-            <Table>
-              <TableCaption>완료 업무 예시</TableCaption>
+            <Table aria-label="완료 업무">
               <TableHeader><TableRow><TableHead scope="col">업무</TableHead><TableHead scope="col">완료일</TableHead><TableHead scope="col">상태</TableHead></TableRow></TableHeader>
               <TableBody><TableRow><TableCell>프로젝트 기본 정보 등록</TableCell><TableCell>10월 9일</TableCell><TableCell>완료</TableCell></TableRow></TableBody>
             </Table>