31 KiB
SW Header 메인 개선 및 Storybook 화면별 검토 — 2026-10-19
최종 판정: PASS — 요청한 Overview 개선·28개 화면 조사 범위. 다른 Story의 삭제·통합·이름 변경·재분류는 적용하지 않았습니다.
- 시작:
D:\디자인시스템\HMDesign-SW,feature/sw-package, HEAD50bf5bda8e956a4973b923d64131f2f2285bd38c, Working Tree clean, 기존 로컬 Commit 3개. - 실제 수정 Story: Overview —
sw-header--overview. 공개@hm-design/sw컴포넌트를 사용합니다. - Story 수는 28 → 28이며 ID·이름·순서·태그가 그대로입니다. 다른 27개 Story 선언은 시작 Commit과 동일합니다.
packages/sw/src, 공개 API, 패키지 CSS·자산, 기존 QA 기록과 디자인 명세는 수정하지 않았습니다.- Git 정책: 현재 브랜치에 로컬 Commit만 생성. Push·PR·배포·새 브랜치 생성 없음. Commit Hash와 최종 Git 상태는 완료 메시지에 기록합니다.
메인 화면의 변경
이전에는 Figma 기준 1920 × 49와 선택 상태라는 고정 1920px Header 표본 두 개를 표시했습니다. 이 두 시연 영역과 긴 설명을 제거하고, 하나의 실제 Header와 편집 가능한 미리보기로 바꿨습니다. SW Header 페이지 제목은 한 번만 표시합니다.
16:9 Stage와 큰 팝업 처리
기존 StoryPage의 실제 .sb-page-inner 안에서 제목·시연 설정·상태 줄을 제외한 남은 영역을 ResizeObserver로 측정합니다. width = min(사용 가능한 폭, 사용 가능한 높이 × 16 / 9), height = width × 9 / 16으로 두 방향 모두 맞추고 중앙 정렬합니다. iframe 자체 크기를 사용하므로 Storybook 사이드바·툴바·미리보기 크기 변경에도 다시 계산됩니다.
실측 예:
- iframe 1920×1080 / 1440×900: Stage 1200×675px. 기존 Inner 최대 폭을 따릅니다.
- iframe 1280×720: 896.875×504.5px. 높이가 크기 제한입니다.
- iframe 768×600: 683.547×384.5px.
- iframe 390×844: 358×201.375px.
- iframe 1000×500: 505.766×284.5px. 낮은 화면에서도 폭만으로 계산하지 않습니다.
- 1440×1000 브라우저에서 실제 Storybook manager 표시: 미리보기 iframe 1140×960, Stage 1071.594×602.766px.
- 모든 조건의 Header는 49px, 속성Bar는 기존 28px입니다. Header의 문자·아이콘·버튼·Dropdown을 확대/축소하지 않습니다.
Stage는 내부 스크롤 영역이며 미리보기 내용의 최소 폭은 390px입니다. Stage가 그보다 좁으면 가로 스크롤을 제공합니다. 팝업의 314×256 / 314×361 / 314×658 / 314×754px는 그대로입니다. 전체 펼침 팝업이 Stage 높이보다 크면 세로 스크롤로 하단 XYZ·푸터에 접근합니다. 390px 화면에서도 실제 Z 입력·확정과 Escape 후 More Focus 복귀를 확인했습니다.
Header의 공개 propertyPanel 타입은 위치 style을 받지 않으므로 Overview에만 한정한 Story CSS로 팝업을 Header 아래의 절대 배치로 바꿨습니다. top/left/max-height만 배치 목적에 맞게 조정하며 자연 폭·폰트·간격·색·모양은 유지합니다. 문서 목록이 열린 경우에만 문서 wrapper의 쌓임 순서를 올려 속성Bar에 가려지지 않게 했습니다. 중첩 속성 Dropdown은 기존 fixed 위치 계산과 z-index를 사용합니다. 이 예외는 다른 Story와 제품 CSS에 적용되지 않습니다.
연결한 기능과 상태
- 문서 목록: 선택·닫기·New 목록 추가, Open Callback. Storybook 호스트 목록만 변경하며 실제 파일 열기/저장은 수행하지 않습니다.
- 레이어: 선택·전구·눈꽃·잠금과 상세 Callback. Header와 속성창은 같은 레이어 목록·현재 값을 사용합니다.
- 색상: 기본/사용자 팔레트·ByLayer/ByBlock·RGB 검증·Colorize·상세 Callback. Header와 속성창이 같은 RGB 상태를 사용합니다.
- 선스타일: 선 종류·가중치·User 값·스케일·상세 Callback. ByLayer/ByBlock 가중치 모드는 숫자 속성을 모드 문자열로 덮어쓰지 않습니다.
- 문자스타일·치수스타일: 각각의 선택 상태와 상세 Callback. 다른 속성 데이터에 억지로 동기화하지 않습니다.
- More: 기존 반응형 정책대로 감춰진 필드·속성Bar·속성창에 접근합니다. 모든 Dropdown을 동시에 펼치지 않습니다.
- 속성Bar: 기존
BAR_FIXTURE의 형상 필드와 공개SWHeaderPropertyBar편집 동작을 사용합니다. 형상 값은 속성창과 공유하며 Enter·Escape·min 검증·외부 값·Disabled/ReadOnly·필드 추가/제거를 연결했습니다. CAD 계산 관계를 새로 만들지 않았습니다. - 속성창: Header 열기·닫기 버튼·Escape·Focus 복귀, 레이어/색상/선스타일 Dropdown, 숫자 편집·게이지·4개 선택 상태·그룹 펼침·기본/null 형상 Slot.
- 홈·인쇄·가이드·창 이동·최소화·종료는 기존 버튼과 Callback을 유지합니다. 실제 CAD/OS 동작은 호스트 소유이며 Storybook에서는 Callback을 기록합니다.
선택 상태와 외부 값·추가 필드·제한 상태·형상 Slot 설정은 Stage 밖의 Storybook 전용 시연 설정입니다. 기존 Storybook 조작 방식에 맞춰 native label/select/checkbox/button을 사용했으며, 제품 Header에 추가 버튼을 넣지 않았습니다. 기존 Property Bar Story와 다른 Story의 상태 관리 코드는 변경하지 않았습니다.
검증 결과와 재사용 근거
이번에 실행:
npm.cmd run typecheck:sw: PASS.npm.cmd exec -- tsc -p tsconfig.app.json --noEmit: PASS. 새 Overview와 Story 파일 포함.npm.cmd run build:sw: PASS. 재생성 전후packages/sw/dist/index.js해시도 동일했습니다.npm.cmd run build-storybook의 패키지 사전 빌드와 Storybook Build: PASS. 이후 Storybook 코드 수정분은npm.cmd exec -- storybook build -o storybook-static --disable-telemetry로 최종 빌드했습니다.overview.browser.mjs: 53/53 PASS. Chrome 155.0.8059.80, Inner 6개 크기, 실제 manager iframe, Dropdown 선택/전환/닫기, 공유 값, 입력 검증, 게이지, Focus, 4상태 크기, 내부 스크롤.overview.browser.mjs docs/sw/storybook-overview-qa overlays: 19/19 PASS. 상세 Callback 5종, Header 색상 모드 표시/직접 색상 복귀, 문서 첫 행 가림, 작은 Inner 중첩 Dropdown의 폭·하단 행 클릭·Escape.overview-firefox.browser.mjs: 9/9 PASS. 설치된 Firefox 158.0, 1400/500px 창에서 Stage·Header 높이·원래 754px 팝업·하단 접근·닫기/Focus.- 수정 전 28개 모두 실제 Chrome 초기 렌더링·브라우저 오류 0을 확인했습니다. 수정 후 나머지 27개 Story 선언 동일, CSS의 기존 구간 동일, 패키지 소스 동일을 확인했습니다.
- Git Diff의 범위·공백 오류와 Commit 직전 Staged Diff를 검토했습니다.
경고:
- Storybook Build는 생성 유틸리티의
var(...), OrgChart:host-context, chunk 크기 경고를 포함하지만 성공했습니다. 해당 코드·설정은 변경하지 않았습니다. - Firefox는 기존에도 보고된
/sb-common-assets/nunito-sans-regular.woff2글꼴 다운로드 경고가 있습니다. 정확히 이 글꼴 경고만 infrastructureWarnings로 구분하고 SW runtime 오류는 0인지 별도로 검사했습니다. 원래 인프라 경고 포함 결과와 최종 Firefox 결과를 함께 보존합니다. 이전 Firefox 검증 기록에도 같은 경고가 있습니다.
재사용한 과거 PASS — 이번 실행 결과와 구분:
- 1단계 정리: 33→28, 범위 검증 49/49, 기존 보존 15/15. 이번에는 현재 28개 ID·이름·태그 유지와 새 메인 동작을 별도로 검증했습니다.
- 속성 필드 검증: 필드 77/77, Header 회귀 257 checks 등은 패키지·기존 Story 구현이 동일하므로 관련 근거로 재사용합니다.
- Firefox 게이지: 기존 29/29의 게이지 디자인·엔진별 동작은 수정하지 않았습니다. 이번 메인의 게이지 상태 연결은 Chrome에서 새로 검증했습니다.
- 과거 baseline과 1단계 전용 검증 스크립트는 당시의 고정 화면·선언을 기준으로 한 기록입니다. Overview의 의도된 변경으로 무효화되는 화면/선언 동일성 검사를 현재 메인의 합격 기준으로 재사용하지 않았고, 기존 증거를 덮어쓰지 않았습니다.
NOT VERIFIED: 다른 27개 Story의 모든 인터랙션에 대한 새 전체 회귀, Firefox의 메인 전체 Dropdown·속성Bar·게이지 연동, 새로운 전체 접근성 인증, CAD/파일/OS 실제 연동. 신규 업무 화면 생성이 아닌 기존 Storybook Reference 수정이므로 AI 화면 생성 Guard는 적용 대상이 아닙니다.
증거: Chrome, 중첩 Dropdown, Firefox, 원본 화면 조사, 수정 전 ID, 수정 후 ID.
변경 파일:
src/sw/sw-header.stories.tsx— Overview 연결만 교체.src/sw/sw-header-overview.tsx— Storybook 전용 호스트 상태와 Inner 크기 계산.src/sw/sw-stories.css— Overview에만 적용되는 레이아웃·스크롤·팝업 위치.packages/sw/tests/overview.browser.mjs— 메인·중첩 Overlay 검증.packages/sw/tests/overview-firefox.browser.mjs— 설치된 Firefox 검증.- 이 보고서 및
docs/sw/storybook-overview-qa/의 새 목록·조사 데이터·화면·검증 기록. 전체 변경 파일 목록, 통합 요약과 소스 해시.
추가 정리 후보 — 이번에는 제안만
KEEP 11 / SIMPLIFY 6 / MERGE REVIEW 3 / REMOVE REVIEW 1 / QA 7. 사용자 승인 없이 적용한 항목은 없습니다. 삭제한 Default/Controls/Responsive/Text Stroke/Dynamic Data는 후보에서 제외했습니다.
- 우선 통합 검토: Property Panel Variants, Additional Hover, Layer Detail · Input의 상세 버튼 부분.
- 삭제 검토: Colorize. Color Dropdown의 대응 시연 및 테스트 참조를 먼저 이전해야 합니다.
- 길이 축소 검토: Interactive States, Document/Layer/Color/Line Style Dropdown, Responsive More.
- 개별 속성창 4개는 상태별 고정 치수·직접 검증 URL을 가진 QA 표본입니다. Compare/Variants와 겹치는 부분이 있어도 즉시 삭제할 근거는 아닙니다.
- Dynamic Controls와 Composition은 각각
controls와hiddenControls/menuOrder를 보여 줍니다. API 차이가 있어 유지 권장입니다. - 별도의 Input Story는 없습니다. Layer Detail · Input 전체를 삭제하면 독립 Input 시연도 사라집니다.
아래 V-01~V-27은 실제 manager 사이드바 표시 순서입니다. V-28 Detail Buttons는 verification 태그로 기본 숨김이며 직접 URL로 접근합니다(원본 index에는 첫 번째). 관측한 사이드바 순서.
Story 링크는 npm.cmd run storybook 실행 후 기본 포트 http://localhost:6024 기준입니다. 이번 자동 검증은 별도 임시 로컬 포트에서 수행했습니다. 스크린샷은 메인 외에는 수정 전 1440×1000 초기 화면이며, 긴 페이지 전체 내용은 원본 DOM 섹션 조사와 소스를 함께 확인했습니다. 28개 초기 렌더링은 PASS이며, 표의 기능 설명을 모든 인터랙션의 신규 PASS로 해석하면 안 됩니다.
| 번호 | Story 이름 | Story ID | 현재 내용 | 정리 제안 | 영향도 |
|---|---|---|---|---|---|
| V-01 | Overview | sw-header--overview |
통합 시연 / 사용자: 16:9 Stage에서 Header·전체 Dropdown·속성Bar·속성창·공유 속성을 조작. | KEEP — 현재 메인으로 유지. | 중간 |
| V-02 | Interactive States | sw-header--interactive-states |
상태 비교 / 사용자·QA: 12개 섹션: Host state, Hover/Selected/Disabled, 토글, 창 버튼 Callback, 긴 파일명. | SIMPLIFY — 반복 Header 표본과 설명을 상태별로 축소 검토. | 낮음 |
| V-03 | Window Move Motion | sw-header--window-move-motion |
단계별 실컴포넌트 정지 표본 / QA: 기존 9단계의 창 이동 모션을 3배 확대. | KEEP — 이번에 확정한 단계별 섹션 그대로 유지. | 낮음 |
| V-04 | Composed Controls | sw-header--composed-controls |
하위 컴포넌트 조합 / 사용자: 레이어·색상·상세보기, 선·문자·치수 공개 하위 컴포넌트와 그룹 Hover. | KEEP — 독립 조합 API 사용 예제로 유지. | 중간 |
| V-05 | Logo Slot | sw-header--logo-slot |
설정 예제 / 사용자: 기본 임시 로고, 가로형 logoSrc, 세로형 React logo, 미전달 4개 표본. | KEEP — 로고 슬롯 계약 예제로 유지. | 낮음 |
| V-06 | Document Dropdown | sw-header--document-dropdown |
실제 조작+정적 상태 / 사용자·QA: 18개 섹션: 문서 선택·닫기·New/Open·현재 문서 위치·Hover·18개/빈 목록·긴 이름·390px. | SIMPLIFY — 반복 현재 문서/Hover 표본을 한 비교 구역으로 줄이는 방안 검토. | 중간 |
| V-07 | Layer Dropdown | sw-header--layer-dropdown |
실제 조작+정적 상태 / 사용자·QA: 19개 섹션: 전구·눈꽃·잠금, 상태 혼합, 선택, 긴/빈/많은 레이어, 6개 좁은 폭. | SIMPLIFY — 중복 Header 표본을 줄이고 아이콘 상태표·예외 사례 유지 검토. | 중간 |
| V-08 | Color Dropdown | sw-header--color-dropdown |
실제 조작+디자인 비교 / 사용자·QA: 9개 섹션: 팔레트·사용자 색상 40개·ByLayer·RGB 입력·Colorize·상세 Callback. | SIMPLIFY — 반복 Default/Hover Header와 설명을 축소; Colorize 통합 목적지로 검토. | 중간 |
| V-09 | Line Style Dropdown | sw-header--line-style-dropdown |
실제 조작+디자인 비교 / 사용자·QA: 8개 섹션: 3열 선 종류·가중치·스케일, 현재 행/상세 Hover, 390px. | SIMPLIFY — 중복 Default/Hover를 줄이고 3열 입력·좁은 화면 사례 보존 검토. | 중간 |
| V-10 | Text · Dimension Style Dropdown | sw-header--text-dimension-style-dropdown |
실제 조작+디자인 비교 / 사용자·QA: 문자·치수스타일 목록과 각 행·상세 Hover, 선택 Callback 등 6개 섹션. | KEEP — 서로 다른 두 필드의 목록 계약을 함께 확인하는 현 구성 유지. | 낮음 |
| V-11 | Responsive More | sw-header--responsive-more |
반응형 실제 조작+폭 표본 / 사용자·QA: 1440/768/390 조작 구역 3개 + 경계 폭 16개. More 대표 필드 전환과 Callback. | SIMPLIFY — 경계 폭 표본을 접는 방식 등 화면 길이 축소 검토. 기능은 유지 권장. | 중간 |
| V-12 | Layer Detail · Input | sw-header--layer-detail-input |
상세 버튼+독립 Input / 사용자·QA: 6개 섹션: Figma PNG, 레이어 상세 3상태, Input Default/Hover/ReadOnly/Disabled/Focus 및 입력·IME·확정/취소. | MERGE REVIEW — 상세 버튼 비교는 Detail Buttons로 옮기는 방안 검토. 독립 Input 시연은 남겨야 함. | 중간 |
| V-13 | Property Panel | sw-header--property-panel |
Header 연동과 데이터 변형 / 사용자·QA: 4가지 선택, Controlled/Uncontrolled, 외부 Open/값, 항목 추가·삭제·순서, 제한 상태·게이지. | KEEP — 고급 데이터/API 검증 화면으로 유지. | 중간 |
| V-14 | Property Panel Variants | sw-header--property-panel-variants |
독립 패널과 데이터 변형 / QA: 같은 PropertyPanelDemo를 standalone으로 렌더링. 4상태·데이터 버튼이 Property Panel과 거의 동일. | MERGE REVIEW — 단독 패널 기준이 필요하면 4개 개별/4개 비교 화면과 통합 검토. | 중간 |
| V-15 | K Guide | sw-header--k-guide |
실시간 모션 / 사용자: K 버튼 Hover/Focus의 원본 이미지 Pan·Zoom, 이탈 정지, Reduced Motion 안내. | KEEP — 고유한 가이드 모션 예제로 유지. | 낮음 |
| V-16 | Additional Hover | sw-header--additional-hover |
상세/Selected 회귀·외부 모드 / QA: StyleDemo 1920과 RequiredColorDemo: 5개 상세 Hover, Selected, 외부 ByLayer/ByBlock/직접 색상. | MERGE REVIEW — 상세 상태는 Detail Buttons, 외부 색상 모드는 Color Dropdown으로 이전 검토. | 중간 |
| V-17 | Property Bar | sw-header--property-bar |
속성Bar 전체 API / 사용자·QA: Controlled, 외부 Open/값, 추가·삭제·순서 반전·객체 교체·개별 Disabled/ReadOnly, 1222px 부모 폭. | KEEP — 메인의 참조 구현이자 고급 API 예제로 유지. | 중간 |
| V-18 | Dynamic Controls | sw-header--dynamic-controls |
controls allowlist / 사용자: 12개 구성의 제거·재추가·라벨·순서·visible, 동적 문서 데이터. | KEEP — Composition과 다른 API임을 설명하는 방향으로 유지. | 중간 |
| V-19 | Colorize | sw-header--colorize |
색상 추출 버튼 접근 / QA: 별도 기본/확대 상태표 없이 StyleDemo(1920)를 다시 표시. 색상 Dropdown의 추출 버튼으로 연결. | REMOVE REVIEW — Color Dropdown에 버튼 접근·Hover·Callback 증거를 남긴 뒤 메뉴 삭제 검토 가능. | 중간 |
| V-20 | Composition (Visibility · Order) | sw-header--composition |
hiddenControls/menuOrder / 사용자·QA: 16개 표시 항목, 프리셋·순서·중복/알 수 없는 ID, 실제 화면/고정 폭, Callback 보존. | KEEP — 개별 제거와 순서 계약을 보여 주는 예제로 유지. | 중간 |
| V-21 | Property Panel · 선택 없음 | sw-header--property-panel-none |
단독 실제 컴포넌트 / 디자인 QA: 선택 없음 314×256 고정 상태와 실제 필드. | QA — 일반 사용자 목록보다는 QA 분류 검토. | 중간 |
| V-22 | Property Panel · 전체 선택 | sw-header--property-panel-all |
단독 실제 컴포넌트 / 디자인 QA: 전체 선택 314×361, 혼합 레이어 값과 선택 개수. | QA — 개별 QA 기준으로 유지하거나 Compare 통합 검토. | 중간 |
| V-23 | Property Panel · 원 1개 | sw-header--property-panel-circle |
단독 실제 컴포넌트 / 디자인 QA: 원 1개 314×658, 기본 형상·치수·XYZ·전체 선택 복귀. | QA — 개별 QA 기준으로 유지하거나 Compare 통합 검토. | 중간 |
| V-24 | Property Panel · 모두 펼침 | sw-header--property-panel-expanded |
단독 실제 컴포넌트 / 디자인 QA: 전체 펼침 314×754, 추가 공통 속성·형상·위치·푸터. | QA — 개별 QA 기준으로 유지하거나 Compare 통합 검토. | 중간 |
| V-25 | Property Panel · 4개 비교 | sw-header--property-panel-compare |
4개 실제 패널 병렬 비교 / 디자인 QA: 4개 선택 상태를 동시에 렌더링하고 실측 폭·높이를 표시. | QA — 나란히 비교하는 QA 목적을 유지. 개별 메뉴 통합 목적지로 검토 가능. | 중간 |
| V-26 | Property Panel · 형상 Slot | sw-header--property-shape-slot |
형상 확장 API / 사용자: 기본/null/ReactNode/Render Prop, 원·사각형 교체, 치수/그룹 추가. | KEEP — 외부 컴포넌트 확장 계약 예제로 유지. | 중간 |
| V-27 | Property Panel · 필드 13개 | sw-header--property-fields |
필드 상태·실제 조작 / 디자인 QA: Figma 13개 필드 Default/Hover 표본, 실제 패널, 혼합 레이어·외부 값·제한·단위. | QA — 77개 필드 검증의 기준 화면으로 유지 권장. | 중간 |
| V-28 | Detail Buttons (Shared States) | sw-header--detail-buttons |
실제 Pointer/Callback 비교 / QA: 5개 상세 버튼 × Default/Hover/Disabled/Callback 없음, 클릭 횟수. verification 태그로 기본 숨김. | QA — 이미 적용된 숨김과 검증 표본 유지. | 중간 |
화면별 삭제 영향과 대체 가능성
V-01 · Overview
대체 메인 없음. 이번에 실제 수정한 유일한 Story.
V-02 · Interactive States
삭제하면 Disabled+Hover·키보드·창 버튼 Callback 비교를 잃음. 메인은 상태 비교표를 대체하지 않음.
V-03 · Window Move Motion
타이밍·위치 비교의 유일한 상세 화면. 메인의 실시간 Hover와 목적이 다름.
V-04 · Composed Controls
전체 Header 통합 시연으로 하위 컴포넌트 단독 조합을 대체할 수 없음.
V-05 · Logo Slot
삭제하면 이미지/ReactNode/미전달의 차이를 직접 확인할 수 없음.
V-06 · Document Dropdown
메인은 기본 선택·목록 변경을 대체하지만 빈 목록·긴 이름·행 위치·18개 스크롤 사례는 대체하지 않음.
V-07 · Layer Dropdown
메인은 정상 선택·Toggle만 대체. On/Off/Hover 아이콘 매트릭스·20개 목록·Callback 없는 상태가 고유함.
V-08 · Color Dropdown
메인의 색상 변경은 40개 색상·정적 Hover 비교를 대체하지 않음.
V-09 · Line Style Dropdown
메인은 정상 선택을 대체하지만 상세 상태·열 배치 기준은 남길 필요가 있음.
V-10 · Text · Dimension Style Dropdown
메인의 선택만으로 각 행 미리보기와 Figma Hover 비교를 대체하지 못함.
V-11 · Responsive More
삭제한 Responsive와 다른 기능. 메인은 현재 폭만 보여 주므로 모든 경계값 비교를 대체하지 않음.
V-12 · Layer Detail · Input
독립 Input Story는 현재 없음. 페이지 전체를 지우면 텍스트/숫자·외부 Props·취소 예제를 잃음. detail-buttons 검증이 이 ID를 참조함.
V-13 · Property Panel
메인에 없는 Controlled 전환, 개별 제한·옵션 삭제·선택 객체 교체가 남음. Firefox·닫기·필드 테스트가 참조.
V-14 · Property Panel Variants
Header Overlay·Focus 복귀와 다른 단독 맥락. standalone의 닫기는 기록만 하고 패널을 유지하며 너비/Open 버튼은 Header 연동 검증을 대신하지 못함.
V-15 · K Guide
Header 실시간 모션과 창 이동 1400ms 모션은 별개. 메인에서는 일부만 볼 수 있음.
V-16 · Additional Hover
외부 colorMode 제어는 메인의 일반 색상 선택과 다름. followup-four가 이 ID를 참조하므로 먼저 대체 시나리오가 필요함.
V-17 · Property Bar
메인은 공유 값·기본 추가/제거·제한만 제공. 개별 제한·순서·객체 교체·Controlled를 대체하지 않음.
V-18 · Dynamic Controls
controls는 전체 allowlist이며 로고 외 16개 요소를 숨기는 hiddenControls와 다름. 이름이 비슷해도 동일 기능이 아님.
V-19 · Colorize
실제 색상 추출 CAD 기능은 호스트 소유. 삭제 시 전용 접근 URL을 잃고 detail-buttons preservation의 colorize 참조를 이전해야 함. 지금은 삭제하지 않음.
V-20 · Composition (Visibility · Order)
Dynamic Controls와 다른 API. 홈·창 이동·최소화·종료까지 개별 제어하고 메뉴 순서 정규화를 검증함.
V-21 · Property Panel · 선택 없음
Variants/Compare와 겹치지만 테스트의 상태별 직접 URL·치수 기준임. 삭제/통합 시 ID 참조 이전 필요.
V-22 · Property Panel · 전체 선택
선택 없음/원 상태와 내용이 다름. 테스트 직접 URL·혼합 값·개수 레이아웃을 보존해야 함.
V-23 · Property Panel · 원 1개
원형 Slot과 위치·푸터를 포함. 다른 상태와 같은 이름의 단순 중복이 아님.
V-24 · Property Panel · 모두 펼침
754px 전체 높이와 하단 잘림 검증에 필요. 개별 ID가 기존 테스트에서 동적으로 참조됨.
V-25 · Property Panel · 4개 비교
Variants는 상태 전환, Compare는 동시 비교라는 차이가 있음. property-fields의 4상태 치수 검증이 참조함.
V-26 · Property Panel · 형상 Slot
메인은 기본/null만 제공. ReactNode와 Render Prop·형상 교체를 대체할 수 없음.
V-27 · Property Panel · 필드 13개
메인은 필드별 디자인 상태표를 대체하지 않음. property-fields.browser.mjs의 핵심 직접 ID.
V-28 · Detail Buttons (Shared States)
메인은 실제 Dropdown 접근용이며 이 비교 매트릭스를 대체하지 못함. detail-buttons 검증의 직접 ID.
