HMDesign/docs/sw/sw-header-detail-buttons-verification-2026-10-16.md

SW Header 상세 버튼 5개 공통화 검증 — 2026-10-16

1. 최종 판정: PASS(요청 범위 / Chromium). 실제 Pointer Hover를 포함한 주 검증 256건, 보존 확인 15건 PASS. 범용 Guard의 미검증은 아래 15번에 별도로 남깁니다. 과거 보고서를 덮어쓰지 않았습니다.

2. 시작 Git: D:\디자인시스템\HMDesign-SW, feature/sw-package, HEAD 9407c8567f57301659e591c03451cca1b828733c. M package.json, M package-lock.json, ?? docs/sw/, ?? packages/sw/, ?? src/sw/가 작업 전부터 있었습니다. 해당 미커밋·미추적 작업을 보존했습니다. 작업별 경로·브랜치 및 Commit/Push 보류 지시를 적용했습니다.

3. 기존 구조: 색상·선·문자·치수는 SWHeaderDropdown.tsx의 내부 공통 SWHeaderMenuDetail을 사용했으나 disabled={!onClick}으로 Callback 부재 시 Hover가 차단됐습니다. 레이어는 별도 JSX, 치수는 글자 100%·Default 아이콘을 사용하는 별도 Hover 규칙이 있었습니다.

4. 공통화: 기존 SWHeaderMenuDetail을 보완하고 레이어까지 연결했습니다. 새로운 중복 컴포넌트나 공개 export는 추가하지 않았습니다. SWHeaderMenuDetailProps는 native ButtonHTMLAttributes를 확장하며 label, icon, onClick, disabled, className, aria-label 등을 지원합니다. 장식 아이콘과 접근성 이름을 구분합니다. 레이어의 기존 class와 토큰 이름은 유지했습니다. 상태 CSS는 .hm-sw-header__menu-detail 한 곳에서 관리하고 버튼별 CSS에는 폭만 남겼습니다.

5. 문자스타일 기준: Figma 파일 rj6wpsfk24lOWvWiVRAANP, Default 26:10789 / Hover 26:10792를 Plugin API 읽기와 스크린샷으로 확인했습니다. 변경 전 실제 문자스타일 버튼을 브라우저로 측정한 detail-button-qa/baseline.json의 textDefault / textHover가 구현 기준입니다. Figma의 배경 .15/.25, radius 24/25, 14px 아이콘, gap 4, padding 5/10, 글자 35%, 아이콘 내부 SVG 20%/35%와 일치합니다. Disabled 전용 Figma Variant는 이 2개 노드에 없으며 현재 Default 외형을 보존하고 클릭만 차단했습니다.

6. Default 5개: 레이어 113×24, 색상 99×24, 선스타일 128×24, 문자스타일 142×24, 치수스타일 142×24px. 전부 배경 rgba(197,177,158,0.15), 글자 rgb(255,255,255)와 opacity .35, radius 24px, border 0, box-shadow none, Text Stroke 0px. 아이콘 요소 opacity는 1이며 SVG path 내부 opacity .2입니다. 기존 레이블·아이콘을 유지했습니다.

7. Hover 5개: 실제 locator.hover() 후 전부 배경 rgba(197,177,158,0.25), radius 25px, 글자 opacity .35, SVG path .35로 전환. 밝은 치수 예외는 제거했습니다. Mouse Leave 시 5개 모두 Default로 복귀했습니다. CSS 강제 pseudo 상태만으로 PASS 처리하지 않았습니다.

8. Disabled: 명시적 disabled만 적용하며 Callback 유무와 분리했습니다. 5개 모두 Default 외형 유지, 실제 포인터 클릭 시 Callback 없음. Hover 차단, 키보드 포커스 제외는 native disabled 동작입니다. 기존 fieldset disabled도 native :disabled 규칙을 따릅니다. 일반 버튼은 키보드 Focus-visible 윤곽선을 유지합니다.

9. Callback: 비교 Story에서 각 일반 버튼 클릭 1회·Enter 1회와 Disabled 클릭 차단을 확인했습니다. Callback 없는 5개도 실제 Hover·클릭을 수행했고 오류가 없습니다. 실제 Dropdown 5종에서 기존 onLayerDetail / onColorDetail / onLineStyleDetail / onTextStyleDetail / onDimensionStyleDetail 호출·닫힘·필드 Focus 복귀를 확인했습니다. 호스트 Callback이 없으면 실행·팝업·CAD 처리를 흉내 내지 않고 무동작입니다.

10. Computed Style 차이: 동일 상태의 5개 스타일은 변경 전 문자스타일 기준과 비교하여 차이 0(폭·텍스트의 의도된 차이 제외). 배경·color·opacity·border·radius·box-shadow·글자색/opacity/Stroke·아이콘 opacity/content를 비교했습니다. 행 Hover는 선·문자·치수 목록에서 기존 rgb(98,83,61) 유지. 상세 버튼 외 목록/Selected/상단 Header Hover 규칙은 수정하지 않았습니다. 전체 실측값은 주 검증 JSON에 있습니다.

