feat(storybook): refine manager layout and Hanmac branding
This commit is contained in:
1 parent
fc0a3e7725
commit
e47eb040f2
7 files changed
+20
-13
No files matched your search
@@ -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;
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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칩은 그대로다.
|
||||||
@@ -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 /> }
|
||||||
Reference in new issue
Block a user