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.
2026-10-20 15:20:06 +09:00
1 parent bbb0e71c91
commit 126a35d60d
@@ -1,11 +1,11 @@
 import { useId, useState } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import {
-  SWHeaderColorMenu, SWHeaderInput, SWHeaderLayerMenu, SWHeaderPropertyPanel, SWPopup, SWPopupRow, SWPopupSection, SWTheme,
-  type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderProperty,
+  SWHeaderInput, SWHeaderPropertyPanel, SWPopup, SWPopupPropertyRow, SWPopupRow, SWPopupSection, SWSelect, SWSlider, SWTheme,
+  type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderProperty, type SWSliderAppearance,
 } from "@hm-design/sw"
 import "@hm-design/sw/styles.css"
-import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Switch } from "@hm-design/ui"
+import { Button, Slider, Switch } from "@hm-design/ui"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 import "./sw-stories.css"
 import "./sw-integrated-stories.css"
@@ -24,6 +24,11 @@ const COLORS: SWHeaderColorOption[] = [
  { id: "green", color: "#00ff00", label: "초록" }, { id: "blue", color: "#0000ff", label: "파랑" },
 ]

+const UNITS = ["mm", "cm", "m"].map(value => ({ value }))
+const MENUS = { layers: LAYERS, colors: COLORS }
+const layerProperty = (value: string): SWHeaderProperty => ({ id: "layer", name: "레이어", value, type: "select", groupId: "popup", picker: "layer", options: LAYERS.map(({ id, name }) => ({ id, name })) })
+const APPEARANCES = [{ value: "panel", label: "A · panel (기본)" }, { value: "property", label: "B · property" }]
+
 const meta = {
  title: "SW/Popup",
  parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -38,11 +43,11 @@ function useLog() {
 }

 function SettingsPopup({ record }: { record: (line: string) => void }) {
-  const ids = { name: useId(), scale: useId(), snap: useId() }
+  const ids = { name: useId(), scale: useId(), unit: useId(), snap: useId() }
  const [name, setName] = useState("평면도-01")
  const [scale, setScale] = useState("100")
  const [layerId, setLayerId] = useState("wall")
-  const [color, setColor] = useState({ value: "255,0,0", swatch: "#ff0000" })
+  const [color, setColor] = useState("255,0,0")
  const [snap, setSnap] = useState(true)
  const [opacity, setOpacity] = useState([60])
  const [unit, setUnit] = useState("mm")
@@ -55,21 +60,17 @@ function SettingsPopup({ record }: { record: (line: string) => void }) {
        <SWPopupRow label="축척" htmlFor={ids.scale} unit="%" numeric>
          <SWHeaderInput id={ids.scale} valueType="number" value={scale} onCommit={next => { setScale(next); record(`scale=${next}`) }} />
        </SWPopupRow>
-        <SWPopupRow label="단위" field="none">
-          <Select value={unit} onValueChange={next => { setUnit(next); record(`unit=${next}`) }}>
-            <SelectTrigger data-ui-select=""><SelectValue /></SelectTrigger>
-            <SelectContent>{["mm", "cm", "m"].map(item => <SelectItem key={item} value={item}>{item}</SelectItem>)}</SelectContent>
-          </Select>
+        <SWPopupRow label="단위" htmlFor={ids.unit} field="none">
+          <SWSelect id={ids.unit} value={unit} options={UNITS} onValueChange={next => { setUnit(next); record(`unit=${next}`) }} data-sw-select="unit" />
        </SWPopupRow>
      </SWPopupSection>
-      <SWPopupSection title="SW Dropdown">
-        <div data-popup-layer="">
-          <SWHeaderLayerMenu value={{ name: LAYERS.find(layer => layer.id === layerId)!.name }} layers={LAYERS} activeLayerId={layerId}
-            onLayerSelect={layer => { setLayerId(layer.id); record(`layer=${layer.id}`) }} />
-        </div>
-        <div data-popup-color="">
-          <SWHeaderColorMenu value={color} colors={COLORS} onColorSelect={option => { setColor({ value: option.value ?? option.color, swatch: option.color }); record(`color=${option.id}`) }} />
-        </div>
+      {/* 2026-10-20: popup layer / color controls are the property window pickers (SWPopupPropertyRow), not the
+          SWHeader field dropdowns (header-only design). */}
+      <SWPopupSection title="레이어 · 색상">
+        <SWPopupPropertyRow property={layerProperty(layerId)} menus={MENUS}
+          onPropertyChange={(_, value) => { setLayerId(value); record(`layer=${value}`) }} />
+        <SWPopupPropertyRow property={{ id: "color", name: "색상", value: color, type: "color", groupId: "popup" }} menus={MENUS}
+          onPropertyChange={(_, value) => { setColor(value); record(`color=${value}`) }} />
      </SWPopupSection>
      <SWPopupSection title="HM UI">
        <SWPopupRow label="스냅" htmlFor={ids.snap} field="none">
@@ -121,6 +122,38 @@ function PanelWithChildren({ record }: { record: (line: string) => void }) {
  )
 }

+/** SWSlider: the same value and events in both looks; the host only picks `appearance`. */
+function OpacityStylePopups({ record }: { record: (line: string) => void }) {
+  const [opacity, setOpacity] = useState(40)
+  const [appearance, setAppearance] = useState<SWSliderAppearance>("panel")
+  const slider = (look: SWSliderAppearance, label: string) => (
+    <SWSlider appearance={look} value={opacity} min={0} max={100} step={10} aria-label={label} data-sw-slider={look}
+      onValueChange={setOpacity} onValueCommit={next => record(`opacity(${look})=${next}`)} />
+  )
+  return (
+    <>
+      <SWPopup title="투명도 · 스타일 비교" data-popup="opacity-compare">
+        <SWPopupSection title="A = panel · B = property (같은 값)">
+          <SWPopupRow label="스타일 A" field="none" unit="%">{slider("panel", "투명도 A")}</SWPopupRow>
+          <SWPopupRow label="스타일 B" field="none" unit="%">{slider("property", "투명도 B")}</SWPopupRow>
+          <SWPopupRow label="값" field="compact" unit="%">
+            <SWHeaderInput valueType="number" value={String(opacity)} aria-label="투명도 값" onCommit={next => { setOpacity(Math.min(100, Math.max(0, Number(next)))); record(`opacity=${next}`) }} />
+          </SWPopupRow>
+        </SWPopupSection>
+      </SWPopup>
+      <SWPopup title="투명도 · 선택 결과" data-popup="opacity-select">
+        <SWPopupSection title="appearance">
+          <SWPopupRow label="스타일" field="none">
+            <SWSelect aria-label="게이지바 스타일" value={appearance} options={APPEARANCES} onValueChange={next => { setAppearance(next as SWSliderAppearance); record(`appearance=${next}`) }} />
+          </SWPopupRow>
+          <SWPopupRow label="투명도" field="none" unit="%">{slider(appearance, "투명도 (선택한 스타일)")}</SWPopupRow>
+          <SWPopupRow label="비활성" field="none" unit="%" disabled><SWSlider appearance={appearance} value={opacity} disabled aria-label="투명도 (비활성)" /></SWPopupRow>
+        </SWPopupSection>
+      </SWPopup>
+    </>
+  )
+}
+
 function PopupPage() {
  const [log, record] = useLog()
  return (
@@ -128,13 +161,18 @@ function PopupPage() {
      <StoryPageHeader kicker={KICKER} title="SW Popup — 외형 고정, 콘텐츠 자유"
        description="SWPopup은 속성창 프레임(314px, 제목줄, 닫기, 내부 스크롤)을 그대로 쓰고 children으로 아무 콘텐츠나 받습니다. SWPopupSection / SWPopupRow는 속성창 그룹·행 모양을 그대로 재사용합니다. Header 없이 SWTheme 안에서 씁니다." />
      {log}
-      <StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Dropdown과 HM UI Switch·Slider·Select·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
+      <StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Select(단위, Viewer 축척 지정과 같은 SWSelect)·레이어/색상(속성창 컨트롤 SWPopupPropertyRow — SWHeader 필드 Dropdown은 Header 전용)과 HM UI Switch·Slider·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
        <SWTheme className="sw-story-popups" data-popups="">
          <SettingsPopup record={record} />
          <ObjectInfoPopup record={record} />
          <PanelWithChildren record={record} />
        </SWTheme>
      </StorySection>
+      <StorySection title="투명도 게이지바 스타일 (SWSlider appearance)" description={<><code>appearance=&quot;panel&quot;</code>(기본, A) = 지금까지 Popup에서 쓰던 게이지바(6px 트랙 · 18px 흰 Thumb · 녹색 Range, SWViewerSlider와 같은 모양). <code>appearance=&quot;property&quot;</code>(B) = 속성창 4개 상태 비교의 게이지바(베이지 트랙 · 빨강 채움 · Figma Thumb). 값·<code>onValueChange</code>·<code>onValueCommit</code>·키보드는 같고 모양만 바뀝니다. 색은 SW 토큰(<code>--hm-sw-slider-panel-*</code>, <code>--hm-sw-property-range-*</code>)을 따릅니다.</>}>
+        <SWTheme className="sw-story-popups" data-slider-popups="">
+          <OpacityStylePopups record={record} />
+        </SWTheme>
+      </StorySection>
    </StoryPage>
  )
 }
@@ -144,6 +182,7 @@ export const CustomContent: Story = { name: "Custom Content", render: () => <Pop
 function StackPage() {
  const [log, record] = useLog()
  const [open, setOpen] = useState(["a", "b", "c"])
+  const [layerB, setLayerB] = useState("wall")
  const close = (id: string) => { setOpen(list => list.filter(item => item !== id)); record(`close(${id})`) }
  const rows = Array.from({ length: 30 }, (_, index) => index + 1)
  return (
@@ -155,7 +194,7 @@ function StackPage() {
      <SWTheme className="sw-story-popups" data-stack="">
        {open.includes("a") && <SWPopup title="Popup A" onClose={() => close("a")} data-popup="a"><SWPopupSection title="A"><SWPopupRow label="값"><SWHeaderInput value="A" aria-label="A 값" onCommit={next => record(`a=${next}`)} /></SWPopupRow></SWPopupSection></SWPopup>}
        {open.includes("b") && <SWPopup title="Popup B" onClose={() => close("b")} data-popup="b"><SWPopupSection title="B">
-          <div data-popup-layer=""><SWHeaderLayerMenu value={{ name: "WALL" }} layers={LAYERS} activeLayerId="wall" /></div>
+          <SWPopupPropertyRow property={layerProperty(layerB)} menus={MENUS} onPropertyChange={(_, value) => { setLayerB(value); record(`b.layer=${value}`) }} />
        </SWPopupSection></SWPopup>}
        {open.includes("c") && <SWPopup title="Popup C · 긴 콘텐츠" onClose={() => close("c")} data-popup="c" style={{ maxHeight: 360 }}>
          <SWPopupSection title="많은 필드">{rows.map(row => <SWPopupRow key={row} label={`필드 ${row}`} unit="mm" numeric><SWHeaderInput valueType="number" value={String(row)} aria-label={`필드 ${row}`} /></SWPopupRow>)}</SWPopupSection>