From 51e8ab8c425c1e8867d8288f7e9e707cef63c8d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Fri, 6 Nov 2026 10:56:04 +0900 Subject: [PATCH] feat(foundation): add company colors story Add Foundation > Company Colors as a separate Storybook menu placed right after Color. It shows the 7 affiliates and 14 colors from the existing companyColorPresets (main first, then secondary) with the Color chip styles and the Default emphasis reused for the main color. Theme tokens, public API and the existing Color story are unchanged. - Foundation sort order: Color, Company Colors, Typography, Layout - Company chip width rule scoped to the company rows - Document the menu in brand-color-steps.md - Add the new story to the Story Inventory records --- .storybook/preview.tsx | 2 +- .storybook/qa/STORY-INVENTORY.md | 14 ++++++++---- .storybook/qa/story-inventory.json | 26 +++++++++++++++++---- docs/guidelines/brand-color-steps.md | 2 ++ src/foundation/company-colors.stories.tsx | 28 +++++++++++++++++++++++ src/foundation/foundation.css | 3 +++ 6 files changed, 66 insertions(+), 9 deletions(-) create mode 100644 src/foundation/company-colors.stories.tsx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 06589d9..7c4abd9 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -25,7 +25,7 @@ const preview: Preview = { includeNames: true, order: [ "Foundation", - ["Color", "Typography", "Layout"], + ["Color", "Company Colors", "Typography", "Layout"], "Components", [ "Form", diff --git a/.storybook/qa/STORY-INVENTORY.md b/.storybook/qa/STORY-INVENTORY.md index 1643bfd..79b062e 100644 --- a/.storybook/qa/STORY-INVENTORY.md +++ b/.storybook/qa/STORY-INVENTORY.md @@ -6,16 +6,16 @@ This is a classification record. No Story IDs, exports or titles are renamed. HI ## Summary -- PRIMARY: 65 +- PRIMARY: 66 - VERIFICATION: 212 - UTILITY: 15 - LEGACY / DUPLICATE: 0 -- KEEP: 65 +- KEEP: 66 - HIDE: 227 - MERGE_CANDIDATE: 31 - DELETE_CANDIDATE: 0 -- Story files: 63 -- Stories: 292 +- Story files: 64 +- Stories: 293 - Hierarchy: Foundation → Components → Patterns → Center Graphic → Theme ## Full inventory @@ -504,6 +504,12 @@ Source: `src/foundation/color.stories.tsx`; meta.tags: [] - All — Color; tags: []; PRIMARY; KEEP. Representative story or distinct reference page. +### Foundation/Company Colors + +Source: `src/foundation/company-colors.stories.tsx`; meta.tags: [] + +- All — Company Colors; tags: []; PRIMARY; KEEP. Representative story or distinct reference page. + ### Foundation/Layout Source: `src/foundation/layout.stories.tsx`; meta.tags: [] diff --git a/.storybook/qa/story-inventory.json b/.storybook/qa/story-inventory.json index abc1cf3..766de04 100644 --- a/.storybook/qa/story-inventory.json +++ b/.storybook/qa/story-inventory.json @@ -1,15 +1,15 @@ { "summary": { - "storyFiles": 63, - "stories": 292, + "storyFiles": 64, + "stories": 293, "categories": { - "PRIMARY": 65, + "PRIMARY": 66, "VERIFICATION": 212, "UTILITY": 15, "LEGACY / DUPLICATE": 0 }, "decisions": { - "KEEP": 65, + "KEEP": 66, "HIDE": 227, "MERGE_CANDIDATE": 31, "DELETE_CANDIDATE": 0 @@ -3631,6 +3631,24 @@ } ] }, + { + "file": "src/foundation/company-colors.stories.tsx", + "title": "Foundation/Company Colors", + "metaTags": [], + "stories": [ + { + "id": "foundation-company-colors--all", + "exportName": "All", + "name": "Company Colors", + "storyTags": [], + "effectiveTags": [], + "category": "PRIMARY", + "decision": "KEEP", + "candidate": null, + "reason": "Representative story or distinct reference page." + } + ] + }, { "file": "src/foundation/layout.stories.tsx", "title": "Foundation/Layout", diff --git a/docs/guidelines/brand-color-steps.md b/docs/guidelines/brand-color-steps.md index 08201fb..73ead27 100644 --- a/docs/guidelines/brand-color-steps.md +++ b/docs/guidelines/brand-color-steps.md @@ -36,3 +36,5 @@ Orange Dark 1·2의 원본 Needs Review 상태와 [이전 검수 보고서](../r 페이지 소개는 `한맥 브랜드 컬러`로 표시한다. 그룹 설명의 단계 순서 나열 문구는 제공하지 않으며, 개별 컬러칩의 단계명과 HEX는 유지한다. [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 > Color와 별도 메뉴(Color 바로 아래)이며 7개 계열사·14개 컬러를 회사별로 표시한다. 데이터는 OrgChart의 기존 `companyColorPresets`를 그대로 읽고(메인 → 서브 순서, 메인은 Default 강조 재사용) HEX를 중복 정의하지 않는다. Theme 토큰·`themes/*.json`·공개 계약은 변경하지 않으며 Foundation > Color의 3그룹 24칩은 그대로다. diff --git a/src/foundation/company-colors.stories.tsx b/src/foundation/company-colors.stories.tsx new file mode 100644 index 0000000..b094b8f --- /dev/null +++ b/src/foundation/company-colors.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from "@storybook/react-vite" +import { companyColorPresets } from "@hm-design/org-chart" +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) + +function CompanyColorChip({ label, hex, main }: { label: string; hex: string; main: boolean }) { + return
+
+

{label}

{hex.toUpperCase()}

+
+} + +function CompanyColorsPage() { + return + {companies.map(company => +
+ + {company.secondary.map((hex, index) => )} +
+ )} + +} +const meta = { title: "Foundation/Company Colors", parameters: { layout: "fullscreen" } } satisfies Meta +export default meta +export const All: StoryObj = { name: "Company Colors", render: () => } diff --git a/src/foundation/foundation.css b/src/foundation/foundation.css index f263cc4..33205e0 100644 --- a/src/foundation/foundation.css +++ b/src/foundation/foundation.css @@ -38,3 +38,6 @@ /* New common background stop IDs stay on one line at the supported widths. */ .hm-foundation .hm-color-gradient-stops .hm-brand-color-chip[data-gradient-stop-token] { flex-basis: 220px; } .hm-foundation .hm-color-foreground-sample { padding: 16px; background: var(--hm-sem-bg-surface); } + +/* Company Colors: keep each chip close to the Color row width so 1-3 chips per company do not stretch across the page. */ +.hm-foundation .hm-brand-color-row[data-company-id] .hm-brand-color-chip { flex: 0 1 140px; }