HMDesign/docs/sw/sw-header-followup-four-design-fixes-verification-2026-10-19.md

SW Header 후속 디자인 수정 4건 검증 (2026-10-19)

기준: feature/sw-package @ fc26afd4401d5b3bb74c8818cacb76f669fcd24b(시작 시 Working Tree clean). Commit·Push 없음. 증거: 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)를 행 단위로 측정해 적용: 채움은 사용자 제공 Figma 원본 Rectangle 6926.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 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 확대). 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 재사용).