diff --git a/src/sw/sw-header.stories.tsx b/src/sw/sw-header.stories.tsx index 9046645..addbc25 100644 --- a/src/sw/sw-header.stories.tsx +++ b/src/sw/sw-header.stories.tsx @@ -450,7 +450,7 @@ const LOGO_CASES: { title: string; props: Partial }[] = [ ] export const LogoSlot: Story = { - name: "Logo", + name: "로고", parameters: { controls: { disable: true } }, render: () => ( @@ -780,17 +780,21 @@ function StyleHeader({ onLog, showState, ...props }: StyleHostProps) { const MORE_WIDTHS = [1920, 1440, 1280, 950, 860, 760] export const ResponsiveMore: Story = { - name: "Responsive More", + name: "화면 너비", parameters: { controls: { disable: true } }, render: () => ( -
+
{MORE_WIDTHS.map(width => ( // 2026-10-23: the 1920 row stays inside the Story column (as SW Viewer › Responsive) and is hidden on narrow pages.
- + {/* Same structure as the Logo page (no black frame). This page only shows widths, so the five field dropdowns are + held closed with the public controlled props; the open callbacks and header data are unchanged. */} +
+ +
))} diff --git a/src/sw/sw-process-header.stories.tsx b/src/sw/sw-process-header.stories.tsx index 5aee9af..e49f993 100644 --- a/src/sw/sw-process-header.stories.tsx +++ b/src/sw/sw-process-header.stories.tsx @@ -141,7 +141,10 @@ const FIGMA_FRAMES: { node: string; step: string; documentTitle?: string }[] = [ { node: "873:17421", step: "body-plan" }, ] -// One page (2026-11-03): the Default header, then the three Multi Step frames; each header keeps its own state. +// The representative page keeps only the middle frame (project open); the three frames stay in the MultiStep verification story. +const OPEN_PROJECT_FRAME = FIGMA_FRAMES[1] + +// One page: the Default header, then the project-open Multi Step frame; each header keeps its own state. export const ProcessHeader: Story = { name: "Step Header", render: () => ( @@ -151,11 +154,7 @@ export const ProcessHeader: Story = { -
- {FIGMA_FRAMES.map(frame => ( -
- ))} -
+
), @@ -164,7 +163,7 @@ export const ProcessHeader: Story = { const WIDTHS = [1920, 1366, 1100] export const Responsive: Story = { - name: "Responsive More", + name: "화면 너비", render: () => ( diff --git a/src/sw/sw-property-panel.stories.tsx b/src/sw/sw-property-panel.stories.tsx index 36970dc..cb6f4bb 100644 --- a/src/sw/sw-property-panel.stories.tsx +++ b/src/sw/sw-property-panel.stories.tsx @@ -12,6 +12,6 @@ const meta = { export default meta export const PropertyPanelCompare: StoryObj = { - name: "Property Panel", // 2026-10-22 (user request): was "Property Panel · 4개 비교"; ID unchanged + name: "속성창", // 2026-10-22 (user request): was "Property Panel · 4개 비교"; ID unchanged render: () => , } diff --git a/src/sw/sw-viewer-stories.css b/src/sw/sw-viewer-stories.css index 8a04922..5909fbe 100644 --- a/src/sw/sw-viewer-stories.css +++ b/src/sw/sw-viewer-stories.css @@ -46,5 +46,3 @@ .sw-viewer-story-steps { margin: 0; padding-left: 20px; font-size: 14px; } .sw-viewer-story-context { display: flex; align-items: center; justify-content: center; height: 160px; border: 1px dashed #9a9284; border-radius: 4px; background: #f5f0e5; color: #3e3523; font-size: 13px; } .sw-viewer-story-mode { display: flex; gap: 16px; margin-bottom: 8px; font-size: 13px; } -/* Room below a single header row so its logo menu / document list are not cut by the scroller. */ -.sw-viewer-story-menu-row { padding-bottom: 120px; } diff --git a/src/sw/sw-viewer.stories.tsx b/src/sw/sw-viewer.stories.tsx index c393119..85af3b2 100644 --- a/src/sw/sw-viewer.stories.tsx +++ b/src/sw/sw-viewer.stories.tsx @@ -1,7 +1,7 @@ import { useRef, useState, type ReactNode } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" import { - SWHeader, SWHeaderWindowControls, SWViewerButton, SWViewerHeader, SWViewerHint, SWViewerMenu, SWViewerPanel, SWViewerSection, + SWHeader, SWViewerButton, SWViewerHeader, SWViewerHint, SWViewerMenu, SWViewerPanel, SWViewerSection, type SWViewerHeaderGroup, type SWViewerMenuEntry, } from "@hm-design/sw" import "@hm-design/sw/styles.css" @@ -59,21 +59,12 @@ function AboutPanel({ demo }: { demo: ViewerDemo }) { } // 2026-10-22 (user request): the Viewer Header screens have no 1440px maximum; they fill the Story column. -function ViewerScreen({ width = null as number | null, initialDocument = SAMPLES[1].name as string | null, open = [] as ("layers" | "options" | "properties")[], windowControls = false }) { +function ViewerScreen({ width = null as number | null, initialDocument = SAMPLES[1].name as string | null, open = [] as ("layers" | "options" | "properties")[] }) { const demo = useViewerDemo({ initialDocument, initialPanels: open }) - // 2026-10-21 new viewer version: SWHeader's own minimize / close (SWHeaderWindowControls, same icons, size, hover) - // at the right end after the existing trailing items (the `trailing` slot, no new API). The program owns the real - // window actions (onMinimize / onClose, as in SWHeader); the Story only logs them. - const trailing = windowControls ? ( - <> - {demo.trailing} - demo.record("minimize")} onClose={() => demo.record("close")} /> - - ) : demo.trailing return ( <> - }> + }> @@ -87,15 +78,12 @@ export const ViewerHeader: Story = { name: "Viewer Header", render: () => ( - {/* 2026-10-22 (user request): page title and the two sections only. The minimize / close version keeps - SWHeaderWindowControls at the right end of `trailing`; the program owns the real window actions. */} + {/* The minimize / close example was removed from this Story; the component keeps supporting it + (SWHeaderWindowControls at the right end of `trailing`, VIEWER.md §2.1). */} - -
-
), } @@ -280,7 +268,7 @@ export const SettingsPanel: Story = { export const ContentVariants: Story = { // 2026-10-21: the one settings-popup Story (former 설정창 and 같은 프레임, 다른 내부 콘텐츠 pages); ID kept. // 2026-10-22 (user request): the 축척 지정 demo popup was removed. - name: "Settings Popup", + name: "설정창", render: () => { const demo = useViewerDemo({ initialDocument: SAMPLES[1].name, initialPanels: ["layers", "properties", "options"] }) return ( @@ -327,7 +315,7 @@ export const VariableSize: Story = { } export const Logo: Story = { - name: "Logo", + name: "로고", render: () => { const demo = useViewerDemo({ initialDocument: SAMPLES[1].name }) const rows: { title: string; props: { logoSrc?: string; logo?: ReactNode; logoAlt?: string } }[] = [ @@ -355,7 +343,7 @@ export const Logo: Story = { } export const Responsive: Story = { - name: "Responsive More", + name: "화면 너비", render: () => { const demo = useViewerDemo({ initialDocument: SAMPLES[1].name }) return ( @@ -369,7 +357,8 @@ export const Responsive: Story = { // as the SW Header / Footer 1920 rows (sw-story-responsive-hidden, sw-stories.css), e.g. a 1920px screen.
{/* The row width is a maximum (2026-10-22): on a narrower screen the header shrinks with it instead of scrolling. */} -
+ {/* Same structure as the Logo page (no scroller / bottom padding), so the spacing matches it. */} +
))}