Private

Public Access

0 Fork 0

Files

T

shkim4andClaude Opus 5.5 0029cef60c feat(sw): implement property field interaction variants

- Property panel rows follow Figma 26:12388 ~ 26:12649: 28px fields with
  Default / Hover border / numeric editing On (#0F0D0A) / dropdown On (#211D13)
- Layer, line style and color fields open the shared header dropdown contents
  (SWHeaderLayerRows, SWHeaderLineStyleColumns, SWHeaderColorPanelBody)
- Additive API: property.picker, property.decimals, panel menus
- Property Fields story and browser test (77 checks)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-10-19 09:38:31 +09:00

3.5 KiB

Raw Blame History

SW 속성창 입력·선택 필드 검증 (2026-10-19)

Figma rj6wpsfk24lOWvWiVRAANP의 속성 필드 13개 노드를 기존 SWHeaderPropertyPanel 행에 반영했습니다. 팝업은 새로 만들지 않았고, Header의 레이어·색상·선스타일 Dropdown 본문을 공유 컴포넌트로 분리해 재사용했습니다.

구현 범위

Figma	항목	Default / Hover	On
26:12388 / 26:12404	선스타일	값 + `(ByL)` + 선택한 선 패턴	`#211D13`, `(ByL)` `#D4CBBD`, 3열 Dropdown(우측 정렬)
26:12250 / 26:12265	레이어 — 다양함	`다양함`	`#211D13`, 234px 레이어 목록(현재 행 없음)
26:12260 / 26:12291	레이어 — 단일 값	레이어 이름	`#211D13`, 234px 레이어 목록(현재 행 강조)
26:12314	선축적	값 + `(LTscale:1)`	편집 `#0F0D0A`, 단위 흰색, 빨간 caret
26:12649	선가중치 · 투명도	41px 내외 Hug(pl 6 / pr 4)	편집 `#0F0D0A`
26:12170 / 26:12184	색상	RGB + 70 × 16 색상칩, Hover 시 구분선	RGB 영역 `#211D13`, 192px 색상 Dropdown(좌측 정렬)
26:12583	하이퍼링크	`--`	Figma On 없음, Hover 모양만 유지
26:12590	두께	값 + `mm`	편집 `#0F0D0A`, 단위 흰색
26:12574	재료	값 + `(ByL)`	Figma On 없음(computed, 읽기 전용)

공통: 높이 28px, radius 2px, Hover 1px rgba(33,29,19,.4). 테두리는 Default에서도 투명 1px로 존재해 Hover/On에서 값이 움직이지 않습니다.

실행한 검증

항목	결과	근거
필드 인터랙션 (Chrome, Playwright)	77/77 PASS	`packages/sw/tests/property-fields.browser.mjs`, `property-fields-qa/run4-result.json`
기존 Header·Dropdown 회귀(detail-buttons verify)	257 checks PASS, 33 stories	기존 baseline 대비, 산출물은 임시 폴더
followup-four	39/39 PASS	기존 스크립트 재실행
property-close	6/6 PASS	기존 스크립트 재실행
속성창 4상태 크기	314 × 256 / 361 / 658 / 754	위 인터랙션 테스트 마지막 단계
SW Typecheck / Build, 루트 앱 Typecheck, Storybook Build	PASS	임시 폴더로 빌드, `storybook-static`은 변경하지 않음

Figma와 남은 차이

글꼴: Figma Dotum과 달리 Noto Sans KR은 폭이 넓습니다. 선스타일 필드는 이름이 잘리지 않도록 선 미리보기를 68px에서 최소 40px까지 줄입니다. Dropdown의 선 종류 열은 기존 Header 정책대로 182px보다 넓어질 수 있습니다(측정 187px).
값 굵기: 기존 속성창 기준 500을 유지했습니다(Figma 레이어명은 Dotum Regular이고 컴포넌트명에 bold가 붙어 있습니다).
Figma에서는 Hover 시 테두리 때문에 값이 1px 이동하지만, 요청에 따라 구현은 이동하지 않습니다. 색상칩의 오른쪽 여백은 Default 기준(6px)입니다.
열린 Dropdown은 화면 여유가 없으면 화면 안쪽(4px)으로 이동하거나 필드 위로 열립니다.
하이퍼링크는 편집 가능하지만 Figma에 On이 없으므로 포커스 중에도 Hover 테두리만 표시합니다.

NOT VERIFIED

Firefox: 이번 필드 변경은 Chrome에서만 실행했습니다. Firefox의 field-sizing 미지원 경로(Hug 폭 계산)는 실행하지 않았습니다.
실제 CAD 호스트 연동(색상 추출, 레이어 상세 등)은 Callback 호출까지만 확인했습니다.
Header 77개 구성 시나리오와 10개 폭 비교는 이번 변경 범위가 아니어서 다시 실행하지 않고 기존 PASS 근거를 재사용합니다.

3.5 KiB Raw Blame History Unescape Escape