feat(sw): popup controls, SWSelect / SWSlider, footer and viewer design fixes
Components (new public exports, existing APIs unchanged) - SWPopupPropertyRow: the property window row (layer / color / line style pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers. - SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px), used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI Select there and the story-only .sw-viewer-story-select CSS). - SWSlider: appearance "panel" (default, the gauge the popup used) or "property" (the property window gauge), same value / events. Shares the property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens. Footer - --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected border token now references it): Model selected / hover, Layout hover and Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg). - Model / Layout text stays the Default text (#161410, 12px, 400, no outline) on hover and on the orange surface: only the surface changes. - bg_vacant covers the slot row only: the open pocket of a category tab no longer splits where it crosses the last command (e.g. 수정 with one command). Viewer - Panel title art keeps 308px (max-width: none against host img resets), so panels under 312px (250 x auto, 300px) paint the title from the left edge. Storybook - SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states) removed; full-footer keeps the live composition only, responsive keeps the widths (reference / Figma image sections removed, image files kept); the aux Figma comparison moved to the verification Story figma-variants. - SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.
This commit is contained in:
shkim4 committed
1 parent
bbb0e71c91
commit
126a35d60d
15 files changed
+349
-209
No files matched your search
+24
-124
@@ -2,7 +2,7 @@ import { useState, type ReactNode } from "react"
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite"
|
||||
import {
|
||||
SWFooter, SWFooterAddSlot, SWFooterAuxButton, SWFooterAuxGroup, SWFooterCommandLine, SWFooterGuide, SWFooterLayoutTabs, SWFooterMenu,
|
||||
SWFooterSideButton, SWFooterToolButton, SWHeader, SWTheme, SW_FOOTER_MODEL, swFooterToolIcons,
|
||||
SWFooterToolButton, SWHeader, SWTheme, SW_FOOTER_MODEL, swFooterToolIcons,
|
||||
type SWFooterAuxItem, type SWFooterCategory, type SWFooterLayout, type SWFooterTool,
|
||||
} from "@hm-design/sw"
|
||||
import "@hm-design/sw/styles.css"
|
||||
@@ -12,8 +12,6 @@ import {
|
||||
AUX_ITEMS, CATEGORIES, DRAW_TOOLS, GuideFrame, GuideMovie, HISTORY, LAYOUTS, Log, Pin, REFERENCE_AUX, REFERENCE_CATEGORIES, REFERENCE_HISTORY,
|
||||
useFooterDemo,
|
||||
} from "./sw-footer-fixture"
|
||||
import referenceScreen from "./assets/footer-reference/composition-2026-10-20.png"
|
||||
import referenceNarrow from "./assets/footer-reference/narrow-2026-10-20.png"
|
||||
import "./sw-stories.css"
|
||||
import "./sw-footer-stories.css"
|
||||
import placeholderLogo from "./assets/sw-header-logo-placeholder.svg"
|
||||
@@ -49,24 +47,7 @@ function FigmaFooter() {
|
||||
)
|
||||
}
|
||||
|
||||
// ---------- 1. 기본 Footer ----------
|
||||
|
||||
export const Default: Story = {
|
||||
name: "기본 Footer",
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader kicker={KICKER} title="SW Footer" description={<>Figma <code>레이아웃 분리</code> 26:10097의 하단 72px 영역. 기본 데이터(도형 9개 명령, 10개 분류, 보조기능 6개, Layout 01)만 넣은 <code><SWFooter /></code>입니다. 아래는 같은 폭의 Figma 렌더입니다.</>} />
|
||||
<StorySection title="구현 (1920px)" description="Hover: 명령·분류·빈 칸(+, 가이드)·Layout 탭. 클릭 동작은 Callback이 없으므로 아무 것도 실행하지 않습니다.">
|
||||
<Screen><FigmaFooter /></Screen>
|
||||
</StorySection>
|
||||
<StorySection title="Figma 26:10097 (하단 120px)">
|
||||
<div className="sw-story-scroller"><div className="sw-footer-story-figma-bottom" style={{ backgroundImage: `url(${ref("26-10097")})` }} role="img" aria-label="Figma 26:10097 하단" /></div>
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 2. 전체 Footer · 실제 조합 ----------
|
||||
// ---------- 1. 전체 Footer · 실제 Footer 조합 ----------
|
||||
|
||||
const LAYOUTS_2: SWFooterLayout[] = [{ id: "layout2", label: "Layout 02" }, { id: "layout1", label: "Layout 01" }]
|
||||
|
||||
@@ -101,17 +82,14 @@ export const FullFooter: Story = {
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader kicker={KICKER} title="전체 Footer · 실제 Footer 조합" description="사용자 제공 실제 화면(2026-10-20) 구성: SWHeader + 도면 영역 + SWFooter(좌표 status, 바 안의 명령창 command, 오른쪽 명령 칸, Layout 탭). 모든 상태는 호스트(Story)가 Props로 소유하고, 컴포넌트는 Callback만 보냅니다." />
|
||||
<StorySection title="동작" description="명령 클릭 = 선택(다시 클릭 해제)·명령 기록 추가, 분류 탭(←/→), 빈 칸 + 클릭·Hover 가이드(영상 대신 Figma 6프레임 순환), 보조기능 토글(켜짐 = 주황 테두리·글자), 명령어 전체보기·▲ = 명령창 위로 펼치기, Layout 탭 선택·+·×·더블클릭/F2 이름 변경·Delete, 명령창 Enter 실행.">
|
||||
<StorySection title="실제 Footer 조합 (동작)" description="명령 클릭 = 선택(다시 클릭 해제)·명령 기록 추가, 분류 탭(←/→, 바꿔도 칸 영역 고정), 빈 칸 + 클릭·Hover 가이드(영상 대신 Figma 6프레임 순환), 보조기능 토글(켜짐 = 주황 테두리·글자), 명령어 전체보기·▲ = 명령창 위로 펼치기, Layout 탭 선택·+·×·더블클릭/F2 이름 변경·Delete, 명령창 Enter 실행. 좁은 폭의 ▲ 확장 목록은 「화면 폭 변화」, Hover · Active · Selected · Disabled는 이 화면의 각 부품에서 동작합니다.">
|
||||
<Workspace width={1920} />
|
||||
</StorySection>
|
||||
<StorySection title="참고: 실제 화면 (사용자 제공, 1915 × 1030)" description="Model 탭: 실제 화면은 선택 탭이 주황이지만 Figma model On(26:9925)은 갈색이므로 Figma 값을 유지합니다. 뷰 큐브(평면도)와 도면 왼쪽 위 표시는 Footer 범위 밖입니다.">
|
||||
<div className="sw-story-scroller"><img className="sw-footer-story-reference" src={referenceScreen} alt="실제 SW 화면 참고 (Footer 조합)" /></div>
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 3. 도구 그룹별 표시 ----------
|
||||
// ---------- 2. 도구 그룹별 표시 ----------
|
||||
|
||||
export const ToolGroups: Story = {
|
||||
name: "도구 그룹별 표시",
|
||||
@@ -130,7 +108,7 @@ export const ToolGroups: Story = {
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 4. Figma 디자인별 Variant (35 노드) ----------
|
||||
// ---------- 3. Figma 디자인별 Variant (35 노드) ----------
|
||||
|
||||
function Node({ id, name, impl, states, children }: { id: string; name: string; impl: string; states: string; children: ReactNode }) {
|
||||
return (
|
||||
@@ -198,25 +176,9 @@ const MENU_NODES: [string, string][] = [
|
||||
["26:9494", "레이어"], ["26:9501", "뷰"], ["26:9508", "선택/조회"], ["26:9515", "도로/횡단"], ["26:9522", "구조/배근"],
|
||||
]
|
||||
const toolProps = (tool: SWFooterTool) => ({ label: tool.label, icon: tool.icon, activeIcon: tool.activeIcon, "aria-label": tool.ariaLabel })
|
||||
const AUX0 = { label: AUX_ITEMS[0].label, icon: AUX_ITEMS[0].icon }
|
||||
/** Figma component sets of the six auxiliary toggles, in AUX_ITEMS order. */
|
||||
const AUX_SETS = ["26:9248", "26:9267", "26:9298", "26:9320", "26:9381", "26:9412"]
|
||||
|
||||
/** Live toggles: click to select / deselect; "하나만" makes the selection move between buttons. */
|
||||
function AuxToggleDemo() {
|
||||
const [items, setItems] = useState(AUX_ITEMS)
|
||||
const [single, setSingle] = useState(false)
|
||||
return (
|
||||
<div className="sw-footer-story-aux-demo">
|
||||
<label className="sw-story-log"><input type="checkbox" checked={single} onChange={event => setSingle(event.target.checked)} /> 하나만 선택(다른 버튼을 누르면 선택 이동)</label>
|
||||
<SWTheme className="sw-footer-story-group-surface sw-footer-story-inline">
|
||||
<SWFooterAuxGroup items={items} onPressedChange={(id, pressed) => setItems(list => list.map(item => (
|
||||
item.id === id ? { ...item, pressed } : single && pressed ? { ...item, pressed: false } : item)))} />
|
||||
</SWTheme>
|
||||
<p className="sw-story-log" data-aux-state="">선택: {items.filter(item => item.pressed).map(item => item.label).join(", ") || "없음"}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const SMALL_COMMAND = { width: 120, ["--hm-sw-footer-command-expanded-height" as string]: "71px" }
|
||||
|
||||
export const FigmaVariants: Story = {
|
||||
@@ -303,6 +265,22 @@ export const FigmaVariants: Story = {
|
||||
</Node>
|
||||
</div>
|
||||
</StorySection>
|
||||
<StorySection title="보조기능 버튼 (btn_객체스냅 26:9248 … btn_선가중치 26:9412)" description="35개 목록 밖 보조 참고. 구현 열: Default · Hover · Selected · Selected + Hover (Hover는 data-sb-hover 고정).">
|
||||
<div className="sw-footer-story-aux-compare">
|
||||
{AUX_ITEMS.map((item, index) => (
|
||||
<figure key={item.id} className="sw-footer-story-aux-row">
|
||||
<figcaption>{AUX_SETS[index]} {item.label}</figcaption>
|
||||
<img src={new URL(`./assets/figma-reference/footer/aux-buttons/${AUX_SETS[index].replace(":", "-")}.png`, import.meta.url).href} alt={`Figma ${AUX_SETS[index]} ${item.label}`} />
|
||||
<SWTheme className="sw-footer-story-group-surface sw-footer-story-aux-states">
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} /></Pin>
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed /></Pin>
|
||||
</SWTheme>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</StorySection>
|
||||
<StorySection title="명령창">
|
||||
<div className="sw-footer-story-nodes">
|
||||
<Node id="26:10023" name="ico_arrow" impl="SWFooterCommandLine 펼치기 버튼" states="Default · Hover · On(펼침) · On + Hover">
|
||||
@@ -321,73 +299,7 @@ export const FigmaVariants: Story = {
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 5. Hover / Active / Selected / Disabled ----------
|
||||
|
||||
function StateCell({ title, children }: { title: string; children: ReactNode }) {
|
||||
return <figure className="sw-footer-story-state"><figcaption>{title}</figcaption><SWTheme className="sw-footer-story-group-surface">{children}</SWTheme></figure>
|
||||
}
|
||||
|
||||
export const States: Story = {
|
||||
name: "Hover / Active / Selected / Disabled",
|
||||
render: () => {
|
||||
const line = DRAW_TOOLS[0]
|
||||
return (
|
||||
<StoryPage>
|
||||
<StoryPageHeader kicker={KICKER} title="상태" description="Hover·Selected는 Figma 값. Active(누르는 중)와 Disabled는 Figma에 없어 기존 SW 규칙(누름 = Hover와 같음, Disabled = 40%)을 따릅니다. Focus는 SW 공통 2px #F0F7F5." />
|
||||
<StorySection title="명령 버튼">
|
||||
<div className="sw-footer-story-states">
|
||||
<StateCell title="Default"><SWFooterToolButton {...toolProps(line)} /></StateCell>
|
||||
<StateCell title="Hover"><Pin hover=".hm-sw-footer-tool"><SWFooterToolButton {...toolProps(line)} /></Pin></StateCell>
|
||||
<StateCell title="Active (누름 = Hover)"><Pin hover=".hm-sw-footer-tool"><SWFooterToolButton {...toolProps(line)} /></Pin></StateCell>
|
||||
<StateCell title="Selected (pressed)"><SWFooterToolButton {...toolProps(line)} pressed /></StateCell>
|
||||
<StateCell title="Disabled"><SWFooterToolButton {...toolProps(line)} disabled /></StateCell>
|
||||
</div>
|
||||
</StorySection>
|
||||
<StorySection title="빈 칸 · 분류 탭">
|
||||
<div className="sw-footer-story-states">
|
||||
<StateCell title="빈 칸 Default"><SWFooterAddSlot guide={false} /></StateCell>
|
||||
<StateCell title="빈 칸 Hover"><Pin hover=".hm-sw-footer-add"><SWFooterAddSlot guide={false} /></Pin></StateCell>
|
||||
<StateCell title="빈 칸 Disabled"><SWFooterAddSlot guide={false} disabled /></StateCell>
|
||||
<StateCell title="분류 Default · Hover · Selected · Disabled">
|
||||
<Pin hover="#sw-footer-state-b">
|
||||
<SWFooterMenu items={[{ id: "a", label: "도형" }, { id: "b", label: "수정" }, { id: "c", label: "편집" }, { id: "d", label: "문자", disabled: true }]} value="a" tabIdPrefix="sw-footer-state" />
|
||||
</Pin>
|
||||
</StateCell>
|
||||
</div>
|
||||
<p className="sw-story-log">분류 Hover 고정: 두 번째 탭(수정)에 data-sb-hover.</p>
|
||||
</StorySection>
|
||||
<StorySection title="보조기능 버튼 (Figma btn_객체스냅 26:9248 … btn_선가중치 26:9412)" description="Default = 갈색 그라데이션 테두리 · #F1EDE5 아이콘 · #F6F4F2 글자. Hover = 노랑 테두리(SW Header Hover 토큰)만, 아이콘·글자 기본색. Selected(Figma Variant2 = Variant3) = 주황 그라데이션 테두리 + #FF5C00 아이콘 + #FF5C00 글자, Hover 중에도 유지.">
|
||||
<div className="sw-footer-story-aux-compare">
|
||||
{AUX_ITEMS.map((item, index) => (
|
||||
<figure key={item.id} className="sw-footer-story-aux-row">
|
||||
<figcaption>{AUX_SETS[index]} {item.label}</figcaption>
|
||||
<img src={new URL(`./assets/figma-reference/footer/aux-buttons/${AUX_SETS[index].replace(":", "-")}.png`, import.meta.url).href} alt={`Figma ${AUX_SETS[index]} ${item.label}`} />
|
||||
<SWTheme className="sw-footer-story-group-surface sw-footer-story-aux-states">
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} /></Pin>
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed /></Pin>
|
||||
</SWTheme>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
<p className="sw-story-log">구현 열: Default · Hover · Selected · Selected + Hover (Hover는 data-sb-hover 고정)</p>
|
||||
<AuxToggleDemo />
|
||||
</StorySection>
|
||||
<StorySection title="측면 버튼 (Figma Default만 있음)" description="Hover·pressed는 Footer의 #FF5C00 글자 규칙을 재사용(Figma 미정의).">
|
||||
<div className="sw-footer-story-states">
|
||||
<StateCell title="보조 Disabled"><SWFooterAuxButton {...AUX0} disabled /></StateCell>
|
||||
<StateCell title="측면 Default"><SWFooterSideButton title="보조기능" subtitle="전체보기" /></StateCell>
|
||||
<StateCell title="측면 Hover"><Pin hover=".hm-sw-footer-side"><SWFooterSideButton title="명령어" subtitle="전체보기" side="end" /></Pin></StateCell>
|
||||
<StateCell title="측면 Disabled"><SWFooterSideButton title="명령어" subtitle="전체보기" side="end" disabled /></StateCell>
|
||||
</div>
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
// ---------- 6. 도구 및 메뉴 변경 예제 ----------
|
||||
// ---------- 4. 도구 및 메뉴 변경 예제 ----------
|
||||
|
||||
const icon = (node: ReactNode) => <span className="sw-footer-story-lucide">{node}</span>
|
||||
const CUSTOM: SWFooterCategory[] = [
|
||||
@@ -446,7 +358,7 @@ export const CustomContent: Story = {
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 7. 화면 폭 ----------
|
||||
// ---------- 5. 화면 폭 ----------
|
||||
|
||||
function ReferenceFooter() {
|
||||
const [open, setOpen] = useState(false)
|
||||
@@ -473,23 +385,11 @@ export const Responsive: Story = {
|
||||
</div>
|
||||
))}
|
||||
</StorySection>
|
||||
<StorySection title="참고: 실제 좁은 화면 (사용자 제공, 952px)">
|
||||
<img className="sw-footer-story-reference-narrow" src={referenceNarrow} alt="실제 SW 좁은 화면 참고" />
|
||||
</StorySection>
|
||||
<StorySection title="Figma 기본 구성 (명령창 없음)" description="빈 칸이 slotCount(17)까지 채우고 폭에 맞춰 줄어듦. 명령이 넘치면 같은 ▲ 패널.">
|
||||
{[1920, 1280, 1024, 820].map(width => (
|
||||
<div key={width} className="sw-footer-story-width">
|
||||
<p className="sw-story-log">{width}px</p>
|
||||
<Screen width={width} canvas={60}><SWFooter categories={CATEGORIES} auxItems={AUX_ITEMS} onSlotAdd={noop}
|
||||
layoutTabs={<SWFooterLayoutTabs layouts={LAYOUTS} value="layout1" onAdd={noop} />} /></Screen>
|
||||
</div>
|
||||
))}
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 8. 개별 부품 ----------
|
||||
// ---------- 6. 개별 부품 ----------
|
||||
|
||||
export const Parts: Story = {
|
||||
name: "개별 부품 (조합용)",
|
||||
|
||||
Reference in new issue
Block a user