docs(storybook): simplify sidebar Story pages around the UI

Drop the category kicker from the 83 sidebar Stories (kicker is now optional;
hidden verification Stories keep it) and shorten or remove repeated, obvious
or internal page/section descriptions. Required specs, limits, virtual-data
and undecided-value notices stay. Story IDs, exports, fixtures, shared state
notes and package code are unchanged. Record: docs/reports/storybook-ui-simplification-2026-10-22.md

src/patterns/dashboard-layout.stories.tsx

@@ -55,7 +55,7 @@ import {
   useDataTable,
   type DataTableColumnDef,
 } from "@hm-design/ui"
-import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 import { formatDate } from "./sample-users"
 import { countDashboardWorkFilter, dashboardWorks, dashboardWorkFilters, dashboardWorkStatus, dashboardWorkStyle, matchesDashboardWorkStatus, type DashboardWork, type DashboardWorkFilter } from "./dashboard-work-status"
 import "./dashboard-layout.stories.css"
@@ -431,13 +431,12 @@ export function DashboardAll() {
   return (
     <StoryPage>
       <StoryPageHeader
-        kicker={STORY_KICKER.patterns}
         title="Dashboard"
-        description="업무 화면의 전체 틀입니다. DASHBOARD 단일 모드로, 내부 48px Compact Header와 상태 필터 바 아래에 콘텐츠를 바로 잇습니다."
+        description="DASHBOARD 단일 모드 · 48px Compact Header + 상태 필터 + 콘텐츠"
       />
       <StorySection
         title="Overview"
-        description="Compact Header(48px) · 상태 필터 · 콘텐츠. 최소 폭 960px을 유지하며 좁은 화면에서는 Dashboard 전체를 가로 스크롤합니다."
+        description="최소 폭 960px · 좁으면 가로 스크롤"
       >
         <DashboardScreen mode="compact" />
       </StorySection>

src/patterns/data-table.stories.tsx

@@ -29,7 +29,7 @@ import {
 } from "@hm-design/ui"
 import "../list-screen.css"
 import { MoreHorizontalIcon } from "lucide-react"
-import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 import { formatDate, sameDay, sampleUsers, statusLabel, type SampleUser } from "./sample-users"
 
 // Data Table is a pattern: the HM Table primitive driven by TanStack Table v9 (useDataTable). Columns and data stay referentially stable
@@ -154,15 +154,14 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader
-        kicker={STORY_KICKER.patterns}
         title="Data Table"
-        description="업무 목록을 표로 보여 주는 Pattern입니다. 선택·정렬·열 표시·페이지 이동을 하나의 표에서 다룹니다."
+        description="선택 · 정렬 · 열 표시 · 페이지 이동"
       />
-      <StorySection title="Overview" description="행 선택(헤더 혼합 상태), 정렬, 열 표시, 행 작업, 페이지 크기와 페이지 이동을 실제로 조작합니다.">
+      <StorySection title="Overview">
         <Basic />
       </StorySection>
-      <StorySection title="기본 목록 검색" description="조건·검색어·조회·초기화를 8px 간격으로 가운데 정렬합니다. 공간이 충분하면 열 버튼은 같은 행 우측, 부족할 때만 다음 행에 배치합니다. 제목은 Card 밖에 배치합니다."><WithFilterBar extended={false} /></StorySection>
-      <StorySection title="추가 조건 목록 검색" description="부서·등록일을 제공하는 구성은 입력값과 관계없이 왼쪽 정렬합니다. 열 버튼은 공간이 충분하면 같은 행 우측에 배치하며 모바일 버튼 행은 우측 정렬합니다."><WithFilterBar /></StorySection>
+      <StorySection title="기본 목록 검색" description="8px 간격 가운데 정렬 · 열 버튼은 공간 부족 시만 다음 행 · 제목은 Card 밖"><WithFilterBar extended={false} /></StorySection>
+      <StorySection title="추가 조건 목록 검색" description="부서·등록일 구성은 왼쪽 정렬 · 모바일 버튼 행은 우측 정렬"><WithFilterBar /></StorySection>
     </StoryPage>
   ),
 }

src/patterns/filter-bar.stories.tsx

@@ -14,7 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@hm-design/ui"
-import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Filter Bar is a layout pattern: the consumer composes the HM controls as children and owns every value. It does not depend on Data Table.
 
