feat(storybook): refine manager layout and Hanmac branding

This commit is contained in:
shkim4 committed 2026-11-09 13:59:46 +09:00
1 parent fc0a3e7725
commit e47eb040f2
7 files changed
+20 -13

No files matched your search

+6
View File
@@ -65,6 +65,8 @@
padding: 0; padding: 0;
color: var(--color-fg-on-green-primary); 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 { #storybook-sidebar-region .sidebar-header > div a {
color: var(--color-fg-on-green-primary); color: var(--color-fg-on-green-primary);
font: 700 16px/30px var(--hm-manager-font); font: 700 16px/30px var(--hm-manager-font);
@@ -103,6 +105,10 @@
} }
/* Storybook's named creation action only; search/filter remain available. */ /* Storybook's named creation action only; search/filter remain available. */
#storybook-sidebar-region button[aria-label='Create a new story'] { display: none; } #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 { #storybook-explorer-tree .sidebar-subheading {
position: relative; position: relative;
+2 -1
View File
@@ -31,13 +31,14 @@ document.head.appendChild(toolbarStyle)
addons.setConfig({ addons.setConfig({
layout: { layout: {
showPanel: false, showPanel: false,
showToolbar: false,
// LNB width 246px. recentVisibleSizes keeps the same width when the sidebar is collapsed and expanded again. // LNB width 246px. recentVisibleSizes keeps the same width when the sidebar is collapsed and expanded again.
navSize: 246, navSize: 246,
recentVisibleSizes: { navSize: 246 }, recentVisibleSizes: { navSize: 246 },
}, },
theme: create({ theme: create({
base: 'light', base: 'light',
brandTitle: 'HM Design System', brandTitle: 'Hanmac Design System',
brandUrl: './', brandUrl: './',
brandTarget: '_self', brandTarget: '_self',
fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif", fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif",
+1 -1
View File
@@ -25,7 +25,7 @@ const preview: Preview = {
includeNames: true, includeNames: true,
order: [ order: [
"Foundation", "Foundation",
["HM Color", "Company Colors", "Typography", "Layout"], ["Hanmac Color", "Company Colors", "Typography", "Layout"],
"Components", "Components",
[ [
"Form", "Form",
+2 -2
View File
@@ -499,11 +499,11 @@ Source: `src/components/tooltip.stories.tsx`; meta.tags: []
- All — Tooltip; tags: []; PRIMARY; KEEP. Representative story or distinct reference page. - 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. - 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: [] 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 ### Foundation/Company Colors
+2 -2
View File
@@ -3637,13 +3637,13 @@
}, },
{ {
"file": "src/foundation/color.stories.tsx", "file": "src/foundation/color.stories.tsx",
"title": "Foundation/HM Color", "title": "Foundation/Hanmac Color",
"metaTags": [], "metaTags": [],
"stories": [ "stories": [
{ {
"id": "foundation-color--all", "id": "foundation-color--all",
"exportName": "All", "exportName": "All",
"name": "HM Color", "name": "Hanmac Color",
"storyTags": [], "storyTags": [],
"effectiveTags": [], "effectiveTags": [],
"category": "PRIMARY", "category": "PRIMARY",
+3 -3
View File
@@ -33,8 +33,8 @@ Orange Dark 1·2의 원본 Needs Review 상태와 [이전 검수 보고서](../r
## 호환성과 Storybook ## 호환성과 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칩은 그대로다.
+4 -4
View File
@@ -35,13 +35,13 @@ function ColorChip({ prefix, stage, values }: { prefix: PalettePrefix; stage: Co
function ColorReferencePage() { function ColorReferencePage() {
const values = useResolvedProperties(colorProperties) const values = useResolvedProperties(colorProperties)
return <ReferencePage title="HM Color"> return <ReferencePage title="Hanmac Color">
{palettes.map(palette => <ReferenceSection key={palette.name} title={palette.name} note=""> {palettes.map(palette => <ReferenceSection key={palette.name} title={palette.name} note="">
<div className="hm-brand-color-row">{stages.map(stage => <ColorChip key={stage} prefix={palette.prefix} stage={stage} values={values} />)}</div> <div className="hm-brand-color-row">{stages.map(stage => <ColorChip key={stage} prefix={palette.prefix} stage={stage} values={values} />)}</div>
</ReferenceSection>)} </ReferenceSection>)}
</ReferencePage> </ReferencePage>
} }
// The sidebar name is "HM Color"; `id` keeps the existing Story ID (foundation-color--all) stable. // The sidebar name is "Hanmac 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 const meta = { title: "Foundation/Hanmac Color", id: "foundation-color", parameters: { layout: "fullscreen" } } satisfies Meta
export default meta export default meta
export const All: StoryObj<typeof meta> = { name: "HM Color", render: () => <ColorReferencePage /> } export const All: StoryObj<typeof meta> = { name: "Hanmac Color", render: () => <ColorReferencePage /> }