From e47eb040f29f415bc50cce81bc75aedea9ac9f43 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 13:59:46 +0900 Subject: [PATCH] feat(storybook): refine manager layout and Hanmac branding --- .storybook/manager.css | 6 ++++++ .storybook/manager.js | 3 ++- .storybook/preview.tsx | 2 +- .storybook/qa/STORY-INVENTORY.md | 4 ++-- .storybook/qa/story-inventory.json | 4 ++-- docs/guidelines/brand-color-steps.md | 6 +++--- src/foundation/color.stories.tsx | 8 ++++---- 7 files changed, 20 insertions(+), 13 deletions(-) diff --git a/.storybook/manager.css b/.storybook/manager.css index 3f1704c..3682277 100644 --- a/.storybook/manager.css +++ b/.storybook/manager.css @@ -65,6 +65,8 @@ padding: 0; color: var(--color-fg-on-green-primary); } +/* The Settings button is hidden, so the title uses the full header width. */ +#storybook-sidebar-region .sidebar-header > div { margin-right: 0; } #storybook-sidebar-region .sidebar-header > div a { color: var(--color-fg-on-green-primary); font: 700 16px/30px var(--hm-manager-font); @@ -103,6 +105,10 @@ } /* Storybook's named creation action only; search/filter remain available. */ #storybook-sidebar-region button[aria-label='Create a new story'] { display: none; } +/* Storybook Settings menu trigger only; sidebar search, tag filter and expand/collapse remain. */ +#storybook-sidebar-region .sidebar-header button[aria-label='Settings'] { display: none; } +/* Storybook sidebar search landmark (input, icon, shortcut hint, tag filter); the tree and header remain. */ +#storybook-sidebar-region [role='search'] { display: none; } #storybook-explorer-tree .sidebar-subheading { position: relative; diff --git a/.storybook/manager.js b/.storybook/manager.js index e9ff6df..f31a097 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -31,13 +31,14 @@ document.head.appendChild(toolbarStyle) addons.setConfig({ layout: { showPanel: false, + showToolbar: false, // LNB width 246px. recentVisibleSizes keeps the same width when the sidebar is collapsed and expanded again. navSize: 246, recentVisibleSizes: { navSize: 246 }, }, theme: create({ base: 'light', - brandTitle: 'HM Design System', + brandTitle: 'Hanmac Design System', brandUrl: './', brandTarget: '_self', fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif", diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index e988b90..6da5757 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -25,7 +25,7 @@ const preview: Preview = { includeNames: true, order: [ "Foundation", - ["HM Color", "Company Colors", "Typography", "Layout"], + ["Hanmac Color", "Company Colors", "Typography", "Layout"], "Components", [ "Form", diff --git a/.storybook/qa/STORY-INVENTORY.md b/.storybook/qa/STORY-INVENTORY.md index 2194292..8a94d23 100644 --- a/.storybook/qa/STORY-INVENTORY.md +++ b/.storybook/qa/STORY-INVENTORY.md @@ -499,11 +499,11 @@ Source: `src/components/tooltip.stories.tsx`; meta.tags: [] - All — Tooltip; tags: []; PRIMARY; KEEP. Representative story or distinct reference page. - Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar. -### Foundation/HM Color +### Foundation/Hanmac Color Source: `src/foundation/color.stories.tsx`; meta.tags: [] -- All — HM Color; tags: []; PRIMARY; KEEP. Representative story or distinct reference page. +- All — Hanmac Color; tags: []; PRIMARY; KEEP. Representative story or distinct reference page. ### Foundation/Company Colors diff --git a/.storybook/qa/story-inventory.json b/.storybook/qa/story-inventory.json index 3fe65fa..65a1f54 100644 --- a/.storybook/qa/story-inventory.json +++ b/.storybook/qa/story-inventory.json @@ -3637,13 +3637,13 @@ }, { "file": "src/foundation/color.stories.tsx", - "title": "Foundation/HM Color", + "title": "Foundation/Hanmac Color", "metaTags": [], "stories": [ { "id": "foundation-color--all", "exportName": "All", - "name": "HM Color", + "name": "Hanmac Color", "storyTags": [], "effectiveTags": [], "category": "PRIMARY", diff --git a/docs/guidelines/brand-color-steps.md b/docs/guidelines/brand-color-steps.md index 07ef203..9d010cf 100644 --- a/docs/guidelines/brand-color-steps.md +++ b/docs/guidelines/brand-color-steps.md @@ -33,8 +33,8 @@ Orange Dark 1·2의 원본 Needs Review 상태와 [이전 검수 보고서](../r ## 호환성과 Storybook -페이지 제목은 `HM Color`(메뉴 `Foundation > HM Color`)이며 별도 소개 문구는 표시하지 않는다. 기존 Story ID `foundation-color--all`은 `meta.id`로 유지한다. 과거 `한맥 브랜드 컬러` 소개 문구는 당시 이력이다. 그룹 설명의 단계 순서 나열 문구는 제공하지 않으며, 개별 컬러칩의 단계명과 HEX는 유지한다. +페이지 제목은 `Hanmac Color`(메뉴 `Foundation > Hanmac Color`)이며 별도 소개 문구는 표시하지 않는다. 기존 Story ID `foundation-color--all`은 `meta.id`로 유지한다. 과거 `한맥 브랜드 컬러` 소개 문구는 당시 이력이다. 그룹 설명의 단계 순서 나열 문구는 제공하지 않으며, 개별 컬러칩의 단계명과 HEX는 유지한다. -[HM Color 대표 Story](../../src/foundation/color.stories.tsx)는 한맥그린·한맥브라운·한맥오렌지 3개 그룹에 각 8개, 총 24개 컬러칩만 표시한다. Green 8/8·Brown 8/8·Orange 8/8 확정이며 단계명·현재 HEX와 Default 기본색 강조를 유지한다. 2026-10-11 최종 표시 요청에 따라 Brown Deep, Orange Light·Mid·Dark·Deep의 별도 표시, Accent·Semantic·Gradients 섹션과 개발용 Token·CSS Variable·Runtime Key 설명은 제거한다. Legacy Button 색상과 Accent·Semantic·Gradient의 실제 Key·값·소비처는 보존한다. 기존 Component mapping을 새 값에 연결하지 않으며 public Key·Property·type·Default·API·schemaVersion 1과 서비스 partial JSON 호환성을 유지한다. [Runtime Theme](runtime-theme.md)의 geometry/상태 권한과 Designer의 기존 17개 상위 역할 입력 UI는 확대하지 않는다. 한맥오렌지의 미확정 브랜드 단계는 없다. [표시 정리 검증 기록](../reports/foundation-color-display-cleanup-2026-10-11.md). +[Hanmac Color 대표 Story](../../src/foundation/color.stories.tsx)는 한맥그린·한맥브라운·한맥오렌지 3개 그룹에 각 8개, 총 24개 컬러칩만 표시한다. Green 8/8·Brown 8/8·Orange 8/8 확정이며 단계명·현재 HEX와 Default 기본색 강조를 유지한다. 2026-10-11 최종 표시 요청에 따라 Brown Deep, Orange Light·Mid·Dark·Deep의 별도 표시, Accent·Semantic·Gradients 섹션과 개발용 Token·CSS Variable·Runtime Key 설명은 제거한다. Legacy Button 색상과 Accent·Semantic·Gradient의 실제 Key·값·소비처는 보존한다. 기존 Component mapping을 새 값에 연결하지 않으며 public Key·Property·type·Default·API·schemaVersion 1과 서비스 partial JSON 호환성을 유지한다. [Runtime Theme](runtime-theme.md)의 geometry/상태 권한과 Designer의 기존 17개 상위 역할 입력 UI는 확대하지 않는다. 한맥오렌지의 미확정 브랜드 단계는 없다. [표시 정리 검증 기록](../reports/foundation-color-display-cleanup-2026-10-11.md). -[Company Colors Story](../../src/foundation/company-colors.stories.tsx)는 Foundation > HM Color와 별도 메뉴(HM Color 바로 아래)이며 7개 계열사·14개 컬러를 회사별로 표시한다(별도 소개 문구 없음). 데이터는 OrgChart의 기존 `companyColorPresets`를 그대로 읽고(메인 → 서브 순서, 메인은 Default 강조 재사용) HEX를 중복 정의하지 않는다. Theme 토큰·`themes/*.json`·공개 계약은 변경하지 않으며 Foundation > HM Color의 3그룹 24칩은 그대로다. +[Company Colors Story](../../src/foundation/company-colors.stories.tsx)는 Foundation > Hanmac Color와 별도 메뉴(Hanmac Color 바로 아래)이며 7개 계열사·14개 컬러를 회사별로 표시한다(별도 소개 문구 없음). 데이터는 OrgChart의 기존 `companyColorPresets`를 그대로 읽고(메인 → 서브 순서, 메인은 Default 강조 재사용) HEX를 중복 정의하지 않는다. Theme 토큰·`themes/*.json`·공개 계약은 변경하지 않으며 Foundation > Hanmac Color의 3그룹 24칩은 그대로다. diff --git a/src/foundation/color.stories.tsx b/src/foundation/color.stories.tsx index db80aac..62c1cf7 100644 --- a/src/foundation/color.stories.tsx +++ b/src/foundation/color.stories.tsx @@ -35,13 +35,13 @@ function ColorChip({ prefix, stage, values }: { prefix: PalettePrefix; stage: Co function ColorReferencePage() { const values = useResolvedProperties(colorProperties) - return + return {palettes.map(palette =>
{stages.map(stage => )}
)} } -// The sidebar name is "HM Color"; `id` keeps the existing Story ID (foundation-color--all) stable. -const meta = { title: "Foundation/HM Color", id: "foundation-color", parameters: { layout: "fullscreen" } } satisfies Meta +// The sidebar name is "Hanmac Color"; `id` keeps the existing Story ID (foundation-color--all) stable. +const meta = { title: "Foundation/Hanmac Color", id: "foundation-color", parameters: { layout: "fullscreen" } } satisfies Meta export default meta -export const All: StoryObj = { name: "HM Color", render: () => } +export const All: StoryObj = { name: "Hanmac Color", render: () => }