shkim4andClaude Opus 5.5
724c51732b
- Property bar ends after its last field (content width, scrolls when longer) - Remove Figma canvas layers from property tool and close SVGs - Suppress header field hover while the field's own dropdown is open - Gauge: Figma red fill pill, beige track, Figma thumb SVG; shared paint for WebKit and Gecko (::-moz-range-*) so Firefox matches Chrome - Story buttons for gauge external value / disabled / read-only - Browser checks: follow-up fixes, Chrome vs Firefox range, close button Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
33 lines
5.7 KiB
Markdown
33 lines
5.7 KiB
Markdown
# SW Header 후속 디자인 수정 4건 검증 (2026-10-19)
|
||
|
||
기준: `feature/sw-package` @ `fc26afd4401d5b3bb74c8818cacb76f669fcd24b`(시작 시 Working Tree clean). Commit·Push 없음.
|
||
증거: [followup-four-qa/](./followup-four-qa/) · 결과 [result.json](./followup-four-qa/result.json) · 재실행 `node packages/sw/tests/followup-four.browser.mjs docs/sw/followup-four-qa` (Storybook 6024, `packages/sw/dist` 사용 → SW build 후 실행).
|
||
|
||
## 변경 요약
|
||
|
||
| 작업 | 원인 / 결정 | 변경 |
|
||
|---|---|---|
|
||
| A 속성Bar 길이 | 바가 `width:100%`(최대 1222px)로 앵커 폭을 채워 마지막 필드 뒤가 빈 갈색 영역 | 바 `width: max-content; max-width: 100%`, 앵커는 고정 `width` 대신 `maxWidth: calc(100% - 왼쪽 오프셋)`. 마지막 필드 + 기존 오른쪽 padding 6px + border 1px에서 끝남. 공간보다 길면 Header 오른쪽 끝까지 늘어나고 내부 가로 스크롤. Figma 1222px 고정 폭은 사용자 최신 지시로 대체. **2026-10-19 사용자 확정**: 마지막 필드에서 끝나는 콘텐츠 폭 정책 |
|
||
| B 도구 아이콘 흰 테두리 | CSS 원인 아님(border 0·outline none·배경 투명). **SVG 자체**에 Figma 페이지 캔버스가 함께 export됨: `#F5F5F5` 29×28 사각형, 흰색 페이지 path, 10% 검정 페이지 테두리, `#9747FF` 점선 컴포넌트 세트 테두리. 버튼 사각형은 29×27.129·rx 3이므로 네 모서리와 아래 0.87px에 밝은 캔버스가 비침 | 3개 SVG(Default/Hover/Active)에서 위 캔버스 요소 4개만 제거, viewBox/높이 29×27.129, img 높이 28 → 27.13px. 버튼 사각형·`#092920` 외곽·`#08251C` / Active `#A67D03` 내부 Gradient·inner shadow·아이콘 path는 그대로 |
|
||
| C Dropdown 열림 Hover | 필드 Hover(글자·미리보기·노란 ring)가 열린 상태에서도 적용 | 기존 필드 Hover selector 5개에 `:not([data-expanded="true"])` 추가. 열림 표현(`data-expanded` 스타일, 선스타일 고정 ring)·내부 행·상세 버튼 Hover·Focus-visible 미변경, `pointer-events` 미사용 |
|
||
| D 게이지바 | 기존 Track 전체가 빨강, 채움/미채움 구분 없음 | 입력값에서 0–1 비율을 계산해 `--hm-sw-range-fill`로 전달. **사용자 예시 이미지**([reference/user-gauge-example.png](./followup-four-qa/reference/user-gauge-example.png))를 행 단위로 측정해 적용: 채움은 사용자 제공 Figma 원본 [Rectangle 6926.svg](./followup-four-qa/reference/Rectangle%206926.svg): 6px 알약, 검정 1px 테두리, 내부 #8E0000 / #FF4242 37% / #E40000 76% / #1E0000 세로 Gradient. 왼쪽 끝은 radius 3과 왼쪽 검정 1px로 둥근 테두리, 오른쪽 끝은 항상 Thumb 아래. 미채움 베이지는 예시 이미지 측정값 #AEA28B / #C3B9A4 / #C7BDA9 ×2 / #B7AC96 / #AC9E84, 아래 1px 하이라이트 #EADEC8. 채움 끝은 Thumb 중심. Thumb는 사용자 제공 Figma 원본 [Rectangle 6915.svg](./followup-four-qa/reference/Rectangle%206915.svg) 14px(conic + 2px Gradient 테두리 40%)를 `assets/property-range-thumb.svg`로 저장해 사용(viewBox만 14px 본체로 자르고 Figma 편집용 속성 제거). 원본 그림자 필터 2개는 같은 값의 CSS `box-shadow`(0 0 3px #1C1A16, 0 2px 2px 40%). 토큰 `--hm-sw-property-range-fill / -fill-edge / -track / -highlight` |
|
||
|
||
## 실행 결과 (Chrome headless, 2회 연속 39/39 PASS)
|
||
|
||
- **A** 1920: 바 x 377–906.7(529.7px), 마지막 필드 끝 899.7 → 차이 7px(padding 6 + border 1). 높이 28, Header 49, 하단 radius 6/6, 하단 border 1px #08251C. 끝 안쪽은 #271F13, 바깥은 배경색이며 하단 라인도 같은 x에서 끝남. 필드 4 → 10개: 1169px로 증가, 잘림 0. 24개: Header 끝(1920)에서 멈추고 스크롤로 마지막 필드 접근. 1개 객체로 교체: 158px로 축소. 1440 / 1080 / 768: Header 안, 28px, 페이지 가로 스크롤 0(768은 내부 스크롤).
|
||
- **B** 버튼·이미지 29 × 27.13, CSS border/outline/background 없음. Default / Hover / Active 각 버튼 영역에서 밝은(≥235) 픽셀 0. Active 클릭 시 `aria-pressed=true`.
|
||
- **C** 레이어·색상·문자·치수: 열림 상태 Hover 전후 ring opacity·글자색 동일(ring 0). 닫힌 뒤 Hover ring 1·글자 #FFC600 복원. 선스타일: 기존대로 열림 ring 1 유지, Hover로 변하지 않음.
|
||
- **D(Hover 유지)** 5개 Dropdown 모두 비선택 내부 행(색상은 ByLayer/ByBlock) Hover 변화 있음, 하단 상세 버튼 Hover 변화 있음.
|
||
- **E** 렌더링 미채움 6행은 예시 측정값과, 채움 행은 Figma 6926(검정 / #B51717 / #FE4040 / #ED1515 / #790000 / 검정, 1x)과 일치(1x 픽셀 측정, [x8 확대](./followup-four-qa/E-gauge-zoom-x8.png)). 0.25: Thumb 왼쪽 빨강 / 오른쪽 베이지. 키보드 →×40 = 0.65, 채움 동기화, Enter commit 후 숫자 입력 0.65(Callback 경로). End = 1, Home = 0. 숫자 입력에 0.5 입력 시 게이지 0.5 동기화.
|
||
- **F** 속성창 4상태 314×256 / 361 / 658 / 754 렌더.
|
||
- **G** page / console 오류 0.
|
||
- SW `typecheck`, SW `build`, 루트 `tsc -b` PASS.
|
||
|
||
## 미확정 / 미검증
|
||
|
||
- 예시 이미지의 미채움 Track은 Figma 26:11978의 어두운 빨강 대신 베이지로 대체했습니다(사용자 지시).
|
||
- 예시 이미지 아래의 최소/최대 라벨(`0`, `90 %`)은 현재 속성창 구현과 Figma에 없는 요소라 추가하지 않았습니다(기존 단위 `%` 표시는 유지).
|
||
- `property-close*.svg`에도 같은 Figma 캔버스 요소가 있으나 이번 범위가 아니라 수정하지 않았습니다(44×30 전체가 덮이는지 미확인).
|
||
- Firefox `::-moz-range-*`는 기존 코드에도 없으며 이번에도 추가하지 않았습니다.
|
||
- Storybook Build·기존 77/77 구성·271건 브라우저·10폭 회귀는 재실행하지 않았습니다(기존 PASS 재사용).
|