From 031f88033dfb3dee10aeab98284f0652a6cfd9a1 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 18:26:09 +0900 Subject: [PATCH] style(storybook): localize Foundation menu and reorder sidebar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - brand title to 한맥 디자인 시스템 - Foundation: 한맥 컬러 / 가족사 컬러 titles, Story IDs kept via explicit id - Company Colors card order 2/2/3, Foundation/Layout hidden with verification tag - sidebar order for Foundation and 조직도 --- .storybook/manager.js | 2 +- .storybook/preview.tsx | 6 +++--- src/foundation/color.stories.tsx | 8 ++++---- src/foundation/company-colors.stories.tsx | 19 ++++++++++++++----- src/foundation/foundation.css | 3 +++ src/foundation/layout.stories.tsx | 3 ++- 6 files changed, 27 insertions(+), 14 deletions(-) diff --git a/.storybook/manager.js b/.storybook/manager.js index f31a097..bc20103 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -38,7 +38,7 @@ addons.setConfig({ }, theme: create({ base: 'light', - brandTitle: 'Hanmac Design System', + brandTitle: '한맥 디자인 시스템', 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 9f246aa..741e0f3 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -25,7 +25,7 @@ const preview: Preview = { includeNames: true, order: [ "Foundation", - ["Hanmac Color", "Company Colors", "Typography", "Layout"], + ["한맥 컬러", "가족사 컬러", "Typography"], "Components", [ "Form", @@ -47,8 +47,8 @@ const preview: Preview = { ["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]], "SW", ["Header", ["SW Header", "*"], "Footer", ["SW Footer", "*"], "Popup", "Viewer", "Theme"], - "OrgChart", - ["Overview", "Department Colors", "Full Composition", "Expanded OrgChart"], + "조직도", + ["개요", "부서별 색상", "전체 구성", "확장 조직도"], "노선도", "*", // With includeNames, keeps the Loader group after the Runtime Contract Stories (its place without names). diff --git a/src/foundation/color.stories.tsx b/src/foundation/color.stories.tsx index 62c1cf7..1157979 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 "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 +// The sidebar name is "한맥 컬러"; `id` keeps the existing Story ID (foundation-color--all) stable. +const meta = { title: "Foundation/한맥 컬러", id: "foundation-color", parameters: { layout: "fullscreen" } } satisfies Meta export default meta -export const All: StoryObj = { name: "Hanmac Color", render: () => } +export const All: StoryObj = { name: "한맥 컬러", render: () => } diff --git a/src/foundation/company-colors.stories.tsx b/src/foundation/company-colors.stories.tsx index e19cad1..9ff045d 100644 --- a/src/foundation/company-colors.stories.tsx +++ b/src/foundation/company-colors.stories.tsx @@ -4,7 +4,15 @@ import { ReferencePage, ReferenceSection } from "./reference" // Company colors come from the existing OrgChart presets; HEX values are never duplicated here. // The chip markup and classes are shared with Foundation/Color (foundation.css). -const companies = Object.values(companyColorPresets) +// Display order only. PC rows: 한맥기술/삼안 · 장헌/피티씨 · 장헌산업/한라산업개발/바론컨설턴트. +// Row starts (jangheon, jangheon-industry) are pinned to column 1 in foundation.css via the section ids; companies not listed follow in preset order. +const companyRows = [["hanmac", "saman"], ["jangheon", "ptc"], ["jangheon-industry", "halla", "baron"]] +const presetCompanies = Object.values(companyColorPresets) +const listedIds = companyRows.flat() +const companies = [ + ...companyRows.flatMap(ids => ids.flatMap(id => presetCompanies.filter(company => company.companyId === id))), + ...presetCompanies.filter(company => !listedIds.includes(company.companyId)), +] function CompanyColorChip({ label, hex, main }: { label: string; hex: string; main: boolean }) { return
@@ -14,9 +22,9 @@ function CompanyColorChip({ label, hex, main }: { label: string; hex: string; ma } function CompanyColorsPage() { - return + return
- {companies.map(company => + {companies.map(company =>
{company.secondary.map((hex, index) => )} @@ -25,6 +33,7 @@ function CompanyColorsPage() {
} -const meta = { title: "Foundation/Company Colors", parameters: { layout: "fullscreen" } } satisfies Meta +// The sidebar name is "가족사 컬러"; `id` keeps the existing Story ID (foundation-company-colors--all) stable. +const meta = { title: "Foundation/가족사 컬러", id: "foundation-company-colors", parameters: { layout: "fullscreen" } } satisfies Meta export default meta -export const All: StoryObj = { name: "Company Colors", render: () => } +export const All: StoryObj = { name: "가족사 컬러", render: () => } diff --git a/src/foundation/foundation.css b/src/foundation/foundation.css index 7bf35f0..5a95199 100644 --- a/src/foundation/foundation.css +++ b/src/foundation/foundation.css @@ -41,6 +41,9 @@ chips up to 3 per row (min 100px each, 3 -> 2 -> 1). Chip size stays at one third even when a company has fewer chips. */ .hm-foundation .hm-company-grid { display: grid; gap: 48px 32px; grid-template-columns: repeat(auto-fill, minmax(max(316px, (100% - 64px) / 3), 1fr)); } .hm-foundation .hm-company-grid > .sb-page-section { min-width: 0; margin-top: 0; } +/* Row starts for the 2 / 2 / 3 company layout (한맥·삼안 / 장헌·피티씨 / 장헌산업·한라산업개발·바론컨설턴트). */ +.hm-foundation .hm-company-grid > #company-jangheon, +.hm-foundation .hm-company-grid > #company-jangheon-industry { grid-column-start: 1; } .hm-foundation .hm-brand-color-row[data-company-id] { display: grid; gap: 8px; overflow: visible; padding-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(max(100px, (100% - 16px) / 3), 1fr)); } /* Typography: compact specification page. Font Family one line, Font Weight small cards, Specimens as comparison tables diff --git a/src/foundation/layout.stories.tsx b/src/foundation/layout.stories.tsx index 7c536a7..b3f8dcd 100644 --- a/src/foundation/layout.stories.tsx +++ b/src/foundation/layout.stories.tsx @@ -30,6 +30,7 @@ function LayoutReferencePage() {
} -const meta = { title: "Foundation/Layout", parameters: { layout: "fullscreen" } } satisfies Meta +// Hidden from the sidebar with the verification tag; the Story ID and direct URL (foundation-layout--all) stay available. +const meta = { title: "Foundation/Layout", tags: ["verification"], parameters: { layout: "fullscreen" } } satisfies Meta export default meta export const All: StoryObj = { name: "Layout", render: () => }