@@ -85,14 +85,13 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader
-        kicker={STORY_KICKER.patterns}
         title="Filter Bar"
-        description="목록 위에서 조회 조건을 고르는 레이아웃 Pattern입니다. HM 컨트롤을 children으로 조합하며 모든 값은 소비 코드가 소유합니다. Data Table에 의존하지 않습니다."
+        description="HM 컨트롤을 children으로 조합 · 값은 소비 코드 소유 · Data Table 비의존"
       />
-      <StorySection title="Overview" description="검색 · Select · Combobox · Date Picker와 초기화 / 조회 버튼입니다. 폭이 좁으면 줄바꿈됩니다.">
+      <StorySection title="Overview" description="좁은 폭에서 줄바꿈">
         <Full />
       </StorySection>
-      <StorySection title="Usage" description="추가 조건은 list-extended, 기본 조건은 list-basic. 기본 layout은 기존 행 끝 정렬을 유지합니다. 390px에서는 검색과 액션이 줄바꿈됩니다.">
+      <StorySection title="Usage" description="list-extended / list-basic · 390px에서 검색·액션 줄바꿈">
         <p>입력은 draft로 유지하고 조회에만 적용합니다. 초기화는 입력과 적용값을 함께 비웁니다. 목록은 PageHeader 밖의 흰 Card 하나에 검색과 결과를 함께 배치합니다.</p>
       </StorySection>
       <StorySection title="Do & Don't" description="요구한 조건과 액션만 구성합니다.">

src/patterns/gnb.stories.tsx

@@ -46,7 +46,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@hm-design/ui"
-import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // GNB is a composition pattern. Layout visual reference is the ui-viz GNB (green 70px bar, centered menu, Beige current item joined to
 // the content, White 2-depth panel, text-only profile); every part inside is an HM component. The menu data, the user and the current
@@ -433,13 +433,12 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader
-        kicker={STORY_KICKER.patterns}
         title="GNB"
-        description="서비스 최상단의 전역 내비게이션입니다. 1024px 이상은 Desktop 메뉴, 1023px 이하는 햄버거 → Sheet 메뉴를 사용합니다."
+        description="1024px 이상 Desktop 메뉴 · 1023px 이하 햄버거 → Sheet"
       />
       <StorySection
         title="Overview"
-        description="현재 위치(대시보드)는 Beige 면이 아래 콘텐츠와 오목하게 이어집니다. hover는 Black 10%. 프로젝트·관리는 hover/click으로 White 하위 패널이 열립니다."
+        description="현재 위치 Beige · hover Black 10% · 하위 패널은 hover / click"
       >
         <Page>
           <Bar />
