chore(sw): organize Storybook components and documentation
First-pass cleanup only; no design, behavior, public API or Story ID change. - Stories: correct stale Text Stroke / Colorize / "latest" texts, reuse parseSWHeaderColor, derive the field fixture from PROPERTY_FIXTURE - Comments: date the "Latest request" notes in sw.css and the color menu - Docs: fix removed text-stroke tokens in spec/usage/README, add spec §18 (property fields), current-state index banners, Storybook 33 pointer - Add docs/sw/sw-first-pass-cleanup-review-2026-10-19.md (Story table, structure, SAFE / REVIEW list for the second pass) Checks: SW + app typecheck, SW build, Storybook build, 33 Story IDs unchanged, property fields 77/77, detail-buttons verify 257 checks, 111 doc links 0 broken. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
shkim4andClaude Opus 5.5 committed
1 parent
0029cef60c
commit
92830fe11d
7 files changed
+267
-39
No files matched your search
+11
-3
@@ -1,5 +1,7 @@
|
||||
# @hm-design/sw
|
||||
|
||||
> **현재 기준 색인(2026-10-19 1차 정리):** 아래 날짜별 안내는 작성 당시 기록입니다. 현재 기준은 [사용 가이드](../../docs/sw/sw-header-usage.md), [디자인 명세](../../docs/sw/sw-header-design-spec.md) 상단 색인, 속성 필드 13개 [검증 기록](../../docs/sw/sw-property-fields-verification-2026-10-19.md), 게이지·속성Bar [후속 4건 기록](../../docs/sw/sw-header-followup-four-design-fixes-verification-2026-10-19.md)·[Firefox 게이지 기록](../../docs/sw/sw-header-firefox-range-close-verification-2026-10-19.md)입니다. Storybook은 `SW / Header` 33개 Story이며 전체 목록과 2차 검토 대상은 [1차 정리 보고](../../docs/sw/sw-first-pass-cleanup-review-2026-10-19.md)에 있습니다.
|
||||
|
||||
> **3차 구현(2026-10-16):** `hiddenControls`(로고 외 모든 구성요소 개별 제거, 로고 필수), `menuOrder`(레이어·색상·선/문자/치수스타일 순서), 속성창 `shapeContent` Slot, 속성창 4상태 개별·비교 Story를 추가했습니다. 미지정 시 기존 디자인과 같습니다. [사용법](../../docs/sw/sw-header-usage.md#구성요소-표시메뉴-순서속성창-4상태형상-slot-2026-10-16-3차), [3차 검증 기록](../../docs/sw/sw-header-composition-shape-verification-2026-10-16.md).
|
||||
|
||||
> **후속 구현(2026-10-16):** 속성Bar(`SWHeaderPropertyBar`), 메뉴 단위 `controls` allowlist, Colorize 원본 Default/Hover를 추가했습니다. 상세 pill의 미사용 Stroke 선언·변수는 원본에서 제거했습니다. [사용법](../../docs/sw/sw-header-usage.md#후속-5개-요구사항-연결-2026-10-16), [새 검증 기록](../../docs/sw/sw-header-followup-five-verification-2026-10-16.md)을 따릅니다. 이전 설명과 PASS 로그는 보존합니다.
|
||||
@@ -24,7 +26,7 @@ import "@hm-design/sw/styles.css"
|
||||
- Hover는 Figma 홈 버튼의 노란 gradient 1px 테두리를 SW Header의 테두리 있는 버튼에 공통 적용합니다(디자인 명세 §11.1).
|
||||
- 창 이동 Hover Motion은 GIF의 경로를 유지하고 후속 사용자 요청으로 1.64 → **1.4초**로 단축했습니다. 커서 상승 → 약 444ms 문구 등장 → 오른쪽 위로 이동 → 약 888ms부터 512ms 유지 → 반복입니다. 기존 SVG·줄무늬·Tooltip·`onWindowMoveStart`·Drag 중 정지·Reduced Motion·88px/24px/숨김 정책은 유지합니다. 실제 창 이동은 호스트 책임이며 [사용 가이드 §10.2](../../docs/sw/sw-header-usage.md#102-창-이동-hover-motion), [현재 검증 기록](../../docs/sw/sw-header-speed-composed-hover-verification-2026-10-16.md)을 따릅니다.
|
||||
- 그룹 필드 Hover는 텍스트와 선/폰트/치수 미리보기를 `#FFC600`으로 표시합니다. 기존 Gradient Border·검정 외곽선·색상 견본·레이어 상태·Disabled/Selected 정책을 유지하며 상세보기는 기존 텍스트 전용 Hover 그대로입니다([명세 §11.5](../../docs/sw/sw-header-design-spec.md#115-현재-추가-기준--1400ms-및-그룹-필드-hover-2026-10-16)).
|
||||
- 색상·선스타일·문자스타일·치수스타일 Dropdown(2026-10-16, Figma 26:10986 / 26:11036 / 26:12666 / 26:12659 / 26:11104 / 26:10702 / 26:11181 / 26:11215): `colors`·`userColors`·`colorMode`, `lineTypes`·`lineWeights`, `textStyles`, `dimensionStyles`를 주면 각 필드가 Dropdown이 됩니다(주지 않으면 기존 버튼). 모든 항목은 `id` 기반 배열 Props이며 추가·삭제·이름/값 변경·재정렬에 소스 수정이 필요 없습니다. 선택·입력은 `onColorSelect` / `onColorModeChange` / `onColorInput` / `onColorPick`, `onLineTypeSelect` / `onLineWeightSelect` / `onLineWeightValueChange` / `onLineScaleChange`, `onTextStyleSelect`, `onDimensionStyleSelect`, 하단 `… 상세`는 `on*Detail`로 각 프로그램이 연결합니다(상세 팝업은 미제공). Dropdown 안 독립 버튼은 Hover 효과가 없고 목록 행·Input은 Figma Hover를 유지합니다([명세 §5.3](../../docs/sw/sw-header-design-spec.md#53-색상--선스타일--문자스타일--치수스타일-dropdown-2026-10-16), [사용 가이드 §7](../../docs/sw/sw-header-usage.md#색상--선문자치수스타일-dropdown-예-2026-10-16)).
|
||||
- 색상·선스타일·문자스타일·치수스타일 Dropdown(2026-10-16, Figma 26:10986 / 26:11036 / 26:12666 / 26:12659 / 26:11104 / 26:10702 / 26:11181 / 26:11215): `colors`·`userColors`·`colorMode`, `lineTypes`·`lineWeights`, `textStyles`, `dimensionStyles`를 주면 각 필드가 Dropdown이 됩니다(주지 않으면 기존 버튼). 모든 항목은 `id` 기반 배열 Props이며 추가·삭제·이름/값 변경·재정렬에 소스 수정이 필요 없습니다. 선택·입력은 `onColorSelect` / `onColorModeChange` / `onColorInput` / `onColorPick`, `onLineTypeSelect` / `onLineWeightSelect` / `onLineWeightValueChange` / `onLineScaleChange`, `onTextStyleSelect`, `onDimensionStyleSelect`, 하단 `… 상세`는 `on*Detail`로 각 프로그램이 연결합니다(상세 팝업은 미제공). Dropdown 안 독립 버튼은 Hover 효과가 없고 목록 행·Input은 Figma Hover를 유지합니다(이후 2026-10-16 추가 수정: ByLayer/ByBlock·`… 상세` 버튼은 Figma Hover 적용, 색상 추출은 Colorize Hover, 색상 칩은 Hover 없음)([명세 §5.3](../../docs/sw/sw-header-design-spec.md#53-색상--선스타일--문자스타일--치수스타일-dropdown-2026-10-16), [사용 가이드 §7](../../docs/sw/sw-header-usage.md#색상--선문자치수스타일-dropdown-예-2026-10-16)).
|
||||
|
||||
```tsx
|
||||
<SWHeader
|
||||
@@ -38,7 +40,7 @@ import "@hm-design/sw/styles.css"
|
||||
/>
|
||||
```
|
||||
- 반응형 More: 좁은 헤더에서 더보기의 필드를 고르면 그 필드가 첫 칸(레이어 자리)에 표시되고 Dropdown이 바로 아래 열립니다. 레이어는 더보기에서 다시 고를 수 있으며, 전환은 UI 상태라 데이터 Callback을 호출하지 않습니다([명세 §5.4](../../docs/sw/sw-header-design-spec.md#54-반응형-more--대표-필드-전환-2026-10-16)).
|
||||
- Text Stroke: Figma에 Stroke가 있는 텍스트만 검정 외곽선(14·16px 1.3px, 12px 1px) + 자기 색 0.3px를 표시합니다. 더보기·Tooltip·`+ New`/`Open`은 제외([명세 §6.1](../../docs/sw/sw-header-design-spec.md#61-text-stroke-2026-10-16)).
|
||||
- Text Stroke: Figma에 Stroke가 있는 텍스트만 검정 외곽선(14·16px 1.3px, 12px 1px)을 표시합니다. 자기 색 0.3px Stroke는 2026-10-16 추가 수정으로 제거했습니다. 더보기·Tooltip·`+ New`/`Open`은 제외([명세 §6.1](../../docs/sw/sw-header-design-spec.md#61-text-stroke-2026-10-16)).
|
||||
- `SWHeaderInput`: 레이어 상세 등 상세 영역에서 쓰는 수정 가능 Input(Figma 26:11656, Default / Hover / 편집, caret `#E60403`). `value`(확정값) · `onValueChange`(임시값) · `onCommit`(Enter·Focus 이동, 유효 + 변경 시) · `onCancel`(Escape) · `valueType`(`text` / `number`) · `parse` · `readOnly` · `disabled`([명세 §5.5](../../docs/sw/sw-header-design-spec.md#55-레이어-상세-버튼--수정-가능한-input-2026-10-16)).
|
||||
- Peer: `react`, `react-dom` `^19.0.0`. 런타임 dependency는 없습니다.
|
||||
- 출력: `dist/index.js`(ESM, Figma SVG asset은 data URI로 포함, 임시 Figma URL 없음), `dist/*.d.ts`, `dist/styles.css`.
|
||||
@@ -57,7 +59,7 @@ npm run typecheck -w @hm-design/sw
|
||||
- Text/Number/Select/Color/Slider/Computed, id 기반 동적 항목, 검증·확정·취소·외부 변경·ReadOnly/Disabled·그룹 펼침을 지원합니다. CAD 계산·선택·객체 변경은 호스트가 담당합니다.
|
||||
- 상세 5개는 Figma 고정 크기와 Hover를 적용합니다. ByLayer/ByBlock은 정확히 하나가 표시되며, 기존 null 직접 색상 의미는 보존합니다. 레이어/선/문자/치수 목록은 Hover와 Selected 디자인이 같습니다.
|
||||
- K는 기존 버튼을 재사용하고 원본 이미지 Pan/Zoom을 반복합니다. 640px 미만에서는 기존 More 항목에서도 같은 가이드를 표시합니다. Reduced Motion은 정적 이미지이며 기존 창 이동 1400ms는 유지합니다.
|
||||
- 지정된 일반 text-stroke-width 선언·변수는 제거했고 검정 text-shadow와 상세 pill의 별도 Stroke는 보존했습니다.
|
||||
- 지정된 일반 text-stroke-width 선언·변수는 제거했고 검정 text-shadow와 상세 pill의 별도 Stroke는 보존했습니다(상세 pill Stroke도 아래 후속 5개 요구사항에서 제거됨).
|
||||
- 사용 예시와 API는 [가이드 추가 절](../../docs/sw/sw-header-usage.md#속성창k-가이드-추가-연결-2026-10-16), 디자인 값은 [명세 추가 절](../../docs/sw/sw-header-design-spec.md#추가-수정-기준--속성창k-가이드-2026-10-16)을 확인하세요.
|
||||
- 검증: 기존 17 + 신규 4 Story, [현재 실행 결과 및 NOT VERIFIED](../../docs/sw/sw-header-additional-verification-2026-10-16.md). 과거 로그는 보존합니다.
|
||||
|
||||
@@ -79,3 +81,9 @@ npm run typecheck -w @hm-design/sw
|
||||
- `SWHeaderPropertyPanelProps.shapeContent?: SWHeaderPropertyShapeContent` — `undefined` Figma 원형, `null`/`false` 빈 208×208 영역, ReactNode 또는 `(context: SWHeaderPropertyShapeContext) => ReactNode`. `SWHeader.propertyPanel`로도 전달됩니다.
|
||||
- 하위 공개 컴포넌트에 선택적 표시 Props 추가(기본 true): `SWHeaderHome.interactive`, `SWHeaderProperties.showCaption/showBar/showPanel`, `SWHeaderActions.showPrint/showPopupGuide`, `SWHeaderWindowControls.showWindowMove/showMinimize/showClose`.
|
||||
- Storybook: 기존 24개 + Composition, Property Panel 개별 4개, 4개 비교, 형상 Slot = 31개.
|
||||
|
||||
## 속성 필드·게이지 (2026-10-19)
|
||||
|
||||
- 속성창 공통 행은 Figma 26:12388 ~ 26:12649의 Default / Hover / On을 따릅니다. 숫자는 편집 On(`#0F0D0A`), 레이어·선스타일·색상은 Dropdown On(`#211D13`)이며 하이퍼링크·재료는 Default·Hover만 있습니다.
|
||||
- 추가 API(모두 선택): `SWHeaderProperty.picker`(`"layer" | "lineStyle" | "color" | false`), `SWHeaderProperty.decimals`, `SWHeaderPropertyPanelProps.menus`(`SWHeaderPropertyMenus`). 필드 Dropdown은 Header Dropdown과 같은 목록 컴포넌트를 씁니다. [사용법](../../docs/sw/sw-header-usage.md#속성창k-가이드-추가-연결-2026-10-16), [검증 기록](../../docs/sw/sw-property-fields-verification-2026-10-19.md).
|
||||
- 투명도 게이지는 빨강 채움 + 베이지 Track이며 Chrome·Firefox가 같은 그림을 씁니다([Firefox 게이지 기록](../../docs/sw/sw-header-firefox-range-close-verification-2026-10-19.md)).
|
||||
@@ -46,7 +46,7 @@ const optionValue = (option: SWHeaderColorOption) => option.value ?? parseSWHead
|
||||
* ByBlock (26:12666 / 26:12659), 22px palette, user color rows, color pick + RGB input, "색상 상세".
|
||||
* Every control only reports through its callback; the host updates `value` / `mode`. Choosing a
|
||||
* color or a mode keeps the dropdown open (several properties can be set in a row).
|
||||
* Latest request restores Figma hover for the mode pair and detail pill; chips/pick remain unchanged.
|
||||
* 2026-10-16 additional fix: Figma hover for the mode pair and the detail pill; chips keep no hover (pick has its own Colorize hover).
|
||||
*/
|
||||
export function SWHeaderColorMenu({
|
||||
value, label, colors, userColors, mode, open: openProp, onOpenChange, onClick, selected = false, disabled = false,
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
/* Figma text strokes (26:8944 and its menus, Plugin API 2026-10-16), all OUTSIDE:
|
||||
14 / 16px text = black 1.3px under the text + 0.3px of its own color; 12px labels = black 1px;
|
||||
"... 상세" pills = 0.4px of their own color, no black. Outline: 16 shadows on a 1.3px / 1px circle
|
||||
(never clipped by the glyph like a centered -webkit-text-stroke). Latest request removes the
|
||||
(never clipped by the glyph like a centered -webkit-text-stroke). The 2026-10-16 additional fix removed the
|
||||
own-color stroke, including the detail pills. Black text-shadow remains unchanged. */
|
||||
--hm-sw-header-text-outline-color: #000;
|
||||
--hm-sw-header-text-outline:
|
||||
@@ -773,7 +773,7 @@ button.hm-sw-header__layer-toggle[data-on="false"] > .hm-sw-header__layer-toggle
|
||||
/* Row hover (26:10695): brown background, orange name. Size and icon positions stay. */
|
||||
.hm-sw-header__layer-row:is(:hover, [data-active="true"]):not([data-disabled]) { background: var(--hm-sw-header-layer-row-hover-background); }
|
||||
.hm-sw-header__layer-row:is(:hover, [data-active="true"]):not([data-disabled]) .hm-sw-header__layer-name { color: var(--hm-sw-header-layer-row-hover-color); }
|
||||
/* Latest request: selected layer rows use the same emphasis as hover. */
|
||||
/* 2026-10-16 additional fix: selected layer rows use the same emphasis as hover (rule above). */
|
||||
.hm-sw-header__layer-footer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -941,7 +941,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-header__menu-row:is(:hover, [data-active="true"]):not([data-disabled]) .hm-sw-header__line-preview > i { background: var(--hm-sw-header-layer-row-hover-color); }
|
||||
.hm-sw-header__menu-row:is(:hover, [data-active="true"]):not([data-disabled]) .hm-sw-header__menu-dimension-default { visibility: hidden; }
|
||||
.hm-sw-header__menu-row:is(:hover, [data-active="true"]):not([data-disabled]) .hm-sw-header__menu-dimension-hover { visibility: visible; }
|
||||
/* Latest request: selected style rows use the same emphasis as hover. */
|
||||
/* 2026-10-16 additional fix: selected style rows use the same emphasis as hover (rules above). */
|
||||
|
||||
/* Footer (40px, "... 상세" pill). Border / padding / alignment per Figma menu. */
|
||||
.hm-sw-header__menu-footer {
|
||||
|
||||
Reference in new issue
Block a user