11. Story 및 회귀: 기존 31개 유지 + verification Story 1개 = 32개 렌더 PASS, page/console 오류 0. Default·Controls 2개 Story 각각 10폭(1920/1800/1440/1180/1080/900/768/640/520/390)에서 Header 포함 99개 요소의 위치·크기·display·visibility·color·background를 전후 비교해 차이 0. 11개 구성 프리셋×7폭 = 77/77 PASS(메뉴 DOM 순서·제거·Header 높이·overflow 및 More 비어 있지 않음). 390/768/1280/1440에서 Header·문서 가로 overflow 0. 속성창 4상태는 314×256/361/658/754px, 창 이동은 3개 1400ms 애니메이션과 Leave 정리, K는 511ms 진입과 Leave 닫힘, Colorize 24px, 기존 편집 Input과 caret 색을 확인했습니다. 보존 확인 JSON. 속성Bar·형상 Slot을 포함한 기존 Story가 렌더링됐으며 그 기능 소스는 수정하지 않았습니다. 기존 각 Story의 모든 상호작용을 전수 재검사했다는 뜻은 아닙니다.

12. Typecheck / Build: npm.cmd run typecheck:sw, npm.cmd run build:sw, npm.cmd run typecheck 모두 exit 0. Root typecheck의 pretypecheck가 package build를 수행한 후 동일 산출물을 사용해 npm.cmd --ignore-scripts run build, npm.cmd --ignore-scripts run build-storybook을 실행해 exit 0을 확인했습니다. 후속 Story 설명 수정은 Storybook만 다시 빌드했습니다. 기존 bg-[var(...)] CSS 최적화 경고와 chunk 크기 경고가 있으며 빌드 실패는 없습니다. 로그는 detail-button-qa/root-typecheck.log, root-build.log, storybook-build.log에 있습니다. 최종 브라우저 검증은 정적 Storybook 빌드를 로컬 HTTP로 제공해 실행했습니다. 패키지 재빌드 중 dev HMR 404가 발생한 시험은 PASS로 사용하지 않았습니다.

13. 변경 파일: packages/sw/src/components/sw-header/components/ 아래 SWHeaderDropdown.tsx, SWHeaderLayerMenu.tsx, SWHeaderStyleListMenus.tsx, SWHeaderColorMenu.tsx, SWHeaderLineStyleMenu.tsx; packages/sw/src/theme/sw.css; src/sw/sw-header.stories.tsx, src/sw/sw-stories.css; docs/sw/sw-header-usage.md, docs/sw/sw-header-design-spec.md; 신규 packages/sw/tests/detail-buttons.browser.mjs, 이 보고서, docs/sw/detail-button-qa/ 증거. Color/Line 파일은 Callback 설명 주석만 갱신했습니다. Build가 gitignored dist·storybook-static도 갱신했습니다. package.json/lock·UI/OrgChart/Center Graphic/기존 공개 export·기존 _local/ 파일은 편집하지 않았습니다.

14. 남은 디자인 차이: Figma Dotum Regular와 현재 Noto Sans KR 700의 글리프 형태·굵기 차이는 기존대로입니다. Figma TEXT의 .4px Stroke와 달리 현재 구현의 상세 글자 Stroke는 0px이며, 사용자가 제거 유지 지시한 선언을 복구하지 않았습니다. 버튼 간 Default/Hover/Disabled 불일치는 발견하지 못했습니다. Figma와 현재 버튼 차이는 이번 요청의 우선순위에 따라 현재 문자스타일을 유지했습니다.

15. NOT VERIFIED: 실제 CAD/설치형 SW 호스트의 상세 팝업과 명령 적용, Firefox/Safari, 스크린리더 실제 낭독, 전체 Story의 모든 기존 상호작용 및 전 화면 픽셀 diff. 범용 Guard는 status/staticStatus=NOT VERIFIED, FAIL 0입니다. 원인: @hm-design/sw/styles.css resolver 및 native 버튼 재사용 판정은 범용 UI 검사로 자동 확정되지 않음. SW는 기존부터 UI와 독립된 컴포넌트 패키지이며 내부 버튼을 보완한 작업입니다. Guard 원본의 styleEvidence는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED이며 checks가 빈 배열이므로 SW CSS가 모두 검증됐다는 의미로 사용하지 않습니다. 원본 guard.json을 덮어 승격하지 않고 위 브라우저·Figma 근거를 별도로 제시합니다.

16. 종료 Git: feature/sw-package, HEAD 9407c8567f57301659e591c03451cca1b828733c; 상태 표시는 시작과 같은 M package.json, M package-lock.json, ?? docs/sw/, ?? packages/sw/, ?? src/sw/이며 SW 디렉터리 안에 이번 변경이 추가됐습니다. 공식 원격 main도 같은 SHA를 읽기 확인했습니다. Stage/Commit/Push/PR/Merge/Publish/배포 없음. git diff --check 통과.

재현: node packages/sw/tests/detail-buttons.browser.mjs verify docs/sw/detail-button-qa static, 추가 보존 확인은 preservation 모드. Chrome/Playwright 경로는 SW_CHROME_PATH / SW_PLAYWRIGHT_PATH로 바꿀 수 있습니다. 변경 전 baseline은 이 작업 시작 상태이며 새로 덮어쓰면 기존 회귀 비교 기준이 바뀝니다.

비교 이미지: Default, 실제 Pointer Hover.

시간 기록(Asia/Seoul, KST):

• Started At: 2026-10-16 17:47:45
• Completed At: 2026-10-16 18:01:40
• Actual Duration: 13분 55초
• Estimated Duration: 최초 30~50분
• Variance: 예상보다 16분 05초~36분 05초 짧음