@@ -447,7 +446,7 @@ export const All: Story = {
       </StorySection>
       <StorySection
         title="States · Navigation Menu Open"
-        description="프로젝트 메뉴가 열려 White 면으로 패널과 이어지고, 하위 현재 위치(진행 중 프로젝트)는 Beige로 표시됩니다. 긴 하위 이름은 Desktop 패널 폭을 확장하여 한 줄로 표시합니다."
+        description="하위 현재 위치 Beige · 긴 하위 이름은 패널 폭 확장"
       >
         <div style={{ minHeight: 360 }}>
           <Page label="프로젝트 > 진행 중 프로젝트">
@@ -457,7 +456,7 @@ export const All: Story = {
       </StorySection>
       <StorySection
         title="Variants · Long Labels"
-        description="긴 브랜드명·메뉴명·사용자명. 브랜드와 사용자 글자는 말줄임, 메뉴 항목은 줄바꿈 없이 유지되고 공간을 넘으면 메뉴 영역에서 잘립니다."
+        description="브랜드·사용자는 말줄임 · 메뉴는 줄바꿈 없이 영역에서 잘림"
       >
         <Page>
           <Bar items={longNavItems} person={longUser} eyebrow="한맥기술 인프라 통합 시스템" brand="스마트 시설물 통합 관리 시스템" />
@@ -465,7 +464,7 @@ export const All: Story = {
       </StorySection>
       <StorySection
         title="Variants · With Logo"
-        description="로고 asset이 있을 때만 왼쪽에 원본 비율로 놓입니다. 없으면 영역·간격 없이 글자만 둡니다(Overview). 표시 이미지는 배치 확인용 테스트 이미지이며 한맥 로고가 아닙니다."
+        description="로고는 있을 때만 원본 비율 · 테스트 이미지(한맥 로고 아님)"
       >
         <Page>
           <Bar logo={testLogo} />
@@ -473,7 +472,7 @@ export const All: Story = {
       </StorySection>
       <StorySection
         title="Variants · Utilities"
-        description="선택 사항. ui-viz의 GNB 오른쪽은 이름·역할만 둡니다. 검색·알림이 필요한 서비스는 HM ghost Button 아이콘을 GNBUtilities에 조합합니다(Tooltip, Badge, Popover, Command)."
+        description="선택 사항 · 검색·알림은 GNBUtilities에 ghost Button 아이콘 조합"
       >
         <Page>
           <Bar utilities />
@@ -481,15 +480,15 @@ export const All: Story = {
       </StorySection>
       <StorySection
         title="Usage · Sticky"
-        description="일반 GNB와 같은 외형으로 스크롤 영역 상단에 붙습니다. 본문 위에서 휠/터치로 스크롤하거나 영역에 포커스한 뒤 PageDown/End/Home 키로 확인합니다."
+        description="스크롤 영역 상단에 고정"
       >
         <StickyPage />
       </StorySection>
       <StorySection title="Usage · GNB Sidebar"
-        description="기존 Reference 전용 콘텐츠 LNB입니다. 본문과 같은 배경, 세로 구분선 하나, 아이콘 기본 생략·화살표 유지. 신규 AI GNB_ONLY 화면에는 Sidebar를 생성하지 않습니다.">
+        description="기존 Reference 전용 · 신규 AI GNB_ONLY 화면에는 Sidebar 생성 금지">
         <SidebarPage />
       </StorySection>
-      <StorySection title="Usage · Brown 콘텐츠 LNB" description="기존 Reference의 Brown 선택·Hover를 비교합니다. Green 선택색을 혼용하지 않습니다."><SidebarPage color="brown" /></StorySection>
+      <StorySection title="Usage · Brown 콘텐츠 LNB" description="Brown 선택·Hover · Green 선택색 혼용 금지"><SidebarPage color="brown" /></StorySection>
     </StoryPage>
   ),
 }

src/patterns/lnb.stories.tsx

@@ -31,7 +31,7 @@ import {
   LNBMobileMenu,
 } from "@hm-design/ui"
 import { StateBoard } from "@/components/story-board"
-import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // LNB is a composition pattern. Layout visual reference is the ui-viz LNB (272px green column, 18/700 items, Beige current item joined
 // to the content, Black 10% hover, Black 8% open group). The menu data and the current location are local sample data for this Story
@@ -634,53 +634,52 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader
-        kicker={STORY_KICKER.patterns}
         title="LNB"
-        description="화면 왼쪽의 지역 내비게이션입니다. 1024px 이상에서 표시하고, 1023px 이하는 숨긴 뒤 모바일 메뉴로 대체합니다."
+        description="1024px 이상 표시 · 1023px 이하 모바일 메뉴로 대체"
       />
-      <StorySection title="Overview" description="모든 뎁스 18px. 선택은 Beige 면 + 초록 글자, 왼쪽 모서리 8로 콘텐츠와 오목하게 이어집니다.">
+      <StorySection title="Overview" description="모든 뎁스 18px · 선택 Beige 면 + 초록 글자">
         <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뎁스 메뉴 · 선택", note: "3뎁스 20px 들여쓰기 · 1px 그린 연결선", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": true }} /> },
           ]}
         />
       </StorySection>
