From ea984ab3a689db8ce8b7c0190f7b18b9f0712eab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Mon, 9 Nov 2026 19:23:23 +0900 Subject: [PATCH] chore(storybook): refine navigation and foundation labels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Rename Foundation/Typography to 폰트 and SW/Footer to SW/하단 명령어바 in the sidebar order; Story IDs are kept (foundation-typography, sw-footer). - Hanmac Color: label Light 4 as "보더 하이라이트용" and add a divider between Light 4 and Light 3. - Hide Patterns/Layout/Page Header from the sidebar with the verification tag (Story IDs and direct URLs are unchanged). - Remove the Variants section from the representative LNB page; With Logo and Long Labels remain as verification Stories. --- .storybook/preview.tsx | 4 ++-- src/foundation/color.stories.tsx | 2 +- src/foundation/foundation.css | 3 +++ src/foundation/typography.stories.tsx | 7 ++++--- src/patterns/lnb.stories.tsx | 9 --------- src/patterns/page-header.stories.tsx | 1 + 6 files changed, 11 insertions(+), 15 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 741e0f3..4ad220b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -25,7 +25,7 @@ const preview: Preview = { includeNames: true, order: [ "Foundation", - ["한맥 컬러", "가족사 컬러", "Typography"], + ["한맥 컬러", "가족사 컬러", "폰트"], "Components", [ "Form", @@ -46,7 +46,7 @@ const preview: Preview = { "Patterns", ["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]], "SW", - ["Header", ["SW Header", "*"], "Footer", ["SW Footer", "*"], "Popup", "Viewer", "Theme"], + ["Header", ["SW Header", "*"], "하단 명령어바", ["SW 하단 명령어바", "*"], "Popup", "Viewer", "Theme"], "조직도", ["개요", "부서별 색상", "전체 구성", "확장 조직도"], "노선도", diff --git a/src/foundation/color.stories.tsx b/src/foundation/color.stories.tsx index 1157979..3658a39 100644 --- a/src/foundation/color.stories.tsx +++ b/src/foundation/color.stories.tsx @@ -11,7 +11,7 @@ const palettes = [ ] as const type ColorStage = typeof stages[number] type PalettePrefix = typeof palettes[number]["prefix"] -const stageLabel = (stage: ColorStage) => stage === "default" ? "Default · 기본색" : stage.replaceAll("-", " ").replace(/^./, letter => letter.toUpperCase()) +const stageLabel = (stage: ColorStage) => stage === "default" ? "Default · 기본색" : stage === "light-4" ? "Light 4 · 보더 하이라이트용" : stage.replaceAll("-", " ").replace(/^./, letter => letter.toUpperCase()) const paletteToken = (prefix: PalettePrefix, stage: ColorStage) => `color.palette.${prefix}-${stage}` as RuntimeThemeToken const colorProperties = palettes.flatMap(palette => stages.map(stage => runtimeThemeContract[paletteToken(palette.prefix, stage)].property)) diff --git a/src/foundation/foundation.css b/src/foundation/foundation.css index 5a95199..ef29866 100644 --- a/src/foundation/foundation.css +++ b/src/foundation/foundation.css @@ -27,6 +27,9 @@ .hm-brand-color-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; } .hm-brand-color-chip { flex: 1 0 110px; min-width: 0; padding: 8px; border: 1px solid var(--hm-sem-stroke-default); } .hm-brand-color-chip[data-base] { border: 2px solid var(--hm-sem-fg-primary); font-weight: var(--hm-font-weight-bold); } +/* Hanmac Color only (data-color-stage): wider gap (8px + 16px extra = 24px) between Light 4 and Light 3 with a divider centered in it. */ +.hm-brand-color-chip[data-color-stage="light-3"] { --hm-color-divider-extra: 16px; position: relative; margin-left: var(--hm-color-divider-extra); } +.hm-brand-color-chip[data-color-stage="light-3"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1px - 0.5px - (8px + var(--hm-color-divider-extra)) / 2); width: 1px; background: var(--hm-sem-stroke-default); pointer-events: none; } .hm-brand-color-chip h3, .hm-brand-color-chip p { margin: 8px 0 0; font-size: 13px; } /* Color reference additions only; preserve the existing palette row and Default emphasis. */ diff --git a/src/foundation/typography.stories.tsx b/src/foundation/typography.stories.tsx index 050ebc6..fab208d 100644 --- a/src/foundation/typography.stories.tsx +++ b/src/foundation/typography.stories.tsx @@ -43,7 +43,7 @@ function SpecimenTable({ rows }: { rows: readonly TypographyReference[] }) { function TypographyReferencePage() { const values = useResolvedProperties(typographyProperties) - return + return

Noto Sans KR → 맑은 고딕 → 시스템 sans-serif--hm-font-family-base: {values["--hm-font-family-base"]}

 @@ -59,6 +59,7 @@ function TypographyReferencePage() { } -const meta = { title: "Foundation/Typography", parameters: { layout: "fullscreen" } } satisfies Meta +// The sidebar name is "폰트"; `id` keeps the existing Story ID (foundation-typography--all) stable. +const meta = { title: "Foundation/폰트", id: "foundation-typography", parameters: { layout: "fullscreen" } } satisfies Meta export default meta -export const All: StoryObj = { name: "Typography", render: () => } +export const All: StoryObj = { name: "폰트", render: () => } diff --git a/src/patterns/lnb.stories.tsx b/src/patterns/lnb.stories.tsx index 85a5f49..7f4eb56 100644 --- a/src/patterns/lnb.stories.tsx +++ b/src/patterns/lnb.stories.tsx @@ -641,15 +641,6 @@ export const All: Story = { ]} /> - - }, - { id: "long", label: "Long Labels", children: }, - ]} - /> - ), } diff --git a/src/patterns/page-header.stories.tsx b/src/patterns/page-header.stories.tsx index 796ebcf..bb4035e 100644 --- a/src/patterns/page-header.stories.tsx +++ b/src/patterns/page-header.stories.tsx @@ -20,6 +20,7 @@ import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-pag const meta = { title: "Patterns/Layout/Page Header", + tags: ["verification"], // 임시 숨김: 사이드바에서만 제외. 다시 표시하려면 이 줄 삭제 component: PageHeader, parameters: { layout: "fullscreen", controls: { disable: true } }, } satisfies Meta