2396 lines
71 KiB
JSON
2396 lines
71 KiB
JSON
[
|
||
{
|
||
"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
|
||
}
|
||
]
|