-      <StorySection title="States" description="그룹 펼침·접힘과 하위 선택에 따른 표시입니다. 선택된 경로의 상위는 접혀도 노란색을 유지합니다.">
+      <StorySection title="States" description="선택 경로의 상위는 접혀도 노란색">
         <StateBoard
           min={560}
           states={[
-            { id: "default", label: "Default · 기존 LNB", note: "선택 없음, 2뎁스 그룹 접힘. 항목에 마우스를 올리면 Black 10%가 콘텐츠 경계까지 닿습니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: false }} /> },
+            { 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: "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 }} /> },
           ]}
         />
       </StorySection>
-      <StorySection title="Variants" description="로고 유무와 긴 이름입니다.">
+      <StorySection title="Variants">
         <StateBoard
           min={560}
           states={[
-            { id: "with-logo", label: "With Logo · 로고 있음(테스트 이미지)", note: "로고는 서비스명 위, 같은 시작선. 없으면 영역·간격 없이 서비스명만 둡니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} logo={testLogo} /> },
+            { 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 /> },
           ]}
         />
       </StorySection>
-      <StorySection title="Usage · Scroll" description="메뉴가 열보다 길면 메뉴 영역만 세로로 스크롤하고 브랜드·프로필은 그대로입니다(높이 460).">
+      <StorySection title="Usage · Scroll" description="메뉴 영역만 세로 스크롤 · 브랜드·프로필 고정">
         <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: "3뎁스·연결선·긴 이름도 메뉴 영역 안에서 함께 스크롤됩니다. 스크롤 영역은 브랜드 바로 아래에서 시작해 프로필 바로 위에서 끝납니다.", 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", note: "스크롤 영역: 브랜드 아래 ~ 프로필 위", 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="1024px 이상은 왼쪽 LNB의 브랜드·프로필을, 1023px 이하는 LNB를 숨긴 뒤 Local 모바일 바와 Sheet의 메뉴·프로필을 사용합니다. 열림·키보드·Escape는 LNB Standalone Mobile Menu Open에서 확인합니다."
+        description="1023px 이하는 모바일 바 + Sheet"
       >
         <div className="flex flex-wrap items-start gap-6">
           <ViewportPreview story="standalone-desktop" label="Desktop" width={1024} height={640} />

src/patterns/loading-screen.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Button, LoadingScreen } from "@hm-design/ui"
 import { StateBoard } from "@/components/story-board"
-import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Loading Screen is a Dashboard-local pattern (ui-viz LoadingScreen). Inline fills its parent; fullscreen covers the viewport. The
 // fullscreen demo is mounted and removed by local state only; there is no async task, cancel or close control in the pattern.
@@ -33,14 +33,13 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader
-        kicker={STORY_KICKER.patterns}
         title="Loading Screen"
-        description="Dashboard 안에서 데이터를 불러오는 동안 표시하는 화면입니다. Inline은 부모 영역을 채우고, fullscreen은 viewport 전체를 덮습니다."
+        description="Inline은 부모 영역, fullscreen은 viewport 전체"
       />
-      <StorySection title="Overview" description="Inline: 부모 영역(여기서는 공통 Inner 폭)을 채웁니다.">
+      <StorySection title="Overview">
         <LoadingScreen />
       </StorySection>
-      <StorySection title="Variants" description="사용자 문구와 좁은 부모 영역입니다.">
+      <StorySection title="Variants">
         <StateBoard
           states={[
             { id: "label", label: "Custom label", children: <LoadingScreen>데이터를 불러오는 중</LoadingScreen> },
@@ -48,7 +47,7 @@ export const All: Story = {
           ]}
         />
       </StorySection>
-      <StorySection title="Usage" description="fullscreen은 viewport 전체를 덮습니다. 버튼으로 열고 오른쪽 위 닫기로 닫습니다.">
+      <StorySection title="Usage">
         <Fullscreen />
       </StorySection>
     </StoryPage>

src/patterns/page-header.stories.tsx

@@ -15,7 +15,7 @@ import {
   Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,
   Tabs, TabsContent, TabsList, TabsTrigger,
 } from "@hm-design/ui"
-import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 const meta = {
   title: "Patterns/Layout/Page Header",
@@ -32,14 +32,13 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader
-        kicker={STORY_KICKER.patterns}
         title="Page Header"
-        description="기본형은 Breadcrumb 없이 제목 중심입니다. 설명·액션·Breadcrumb는 화면의 필요에 따라 선택 적용합니다."
+        description="기본형은 제목 중심 · 설명·액션·Breadcrumb는 선택"
       />
-      <StorySection title="Overview" description="제목 중심 기본형입니다. Breadcrumb는 생략하고 필요한 설명·액션을 선택 적용합니다.">
+      <StorySection title="Overview">
         <PageHeader><PageHeaderContent><PageHeaderTitle>업무 현황</PageHeaderTitle></PageHeaderContent></PageHeader>
       </StorySection>
-      <StorySection title="Breadcrumb 포함형" description="Breadcrumb·설명·단일 Brand Action과 Primary Tabs 조합입니다. 제목→설명 8px, Header→Tabs 20px을 유지합니다.">
+      <StorySection title="Breadcrumb 포함형" description="제목→설명 8px · Header→Tabs 20px">
         <PageHeader>
           <PageHeaderContent>
             <Breadcrumb>