chore(sw): improve interactive header story preview

src/sw/sw-header.stories.tsx

@@ -11,6 +11,7 @@ import "@hm-design/sw/styles.css"
 import { SWHeaderMenuDetail } from "../../packages/sw/src/components/sw-header/components/SWHeaderDropdown"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 import "./sw-stories.css"
+import { SWHeaderOverview } from "./sw-header-overview"
 import placeholderLogo from "./assets/sw-header-logo-placeholder.svg"
 import figmaLayerDetailReference from "./assets/figma-reference/btn-detail-layer-26-10767.png"
 import figmaInputReference from "./assets/figma-reference/input-26-11656.png"
@@ -181,21 +182,10 @@ function InteractiveHeader(props: Partial<SWHeaderProps>) {
 
 export const Overview: Story = {
   parameters: { controls: { disable: true } },
-  render: () => (
-    <StoryPage>
-      <StoryPageHeader
-        kicker={KICKER}
-        title="SW Header"
-        description="Figma node 26:8944(header_green, 1920 × 49)를 @hm-design/sw 독립 패키지로 구현한 헤더입니다. 파일명·객체 수정·속성 입력 면은 사용자 확정 CSS를 우선하며, @hm-design/ui 없이 동작합니다."
-      />
-      <StorySection title="Figma 기준 1920 × 49" description="홈 / 파일명 / 객체 수정(그리기모드 · 레이어 · 색상 · 선스타일 · 문자스타일 · 치수스타일 · 상세보기) / 인쇄 · 팝업 가이드 · 창 이동 · 최소화 · 종료">
-        <Frame width={1920}><SWHeader {...figmaArgs} {...callbacks} /></Frame>
-      </StorySection>
-      <StorySection title="선택 상태" description="선택된 텍스트와 화살표는 #FFC600으로만 바뀝니다. 선택 전용 배경·테두리·그림자는 없습니다.">
-        <Frame width={1920}><SWHeader {...figmaArgs} {...callbacks} activeMenu="layer" propertyPanelOpen /></Frame>
-      </StorySection>
-    </StoryPage>
-  ),
+  render: () => <SWHeaderOverview initial={{ ...figmaArgs, ...callbacks }}
+    fixtures={{ documents: SAMPLE_DOCUMENTS, layers: PROPERTY_LAYERS, colors: FIGMA_COLORS, userColors: FIGMA_USER_COLORS,
+      lineTypes: PROPERTY_LINE_TYPES, lineWeights: FIGMA_LINE_WEIGHTS, textStyles: FIGMA_TEXT_STYLES, dimensionStyles: FIGMA_DIMENSION_STYLES }}
+    propertyGroups={PROPERTY_GROUPS} propertyFixture={propertyFixture} propertySelection={propertySelection} barFixture={BAR_FIXTURE} />,
 }
 
 export const InteractiveStates: Story = {