Merge pull request 'chore(storybook): localize sidebar menus and hide unused stories' (#23) from feat/storybook-ui-refinement into main

Reviewed-on: #23

.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 (`<component-id>--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)),
   },
 })
 

.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"],
           "조직도",
           ["개요", "부서별 색상", "전체 구성", "확장 조직도"],
           "노선도",

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",

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<typeof meta>
 

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<typeof meta>
 

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: () => (
     <StoryPage>
       <StoryPageHeader title="Home Menu — 로고(홈) 버튼 메뉴" description="SW 일반 모드 전용(뷰어 모드 미적용) · 로고 클릭으로 열고 닫기 · 상세 동작은 SW AI 가이드 COMPONENT_CATALOG" />

src/sw/sw-header.stories.tsx

@@ -453,6 +453,8 @@ const LOGO_CASES: { title: string; props: Partial<SWHeaderProps> }[] = [
 
 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: () => (
     <StoryPage>