diff --git a/.storybook/manager.js b/.storybook/manager.js index bc20103..df09251 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -28,6 +28,89 @@ toolbarStyle.textContent = ` ` document.head.appendChild(toolbarStyle) +// Sidebar display names only. Story titles, Story IDs and storySort stay English; items not listed keep item.name. +const koreanLabels = { + foundation: '기본 요소', + components: '컴포넌트', + 'components-form': '폼 요소', + 'components-navigation': '내비게이션', + 'components-overlay': '오버레이', + 'components-data-display': '데이터 표시', + 'components-disclosure': '영역 확장·조절', + 'components-search-date': '검색·날짜', + 'components-feedback': '알림·피드백', + 'components-form-button': '버튼', + 'components-form-input': '입력창', + 'components-form-textarea': '여러 줄 입력창', + 'components-form-select': '선택 목록', + 'components-form-checkbox': '체크박스', + 'components-form-radio-group': '라디오 버튼 그룹', + 'components-form-switch': '스위치', + 'components-form-slider': '슬라이더', + 'components-form-toggle': '토글 버튼', + 'components-navigation-tabs': '탭', + 'components-navigation-breadcrumb': '이동 경로', + 'components-navigation-pagination': '페이지네이션', + 'components-navigation-navigation-menu': '내비게이션 메뉴', + 'components-navigation-menubar': '메뉴바', + 'components-overlay-dialog': '대화상자', + 'components-overlay-alert-dialog': '확인·경고 대화상자', + 'components-overlay-sheet': '시트 패널', + 'components-overlay-drawer': '드로어', + 'components-overlay-dropdown-menu': '드롭다운 메뉴', + 'components-overlay-context-menu': '컨텍스트 메뉴', + 'components-overlay-popover': '팝오버', + 'components-overlay-tooltip': '툴팁', + 'components-overlay-hover-card': '호버 카드', + 'components-data-display-card': '카드', + 'components-data-display-table': '테이블', + 'components-data-display-badge': '배지', + 'components-data-display-avatar': '아바타', + 'components-data-display-progress': '진행률', + 'components-data-display-skeleton': '스켈레톤', + 'components-data-display-separator': '구분선', + 'components-data-display-aspect-ratio': '화면 비율', + 'components-data-display-carousel': '캐러셀', + 'components-data-display-scroll-area': '스크롤 영역', + 'components-disclosure-accordion': '아코디언', + 'components-disclosure-collapsible': '접기·펼치기', + 'components-disclosure-resizable': '크기 조절', + 'components-search-date-command': '명령어 검색', + 'components-search-date-combobox': '콤보박스', + 'components-search-date-calendar': '달력', + 'components-search-date-date-picker': '날짜 선택기', + 'components-feedback-alert': '알림 메시지', + 'components-feedback-sonner': '토스트 알림', + patterns: 'UI 패턴', + 'patterns-data': '데이터 조회', + 'patterns-data-data-table': '데이터 테이블', + 'patterns-data-filter-bar': '필터 바', + 'patterns-layout': '화면 구성', + 'patterns-layout-gnb': '전체 메뉴 (GNB)', + 'patterns-layout-lnb': '좌측 메뉴 (LNB)', + 'patterns-layout-dashboard-layout': '대시보드', + 'patterns-layout-page-header': '페이지 헤더', + sw: 'SW UI', + 'sw-header': '헤더', + 'sw-header--overview': 'SW 헤더', + 'sw-header--responsive-more': '화면 너비 대응', + 'sw-viewer--responsive': '화면 너비 대응', + 'sw-step-header--responsive': '화면 너비 대응', + 'sw-footer--responsive': '화면 너비 대응', + 'sw-viewer': '뷰어', + 'sw-viewer--viewer-header': '뷰어 헤더', + 'sw-step-header': '단계별', + 'sw-step-header--process-header': '단계별 헤더', + 'sw-popup': '팝업', +} + +// A component with one visible Story is shown as that Story (`--all`) under the component's name. +// A real Story named "All" under an expanded component keeps its own name. +const koreanLabel = (item) => { + const hoisted = item.type === 'story' && item.name !== 'All' ? koreanLabels[item.id.replace(/--all$/, '')] : undefined + return koreanLabels[item.id] ?? hoisted ?? item.name +} + addons.setConfig({ layout: { showPanel: false, @@ -52,7 +135,7 @@ addons.setConfig({ barSelectedColor: '#123328', }), sidebar: { - renderLabel: (item) => createElement('span', { className: 'hm-manager-label' }, item.name), + renderLabel: (item) => createElement('span', { className: 'hm-manager-label' }, koreanLabel(item)), }, }) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 4ad220b..132c997 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -46,7 +46,7 @@ const preview: Preview = { "Patterns", ["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]], "SW", - ["Header", ["SW Header", "*"], "하단 명령어바", ["SW 하단 명령어바", "*"], "Popup", "Viewer", "Theme"], + ["Header", ["SW Header", "*"], "Viewer", "Step Header", "Popup", "하단 명령어바", ["SW 하단 명령어바", "*"], "Theme"], "조직도", ["개요", "부서별 색상", "전체 구성", "확장 조직도"], "노선도", diff --git a/src/components/label.stories.tsx b/src/components/label.stories.tsx index f0ef57f..9ffd0eb 100644 --- a/src/components/label.stories.tsx +++ b/src/components/label.stories.tsx @@ -27,6 +27,8 @@ function SpecimenGrid({ states }: { states: BoardState[] }) { const meta = { title: "Components/Form/Label", + // `internal` keeps it out of the sidebar by default; Story IDs and direct URLs stay valid. + tags: ["internal"], component: Label, parameters: { layout: "padded", diff --git a/src/components/toggle-group.stories.tsx b/src/components/toggle-group.stories.tsx index 178a426..c9d5720 100644 --- a/src/components/toggle-group.stories.tsx +++ b/src/components/toggle-group.stories.tsx @@ -116,7 +116,8 @@ function Sizes() { } // No `component`: ToggleGroup props are a union (single | multiple), so Stories without args would not type-check. -const meta = { title: "Components/Form/Toggle Group", parameters: { layout: "padded" } } satisfies Meta +// `internal` keeps it out of the sidebar by default; Story IDs and direct URLs stay valid. +const meta = { title: "Components/Form/Toggle Group", tags: ["internal"], parameters: { layout: "padded" } } satisfies Meta export default meta type Story = StoryObj diff --git a/src/patterns/loading-screen.stories.tsx b/src/patterns/loading-screen.stories.tsx index 38c5e84..2261c35 100644 --- a/src/patterns/loading-screen.stories.tsx +++ b/src/patterns/loading-screen.stories.tsx @@ -22,7 +22,8 @@ function Fullscreen() { ) } -const meta = { title: "Patterns/Layout/Loading Screen", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta +// `internal` keeps it out of the sidebar by default; Story IDs and direct URLs stay valid. +const meta = { title: "Patterns/Layout/Loading Screen", tags: ["internal"], parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta export default meta type Story = StoryObj diff --git a/src/sw/sw-header-home-menu.stories.tsx b/src/sw/sw-header-home-menu.stories.tsx index fd69699..319446f 100644 --- a/src/sw/sw-header-home-menu.stories.tsx +++ b/src/sw/sw-header-home-menu.stories.tsx @@ -116,6 +116,8 @@ function FitToPanel({ children }: { children: ReactNode }) { /** The sidebar Story: the logo menu of SWHeader (SW normal mode) with its Figma states and sub panel (the Escape stack demo is the hidden Integration Story). */ export const HomeMenu: Story = { name: "Home Menu", + // `internal` keeps it out of the sidebar by default; Story ID and direct URL stay valid. + tags: ["internal"], render: () => ( diff --git a/src/sw/sw-header.stories.tsx b/src/sw/sw-header.stories.tsx index 60c3bc3..80b146b 100644 --- a/src/sw/sw-header.stories.tsx +++ b/src/sw/sw-header.stories.tsx @@ -453,6 +453,8 @@ const LOGO_CASES: { title: string; props: Partial }[] = [ export const LogoSlot: Story = { name: "로고", + // `internal` keeps it out of the sidebar by default; Story ID and direct URL stay valid. + tags: ["internal"], parameters: { controls: { disable: true } }, render: () => (