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>
56 lines
6.2 KiB
Markdown
56 lines
6.2 KiB
Markdown
# SW 속성창 게이지 Firefox 지원 · 닫기 SVG · Storybook Build 검증 (2026-10-19)
|
||
|
||
기준: `feature/sw-package` @ `fc26afd4401d5b3bb74c8818cacb76f669fcd24b`. 직전 후속 4건([검증 기록](./sw-header-followup-four-design-fixes-verification-2026-10-19.md))의 미커밋 변경 위에서 진행했다.
|
||
|
||
## A. Firefox 게이지
|
||
|
||
- **원인:** 게이지 디자인이 `::-webkit-slider-runnable-track` / `::-webkit-slider-thumb`에만 정의돼 있었다. Gecko는 이 의사 요소를 쓰지 않아 기본 range 외형이 남았다.
|
||
- **방식:** Track 그림(채움 왼쪽 검정 선 + Figma 6926 채움 + 베이지 Track), Thumb 그림(`property-range-thumb.svg`), Thumb 그림자를 input의 custom property(`--hm-sw-range-track-paint`, `--hm-sw-range-thumb-paint`, `--hm-sw-range-thumb-shadow`)로 한 번만 정의했다. 엔진별 규칙이 이 값을 공유한다.
|
||
- WebKit/Blink: 기존 track + thumb(`margin-top: -4px`).
|
||
- Gecko: `::-moz-range-track`(6px, radius 3) + `::-moz-range-thumb`(14px, 자동 수직 중앙). `::-moz-range-progress`는 높이 0·투명으로 둬서 채움이 두 번 그려지지 않는다.
|
||
- 색·자산은 Chrome PASS 값 그대로이고, 새 색은 없다. 각 엔진은 자기 의사 요소만 인식하므로 다른 엔진에 영향이 없다.
|
||
- **검증:** `node packages/sw/tests/range-cross-browser.browser.mjs docs/sw/firefox-range-qa` → **29/29 PASS** ([result.json](./firefox-range-qa/result.json), [비교 이미지](./firefox-range-qa/compare-chrome-firefox.png)).
|
||
- 브라우저: Chrome 155.0.8059.80(Playwright), 설치된 **Firefox 158.0 실브라우저**(WebDriver BiDi로 직접 제어, Playwright Firefox 빌드 미사용).
|
||
- 조건: 같은 Story(`SW/Header/Property Panel` → 원 1개 → 속성창), 1400×1000, DPR 1, 같은 순서의 실제 키 입력.
|
||
- 두 브라우저 공통 확인: 빨강 채움, 베이지 Track, 위·아래 검정 1px의 6px 높이, Thumb 12px 검출 폭(14px 그림), Thumb 세로 중심이 Track 중심(8.0).
|
||
- 값 0 / 0.25 / 0.65(→ 40회) / 1(End) / 0(Home) / 외부 Props 0.8에서 Thumb 중심이 기대값 ±1px.
|
||
- Enter 확정 시 숫자 입력 0.65와 Callback `property(opacity, 0.65)` 확인.
|
||
- Disabled·ReadOnly: range가 비활성화되어 키 입력으로 값이 바뀌지 않고, 해제하면 복원된다.
|
||
- Chrome 대비 차이: 1,800픽셀 중 48 초과 차이는 최대 1px, 평균 채널 차이 1.2–2.1. 채움·Track 열 색은 ±1 이내.
|
||
- 남은 차이는 Track 아래 1px 하이라이트 행 하나다. Chrome #EADEC8, Firefox #EDE5D4로 Gecko의 box-shadow 안티앨리어싱 차이다.
|
||
- 최종 실행의 Thumb 중심(px)은 9개 상태 모두 두 엔진이 같다: 0 → 7, 0.25 → 25, 0.65 → 53, 0.8 → 64, 1 → 79. 이전 실행에서는 Chrome Focus 테두리가 포함돼 극값이 7.5 / 78.5로 측정됐다.
|
||
- **Focus-visible:** 기존 `.hm-sw-property input:focus-visible`(2px #A67D03) 규칙은 엔진 공통이다.
|
||
- headless Firefox는 BiDi 합성 키 입력에서 버튼·텍스트 입력까지 포함해 `:focus-visible`을 켜지 않는다(별도 대조 페이지에서 확인).
|
||
- 그래서 비교 스크린샷은 두 브라우저 모두 테스트 전용으로 outline만 숨기고 찍었다. Firefox Focus 링의 시각 확인은 NOT VERIFIED다.
|
||
- 콘솔: 두 브라우저 모두 컴포넌트 오류 0. Firefox에는 Storybook manager 글꼴(`/sb-common-assets/nunito-sans-regular.woff2`) 다운로드 실패 1건이 있으며, Storybook 인프라 항목이라 제외했다.
|
||
- Story: `PropertyPanelDemo`에 `투명도 외부 값 변경` / `투명도 Disabled` / `투명도 ReadOnly` 버튼 3개만 추가했다(공개 API 변경 없음).
|
||
- Chrome 회귀: 기존 `followup-four.browser.mjs` **39/39 PASS** 재실행.
|
||
|
||
## B. 닫기 버튼 SVG (Figma 26:12366)
|
||
|
||
- `property-close.svg` / `property-close-hover.svg` 모두 도구 아이콘과 같은 Figma 캔버스 4요소를 포함하고 있었다: `#F5F5F5` 44×30 배경, 흰 페이지 path, 10% 검정 페이지 테두리, `#9747FF` 점선 프레임.
|
||
- **실제 노출:** 버튼 몸체가 44×30을 덮고 패널의 둥근 모서리·overflow가 대부분을 가린다. 그래서 흰 테두리처럼 보이지는 않았다(가장자리 밝은 픽셀 0). 다만 오른쪽 위 radius 3 곡선의 안티앨리어싱 픽셀(4배율 기준 19 / 15개, 최대 채널 차이 67 / 35)에 밝은 캔버스가 섞여 있었다.
|
||
- **수정:** 두 파일에서 위 4요소만 제거했다. viewBox 44×30(버튼과 동일), 버튼 path·Gradient·Hover 빨강 #E40000·X 아이콘·Default/Hover 분리는 그대로다.
|
||
- **검증:** `node packages/sw/tests/property-close.browser.mjs docs/sw/property-close-qa after` → **6/6 PASS** ([before](./property-close-qa/before-result.json) / [after](./property-close-qa/after-result.json)).
|
||
- 크기 44×30, 패널 오른쪽·위 1px.
|
||
- Default/Hover 가장자리 밝은 픽셀 0, Hover 자산 표시 확인.
|
||
- 클릭 닫힘 + 속성창 버튼으로 Focus 복귀, Escape 닫힘 + Focus 복귀, 오류 0.
|
||
- 전후 차이는 위 모서리 곡선 픽셀뿐이다.
|
||
- `.hm-sw-property__tool` 관련 SVG는 이번에 수정하지 않았다.
|
||
|
||
## C. Storybook Build
|
||
|
||
- `npm run build-storybook`(prebuild: theme-defaults 검사 + 패키지 build 포함) → **exit 0, "Storybook build completed successfully"**.
|
||
- 경고 4종은 모두 기존 경고로 SW 변경과 무관하다: Tailwind `bg-[var(...)]` CSS 최적화, lightningcss `host-context`, 500kB 초과 chunk, PLUGIN_TIMINGS. 앞의 3종은 `docs/org-chart/consistency-review-p11-6.md` 등에 이미 기록돼 있다.
|
||
- 결과물 `storybook-static/assets/sw-header-*.css`에 `::-moz-range-track/progress/thumb` 각 1회, Thumb SVG data URI가 포함됐다. Story bundle의 SVG에는 `#F5F5F5` / `#9747FF`가 0건이다.
|
||
|
||
## 재사용한 기존 PASS (재실행 안 함)
|
||
|
||
Storybook 32개 렌더, 구성 77/77, 브라우저 271건, 기본 Header 10폭 차이 0. 공통 Header CSS·팝업 구조는 바꾸지 않았다(range 의사 요소와 닫기 SVG만 변경).
|
||
|
||
## NOT VERIFIED
|
||
|
||
- Firefox에서 키보드 Focus 링(`:focus-visible`)의 시각 표시. 자동화 입력 한계로 확인하지 못했고, 규칙은 엔진 공통 CSS다.
|
||
- 실제 Windows Firefox 창(비 headless)과 고배율(DPR 2) 렌더링.
|
||
- Safari(WebKit) 실브라우저.
|