[ { "id": "sw-header--detail-buttons", "name": "Detail Buttons (Shared States)", "tags": [ "dev", "test", "manifest", "verification" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "레이어 상세", "레이어 상세", "레이어 상세", "레이어 상세", "색상 상세", "색상 상세", "색상 상세", "색상 상세", "선스타일 상세", "선스타일 상세", "선스타일 상세", "선스타일 상세", "문자스타일 상세", "문자스타일 상세", "문자스타일 상세", "문자스타일 상세", "치수스타일 상세", "치수스타일 상세", "치수스타일 상세", "치수스타일 상세" ], "inputs": 0 }, { "id": "sw-header--overview", "name": "Overview", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "Figma 기준 1920 × 49", "description": "홈 / 파일명 / 객체 수정(그리기모드 · 레이어 · 색상 · 선스타일 · 문자스타일 · 치수스타일 · 상세보기) / 인쇄 · 팝업 가이드 · 창 이동 · 최소화 · 종료" }, { "title": "선택 상태", "description": "선택된 텍스트와 화살표는 #FFC600으로만 바뀝니다. 선택 전용 배경·테두리·그림자는 없습니다." } ], "headings": [ "Figma 기준 1920 × 49", "선택 상태" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 0 }, { "id": "sw-header--interactive-states", "name": "Interactive States", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "Host state 연결 · Keyboard Focus", "description": "실제로 마우스를 올려 Hover를, 메뉴·속성 토글을 눌러 선택 상태를 확인합니다. Tab 키로 Focus 윤곽선(2px #F0F7F5)을 확인합니다. Focus 윤곽선은 Hover 테두리보다 위에 그려집니다." }, { "title": "Default", "description": "Hover 전. 각 버튼의 기존 테두리·배경·그림자." }, { "title": "Hover (고정)", "description": "홈 · 5개 속성 필드 · 인쇄 · 팝업 가이드는 크기·배경·그림자·위치 변화 없이 테두리만 노란 gradient로 바뀝니다. 인쇄 · 팝업 가이드는 아이콘의 #B6D0C9 부분만 #FFC600으로 함께 바뀝니다. 파일명과 속성Bar · 속성창은 테두리 없이 글자만 #FFC600으로 바뀝니다. 최소화는 검정 20% 배경 + 흰 아이콘, 종료는 #E40000 배경 + 흰 X입니다(Figma 26:12156 / 26:12161). 그리기모드(텍스트)·창 이동은 대상이 아닙니다." }, { "title": "Selected", "description": "레이어 메뉴·속성창 선택. 글자만 #FFC600이고 선택 전용 테두리는 없습니다." }, { "title": "Selected + Hover (고정)", "description": "레이어 메뉴는 선택 글자색(#FFC600)을 유지하고 Hover 테두리를 더합니다. 속성창은 선택·Hover 모두 글자색만이라 노란 테두리가 없습니다." }, { "title": "속성Bar · 속성창 상태", "description": "두 토글은 Hover 시 글자만 #FFC600이고 노란 테두리·배경·그림자가 없습니다. 선택(propertyBarOpen / propertyPanelOpen)도 글자 #FFC600이며, 선택된 토글에 Hover해도 테두리가 생기지 않습니다. '상세보기' 안내 글자는 바뀌지 않습니다. 키보드 Focus 윤곽선은 위 Host state 예제에서 Tab으로 확인합니다." }, { "title": "Disabled + Hover (고정)", "description": "비활성 버튼에는 Hover 테두리와 아이콘 색 변화를 표시하지 않습니다. 홈·파일명·최소화·종료는 disabled 대상이 아니므로 Hover가 표시됩니다." }, { "title": "인쇄 · 팝업 가이드 · 최소화 · 종료", "description": "Default(위)와 Hover 고정(아래). 인쇄 · 팝업 가이드: 기존 노란 Gradient 테두리 + 아이콘의 #B6D0C9 부분만 #FFC600(검정 외곽선·그림자·팝업 가이드 녹색 타일은 그대로). 최소화: 투명 → 검정 20% 배경, 아이콘 #ADB0AF → #FFFFFF. 종료: 투명 → #E40000 배경, X #ADB0AF → #FFFFFF. 최소화·종료는 32 × 48 그대로이며 테두리·그림자·노란 테두리가 없습니다." }, { "title": "인쇄 · 팝업 가이드 · 최소화 · 종료 Callback 기록", "description": "각 버튼은 자기 Callback만 한 번 호출합니다. 종료는 onClose만 호출하며 Storybook에서 실제 창을 닫지 않습니다(창 동작은 호스트 소유). Tab으로 Focus 윤곽선(2px #F0F7F5)을 확인합니다." }, { "title": "더보기 버튼 Hover (고정, 헤더 1440px)", "description": "더보기 버튼에도 같은 테두리를 적용합니다. 더보기 메뉴 안 항목은 목록 구조이므로 기존 배경 Hover를 유지합니다." }, { "title": "Disabled", "description": "메뉴·속성·인쇄/가이드가 비활성화됩니다. 창 제어(최소화·종료)는 유지됩니다." }, { "title": "긴 파일명", "description": "파일명은 말줄임으로 처리하고 글자 크기를 줄이지 않습니다." } ], "headings": [ "Host state 연결 · Keyboard Focus", "Default", "Hover (고정)", "Selected", "Selected + Hover (고정)", "속성Bar · 속성창 상태", "Disabled + Hover (고정)", "인쇄 · 팝업 가이드 · 최소화 · 종료", "인쇄 · 팝업 가이드 · 최소화 · 종료 Callback 기록", "더보기 버튼 Hover (고정, 헤더 1440px)", "Disabled", "긴 파일명" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄" ], "inputs": 0 }, { "id": "sw-header--window-move-motion", "name": "Window Move Motion", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "단계별 진행 (3배 확대)", "description": "CSS 애니메이션을 해당 시점에 멈춘 화면입니다(Storybook 전용 data-sb-hover + Web Animations API로 시간만 고정)." } ], "headings": [ "단계별 진행 (3배 확대)" ], "buttons": [ "최소화", "종료", "최소화", "종료", "최소화", "종료", "최소화", "종료", "최소화", "종료", "최소화", "종료", "최소화", "종료", "최소화", "종료", "최소화", "종료" ], "inputs": 0 }, { "id": "sw-header--composed-controls", "name": "Composed Controls", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "레이어 · 색상 · 상세보기" }, { "title": "선스타일 · 문자스타일 · 치수스타일", "description": "필드 전체 Hover 시 라벨·값·선/폰트/치수 미리보기가 #FFC600입니다. 선의 검정 border와 치수 SVG의 검정 외곽선은 유지합니다." }, { "title": "그룹 필드 Hover (고정)", "description": "기존 노란 Gradient Border에 텍스트·지정 미리보기 강조만 더합니다. 색상 견본과 레이어 상태는 원래 색을 유지하며, 상세보기는 기존 텍스트 전용 Hover 그대로입니다." } ], "headings": [ "레이어 · 색상 · 상세보기", "선스타일 · 문자스타일 · 치수스타일", "그룹 필드 Hover (고정)" ], "buttons": [ "레이어", "색상", "속성Bar", "속성창", "선스타일", "문자스타일", "치수스타일", "레이어", "색상", "선스타일", "문자스타일", "치수스타일" ], "inputs": 0 }, { "id": "sw-header--logo-slot", "name": "Logo Slot", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "기본 임시 로고", "description": "logoSrc에 임시 SVG, logoAlt에 「임시 로고」를 전달합니다." }, { "title": "사용자 지정 로고 — 가로형 이미지(logoSrc)", "description": "120 × 20 비율의 이미지도 로고 영역 안에 contain으로 맞춰지고 넘치지 않습니다." }, { "title": "사용자 지정 로고 — 세로형 React 요소(logo)", "description": "logo에 SVG 요소를 전달하면 logoSrc보다 우선합니다." }, { "title": "로고 미전달", "description": "logo·logoSrc가 없으면 로고를 그리지 않고 홈 버튼 배경과 전체 배치를 그대로 유지합니다. 접근성 이름은 「홈」입니다." } ], "headings": [ "기본 임시 로고", "사용자 지정 로고 — 가로형 이미지(logoSrc)", "사용자 지정 로고 — 세로형 React 요소(logo)", "로고 미전달" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "샘플 SW 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "샘플 SW 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 0 }, { "id": "sw-header--document-dropdown", "name": "Document Dropdown", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "현재 열린 문서 1개 (기본 예제)", "description": "2026-10-16 추가 요구: 기본 예제는 빈 목록 대신 현재 열린 문서 1개를 전달합니다(documents = [현재 문서], activeDocumentId). 펼치면 그 문서명이 #FFC600(현재 문서)으로 보이고 X·+ New·Open은 기존 그대로입니다. 문서를 늘리면 실제 개수만큼 표시되며 배열을 1개로 고정하지 않습니다." }, { "title": "현재 열린 문서 1개 · 선택 · X · New / Open Callback", "description": "파일명을 눌러 열고 확인합니다. 문서 선택은 onDocumentSelect, X는 onDocumentClose(이 예제의 호스트는 목록에서 제거 → '열린 문서 없음'), + New / Open은 각 Callback만 한 번 호출합니다. 존재하지 않는 문서를 임의로 만들지 않습니다." }, { "title": "Default", "description": "documents를 전달하면 파일명이 문서 목록 버튼이 됩니다(aria-expanded). 화살표는 아래 방향입니다." }, { "title": "Hover (고정)", "description": "파일명 Hover는 노란 테두리 없이 글자만 #FFC600으로 바꿉니다. 녹색 테두리·배경·초록 화살표는 그대로이며 목록은 열리지 않습니다." }, { "title": "Dropdown Open (Figma 4개 문서)", "description": "열린 상태: 파일명과 화살표 #FFC600, 화살표 위쪽. 목록 310 × 168(항목 32 × 4 + 하단 40), 배경 #103127, 1px #041611, 하단 radius 4px." }, { "title": "목록 항목 · + New · Open Hover (고정)", "description": "Figma hover: 목록 항목은 검정 40% 배경(글자·아이콘 그대로, 26:10680), + New / Open은 배경 20% → 30%, 글자 검정 70% → 100%(26:10762 / 26:10805). 노란 테두리는 쓰지 않습니다. 위 Default와 비교합니다(두 번째 항목, + New, Open 고정)." }, { "title": "문서 항목 선택 · New / Open", "description": "클릭으로 열고 닫습니다. 항목을 고르면 onDocumentSelect가 호출되고(이 예제는 선택한 문서를 파일명·현재 문서로 표시), New / Open은 각각 onDocumentNew / onDocumentOpen을 호출합니다. 바깥 클릭·Escape로 닫힙니다. 키보드: Enter/Space 열기, ↓↑ 이동." }, { "title": "현재 문서 — 첫 번째 문서 선택", "description": "사용자 추가 요구(Figma 외): activeDocumentId 문서의 이름만 #FFC600으로 표시합니다. 목록은 documents 순서 그대로이고, 아이콘·높이·padding은 같으며 노란 테두리·배경은 없습니다. 모든 행 오른쪽에 Close Document(X) 자리가 있으며 평상시에는 숨겨져 있습니다." }, { "title": "현재 문서 — 중간 문서(3번째) 선택", "description": "선택한 문서는 제자리(3번째)에 있고 이름만 #FFC600입니다. 목록 순서 1 → 2 → 3 → 4는 바뀌지 않습니다." }, { "title": "현재 문서 — 마지막 문서 선택" }, { "title": "일반 문서 Hover (고정)", "description": "Hover한 행에만 X가 나타납니다(선택 여부와 무관). 배경은 Figma 목록 Hover(검정 40%), 글자는 #F0F7F5 그대로입니다." }, { "title": "현재 문서 Hover (고정)", "description": "현재 문서는 노란 글자를 유지한 채 Hover 배경(검정 40%)과 X가 함께 표시됩니다. 선택은 글자색, Hover는 배경이라 서로 구분됩니다." }, { "title": "X 버튼 Hover (고정)", "description": "X 자체에 Hover하면 배경 rgba(182,208,201,.2)와 밝은 아이콘으로 바뀝니다(사용자 추가 요소, Figma 없음). 키보드 Focus는 아래 예제에서 Tab으로 확인합니다(행에 Focus가 오면 X가 보이고, X에는 2px #F0F7F5 윤곽선)." }, { "title": "선택 변경 · 닫기 Callback 기록", "description": "다른 문서를 고르면 onDocumentSelect만 호출되고, 목록 순서는 그대로 둔 채 노란 글자가 그 문서로 옮겨갑니다. 마우스를 옮기면 X도 Hover한 행으로 옮겨갑니다. 어느 행이든 X(또는 X에 Focus 후 Enter/Space)는 그 문서의 onDocumentClose만 한 번 호출합니다. 이 예제의 호스트는 닫은 문서를 목록에서 빼고, 현재 문서를 닫았을 때만 선택을 비웁니다(다음 문서 자동 선택은 호스트가 결정)." }, { "title": "여러 문서 (18개)", "description": "목록이 길면 Dropdown 안에서만 세로 스크롤합니다(최대 320px)." }, { "title": "예외 — 문서 없음 (documents = [])", "description": "호스트에 열린 문서가 없을 때만의 예외 상태입니다(기본 예제 아님). 목록 영역 없이 New / Open만 표시합니다. documents를 전달하지 않으면 Dropdown 없이 기존 버튼으로 동작합니다." }, { "title": "긴 파일명", "description": "파일명과 목록 항목 모두 말줄임을 유지합니다." }, { "title": "좁은 화면 (헤더 390px)", "description": "파일명이 좁아져도 목록은 파일명 왼쪽에 맞춰 열리고, 헤더 폭을 넘지 않도록 너비가 줄어듭니다." } ], "headings": [ "현재 열린 문서 1개 (기본 예제)", "현재 열린 문서 1개 · 선택 · X · New / Open Callback", "Default", "Hover (고정)", "Dropdown Open (Figma 4개 문서)", "목록 항목 · + New · Open Hover (고정)", "문서 항목 선택 · New / Open", "현재 문서 — 첫 번째 문서 선택", "현재 문서 — 중간 문서(3번째) 선택", "현재 문서 — 마지막 문서 선택", "일반 문서 Hover (고정)", "현재 문서 Hover (고정)", "X 버튼 Hover (고정)", "선택 변경 · 닫기 Callback 기록", "여러 문서 (18개)", "예외 — 문서 없음 (documents = [])", "긴 파일명", "좁은 화면 (헤더 390px)" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "C0020101-006-평면및종단면도(06)", "문서 닫기", "+ New", "Open", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "Sample-Drawing-01.dwg", "문서 닫기", "Sample-Drawing-02.dwg", "문서 닫기", "Sample-Plan-03.dxf", "문서 닫기", "Sample-Section-04.dxf", "문서 닫기", "+ New", "Open", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "Sample-Drawing-01.dwg", "문서 닫기", "Sample-Drawing-02.dwg", "문서 닫기", "Sample-Plan-03.dxf", "문서 닫기", "Sample-Section-04.dxf", "문서 닫기", "+ New", "Open", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: Sample-Drawing-01.dwg", "Sample-Drawing-01.dwg", "문서 닫기", "Sample-Drawing-02.dwg", "문서 닫기", "Sample-Plan-03.dxf", "문서 닫기", "Sample-Section-04.dxf", "문서 닫기", "+ New", "Open", "레이어", "색상", "선스타일" ], "inputs": 0 }, { "id": "sw-header--layer-dropdown", "name": "Layer Dropdown", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "Layer Default", "description": "layers를 전달한 기본 상태. 필드 234 × 38, 기존 테두리·그림자, 아이콘 3개 + 라벨/레이어명. layers를 전달하지 않으면 기존 필드 버튼(onLayerOpen) 그대로입니다." }, { "title": "Layer Hover (고정)", "description": "기존 노란 Gradient Border와 라벨·레이어명 #FFC600. 목록은 열리지 않습니다." }, { "title": "Layer Dropdown Open (Figma 8개 행)", "description": "Variant3: 라벨·레이어명 #FFC600, 필드 테두리 #081813·하단 각진 모서리, 필드+목록을 감싸는 노란 Gradient 1px 외곽선(236 × 320). 목록 234 × 280(행 30 × 8 + 하단 40), 배경 #27241D, 검정 1px, 하단 radius 3px, Shadow 0 4px 8px rgba(16,48,38,.25). 이 예제는 onLayerDetail이 없어 클릭은 무동작이며 상세 버튼의 공통 Hover는 유지합니다." }, { "title": "Layer Row Default · Row Hover (고정)", "description": "두 번째 행 Hover 고정: 배경 #62533D, 레이어명 #FF5C00(26:10695). 행 크기·아이콘 위치는 그대로입니다. 다른 필드·문서 목록의 Hover 색과 무관한 이 목록 전용 색입니다." }, { "title": "전구 · 눈꽃 · 자물쇠 On / Hover / Off / Off Hover (3배 확대)", "description": "1행 컬러(Default: visible=true · frozen=false · locked=false) · 2행 컬러 Hover(Variant2, 고정) · 3행 회색(Variant3: visible=false · frozen=true · locked=true) · 4행 회색 Hover(Variant4, 고정). 전구 Hover는 검정 25% 배경, 눈꽃·자물쇠 Hover는 Figma Hover SVG(같은 아이콘 + 검정 25% 타일)입니다. Off → Off Hover는 Figma Smart Animate에 맞춰 300ms ease-out으로 전환됩니다." }, { "title": "레이어 선택 · 개별 아이콘 Toggle · Callback 기록", "description": "필드 클릭으로 열고, 레이어명(색상 견본 포함)을 누르면 onLayerSelect만 호출되고 필드에 그 레이어가 표시되며 목록이 닫힙니다. 전구·눈꽃·자물쇠는 각각 onLayerVisibilityChange(layer, !visible) / onLayerFreezeChange(layer, !frozen) / onLayerLockChange(layer, !locked)만 한 번 호출하고 목록은 열린 채 유지됩니다(전구 컬러 = visible=true, 눈꽃 컬러 = frozen=false 동결 해제, 자물쇠 컬러 = locked=false 잠금 해제, 회색은 반대). 위 상태표로 해당 레이어만 바뀌는 것을 확인합니다. 키보드: Enter/Space 열기, ↓↑ 행 이동(같은 열 유지), ←→ 행 안 이동, Escape 닫기, Tab으로 벗어나면 닫힘." }, { "title": "여러 레이어의 서로 다른 상태 · 현재 레이어", "description": "현재 레이어(activeLayerId)는 Hover와 같은 갈색 배경·주황 글자이고 필드 아이콘도 그 레이어 상태를 따릅니다. Sample-Defpoints는 disabled 예시입니다." }, { "title": "현재 레이어 Hover (고정)", "description": "현재 레이어의 갈색 배경·주황 글자는 Hover 및 Mouse Leave 뒤에도 유지됩니다." }, { "title": "긴 레이어명", "description": "필드와 행 모두 말줄임으로 처리합니다. 전체 이름은 title로 확인합니다." }, { "title": "많은 레이어 (20개)", "description": "목록 부분만 세로 스크롤(최대 8행, 240px)하고 레이어 상세 영역은 고정입니다. 헤더에는 스크롤이 생기지 않습니다." }, { "title": "레이어가 없는 상태", "description": "layers=[]이면 목록 없이 레이어 상세 영역만 표시하고 필드는 layer.name을 표시합니다." }, { "title": "레이어 상세 버튼", "description": "onLayerDetail을 전달하면 Callback 호출 후 목록을 닫습니다(아래 기록). 전달하지 않아도 공통 Default/Hover(텍스트 35%)를 유지하며 클릭은 안전한 무동작입니다(위 Figma 8개 행 예제). Disabled는 명시적으로 지정합니다." }, { "title": "상태 표시 전용(Toggle Callback 없음)", "description": "onLayerVisibilityChange 등을 전달하지 않으면 해당 아이콘은 버튼이 아닌 상태 표시(role=img)이며 Hover·클릭 반응이 없습니다." }, { "title": "좁은 화면 (헤더 1440px)", "description": "필드 위치와 헤더 49px를 유지하고 목록은 필드 왼쪽에 맞춰 열립니다." }, { "title": "좁은 화면 (헤더 1080px)", "description": "필드 위치와 헤더 49px를 유지하고 목록은 필드 왼쪽에 맞춰 열립니다." }, { "title": "좁은 화면 (헤더 900px)", "description": "필드 위치와 헤더 49px를 유지하고 목록은 필드 왼쪽에 맞춰 열립니다." }, { "title": "좁은 화면 (헤더 768px)", "description": "필드 위치와 헤더 49px를 유지하고 목록은 필드 왼쪽에 맞춰 열립니다." }, { "title": "좁은 화면 (헤더 640px)", "description": "필드 위치와 헤더 49px를 유지하고 목록은 필드 왼쪽에 맞춰 열립니다." }, { "title": "좁은 화면 (헤더 390px)", "description": "520 미만에서는 필드의 상태 아이콘이 숨고 레이어명이 말줄임됩니다. 목록은 234px 그대로이며 헤더 밖으로 넘치지 않도록 왼쪽으로 이동합니다(이때 노란 외곽선은 목록만 감쌉니다). 필드를 눌러 열고 조작합니다." } ], "headings": [ "Layer Default", "Layer Hover (고정)", "Layer Dropdown Open (Figma 8개 행)", "Layer Row Default · Row Hover (고정)", "전구 · 눈꽃 · 자물쇠 On / Hover / Off / Off Hover (3배 확대)", "레이어 선택 · 개별 아이콘 Toggle · Callback 기록", "여러 레이어의 서로 다른 상태 · 현재 레이어", "현재 레이어 Hover (고정)", "긴 레이어명", "많은 레이어 (20개)", "레이어가 없는 상태", "레이어 상세 버튼", "상태 표시 전용(Toggle Callback 없음)", "좁은 화면 (헤더 1440px)", "좁은 화면 (헤더 1080px)", "좁은 화면 (헤더 900px)", "좁은 화면 (헤더 768px)", "좁은 화면 (헤더 640px)", "좁은 화면 (헤더 390px)" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "레이어 상세", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "CC-D GNL 표시", "CC-D GNL 동결", "CC-D GNL 잠금", "CC-D GNL", "레이어 상세", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "레이어", "컬러 (Default) 표시", "컬러 (Default) 동결", "컬러 (Default) 잠금", "컬러 (Default)", "컬러 Hover (Variant2) 표시", "컬러 Hover (Variant2) 동결", "컬러 Hover (Variant2) 잠금", "컬러 Hover (Variant2)", "회색 (Variant3) 표시", "회색 (Variant3) 동결", "회색 (Variant3) 잠금", "회색 (Variant3)", "회색 Hover (Variant4) 표시", "회색 Hover (Variant4) 동결" ], "inputs": 0 }, { "id": "sw-header--color-dropdown", "name": "Color Dropdown", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "Default", "description": "colors를 전달하면 색상 필드가 Dropdown 버튼이 됩니다. 192 × 38, 견본은 현재 색상(color.swatch)." }, { "title": "Hover (고정)", "description": "기존 노란 Gradient Border + 라벨·값 #FFC600. 색상 견본은 실제 색 그대로입니다." }, { "title": "Expanded (Figma 26:11005)", "description": "192 × 158: ByLayer/ByBlock 167 × 30 · 팔레트 168 × 22(칩 22px 7개) · 색상 추출 24 + 입력 130 · 하단 40(색상 상세). 필드 테두리 #081813·아래 모서리 각짐, 필드+목록 노란 1px 외곽선(194 × 198)." }, { "title": "사용자 추가 색상 (Figma 26:11036)", "description": "userColors 2개: 24px 행이 추가되어 본문 182px. 개수는 가변이며 2px 간격으로 줄바꿈합니다." }, { "title": "사용자 색상 40개", "description": "팔레트 + 사용자 색상 4행(118px)을 넘으면 팔레트 영역만 세로 스크롤합니다. 헤더 높이·다른 필드 위치는 그대로입니다." }, { "title": "ByLayer On (Figma on 26:12671)", "description": "colorMode='byLayer': #62533D 배경 + 밝은 inner shadow. 텍스트 #D4CBBD + 검정 Stroke. ByBlock은 Default(rgba(98,83,61,.3) + 어두운 inner shadow)." }, { "title": "내부 버튼 Hover (고정) — 2026-10-16 추가 수정 정책", "description": "ByLayer / ByBlock 글자 #FF5C00. 선택 배경과 Inset Shadow는 유지합니다. 색상 상세는 배경 .25·radius 25·Hover 아이콘으로 변합니다. 색상 칩은 Hover가 없고, 색상 추출은 btn_colorize Hover(26:11305)입니다." }, { "title": "RGB 입력 Hover (고정)", "description": "입력은 수정 가능함을 알리는 Figma Hover를 유지합니다(header/menu/색상/input hover: 1px rgba(197,177,158,.2)). 편집 중(Focus)에는 값 영역이 검정이 되고 커서는 #E60403입니다 — 아래 실제 예제에서 클릭해 확인합니다." }, { "title": "선택 · 입력 · Callback 기록", "description": "칩 → onColorSelect, ByLayer/ByBlock → onColorModeChange(서로 배타: 이 호스트는 선택한 쪽만 On), 입력(255,0,0 · #00ff00 등, Enter 또는 Focus 이동) → 유효하면 onColorInput, 잘못된 값(256,0,0 · abc)은 복원. 색상 추출 → onColorPick 후 닫힘, 색상 상세 → onColorDetail 후 닫힘. 선택·입력 후에도 목록은 열려 있고 다른 속성(레이어·선스타일 등)은 그대로입니다. Escape·바깥 클릭·Tab으로 닫힘." } ], "headings": [ "Default", "Hover (고정)", "Expanded (Figma 26:11005)", "사용자 추가 색상 (Figma 26:11036)", "사용자 색상 40개", "ByLayer On (Figma on 26:12671)", "내부 버튼 Hover (고정) — 2026-10-16 추가 수정 정책", "RGB 입력 Hover (고정)", "선택 · 입력 · Callback 기록" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "ByLayer", "ByBlock", "흰색", "빨강", "초록", "노랑", "파랑", "자홍", "청록", "색상 추출", "색상 상세", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "ByLayer", "ByBlock", "흰색", "빨강", "초록", "노랑", "파랑", "자홍", "청록", "사용자 색상 1", "사용자 색상 2", "색상 추출", "색상 상세", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "ByLayer", "ByBlock", "흰색", "빨강", "초록", "노랑", "파랑", "자홍", "청록", "사용자 색상 1", "사용자 색상 2", "사용자 색상 3", "사용자 색상 4", "사용자 색상 5", "사용자 색상 6", "사용자 색상 7", "사용자 색상 8", "사용자 색상 9", "사용자 색상 10", "사용자 색상 11", "사용자 색상 12", "사용자 색상 13", "사용자 색상 14", "사용자 색상 15", "사용자 색상 16", "사용자 색상 17", "사용자 색상 18", "사용자 색상 19", "사용자 색상 20", "사용자 색상 21", "사용자 색상 22", "사용자 색상 23", "사용자 색상 24", "사용자 색상 25", "사용자 색상 26", "사용자 색상 27", "사용자 색상 28", "사용자 색상 29", "사용자 색상 30", "사용자 색상 31", "사용자 색상 32", "사용자 색상 33", "사용자 색상 34", "사용자 색상 35", "사용자 색상 36", "사용자 색상 37", "사용자 색상 38", "사용자 색상 39", "사용자 색상 40", "색상 추출", "색상 상세", "선스타일", "문자스타일" ], "inputs": 6 }, { "id": "sw-header--line-style-dropdown", "name": "Line Style Dropdown", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "Default", "description": "284 × 38. 선 미리보기 10 × 4 × 5, 선스타일 / 가중치 / 스케일." }, { "title": "Hover (고정)", "description": "라벨·값 #FFC600, 선 미리보기 채움 #FFC600(검정 1px 유지), 노란 Gradient Border." }, { "title": "Expanded (Figma 26:11143)", "description": "필드 링(286 × 39) + 468 × 192 drop_wrap(1px 노란 링, x −92, y 37). 선 종류 5행 + 하단 40(선스타일 상세), 가중치 4행(ByDefault 0.25, User 입력), 스케일 입력. 현재 선 종류·가중치는 Hover와 같은 갈색 배경·주황 텍스트·선입니다." }, { "title": "선 종류 행 Default · Hover (Figma 26:10703 / 26:10706, 고정)", "description": "1·4번째 행 Hover 고정: 배경 #62533D, 선 미리보기·텍스트 #FF5C00, 검정 Stroke 유지, 크기 182 × 30·위치 그대로. CENTER·HIDDEN은 각자의 패턴(22·7 / 33·33)을 유지합니다. 가중치 2번째 행·스케일 행도 Figma 행 Hover를 고정했습니다." }, { "title": "현재 행 Hover (고정)", "description": "현재 선 종류(Continuous)는 Hover 및 Mouse Leave 뒤에도 갈색 배경·주황 선·이름을 유지합니다." }, { "title": "상세 버튼 Hover (고정)", "description": "2026-10-16 추가 수정 기준으로 선스타일 상세의 Figma 배경 .25·radius 25·Hover 아이콘을 적용합니다." }, { "title": "선 종류 · 가중치 · 스케일 선택 Callback", "description": "선 종류 → onLineTypeSelect(가중치·스케일 유지), 가중치 → onLineWeightSelect(선 종류·스케일 유지), User 입력 → onLineWeightValueChange(0 이상), 스케일 입력 → onLineScaleChange(0 초과). 입력은 Enter/Focus 이동으로 확정, Escape는 취소. ↓↑로 항목 이동." }, { "title": "좁은 헤더 390px", "description": "468px 목록이 헤더보다 넓으면 3열을 세로로 쌓아(필요 시 세로 스크롤) 화면 밖 이탈·가로 스크롤 없이 모든 항목에 접근합니다. 더보기 → 선스타일로 엽니다." } ], "headings": [ "Default", "Hover (고정)", "Expanded (Figma 26:11143)", "선 종류 행 Default · Hover (Figma 26:10703 / 26:10706, 고정)", "현재 행 Hover (고정)", "상세 버튼 Hover (고정)", "선 종류 · 가중치 · 스케일 선택 Callback", "좁은 헤더 390px" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "ByBlock", "ByLayer", "Continuous", "CENTER", "HIDDEN", "선스타일 상세", "ByLayer", "ByBlock", "ByDefault0.25", "User", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "ByBlock", "ByLayer", "Continuous", "CENTER", "HIDDEN", "선스타일 상세", "ByLayer", "ByBlock", "ByDefault0.25", "User", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "ByBlock", "ByLayer", "Continuous", "CENTER", "HIDDEN", "선스타일 상세", "ByLayer", "ByBlock", "ByDefault0.25", "User", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "ByBlock", "ByLayer", "Continuous", "CENTER", "HIDDEN", "선스타일 상세", "ByLayer", "ByBlock", "ByDefault0.25", "User", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화" ], "inputs": 8 }, { "id": "sw-header--text-dimension-style-dropdown", "name": "Text · Dimension Style Dropdown", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "Default · Hover (고정)", "description": "위: Default. 아래: Hover — 라벨·값·글꼴 미리보기 #FFC600, 치수 미리보기는 Figma Hover SVG, 검정 외곽선 유지." }, { "title": "문자스타일 Expanded (Figma 26:11200)", "description": "Arial / Standard, 돋움 / Dotum. 글꼴 16px + 이름 14px(모두 검정 Stroke). 하단 '문자스타일 상세'는 Figma처럼 왼쪽 정렬(테두리 .25)." }, { "title": "문자스타일 행·상세 버튼 Hover (고정)", "description": "두 번째 행과 현재 스타일 모두 #62533D / 글꼴·이름 #FF5C00입니다. 상세 버튼도 Figma Hover입니다." }, { "title": "치수스타일 Expanded (Figma 26:11242)", "description": "Standard, ISO - 25. 치수 미리보기 60 × 15(Figma 행 자산 #F6F4F2). 하단 '치수스타일 상세' 오른쪽 정렬." }, { "title": "치수스타일 행·상세 버튼 Hover (고정)", "description": "두 번째 행: #62533D, 이름·치수 미리보기 #FF5C00(Figma Hover 자산). 상세 버튼 Hover는 26:10799(기본 아이콘·텍스트 100%)이며 Variant3와 혼합하지 않습니다." }, { "title": "선택 Callback", "description": "행 → onTextStyleSelect / onDimensionStyleSelect 1회 후 닫힘, 상세 → on*Detail 1회 후 닫힘. 필드 값이 호스트 상태로 갱신됩니다." } ], "headings": [ "Default · Hover (고정)", "문자스타일 Expanded (Figma 26:11200)", "문자스타일 행·상세 버튼 Hover (고정)", "치수스타일 Expanded (Figma 26:11242)", "치수스타일 행·상세 버튼 Hover (고정)", "선택 Callback" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "ArialStandard", "돋움Dotum", "문자스타일 상세", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "ArialStandard", "돋움Dotum", "문자스타일 상세", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "Standard", "ISO - 25", "치수스타일 상세", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "Standard", "ISO - 25", "치수스타일 상세", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 0 }, { "id": "sw-header--responsive-more", "name": "Responsive More", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "전환 · Callback 기록 (1440)", "description": "… → 선스타일: 대표 칸이 선스타일(미리보기·이름·가중치·스케일)로 바뀌고 선스타일 Dropdown이 열립니다. … → 문자스타일: 선스타일 Dropdown이 닫히고 대표 칸이 문자스타일로. … → 레이어: 원래 배치로 복귀. 값은 모두 유지됩니다." }, { "title": "전환 · Callback 기록 (768)", "description": "색상도 더보기에 있는 폭입니다. … → 색상: 색상 필드와 목록." }, { "title": "전환 · Callback 기록 (390)", "description": "대표 필드는 남는 폭에 맞춰 값이 말줄임되고, 목록은 헤더 안쪽으로 이동합니다." }, { "title": "1920px" }, { "title": "1800px" }, { "title": "1799px" }, { "title": "1440px" }, { "title": "1180px" }, { "title": "1179px" }, { "title": "1080px" }, { "title": "1079px" }, { "title": "900px" }, { "title": "899px" }, { "title": "768px" }, { "title": "640px" }, { "title": "639px" }, { "title": "520px" }, { "title": "519px" }, { "title": "390px" } ], "headings": [ "전환 · Callback 기록 (1440)", "전환 · Callback 기록 (768)", "전환 · Callback 기록 (390)", "1920px", "1800px", "1799px", "1440px", "1180px", "1179px", "1080px", "1079px", "900px", "899px", "768px", "640px", "639px", "520px", "519px", "390px" ], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄" ], "inputs": 0 }, { "id": "sw-header--layer-detail-input", "name": "Layer Detail · Input", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "Figma 원본 (비교용 이미지)", "description": "왼쪽: 레이어 상세 Default / Hover(배경 .25 · radius 25 · 아이콘 35%). 오른쪽: Input Default 58 × 20 / Hover 58 × 24 / On 58 × 24. 최신 요청에 따라 아래 실제 버튼에도 Hover를 적용합니다. 이미지는 Storybook 비교용이며 패키지에 포함하지 않습니다." }, { "title": "레이어 상세 — Default · Hover (고정) · Disabled (3배 확대)", "description": "왼쪽: Callback 없이 사용 가능(Default). 가운데: Hover 배경 .25·radius 25·Hover 아이콘. 오른쪽: 호스트가 fieldset disabled를 명시한 상태. Figma와 같은 113 × 24, 아이콘 14 · 간격 4 · padding 5 / 10 · 배경 rgba(197,177,158,.15) · radius 24 · 글자 35%. CAD 상세 실행은 호스트 Callback이 있을 때만 가능합니다." }, { "title": "레이어 상세 Click Callback", "description": "필드를 열고 '레이어 상세'를 누르면 onLayerDetail 1회 후 목록이 닫힙니다(기존 동작). 레이어 선택·전구·눈꽃·자물쇠 매핑은 변경하지 않았습니다." }, { "title": "Input — Default · Hover (고정) · ReadOnly · Disabled (3배 확대)", "description": "Default: 배경·테두리 없음, #E60403 14px + 검정 1.3px Stroke. Hover: 1px rgba(212,203,189,.25), 24px(글자 위치 그대로). ReadOnly(onCommit 없음 또는 readOnly): Hover·편집 상태 없음. Disabled: 40%." }, { "title": "Input — Editing (Focus)", "description": "편집 중(26:11661): 배경 #0F0D0A, 1px rgba(212,203,189,.3), 글자 #E60403 유지, 네이티브 커서 #E60403(caret-color, 깜박임 = Figma cursor Default / Variant2). 이 예제는 입력에 자동 Focus합니다." }, { "title": "Input — 입력 · Enter 확정 · Escape 취소 · 외부 값 갱신", "description": "숫자 입력(valueType='number'): 유효한 소수만 onCommit, 잘못된 값은 복원. 텍스트 입력(한글 IME 포함): 조합 중 Enter는 확정하지 않습니다. Escape는 편집 취소(onCancel) — 확정값으로 복원. Focus 이동(Tab / 바깥 클릭)도 확정합니다. 위 버튼으로 호스트 값을 바꾸면 최신 값이 표시됩니다." } ], "headings": [ "Figma 원본 (비교용 이미지)", "레이어 상세 — Default · Hover (고정) · Disabled (3배 확대)", "레이어 상세 Click Callback", "Input — Default · Hover (고정) · ReadOnly · Disabled (3배 확대)", "Input — Editing (Focus)", "Input — 입력 · Enter 확정 · Escape 취소 · 외부 값 갱신" ], "buttons": [ "레이어", "CC-D GNL", "CC-D GNL", "레이어 상세", "레이어", "CC-D GNL", "CC-D GNL", "레이어 상세", "레이어", "CC-D GNL", "CC-D GNL", "레이어 상세", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "외부 값 변경 (12.5)", "외부 텍스트 변경" ], "inputs": 7 }, { "id": "sw-header--property-panel", "name": "Property Panel", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "선택 없음", "전체 선택", "원 1개", "모두 펼침", "1920px", "1440px", "1080px", "900px", "768px", "640px", "390px", "Controlled: false", "외부 Open 변경", "속성 추가", "형상 속성 추가", "CENTER 옵션 삭제", "레이어 속성 삭제", "외부 값 변경", "선택 객체 교체", "속성 순서 뒤집기", "가중치 Disabled", "레이어 ReadOnly", "투명도 외부 값 변경", "투명도 Disabled", "투명도 ReadOnly", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 0 }, { "id": "sw-header--property-panel-variants", "name": "Property Panel Variants", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "선택 없음", "전체 선택", "원 1개", "모두 펼침", "1920px", "1440px", "1080px", "900px", "768px", "640px", "390px", "Controlled: false", "외부 Open 변경", "속성 추가", "형상 속성 추가", "CENTER 옵션 삭제", "레이어 속성 삭제", "외부 값 변경", "선택 객체 교체", "속성 순서 뒤집기", "가중치 Disabled", "레이어 ReadOnly", "투명도 외부 값 변경", "투명도 Disabled", "투명도 ReadOnly", "객체 선택 도구", "속성창 닫기", "0", "Continuous(ByL)", "공통 속성 펼치기" ], "inputs": 5 }, { "id": "sw-header--k-guide", "name": "K Guide", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 0 }, { "id": "sw-header--additional-hover", "name": "Additional Hover", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료", "외부 ByLayer", "외부 ByBlock", "외부 직접 색상", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 0 }, { "id": "sw-header--property-bar", "name": "Property Bar", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [ { "title": "콘텐츠 폭 기준 (부모 1222px, 높이 28)" } ], "headings": [ "콘텐츠 폭 기준 (부모 1222px, 높이 28)" ], "buttons": [ "Controlled 전환", "외부 열림 변경", "Bar 필드 추가", "Bar 반지름 삭제", "Bar 순서 반전", "Bar 외부 값 변경", "Bar 객체 교체", "Bar ReadOnly", "Bar Disabled", "Bar 개별 제한", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 4 }, { "id": "sw-header--dynamic-controls", "name": "Dynamic Controls", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "구성 초기화", "모두 제거", "레이어·선스타일만", "파일·색상 제거", "구성 순서 반전", "구성 라벨 변경", "색상 숨김", "숨김 복원", "임시 로고 홈", "문서: 현재 문서.dwg", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "속성Bar", "속성창", "인쇄", "팝업 가이드", "더보기", "최소화", "종료" ], "inputs": 12 }, { "id": "sw-header--colorize", "name": "Colorize", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 0 }, { "id": "sw-header--composition", "name": "Composition (Visibility · Order)", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "기본 전체", "구성 A", "구성 B (레이어·선스타일)", "구성 C (로고만)", "파일 목록 제거", "레이어 제거", "색상 제거", "스타일 그룹 제거", "여러 메뉴 제거", "순서 변경", "숨김 + 순서 변경", "기본 순서", "순서 반전", "첫 메뉴를 끝으로", "중복·알 수 없는 ID", "실제 화면", "1920px", "1440px", "1080px", "900px", "768px", "640px", "390px", "임시 로고 홈", "문서: C0020101-006-평면및종단면도(06)", "레이어", "색상", "선스타일", "문자스타일", "치수스타일", "더보기", "속성Bar", "속성창", "인쇄", "팝업 가이드", "최소화", "종료" ], "inputs": 16 }, { "id": "sw-header--property-panel-none", "name": "Property Panel · 선택 없음", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "객체 선택 도구", "속성창 닫기", "0", "Continuous(ByL)", "공통 속성 펼치기" ], "inputs": 5 }, { "id": "sw-header--property-panel-all", "name": "Property Panel · 전체 선택", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "객체 선택 도구", "속성창 닫기", "다양함", "Continuous(ByL)", "공통 속성 펼치기" ], "inputs": 5 }, { "id": "sw-header--property-panel-circle", "name": "Property Panel · 원 1개", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [ "형상", "위치" ], "buttons": [ "속성창 닫기", "0_Layer_Cludmark", "Continuous(ByL)", "공통 속성 펼치기", "선택된 객체 - 전체 11" ], "inputs": 12 }, { "id": "sw-header--property-panel-expanded", "name": "Property Panel · 모두 펼침", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [ "형상", "위치" ], "buttons": [ "속성창 닫기", "0_Layer_Cludmark", "Continuous(ByL)", "공통 속성 접기", "선택된 객체 - 전체 11" ], "inputs": 15 }, { "id": "sw-header--property-panel-compare", "name": "Property Panel · 4개 비교", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [ "형상", "위치", "형상", "위치" ], "buttons": [ "객체 선택 도구", "속성창 닫기", "0", "Continuous(ByL)", "공통 속성 펼치기", "객체 선택 도구", "속성창 닫기", "다양함", "Continuous(ByL)", "공통 속성 펼치기", "속성창 닫기", "0_Layer_Cludmark", "Continuous(ByL)", "공통 속성 펼치기", "선택된 객체 - 전체 11", "속성창 닫기", "0_Layer_Cludmark", "Continuous(ByL)", "공통 속성 접기", "선택된 객체 - 전체 11" ], "inputs": 37 }, { "id": "sw-header--property-shape-slot", "name": "Property Panel · 형상 Slot", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [ "형상", "위치" ], "buttons": [ "기본 Figma 형상", "비움 (null)", "외부 컴포넌트", "Render Prop", "형상 교체 (원 ↔ 사각형)", "지름·반지름 외부 변경", "형상 그룹 항목 추가", "면적 삭제", "속성창 닫기", "0_Layer_Cludmark", "Continuous(ByL)", "공통 속성 펼치기", "선택된 객체 - 전체 11" ], "inputs": 12 }, { "id": "sw-header--property-fields", "name": "Property Panel · 필드 13개", "tags": [ "dev", "test", "manifest" ], "render": true, "errors": [], "sections": [], "headings": [], "buttons": [ "레이어 다양함 ↔ 단일", "레이어 외부 값 변경", "선축적 외부 값 변경", "두께 단위 변경", "선스타일 외부 CENTER", "두께·레이어 ReadOnly", "선축적·색상 Disabled", "속성 추가", "하이퍼링크 삭제", "menus 없음(options 사용): false", "객체 선택 도구", "속성창 닫기", "다양함", "0_Layer_Cludmark", "Continuous(ByL)", "객체 선택 도구", "속성창 닫기", "다양함", "0_Layer_Cludmark", "Continuous(ByL)", "객체 선택 도구", "속성창 닫기", "다양함", "0_Layer_Cludmark", "Continuous(ByL)" ], "inputs": 24 } ]