feat(storybook): add shared SW notice and refine SW previews

- Add StoryNotice and a withSWNotice decorator so every visible SW Story
  shows the common notice above its title; non-SW Stories are unaffected.
- Align the SW Header overview with the common SW Story page layout, let the
  preview Stage fill the available width and keep inner scroll on narrow screens.
- Rename SW/Footer to SW/하단 명령어바 (sidebar title only, Story IDs fixed via
  id: "sw-footer"), drop the top SWHeader from its preview and lower the
  workspace height bounds by the removed 49px.
This commit is contained in:
shkim4 committed 2026-11-09 19:23:17 +09:00
1 parent a460426535
commit 9394050c72
16 files changed
+113 -22

No files matched your search

+5 -3
View File
@@ -69,8 +69,10 @@ export function SWHeaderOverview({ initial, fixtures, propertyGroups, propertyFi
if (!slot) return
const measure = () => {
const bounds = slot.getBoundingClientRect()
const width = Math.max(0, Math.min(bounds.width, bounds.height * 16 / 9))
setSize(previous => previous.width === width ? previous : { width, height: width * 9 / 16 })
// 2026-11-09: the Stage height is still the 16:9 height of the fitted area (unchanged); the width now fills the slot.
const height = Math.max(0, Math.min(bounds.width, bounds.height * 16 / 9)) * 9 / 16
const width = Math.max(0, bounds.width)
setSize(previous => previous.width === width && previous.height === height ? previous : { width, height })
}
measure()
const observer = new ResizeObserver(measure)
@@ -150,7 +152,7 @@ export function SWHeaderOverview({ initial, fixtures, propertyGroups, propertyFi
</div></details>
</div>}
<div ref={slotRef} className="sw-overview-slot" data-preview-slot="">
<div className="sw-overview-stage" data-preview-stage="" role="region" tabIndex={0} aria-label="SW Header 16:9 미리보기, 작은 화면에서는 내부 스크롤"
<div className="sw-overview-stage" data-preview-stage="" role="region" tabIndex={0} aria-label="SW Header 미리보기, 작은 화면에서는 내부 스크롤"
style={{ ...size, "--sw-preview-stage-height": `${size.height}px`, "--sw-preview-panel-left": `${panelLeft}px`, "--sw-preview-panel-top": barOpen ? "77px" : "49px" } as CSSProperties}>
<div className="sw-overview-world">
<SWHeader ref={headerRef} {...initial}