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.
This commit is contained in:
shkim4 committed 2026-10-23 00:28:05 +09:00
1 parent 48977e7823
commit 4c29894e56
81 files changed
+520 -671

No files matched your search

+19 -38
View File
@@ -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>
),
}