fix(sw): refine property panel and Firefox range styles
- 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>
shkim4andClaude Opus 5.5 committed No files matched your search
|
After Width: | Height: | Size: 1008 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 248 B |
|
After Width: | Height: | Size: 211 B |
|
After Width: | Height: | Size: 255 B |
|
After Width: | Height: | Size: 263 B |
|
After Width: | Height: | Size: 211 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 901 B |
|
After Width: | Height: | Size: 719 B |
|
After Width: | Height: | Size: 739 B |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,29 @@
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_dd_26_12081)">
|
||||
<g clip-path="url(#paint0_angular_26_12081_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.007 -0.007 0 10 10)"><foreignObject x="-1285.71" y="-1285.71" width="2571.43" height="2571.43"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(81, 0, 0, 1) 0deg,rgba(81, 0, 0, 1) 12.8082deg,rgba(172, 29, 29, 1) 48.0519deg,rgba(121, 22, 22, 1) 92.222deg,rgba(255, 177, 177, 1) 127.031deg,rgba(228, 0, 0, 1) 157.271deg,rgba(255, 166, 166, 1) 206.171deg,rgba(190, 23, 23, 1) 252.461deg,rgba(81, 0, 0, 1) 292.192deg,rgba(81, 0, 0, 1) 327.01deg,rgba(81, 0, 0, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><rect x="3" y="3" width="14" height="14" rx="7" data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":0.32083332538604736,"g":0.0,"b":0.0,"a":1.0},"position":0.035578250885009766},{"color":{"r":0.67500001192092896,"g":0.11531250178813934,"b":0.11531250178813934,"a":1.0},"position":0.13347755372524261},{"color":{"r":0.47499999403953552,"g":0.087083332240581512,"b":0.087083332240581512,"a":1.0},"position":0.25617215037345886},{"color":{"r":1.0,"g":0.69583332538604736,"b":0.69583332538604736,"a":1.0},"position":0.35286325216293335},{"color":{"r":0.89411765336990356,"g":0.0,"b":0.0,"a":1.0},"position":0.43686389923095703},{"color":{"r":1.0,"g":0.65416663885116577,"b":0.65416663885116577,"a":1.0},"position":0.57269597053527832},{"color":{"r":0.74583333730697632,"g":0.093229167163372040,"b":0.093229167163372040,"a":1.0},"position":0.70128107070922852},{"color":{"r":0.32083332538604736,"g":0.0,"b":0.0,"a":1.0},"position":0.81164407730102539},{"color":{"r":0.32083332538604736,"g":0.0,"b":0.0,"a":1.0},"position":0.90836137533187866}],"transform":{"m00":8.5725282327939710e-16,"m01":-14.0,"m02":17.0,"m10":14.0,"m11":8.5725282327939710e-16,"m12":3.0},"opacity":1.0,"blendMode":"NORMAL","stopsVar":[{"color":{"r":0.32083332538604736,"g":0.0,"b":0.0,"a":1.0},"position":0.035578250885009766},{"color":{"r":0.67500001192092896,"g":0.11531250178813934,"b":0.11531250178813934,"a":1.0},"position":0.13347755372524261},{"color":{"r":0.47499999403953552,"g":0.087083332240581512,"b":0.087083332240581512,"a":1.0},"position":0.25617215037345886},{"color":{"r":1.0,"g":0.69583332538604736,"b":0.69583332538604736,"a":1.0},"position":0.35286325216293335},{"color":{"r":0.89411765336990356,"g":0.0,"b":0.0,"a":1.0},"position":0.43686389923095703},{"color":{"r":1.0,"g":0.65416663885116577,"b":0.65416663885116577,"a":1.0},"position":0.57269597053527832},{"color":{"r":0.74583333730697632,"g":0.093229167163372040,"b":0.093229167163372040,"a":1.0},"position":0.70128107070922852},{"color":{"r":0.32083332538604736,"g":0.0,"b":0.0,"a":1.0},"position":0.81164407730102539},{"color":{"r":0.32083332538604736,"g":0.0,"b":0.0,"a":1.0},"position":0.90836137533187866}],"visible":true}"/>
|
||||
<rect x="4" y="4" width="12" height="12" rx="6" stroke="url(#paint1_linear_26_12081)" stroke-opacity="0.4" stroke-width="2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_dd_26_12081" x="0" y="0" width="20" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="1.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.108333 0 0 0 0 0.100706 0 0 0 0 0.0862153 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_26_12081"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.108333 0 0 0 0 0.100706 0 0 0 0 0.0862153 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_26_12081" result="effect2_dropShadow_26_12081"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_26_12081" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="paint0_angular_26_12081_clip_path"><rect x="3" y="3" width="14" height="14" rx="7"/></clipPath><linearGradient id="paint1_linear_26_12081" x1="5.625" y1="4.3125" x2="10" y2="17" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF5656"/>
|
||||
<stop offset="0.681666" stop-color="#E40000"/>
|
||||
<stop offset="1" stop-color="#550000"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="60" height="6" viewBox="0 0 60 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.96798 0.5H57.032C58.395 0.5 59.5 1.60495 59.5 2.96798C59.5 4.331 58.395 5.43595 57.032 5.43595H2.96798C1.60495 5.43595 0.5 4.331 0.5 2.96798C0.5 1.60495 1.60495 0.5 2.96798 0.5Z" fill="url(#paint0_linear_26_12080)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_26_12080" x1="30" y1="1" x2="30" y2="4.93595" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8E0000"/>
|
||||
<stop offset="0.370561" stop-color="#FF4242"/>
|
||||
<stop offset="0.76" stop-color="#E40000"/>
|
||||
<stop offset="1" stop-color="#1E0000"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 649 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"label": "after",
|
||||
"checks": [
|
||||
{
|
||||
"name": "size 44 x 30, top-right of the panel",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"w": 44,
|
||||
"h": 30,
|
||||
"right": 1,
|
||||
"top": 1,
|
||||
"imgs": [
|
||||
[
|
||||
"hm-sw-property__close-default",
|
||||
44,
|
||||
30
|
||||
],
|
||||
[
|
||||
"hm-sw-property__close-hover",
|
||||
44,
|
||||
30
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Default: no canvas-light pixels on the button edge / corner",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"bright": 0,
|
||||
"where": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Hover: hover asset shown, no canvas-light pixels on the edge / corner",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"vis": [
|
||||
"hidden",
|
||||
"visible"
|
||||
],
|
||||
"bright": 0,
|
||||
"where": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "click closes the panel, focus back on 속성창 trigger",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"open": false,
|
||||
"focusTrigger": true,
|
||||
"log": "legacyToggle → open(true) → open(false)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Escape closes the panel, focus back on 속성창 trigger",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"open": false,
|
||||
"focusTrigger": true,
|
||||
"log": "rue) → open(false) → legacyToggle → open(true) → open(false)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "no console / page errors",
|
||||
"status": "PASS",
|
||||
"data": []
|
||||
}
|
||||
],
|
||||
"errors": [],
|
||||
"pixels": {
|
||||
"def": {
|
||||
"bright": 0,
|
||||
"where": []
|
||||
},
|
||||
"hov": {
|
||||
"bright": 0,
|
||||
"where": []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"label": "before",
|
||||
"checks": [
|
||||
{
|
||||
"name": "size 44 x 30, top-right of the panel",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"w": 44,
|
||||
"h": 30,
|
||||
"right": 1,
|
||||
"top": 1,
|
||||
"imgs": [
|
||||
[
|
||||
"hm-sw-property__close-default",
|
||||
44,
|
||||
30
|
||||
],
|
||||
[
|
||||
"hm-sw-property__close-hover",
|
||||
44,
|
||||
30
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Default: no canvas-light pixels on the button edge / corner",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"bright": 0,
|
||||
"where": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Hover: hover asset shown, no canvas-light pixels on the edge / corner",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"vis": [
|
||||
"hidden",
|
||||
"visible"
|
||||
],
|
||||
"bright": 0,
|
||||
"where": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "click closes the panel, focus back on 속성창 trigger",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"open": false,
|
||||
"focusTrigger": true,
|
||||
"log": "legacyToggle → open(true) → open(false)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Escape closes the panel, focus back on 속성창 trigger",
|
||||
"status": "PASS",
|
||||
"data": {
|
||||
"open": false,
|
||||
"focusTrigger": true,
|
||||
"log": "rue) → open(false) → legacyToggle → open(true) → open(false)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "no console / page errors",
|
||||
"status": "PASS",
|
||||
"data": []
|
||||
}
|
||||
],
|
||||
"errors": [],
|
||||
"pixels": {
|
||||
"def": {
|
||||
"bright": 0,
|
||||
"where": []
|
||||
},
|
||||
"hov": {
|
||||
"bright": 0,
|
||||
"where": []
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
# SW Header 디자인 명세
|
||||
|
||||
> **후속 디자인 수정 4건(2026-10-19):** 속성Bar는 Figma 1222px 고정 폭 대신 마지막 필드에서 끝나는 콘텐츠 폭(공간 부족 시 내부 스크롤)을 사용합니다. 속성창 도구 아이콘 SVG의 Figma 캔버스 배경을 제거했고, 레이어·색상·문자·치수스타일 필드는 자기 Dropdown이 열린 동안 Hover를 적용하지 않으며, 게이지는 빨강 채움 + 베이지 Track입니다. 아래 26:10492의 "최대 1222" 설명보다 우선합니다. [검증 기록](./sw-header-followup-four-design-fixes-verification-2026-10-19.md).
|
||||
|
||||
> **상세 버튼 공통화 기준(2026-10-16, 이번 요청):** 상세 5개는 기존 `SWHeaderMenuDetail`을 공유하며 **현재 문자스타일 상세**를 우선합니다. Default는 배경 `rgba(197,177,158,.15)`·radius 24·글자 35%·아이콘 SVG 20%, Hover는 배경 .25·radius 25·글자 35%·아이콘 SVG 35%입니다. Disabled는 Default 외형과 클릭 차단을 사용합니다. Callback이 없어도 Hover되며 클릭은 무동작입니다. 치수 상세의 글자 100% Hover와 Callback 부재에 따른 비활성 설명은 이 기준으로 대체합니다. 기존 폭 113/99/128/142/142px·높이 24px, 제거된 Text Stroke 선언을 유지합니다. 과거 검증 문서는 당시 기록으로 보존합니다. [이번 검증 기록](./sw-header-detail-buttons-verification-2026-10-16.md).
|
||||
|
||||
> **3차 기준(2026-10-16):** 문서 끝 [3차 기준](#3차-기준--구성요소-표시메뉴-순서속성창-상태형상-slot-2026-10-16)이 구성요소 표시·메뉴 순서·속성창 상태·형상 Slot에 우선합니다. [3차 검증 기록](./sw-header-composition-shape-verification-2026-10-16.md).
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
# 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) 실브라우저.
|
||||
@@ -0,0 +1,32 @@
|
||||
# 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 재사용).
|
||||