From a51c0e87da28bd21d908ce0c86d6eb08fcb03ae0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= <shkim4@samaneng.com>
Date: Thu, 22 Oct 2026 18:20:42 +0900
Subject: [PATCH] docs(storybook): tidy SW Home Menu page and hide the Viewer
 comparison

Home Menu: the recent-files sub panel loses its title / Figma node caption and its
frame fits the open panel (+16px) instead of a fixed 860px; the Integration
(property window / SWPopup / Escape) section leaves the page and stays in the
hidden home-menu-integration Story.
SW Viewer: SWHeader vs Viewer Header is tagged verification (ID and URL kept for
the browser tests); inventory and README updated.
---
 packages/sw/README.md                     |  2 +-
 packages/sw/tests/storybook-inventory.mjs |  4 ++-
 src/sw/sw-header-home-menu.stories.tsx    | 40 ++++++++++++++++++-----
 src/sw/sw-viewer.stories.tsx              |  2 ++
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/sw/README.md b/packages/sw/README.md
index 1999c09..9c6d34b 100644
--- a/packages/sw/README.md
+++ b/packages/sw/README.md
@@ -58,7 +58,7 @@ SW Story는 40개입니다(`SW/Header` 20 · `SW/Footer` 6 · `SW/Popup` 3 · `S
 - `SW/Header`: SW Header(`sw-header--overview`), Home Menu, Logo Slot, Responsive More (+ verification 16: Dropdown, Document Open, Hidden Sub Controls, Detail Buttons, Interactive States, Window Move Motion, Document Dropdown, K Guide, Home Menu 하위 8개)
 - `SW/Footer`: SW Footer(`sw-footer--full-footer`), Responsive More (+ verification 4: 도구 그룹별 표시, Figma 디자인별 Variant, 도구 및 메뉴 변경 예제, 개별 부품)
 - `SW/Popup`: Custom Content, Multiple Popups, Property Panel · 4개 비교(Story ID `sw-header--property-panel-compare`)
-- `SW/Viewer`: Viewer Header(기본 + 최소화·닫기 버전), Settings Popup(`sw-viewer--content-variants`), Responsive More, SWHeader vs Viewer Header, Logo (+ verification 5: Menu Groups, Item States, Header + Dropdown, Settings Popup(`sw-viewer--settings-panel`), Variable Size Popups)
+- `SW/Viewer`: Viewer Header(기본 + 최소화·닫기 버전), Settings Popup(`sw-viewer--content-variants`), Responsive More, Logo (+ verification 6: Menu Groups, Item States, Header + Dropdown, Settings Popup(`sw-viewer--settings-panel`), Variable Size Popups, SWHeader vs Viewer Header(`sw-viewer--compare-with-sw-header`))
 - `SW/Theme`: (verification 1: Theme Inheritance)
 
 ## 빌드 (HMDesign 저장소)
diff --git a/packages/sw/tests/storybook-inventory.mjs b/packages/sw/tests/storybook-inventory.mjs
index 55d1707..e9db25f 100644
--- a/packages/sw/tests/storybook-inventory.mjs
+++ b/packages/sw/tests/storybook-inventory.mjs
@@ -101,7 +101,9 @@ export const verificationTaggedIds = ['sw-header--window-move-motion', 'sw-heade
 export const menuCleanupHiddenIds = ['sw-header--interactive-states', 'sw-header--document-dropdown', 'sw-header--hidden-sub-controls', 'sw-header--home-menu-standalone',
   ...['tool-groups', 'custom-content', 'parts'].map(id => `sw-footer--${id}`),
   // Second pass (same day): SW/Theme hidden as a whole; Viewer settings-panel merged into content-variants.
-  'sw-header--document-open', 'sw-header--composed-controls', ...themeStoryIds, ...['menu-groups', 'states', 'dropdowns', 'variable-size', 'settings-panel'].map(id => `sw-viewer--${id}`)]
+  'sw-header--document-open', 'sw-header--composed-controls', ...themeStoryIds, ...['menu-groups', 'states', 'dropdowns', 'variable-size', 'settings-panel'].map(id => `sw-viewer--${id}`),
+  // 2026-10-22 (user request): SWHeader vs Viewer Header left the sidebar the same way.
+  'sw-viewer--compare-with-sw-header']
 export const renamedEntries = { 'sw-header--overview': 'SW Header', 'sw-footer--full-footer': 'SW Footer',
   'sw-footer--responsive': 'Responsive More', 'sw-viewer--content-variants': 'Settings Popup',
   'sw-viewer--responsive': 'Responsive More' }
diff --git a/src/sw/sw-header-home-menu.stories.tsx b/src/sw/sw-header-home-menu.stories.tsx
index 8f1e620..725d39a 100644
--- a/src/sw/sw-header-home-menu.stories.tsx
+++ b/src/sw/sw-header-home-menu.stories.tsx
@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react"
+import { useLayoutEffect, useRef, useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 // Public API only, like a consuming project.
 import {
@@ -85,7 +85,33 @@ function HeaderWithMenu({ width, defaultOpen = false, defaultActiveIds = [], acc
   )
 }
 
-/** The sidebar Story: the logo menu of SWHeader (SW normal mode) with its Figma states, sub panel and Escape stack. */
+/**
+ * Story layout only: the open sub panel is absolutely placed, so the frame takes the panel's measured bottom (+16px)
+ * instead of a fixed tall height. The panel wraps taller at narrow widths; closing it returns the frame to its CSS height.
+ */
+function FitToPanel({ children }: { children: ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null)
+  useLayoutEffect(() => {
+    const root = ref.current
+    if (!root) return
+    const fit = () => {
+      const frame = root.querySelector<HTMLElement>(".sw-home-menu-story__frame")
+      const panel = root.querySelector(".hm-sw-home-menu__more-panel")
+      if (!frame) return
+      const height = panel ? `${Math.ceil(panel.getBoundingClientRect().bottom - frame.getBoundingClientRect().top) + 16}px` : ""
+      if (frame.style.height !== height) frame.style.height = height
+    }
+    fit()
+    const resize = new ResizeObserver(fit)
+    resize.observe(root)
+    const mutation = new MutationObserver(fit)
+    mutation.observe(root, { childList: true, subtree: true })
+    return () => { resize.disconnect(); mutation.disconnect() }
+  }, [])
+  return <div ref={ref}>{children}</div>
+}
+
+/** 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",
   render: () => (
@@ -97,12 +123,10 @@ export const HomeMenu: Story = {
       <StorySection title="열림 (현재 폭)" description="로고 Home On · Header 상·하단 2px 선">
         <HeaderWithMenu defaultOpen autoFocus={false} />
       </StorySection>
-      <StorySection title="최근파일 하위 패널 (662:67267)" description="미리보기는 빈 영역 · 목록은 Story 데이터">
-        <div className="sw-home-menu-story__tall"><HeaderWithMenu defaultOpen autoFocus={false} defaultActiveIds={["recent"]}>{log => log}</HeaderWithMenu></div>
-      </StorySection>
-      <StorySection title="통합 · 속성창 · SWPopup · Escape" description="Escape는 Focus 위치부터 닫고, 밖에서는 가장 최근 하나만 닫음">
-        <IntegrationDemo />
-      </StorySection>
+      {/* No section heading: the open recent-files panel follows the "열림" section directly. */}
+      <section className="sb-page-section" aria-label="최근파일 하위 패널">
+        <FitToPanel><HeaderWithMenu defaultOpen autoFocus={false} defaultActiveIds={["recent"]}>{log => log}</HeaderWithMenu></FitToPanel>
+      </section>
     </StoryPage>
   ),
 }
diff --git a/src/sw/sw-viewer.stories.tsx b/src/sw/sw-viewer.stories.tsx
index f66779a..a493055 100644
--- a/src/sw/sw-viewer.stories.tsx
+++ b/src/sw/sw-viewer.stories.tsx
@@ -368,8 +368,10 @@ function ModeSwitchDemo() {
   )
 }
 
+// 2026-10-22 (user request): removed from the sidebar; ID and direct URL kept for the viewer browser tests.
 export const CompareWithSWHeader: Story = {
   name: "SWHeader vs Viewer Header",
+  tags: ["verification"],
   render: () => (
     <StoryPage>
       <StoryPageHeader title="SW Viewer — 일반 SW Header와 비교" />