chore(요구): 552-1 부품 목록 37 · 페이지별 변종 수 · 옛 변종 → 새 부품 짝 표 · 높이 → 여덟 단 짝 표
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,178 @@
|
||||
# 552-1 부품 목록 · 규칙 — 템플릿 부품 상자 (요구 376 · 377 · 378)
|
||||
|
||||
조사 원본(페이지별 변종 표 · 자리 file:line · 쓰임 수 · 높이) = 같은 폴더 `552-1_survey_1.md`(ui_template · A00 · B01 · 공개 A · B10 · B11) · `_2`(B02~B05) · `_3`(B06 · B07 · CAD 겉 · B08 · B09) · `_4`(D · E · M01 · M02).
|
||||
부품 모음 화면 = `#/b01-account?view=ui-kit`(시스템 관리 › 부품 모음 · 시스템 관리자만) · 목록 원본 = `ui_template/ui_template_ui_kit_parts.ts`(이 문서 3장과 같은 37 줄).
|
||||
|
||||
## 1. 결론 다섯 줄
|
||||
|
||||
1. 자체 변종 약 490(M02 클래스 단위로 세면 540) · 날 단추(`ui-btn` 없는 `<button>`) 191 · 단추 높이 서로 다른 값 약 30(9 ~ 66 px) — 공용 `ui-btn` 32 한 벌 곁에 페이지마다 16 ~ 26 짜리 작은 단추를 따로 만듦.
|
||||
2. 큰 덩어리 = B01(74 · 대시보드 PageKit 자체) · A00 스프레드시트(58) · B05(56) · M02(29 줄 · 79 클래스) · CAD 겉(28 · 날 단추 34) · B06(24) · M01(23) · B04(22) — D · E · 공개 A 는 거의 공용 부품만 씀.
|
||||
3. 같은 일 · 다른 꼴이 가장 많은 갈래 = 켜고 끄는 칩(다섯 갈래) · 분할 고르기(아홉) · 띠 알림(약 20) · 손 표(약 20) · 떠 있는 판(약 15) · 램프 점(여덟) · 범례 칩(일곱) · 빈 상태(약 25) · 보조 글 `__muted`(약 30 벌).
|
||||
4. 표준 부품 37 = 기본 13(552-2) · 묶음 21(552-3) · 틀 3(552-4) · 크기 = `data-size` 여덟 단(18 · 20 · 22 · 24 · 28 · 32 · 36 · 42) · 상태 = `data-state` 다섯(기본 · 마우스 · 눌림 · 막힘 · 오류) · 옛 공용 클래스 이름은 부품이 그대로 냄.
|
||||
5. 552-3 이 너무 큼(21) → 떠 있는 판 · 오른쪽 서랍 · 도구줄 · 단계 줄 · 패널 머리 · 목록 줄 여섯을 552-4(틀) 로 옮겨 13 · 15 · 9 로 나눔 권함.
|
||||
|
||||
## 2. 페이지별 수 (자체 변종 · 날 단추)
|
||||
|
||||
| 영역 | 폴더 | 자체 변종 | 날 단추 | 큰 덩어리 |
|
||||
|---|---|---|---|---|
|
||||
| 공용 | ui_template(cad_host · sheet 포함) | 35 | 14 | 공용 부품 곁 일회 꼴(prov 알약 · 손잡이 · ⚙ · cad 탭 ×) |
|
||||
| 공용 | A00_Common(최상위 · design · app_settings) | 12 | 4 | ☰ 서랍 · 머리 · 설정 라디오 · 터치 3갈래 |
|
||||
| 공용 | A00_Common/spreadsheet | 46 | 23 | 도구줄 23px 단추 · 시트 탭 · 서식 창 · 필터 · 오류 풍선 |
|
||||
| 대시보드 | B01_Dashboard | 74 | 27 | PageKit 표 · ⋯ · 탭 · 배지 · 분할 고르기 셋 · 숫자 카드 넷 · 진행 막대 넷 |
|
||||
| 공개 | A01 · A02 · A03 · A04 · A05 · A06 · A07 · A08 · A09 | 3 · 3 · 2 · 3 · 1 · 2 · 3 · 3 · 1 | 0 | hero 다섯 벌 복제 · 카드 · 날 체크 · 날 textarea |
|
||||
| 기타 | B10 · B11 | 1 · 3 | 0 | 안내 상자 · 단계 카드 |
|
||||
| 임도 | B02 | 0 | 0 | 공용만 |
|
||||
| 임도 | B03 | 19 | 3 | 파일 카드 · 놓기 칸 · 모달 둘 · 배너 둘 · 진행 막대 |
|
||||
| 임도 | B04 | 22 | 13 | 켜기 칩 셋 · 보간 분할 · 고르기 38 · 상태 칩 · 슬라이더 |
|
||||
| 임도 | B05 | 56 | 22 | 작은 도구 단추 6 · 떠 있는 판 5 · 손 표 · 칸 26 덮음 · 확폭 토글 |
|
||||
| 임도 | B06 | 24 | 12 | 분할 단추 · 22 아이콘 단추 · 구조물 판 · details 접기 넷 · 손 표 |
|
||||
| 임도 | B07 페이지 | 11 | 5 | 도면 단추(ui-panel-btn) · 장 번호 · 도구 단추 |
|
||||
| 임도 | B07 CAD 겉(openwebcad) | 28 | 34 | 리본 단추 66/32 · 리본 탭 · 상태막대 21 · 떠 있는 판 셋 · Button.tsx 40 |
|
||||
| 임도 | B08 | 13 | 1 | 큰 탭줄(B09 복사) · 연결 칩 · 램프 · 수문 줄 |
|
||||
| 임도 | B09(draft 포함) | 14 | 1 | 큰 탭줄 · 램프 · 떠 있는 창 · 단계 카드 · 단추 영역 복사 |
|
||||
| 예정노선 | D01 · D02 · D03 · D04 | 1 · 4 · 6 · 4 | 0 · 0 · 1 · 0 | 날 입력 · 손 표 · 고름 카드 · 날 progress |
|
||||
| 안정성 | E01 · E02 · E03 · E04 · E05 · E06 · E07 | 1 · 7 · 12 · 8 · 3 · 9 · 7 | 0 · 0 · 1 · 1 · 0 · 1 · 0 | 자체 카드 · 손 표 · 램프 · 범례 · 분할(ui-btn + is-on) · 띠 알림 · 날 progress |
|
||||
| 마스터 | M01 | 23 | 8 | 표 둘 · 모달 복제 둘 · 알약 단추 · 태그 · 배너 다섯 |
|
||||
| 마스터 | M02 | 29 줄(79 클래스) | 20 | 도구줄 약 20 · 카드 10 · 배너 7 · 빈 상태 7 · 알약 6 · 표 5 · 입력 복제 3 · muted 9 벌 |
|
||||
| 합 | 36 묶음 | 약 490 | 191 | |
|
||||
|
||||
## 3. 표준 부품 37 (이름 · 걸음 · 꼴 · 크기 · 상태 · 파일)
|
||||
|
||||
크기 칸 = 쓰는 단(높이 px) · 상태 칸 = 기 마 눌 막 오(기본 · 마우스 · 눌림 · 막힘 · 오류) 중 해당.
|
||||
|
||||
| # | 부품(열쇠) | 걸음 | 꼴 · 갈래 | 크기 단 | 상태 | 파일(`ui_template/`) | 지금 바탕 |
|
||||
|---|---|---|---|---|---|---|---|
|
||||
| 1 | 단추 `button` | 552-2 | 주(filled) · 보조(ghost) · 고스트 글(pill→text) · 위험 · 위험 고스트 · 유리(glass · 그림 위) · 글 링크 | 18 ~ 42 · 기본 32 | 기 마 눌 막 | `ui_template_button.ts` | `createButton` · `.ui-btn--*` |
|
||||
| 2 | 아이콘 단추 `icon-button` | 552-2 | 고스트 · 선 · 채움 · 눌림 켜짐(aria-pressed) · title · aria-label 필수 | 18 ~ 42 · 정사각 | 기 마 눌 막 | `ui_template_button.ts` | `.b01-shell__icon-btn` · `.ui-help-btn` |
|
||||
| 3 | 입력 `input` | 552-2 | 글 · 수 · 단위 붙음 · 찾기 · 날짜 · 여러 줄 · 색 · 숫자 [-][+] | 24 · 28 · 32 · 42 · 기본 42 | 기 마 막 오 | `ui_template_input.ts` | `createInputField` · `.ui-input(--sm)` |
|
||||
| 4 | 고르기 `select` | 552-2 | 한 개 · 화살표 = 셰브런 아이콘 | 24 · 28 · 32 · 42 | 기 마 막 오 | `ui_template_input.ts` | `createSelectField` · `.ui-select(--sm)` |
|
||||
| 5 | 체크 · 라디오 `check` | 552-2 | 체크 · 라디오 · 글 붙음 · 칩 꼴(켜면 채움) | 상자 14 · 터치 22 | 기 마 막 | `ui_template_checkbox.ts` | `createCheckbox` |
|
||||
| 6 | 켜기 `toggle` | 552-2 | 스위치 · 켜기 칩(색 점 붙음 · 지도 층) | 20 · 24 · 28 · 32 | 기 마 막 | `ui_template_toggle.ts` | 없음(칩 다섯 갈래) |
|
||||
| 7 | 분할 고르기 `segment` | 552-2 | 글 · 아이콘 · 둘 ~ 다섯 칸 | 20 · 24 · 28 · 32 | 기 마 막 · 고름 | `ui_template_segment.ts` | `.b01-sys-seg`(올림) |
|
||||
| 8 | 탭 `tabs` | 552-2 | 밑줄 탭(한 꼴) · 수 배지 · 보조 탭(작은 알약) · 문서 탭(`cad-tabs` · `ss-tabs`)은 꼴 그대로 토큰만 | 24 · 32 · 36 | 기 마 막 · 고름 | `ui_template_tabs.ts` | `tabBar` · `.ui-subtabs` |
|
||||
| 9 | 배지 `badge` | 552-2 | 상태 5색 · 역할 · 종류(임도 · 예정노선 · 안정성) · 수(알림) · 램프 점(✓ ✗ 함께) · 아바타 | 18 · 20 · 점 8 | 기 | `ui_template_badge.ts` | `createTag` · `badge()` |
|
||||
| 10 | 툴팁 `tooltip` | 552-2 | 마우스 글 · 값 풍선 · 그림 위 설명 | 글 12 | 기 | `ui_template_hover_info.ts` | `attachHoverInfo` |
|
||||
| 11 | 아이콘 `icon` | 552-2 | Tabler 선 · 16 · 18 · 24 · 32 · 이모지 → 아이콘 약 20 더함 | - | 기 | `ui_template_icons.ts` | `icon()` · PageKit `kitIcon` 여섯 옮김 |
|
||||
| 12 | 슬라이더 `slider` | 552-2 | 값 하나 · 이름 · 값 글 · 3열 줄 | 24 | 기 마 막 | `ui_template_input.ts` | `viewer-option-row` · `b05-routerec__bar` |
|
||||
| 13 | 보조 글 · 안내 줄 `text` | 552-2 | 흐린 글 · 안내 · 상태 글(오류 · 경고 · 성공) · 칸 오류 | 글 12 · 14 | 기 오 | `ui_template_text.ts` | `.ui-field__error` · 파일마다 `__muted` |
|
||||
| 14 | 카드 `card` | 552-3 | 선 카드(그림자 0 · 둥글기 10) · 머리 카드 · 고르는 카드(큰 단추 꼴) | 여백 12 · 16 | 기 마 · 고름 | `ui_template_card.ts` | `createCard` · `.b01-pg-card` |
|
||||
| 15 | 떠 있는 판 `float-panel` | 552-3(→552-4 권함) | 그림 위 판 · 끌기 머리 · 닫기 ✕ · 팝오버(뒷막 없음) | 머리 32 | 기 | `ui_template_float_panel.ts` | 없음(약 15 벌) |
|
||||
| 16 | 접이 카드 `collapsible` | 552-3 | 패널 카드 · 구역 · 캐럿 = 셰브런 · details 대체 | 머리 32 | 기 마 · 펼침 | `ui_template_collapsible.ts` | `createPanelCard` · `attachCollapsible` |
|
||||
| 17 | 패널 머리 `panel-head` | 552-3(→552-4 권함) | 제목 · 부제 · 오른쪽 단추 | 32 | 기 | `ui_template_panel_head.ts` | `.ui-general-block__section-header` |
|
||||
| 18 | 표 `table` | 552-3 | 데이터표(줄 28 · 밀도) · 일반표(줄 40) · ⋯ 칸 · 한글 배지 칸 · 칸 안 입력 · 줄 상태(고름 · 바뀜 · 지움) · 빈 줄 | 줄 28 · 40 | 기 마 · 고름 | `ui_template_table.ts` | `createDataTable` · `tableShell` · `.ui-general-block__table` |
|
||||
| 19 | 목록 줄 `list-row` | 552-3(→552-4 권함) | 고르는 줄 · 두 줄 · 끌기 손잡이 · 왼쪽 색 띠 · 번호 원 | 28 · 32 · 36 | 기 마 막 · 고름 | `ui_template_list_row.ts` | `.ui-sidebar-row` · `.ui-tree__row` |
|
||||
| 20 | ⋯ · 오른쪽 메뉴 `row-menu` | 552-3 | 줄 끝 ⋯ · 오른쪽 누름 메뉴 · 하위판 · 위험 항목 | 항목 32 | 기 마 막 | `ui_template_context_menu.ts` | `rowMenu` · `.ui-ctx-menu` |
|
||||
| 21 | 빈 상태 `empty` | 552-3 | 선 아이콘 · 한 줄 · 주 단추 · 사용법 · 작은 꼴(패널 안 한 줄) | - | 기 | `ui_template_empty.ts` | `emptyState` · `.ui-general-block__empty` |
|
||||
| 22 | 모달 · 확인창 `modal` | 552-3 | 보통(720) · 넓음 · 폭 단(24rem · 40rem · 960) · 확인 · 위험 확인 · 글 묻기(prompt 대체) | - | 기 | `ui_template_modal.ts` | `openModal` · `showConfirmDialog` |
|
||||
| 23 | 오른쪽 서랍 `drawer` | 552-3(→552-4 권함) | 상세 · 설정 · 크기 조절 | - | 기 | `ui_template_side_panels.ts` | `createSidePanels` |
|
||||
| 24 | 알림 `toast` | 552-3 | 토스트 4꼴 · 로딩 가림막 · 진행 가림막 | - | 기 | `ui_template_toast.ts` | `showToast` · `showLoadingOverlay` |
|
||||
| 25 | 띠 알림 `banner` | 552-3 | 왼쪽 띠 · 정보 · 경고 · 위험 · 성공 · 펼침 · 안 단추 · 닫기 | - | 기 | `ui_template_banner.ts` | 없음(약 20 벌) |
|
||||
| 26 | 도구줄 `toolbar` | 552-3(→552-4 권함) | 단추 묶음 · 나눔선 · 찾기 · 고르기 · 오른쪽 끝 · 그림 위 유리 | 24 · 28 · 32 | 기 | `ui_template_toolbar.ts` | `.ui-btn-group` · 페이지마다 bar |
|
||||
| 27 | 단계 줄 `steps` | 552-3(→552-4 권함) | 가로 막대 · 세로 목록 · compact · 번호 원 | 28 · 40 | 기 마 · 지금 · 끝남 | `ui_template_workflow_layout.ts` | `createStepBar` |
|
||||
| 28 | 숫자 카드 `stat` | 552-3 | 값 · 단위 · 변화 · 게이지 | 값 22 | 기 | `ui_template_stat.ts` | `.b01-home__kpi` · `.b01-sys-stat` |
|
||||
| 29 | 값 목록 `kv` | 552-3 | 이름 : 값 줄 · 판정(✓ ✗) · 큰 값 | 줄 24 | 기 | `ui_template_kv.ts` | 없음(dl 일곱 벌) |
|
||||
| 30 | 진행 막대 `progress` | 552-3 | 막대(6 · 8) · 쌓임 막대 · 원 · 띠 | 6 · 8 | 기 오 | `ui_template_progress.ts` | `createProgressCircle` |
|
||||
| 31 | 작은 그래프 `mini-chart` | 552-3 | 막대 · 원(도넛) · 선 | - | 기 | `ui_template_elements_chart.ts` | `createLineChart` · B01 손 SVG |
|
||||
| 32 | 범례 `legend` | 552-3 | 색 칩(14×10) · 선 · 점선 · 색 띠 눈금 | 글 12 | 기 · 꺼짐 | `ui_template_flow_legend.ts` | `createFlowLegend` |
|
||||
| 33 | 설정 줄 `setting-row` | 552-3 | 제목 · 설명 왼쪽 · 값 · 조작 오른쪽 · 라벨 + 칸 | 줄 52 | 기 | `ui_template_setting_row.ts` | `settingRow` · `settingCard` |
|
||||
| 34 | 파일 놓기 칸 `drop` | 552-3 | 끌어 놓기 · 고르기 단추 · 진행 · 오류 | 칸 48 | 기 마(끌어 옴) 오 | `ui_template_drop.ts` | 없음(B03 하나 · 나머지 숨은 file + 단추) |
|
||||
| 35 | 작업 화면 틀 `work-frame` | 552-4 | 왼쪽 패널 · 본문 · 아래 단추 줄 · [?][<][>] · 머리 줄 없음 · ☰ 서랍 | - | - | `ui_template_overlay.ts` | `.ui-workflow-overlay` |
|
||||
| 36 | 일반 화면 틀 `page-frame` | 552-4 | 페이지 머리(제목 20 · 설명 13 · 주 단추) · 몸통 | - | - | `ui_template_general_layout.ts` | `pageFrame` · `createGeneralLayout` |
|
||||
| 37 | 공개 화면 틀 `public-frame` | 552-4 | 공개 머리 · hero · 구역 제목 · 본문 · 바닥글 | - | - | `ui_template_public_layout.ts` | A01~A05 hero 다섯 벌 |
|
||||
|
||||
뺀 것(부품으로 안 만듦): 그림 속 색 · 축척 막대 · 나침반 · 3D 손잡이 · 래스터 색 띠(그림 몫 `--draw-*`) · CAD 리본 큰 도구 단추 66(CAD 앱 고유 · 553-6 에서 토큰만) · 스프레드시트 격자(`aislo-grid` · 칸 높이 = 문서 값).
|
||||
|
||||
## 4. 옛 변종 → 새 부품 짝
|
||||
|
||||
| 새 부품 | 옛 변종(폴더 · 클래스) |
|
||||
|---|---|
|
||||
| 단추 | 공용 `ui-btn--filled/ghost/pill/danger/danger-ghost/glass/sm` · `.ui-sidebar-actions > .ui-btn` · `.ui-panel-form .ui-btn` · `:where(.ui-panel-btn)` + B07 `b07-drawing-button` · B01 `primaryButton` · `.b01-pg .ui-btn` · `.b01-dashboard__actions .ui-btn` · `.b01-pg-link` · `.b01-sys-back` · `.b01-pd-crumb` · `.b01-knowledge-chat__form button` · 시트 `.ss-toolbar .ui-btn`(23) · `.ss-find__btn` · `.ss-pick > button` · `.ss-brush` · `.ss-toolbar__unit-btn` · B03 `b03-file__card-select` · B04 `.b04-map__controls button` · `.viewer-controls button` · `contour-interval-submit` · `b04-surface__reset` · B05 `b05-route__irregular-btn` · `.b05-structure__group-body button` · `b05-route-profile__tool` · `b05-drainage__analyze/__update/__tool/__propose` · `.b05-route__view-controls .ui-btn` · `.b05-routeedit__spin .ui-btn` · `b05-routeedit__hint-toggle` · B06 `b06-design__btn`([상세]) · `b06-structure-panel__btn` · `.b06-section__notice-list > button` · B07 `b07-plan-tools__button` · `b07-plan-manage__sheet` · `.b07-settings__actions .ui-btn` · CAD `.cad-tool[small]` · `Button.tsx` · `.cad-frame-tokens__button` · `.cad-block-library` 실행 · `.cad-drop-hint` · B09 `.b09-dock` · `.b09-print__actions .ui-btn` · M01 `m01-master__logic-key` · `m01-master__row-btn` · M02 `m02-labrow__qtybtn` · `--btn-bar-padding`(16) |
|
||||
| 아이콘 단추 | `.ui-workflow-overlay__toggle` · `.ui-collapsible__settings` ⚙ · `.cad-tabs__x/__add` · `.app-burger` ☰ · B01 `.b01-shell__icon-btn` · `.b01-pg-menu__btn` · `.b01-proj-more` · `.b01-pg-caret` · `.b01-knowledge-chat__close` · B03 `b03-file__card-remove` × · B05 `b05-profile-edit__btn` ▲▼↺ · `b05-profile__zoom-btn` · `b05-structure__step` [-][+] · `b05-contourlock` · `b05-routeedit__info-toggle` ▸ · `b05-routeedit__measure-close` · B06 `b06-cross-card__zoom-btn` · `b06-design__rockb-btn` ◀▲↺▼▶ · `b06-structure-panel__btn--up…`(방향키) · `b06-structure-panel__close` · `b06-design__more-summary` · B07 `b07-drawing-button__settings` ⚙ · CAD `.cad-ribbon-tabs__collapse` · `.cad-quick-access button` · `.cad-inspector__collapse` · `.cad-view-controls button` · 시트 `.ss-filter__btn` ▾ · `.ss-errtip__btn` ⚠ · `.ss-list-arrow` · `.aislo-grid__outline-btn` · `.ss-toolbar__clear` · D02 「📍」 ghost sm · D04 「×」 ghost sm · E03 `e03-star` · M01 `m01-logic__drop` × · M02 `m02-labrow__arrow` · `m02-dfdg__warn` |
|
||||
| 입력 | 공용 `ui-input(--sm)` · `.ui-panel-form input`(26) · `.ui-data-table__input` · B01 `.b01-sys-input` · `.b01-proj-search` · `.b01-shell__search` · 채팅 textarea · 시트 `.ss-toolbar__input` · `__color` · `.ss-fmtdlg__row input` · `.ss-find__input` · `.ss-formula` · `.ss-addr` · `.ss-memo` · design 날 input · B05 `.b05-route__field input` · `b05-structure__stepper` · `.b05-structure-section input` · `b05-routerec__num` · `b05-profile-table__irregular-input` · `b05-routeedit__curve-radius/-arc` · B06 `b06-design__cutslope-input` · B07 `b07-plan-tools__name` · CAD `.cad-prop input` · `.cad-properties-editor input` · `.cad-command-area input` · `.cad-frame-tokens` 칸 · D02 `d02-points__input` · D04 `d04-confirm__input` · E02 `e02-input` · E06 `e06-input` · M01 `m01-logic__input` · `m01-logic__alias` · `m01-master__cell-input` · M02 `m02-dfout/dfsum/dfver__input`(복제 3) · `m02-labrow__aliasin` · `m02-sod__color` · `m02-df__color-input` · A08 `createTextAreaField` 손 조립 |
|
||||
| 고르기 | 공용 `ui-select(--sm)` · B01 `.b01-proj-select` · 시트 `.ss-toolbar__select` · `.ss-fmtdlg__row select` · B04 `b04-surface__select`(38) · B06 `b06-structure-panel__select` · CAD `.cad-prop select` · `.cad-properties-editor select` · D03 날 `d03-plan__3d-year` · 고르기 화살표 SVG 보라 |
|
||||
| 체크 · 라디오 | `createCheckbox` · 날 체크(시트 12 · B01 3 · A07 3 · D03 · D04 · E03 `e03-check` · E04 `__toggle` · M02 7 · B09 print) · `.app-settings__radios` · M02 `m02-lib__pick` 라디오 · B05 `b05-route__check` |
|
||||
| 켜기 | B03 `b03-file__lasfree` · B04 `b04-map__layer-button` · `.model-display-options .toggle-button` · `toggle-label` · B05 `b05-drainage__layer-button` · `toggleButton()`(glass) · `.b05-structure__widening button` · B06 `b06-structure-panel__toggle` · ui `.ui-prov-toggle` · 시트 `.ui-sheet__toolbar .ui-btn.is-on` · CAD `.cad-statusbar button[data-active]` · M02 `aria-pressed` ui-btn 넷 |
|
||||
| 분할 고르기 | B01 `.b01-sys-seg` · `.b01-home__seg` · `.b01-proj-seg` · `.b01-shell__menu-touch` · `.app-drawer__touch` · B04 `b04-surface__sheet-method` · B05 `b05-routerec__pills` · B06 `b06-design__btn(--active)` · CAD `.cad-inspector-tabs` · E04 `e04-toggle` · E06 `e06-toggle` · E07 `e07-toggle` · M02 `m02-dfip__chips` · 고르기창 filled/ghost 바꿔 칠함 |
|
||||
| 탭 | B01 `.b01-pg-tabs` · `.b01-shell__nav-item`(메뉴 · 틀 몫) · 공용 `.ui-subtabs` · B08 `.b08-quantity__tabs` · B09 `.b09-estimation__tabs`(같은 CSS 복사) · `app-settings__tabs` · M02 `m02-sod__tabs` · 시트 `.ss-fmtdlg__tabs` · CAD `.cad-ribbon-tabs`(꼴 그대로) · 문서 탭 `cad-tabs` · `ss-tabs`(꼴 그대로 · 토큰만) |
|
||||
| 배지 | `.ui-tag--*` · B01 `.b01-pg-badge` · `.b01-proj-badge` · `.b01-home__badge` · `.b01-shell__badge` · `.b01-pg-tabs__count` · 아바타 셋 · `.b01-home__dot/pips` · `.b01-proj-dots` · `.b01-proj-chip`(필터 → 분할/켜기) · ui `.ui-item-picker__badge` · `.ui-prov-card__badge` · `.ui-loupe__zoom` · `.ui-find__tag` · 시트 `.ss-link-count` · `.ss-link-range__tag` · `kbd` · B04 상태 칩 둘 · B05 `b05-route-profile__balance-item` · `b05-route__lamps` · `b05-structure__mark` · B06 `b06-cross-card__mode` · `__structure` · `b06-section__notice-chip` · B08 `b08-link__chip` · `b08-link__badge` · 램프 `b08-summary__lamp` · `b08-milestone__lamp` · `b09-bill__lamp` · `b09-estimation__drop-tag` · `.b09-options .is-pending::after` · E03 `e03-verdict` · E06 `e06-verdict` · A02 번호 원 · M01 `m01-logic__tag` · `m01lab__pill` · M02 `m02-struct__no` · `m02-pick__tag` · `m02-hopyo__state` · `__basis` · `m02-dfip__tag` · 알약 여섯(`m02-dfpanel-cell` · `m02-dflink-value` · `m02-dfcells__kind` · `m02-dfpill-rule` · `m02-opts__key` · `m02-dfdg__pill`) · `m02-labordg__pill` · `m02-dfpanel-chip` · `m02-dfip__chip` |
|
||||
| 툴팁 | `.ui-hover-info` · `title=`(B06 52 · CAD 32 · B07 20) · ui `.ui-prov-card` · `partsTip` · 시트 `.ss-errtip__balloon` · `.spreadsheet-comment-balloon` · `.ss-hint` · B05 `b05-structure__balloon` · `b05-crosshint` · E03 `e03-tip` · E04 `e04-map__tip` · E07 `e07-map__tip` |
|
||||
| 아이콘 | `icon()` · PageKit `kitIcon` 여섯 · CAD `Icon.tsx` · 이모지(A00 29 · ui 8 · B06 11 · B05 6 · M02 13 · B07 4 …) |
|
||||
| 슬라이더 | B04 `viewer-option-row` · B05 `b05-routerec__bar input[range]` |
|
||||
| 보조 글 · 안내 줄 | `.ui-field__error` · B01 `.b01-sys-error` · `.b01-pg-note` · `.b01-home__muted` · B03 `b03-file__error` · B04 `b04-surface__status` · B05 상태 줄 일곱(`__viewer-status` · `__status` · `__busy` · `__rec-now` · `routerec__state` · `drainage__status/__busy`) · 주석 줄 넷 · B06 `b06-cross-card__warning` · `b06-missing-stations__text` · B07 `b07-scale__error` · `b07-settings__note` · B08 `.b08-quantity__foot` · `.b08-options__hint` · `b08-hydro__verdict/__status` · B09 `__hint` · `__line-hint` · `.b09-check__*` · `.b09-print__status` · D01 인라인 12px · D02 `d02-info` · D03 `d03-plan__hint` · D04 `d04-confirm__dirty` · E02 `e02-status/-hint` · E03 `e03-muted` · E04 `e04-hint/-note/-warn` · E05 `e05-status/-hint` · E06 `e06-hint/-status/-kin` · E07 `e07-hint/-note/-warn` · M01 `__muted` 셋 · `m01-master__hint` · M02 `__muted` 아홉 벌 · `m02-practice__note` · `m02-hopyo__note` · B11 `b11-loading__message` |
|
||||
| 카드 | `.ui-card(--raised)` · `.ui-sidebar-card` · `.ui-group-card` · `.ui-help-note` · `.ui-item-picker__detail` · B01 `.b01-pg-card` · `.b01-proj-card` · `.b01-home__pane/__big/__mid` · `.b01-shell__card` · `.b01-pd-pane` · `.b01-new-project__card`(고르는 카드) · 시트 `.ss-condfmt` 등 목록 면 넷 · `.ss-steps__box` · `.b-pending` · A01 `.a01-news-row` · A02 `.a02-workflow-row` · A04 `.a04-timeline-row` · A06 · A07 · A08 · A09 카드 · B03 `b03-file__card` · `__control-panel` · `__group` · B04 `b04-surface__group` · `__sheet-section` · `__form` · B05 `b05-route__panel-section` · `b05-structure__group`(fieldset) · B06 `b06-cross-card` · `b06-profile__group` · B07 `b07-settings__group` · B08 `b08-milestone__route` · B09 `b09-haulstep` · B11 `b11-status__download` · D03 `d03-plan__mode`(고르는 카드) · E02 `e02-card` · E03 `e03-card` · E04 `e04-result` · E07 `e07-result` · M01 `m01lab__box` · `m01-logic__calc` · `m01-logic__section` · M02 열 가지(`m02-df__part` · `m02-dfpanel-form` · `m02-df-formula` · `m02-hopyo__built/__whole` · `m02-sog` · `m02-dfver__panel` · `m02-dfip__item/__new/__form` · `m02-dfdg__box`) · `m02-labordg__card` |
|
||||
| 떠 있는 판 | `.ui-workflow-overlay__panel`(틀 몫) · B05 `b05-routeedit__hint` · `__info` · `__measure` · `__label` · `b05-crossmodal` · `b05-drainage` · `b05-route-profile` · `masshaul-overlay` · `table-overlay` · B06 `b06-structure-panel` · `b06-design__more-panel` · B08 `b08-milestone__leg-edit` · `b08-milestone__tools` · B09 `.b09-popup` · CAD `.cad-quick-properties` · `.cad-block-library` · `.cad-frame-tokens` · E03 `e03-view3d` · E04 `e04-view3d__tools` · M02 `m02-pop` · `m02-struct__keys` · `m02-df-unitpick__panel` · `m02-dfp`(옆 패널) · D03 `d03-plan__cross` · design `.design-plan-peek` |
|
||||
| 접이 카드 | `createPanelCard` · `attachCollapsible` · `.ui-collapsible` · 날 `<details>` — B06 넷(`b06-adjust-dock` · `b06-std__diagram/__group/__loader`) · E01 `e-missing` · E03 `e03-prob-src` · M01 넷 · M02 일곱 · A07 약관 · B05 `b05-route__panel-section` |
|
||||
| 패널 머리 | `.ui-general-block__section-header` · `.ui-side-panels__panel` 머리 · B03 `b03-file__group` 제목 · B08 `.b08-hydro__h2` · `.b08-sheets__title` · E02 `e02-card__head` · E03 `e03-card__head` · M01 `m01-head` |
|
||||
| 표 | `.ui-data-table` · `.ui-general-block__table` · `.ui-sheet__table` · `.ui-group-card__lines` · B01 `.b01-pg-table` · `.b01-proj-table` · `.b01-pg-files` · `.b01-dashboard__table` · `.b01-home__rows` · `.app-settings__table` · B05 `b05-profile-table`(div 격자 · 그림 표 · 꼴 그대로) · `.b05-routerec__cands table` · B06 `b06-detail__qtable` · B09 줄 상태 일곱(`is-hand` …) · D04 `d04-confirm__table` · E02 `e02-table(--read)` · E03 `e03-table` · `e03-prob-vars` · E06 `e06-table` · E07 `e07-table` · `e07-stations` · `e07-areas` · M01 `m01-master__grid`(M02 도 씀) · `m01-logic__grid` 와 변형 넷 · M02 다섯(`m02-dfcells__table` · `m02-df-std__table` · `m02-dfsum__table` · `m02-sod__table` · `m02-dfip__preview table`) |
|
||||
| 목록 줄 | `.ui-sidebar-row` · `.ui-tree__row` · `.ui-find__row` · 시트 `.ss-links__row` · `.ss-sort__row` 등 넷 · B01 `.b01-dashboard__company-row` · `__address-item`(B08 도 끌어 씀) · `.b01-home__row` · `.b01-knowledge-chat__source` · `.b01-shell__menu-item` · B03 `b03-file__temp-option` · B05 `b05-drainage__basin` · `b05-route__irregular-item` · B07 `b07-plan-manage__row` + `__grip` · CAD 레이어 줄 · `.cad-snap-menu`(→ 메뉴) · D02 `d02-points__row` · E03 `e03-list` · E04 `e04-section` · E06 `e06-list` · `e06-cases` · M01 `m01-logic__pick-row` · `m01-procure__item` · M02 `m02-opts__kind` · `m02-pick__item` · `m02-df-unitpick__item` · `m02-dfip__row` · `m02-labrow__grip` · `m02-dfp__grip` |
|
||||
| ⋯ · 오른쪽 메뉴 | `.ui-ctx-menu` · `.ui-tree__menu` · B01 `.b01-pg-menu__pop` · `.b01-shell__menu` · `.b01-proj-menu__context-menu` · 시트 `.ss-toolbar__popover` · `.ss-errtip__menu` · `.ss-validation__dropdown` · `.ss-filter__panel` · B06 `b06-design__more`(details) · `b06-detail__context-menu` · CAD `.cad-ribbon-overflow` · `.cad-snap-menu` · CAD `DropdownButton`(안 씀 · 지움 후보) |
|
||||
| 빈 상태 | `emptyState` · `.ui-general-block__empty` · `.ui-chart__empty` · `.ui-help-figure__empty` · `.ui-item-picker__hint` · `.ui-find__hint` · B01 `.b01-proj-empty` · `.b01-dashboard__empty` · `.b-pending` · `.b-project-gone` · `.app-placeholder` · A04 `__empty` · B03 `b03-file__temp-empty` · B04 `b04-map__empty` · B05 셋 · B06 셋 · B07 둘 · CAD 둘 · E02 `e02-empty` · E03 `e03-empty` · E04 둘 · E05 · E06 · E07 `__empty` · M01 셋 · M02 일곱 |
|
||||
| 모달 · 확인창 | `openModal`(`--wide`) · `.ui-confirm` · `askLeave` · `.ui-item-ask` · B01 `.b01-dashboard__modal` · `.b01-knowledge-source-modal` · 시트 `.ss-dialog` · `.ss-fmtdlg` · `.ss-sort__box` · `.ss-comment-editor` · B03 `b03-file__modal` · `__temp-modal` · B05 `b05-routerec` 겉틀 덮음 · B08 `b08-milestone__modal` 폭 · B09 `.b09-popup`(→ 떠 있는 판) · `ui-popup`(CSS 없음) · CAD `window.confirm` · `window.prompt` · E05 `e05-preview` · M01 `m01-logic__pick` · `m01-procure` · `m01lab__modal` · `m01copy__sheet` · M02 폭 클래스 일곱 |
|
||||
| 오른쪽 서랍 | `createSidePanels`(`.ui-side-panels__panel`) · M02 `m02-dfp` · B01 채팅 판 `.b01-knowledge-chat__panel` |
|
||||
| 알림 | `showToast` · `.ui-overlay(--progress)` · `.ui-loading--error` · `showLoading` · 시트 `.ss-toast` · CAD `.aislo-cad-toast`(꾸밈 없음) · `.cad-host[data-error/loading]` · `.design-dock__busy` |
|
||||
| 띠 알림 | B01 `.b01-home__stale` · B03 `b03-file__resume` · `__overview` · `__error-message` · B06 `b06-section__notice-bar` · B07 `b07-drawing-list__bypass` · A08 `.a08-support__success` · B10 `.b10-payment__note` · E01 `e-missing` · E05 `e05-stale` · E06 `e06-stale` · M01 `m01-master__notice` · `m01-logic__reasons` · `m01lab__warn` · `m01flow__warn` · `m01-logic__bad` · M02 일곱(`m02-main__notice` · `m02-dfpanel-why/-msg` · `m02-dflink-warn` · `m02-dfsum__problems` · `m02-dfver__breaks/__rest` · `m02-sod__banner`) |
|
||||
| 도구줄 | `.ui-sidebar-actions`(틀 몫) · `.ui-modal__top/__actions` · `.ui-group-cards__bar` · `.ui-sheet__toolbar` · `.ui-btn-group` · 시트 `.ss-toolbar` · `.ss-bar` · `.ss-statusbar` · B01 `.b01-proj-tools` · B04 `b04-map__header/__controls` · `b04-surface__sheet-toolbar` · `viewer-options` · B05 `b05-routeedit__tools` · `b05-route__view-controls/-group` · `b05-route-profile__tools` · 배치 줄 다섯 · B08 `b08-hydro__toolbar` · `b08-material__toolbar` · `b08-milestone__bar` · B09 `b09-estimation__tools` · CAD `.cad-statusbar` · `.cad-ribbon-tabs` · M01 `m01-logic__bar` · `m01-master__bar` · `m01-master__pager` · M02 약 20(`m02-hopyo__bar` · `m02-practice__bar` · `m02-drawing__toolbar` · `m02-dfdg__tools` · `m02-dfip__bar` · `m02-layer-bar` · `m02-main__tools` · `m02-struct__card-tools` · `m02-labrow__tools` · `m02-itempick__buttons`) |
|
||||
| 단계 줄 | `createStepBar`(가로 · compact · 세로) · `__step--home` · `mountGroupStep` · B01 `.b01-pd-steps` · `.b01-home__step` · A02 `.a02-workflow-row` · B11 `.b11-status__flow` |
|
||||
| 숫자 카드 | B01 `.b01-home__kpi` · `.b01-pd-kpi` · `.b01-sys-stat` · `.b01-dashboard__metric` · `.b01-sys-gauge` · E03 `e03-kpi` |
|
||||
| 값 목록 | B04 `b04-surface__line` · B07 `.b07-info__row` · CAD `.cad-properties dl` · `readout` · E04 `e04-result__list` · E07 `e07-summary` · B08 `b08-hydro__row` · `__out/__value` |
|
||||
| 진행 막대 | `createProgressCircle` · `.ui-spinner` · `.ui-loading__spin` · B01 `.b01-proj-bar` · `.b01-pg-left__bar` · `.b01-pg-progress__bar` · `.b01-sys-gauge__bar` · `.b01-home__stack` · B03 `b03-file__progress-bar` · D03 날 `progress` · E04 `e04-progress` · E07 `e07-progress` · E06 `e06-band`(띠 · 단추 칸) |
|
||||
| 작은 그래프 | `createLineChart` · B01 `.b01-home__bars` · `__donut` · `.b01-sys-chart` · `.b01-home__thumb` |
|
||||
| 범례 | `createFlowLegend` · B05 `b05-routeedit__legend` · `b05-routerec__legend/__plegend` · B06 `b06-design__seg-legend` · `b06-std__legend` · E03 `e03-legend` 와 swatch 셋 · E04 `e04-legend` · E06 `e06-legend`(여덟 갈래) · E07 `e07-legend` · M02 `m02-dfdg__legend` · 시트 색 칩 둘 |
|
||||
| 설정 줄 | `settingRow` · `settingCard` · `.b01-dashboard__setting-card` · E02 `e02-field` · E06 `e06-setting` · B08 `b08-hydro__row` · `.ui-panel-form` 칸 |
|
||||
| 파일 놓기 칸 | B03 `b03-file__dropzone` · CAD `body.cad-file-dragging::after` · 숨은 file + 단추(B01 · B08 · M02 · cad_host · help_edit) |
|
||||
| 작업 화면 틀 | `.ui-workflow-overlay`(패널 · 손잡이 · ☰) · `.ui-sidebar-actions` · `.ui-help-btn` · `.ui-step-nav-btn` · `.app-header` · `.app-drawer` · `design_dock` · `.ui-resizer` |
|
||||
| 일반 화면 틀 | B01 `pageFrame`(`.b01-pg__head`) · `.b01-proj-head` · `createGeneralLayout` · `.ui-general-block__section` · `.ui-wf`(안 씀 · 지움) · M01 `m01-head` |
|
||||
| 공개 화면 틀 | A01 ~ A05 `.a0N-hero` 다섯 벌 복제 · `.a0N-section__title` · A06 · A07 · A08 카드 틀 · `.app-footer` |
|
||||
|
||||
## 5. 단추 · 칸 높이 → 여덟 단
|
||||
|
||||
| 지금 높이 px | 새 단 | 대표 |
|
||||
|---|---|---|
|
||||
| 9 · 13 · 14 · 15 · 16 · 17 | 18 | `.ss-list-arrow` · `.ss-toolbar__clear` · `--btn-bar-padding` 16 · `b05-route-profile__tool` 16 · `b05-profile-edit__btn` 17×21 · `e03-star` 15 · `m02-dfdg__pill` · 알약 배지 ~17 |
|
||||
| 18 · 19 | 18 | `ui-btn--sm` · `ss-errtip__btn` · CAD `.cad-prop` 19 · `ui-prov-toggle` |
|
||||
| 20 | 20 | `m02-labrow__arrow` · `b06-design__btn` · `notice-chip` · `cad-quick-access` · `.b01-pg-caret` |
|
||||
| 21 · 22 | 22 | `b06-structure-panel__btn` · `cad-statusbar` 21 · `b07-plan-manage__sheet` · `b05-profile__zoom-btn` · `b06-cross-card__zoom-btn` · `b06-design__rockb-btn` · `b05-drainage__analyze` · `ss-link` · `ss-find__btn` |
|
||||
| 23 · 24 · 25 | 24 | `.ss-toolbar .ui-btn` 23 · `ss-tabs__tab` · `cad-tabs` 25 · `.ui-subtabs`(`--subtab-height` 24) · `b03-file__card-remove` · `b04-surface__sheet-method` 25 · `.ui-sidebar-row` · `.ui-workflow-layout__step` |
|
||||
| 26 · 27 | 단추 = 24 · 칸(입력 · 고르기)= 28 | 단추: `b03-file__card-select` · `b05-structure__step` · `b07-plan-tools__button` · `.b05-structure__group-body button` / 칸: `--panel-control-h` 26 · `.ui-panel-form input` · `.ss-bar` · `.ss-fmtdlg__tabbtn` 27 |
|
||||
| 28 · 29 | 28 | `.b01-pg-menu__btn` · `.ss-toolbar__select` · `.ui-data-table__input` · `.b01-shell__search` · `step.is-compact` |
|
||||
| 30 · 31 | 32 | `ui-input--sm` · `ui-select--sm` · `m01-logic__input` · `m02-df*__input` · `m02-dfpanel-chip` · 작은 칸과 보통 단추가 한 줄에 맞도록 |
|
||||
| 32 · 33 · 34 | 32 | `ui-btn` 기본 · `ui-panel-btn` · `.ui-panel-form .ui-btn` · `b04-map__layer-button` 34 · `.b05-route__view-controls .ui-btn` 34 · `.b05-routeedit__spin .ui-btn` 34 · `.b01-pg-tabs__tab` 34 · `.cad-view-controls` |
|
||||
| 35 · 36 · 37 · 38 | 36 | `.b01-shell__nav-item` · `.b01-shell__menu-item` · `.cad-layer-manager button` 36 · `cad-inspector-tabs` 38 · `b04-surface__select` 38 · `.b01-dashboard__company-row` 38 |
|
||||
| 39 · 40 · 42 · 44 | 42 | `ui-input` · `ui-select` 42 · `Button.tsx` 40 · `m02-dfip__row` 40 · `m02-labordg__card` 39 · `.b01-pd-step` 40 · `step.is-vertical` 40 · 터치 최소 44(터치 모드는 단 위 덮음 그대로) |
|
||||
| 47 이상 | 단 밖 | `d03-plan__mode` · B03 pick-row → 고르는 카드 · `b03-file__dropzone` → 파일 놓기 칸 · CAD 리본 큰 도구 66 · 채팅 둥근 단추 58 · 패널 손잡이 64 = 꼴 그대로 |
|
||||
|
||||
- 같은 거리(2 px 안쪽 둘)일 때 — 표 줄 · 그림 위 · 도구 아이콘 = 작은 단 · 혼자 서는 주 동작 · 양식 칸 = 큰 단.
|
||||
- 글자 크기 짝 — 18 · 20 · 22 · 24 = 12 · 28 · 32 = 14(작은 칸 12 허용) · 36 · 42 = 14 · 단추 글자 9 · 10 · 10.5 · 11 · 11.5 · 12.8 · 13 · 13.3 · 16 은 없앰.
|
||||
- 높이 기준 시험 — 시험이 높이 값을 직접 보는 곳: `--subtab-height` · `--panel-control-h` · `--control-height(-sm)` 토큰 이름은 두고 값만 단에 맞춤(552-2 가 토큰 값을 바꿀 때 시험 · 촬영 같은 커밋).
|
||||
|
||||
## 6. 부품 규칙(파일 머리에 그대로 · `ui_template_ui_kit_parts.ts` 머리와 같음)
|
||||
|
||||
1. 자리 — `ui_template/` 한 곳 · 부품 하나 = `ui_template_<이름>.ts` + 같은 이름 `.css` · 700 줄 넘으면 `_<갈래>` 로 나눔 · 페이지 폴더 · B01 에 부품을 두지 않음(PageKit 은 부품을 감싸는 얇은 껍데기로 남거나 사라짐).
|
||||
2. 이름 — 만들기 `create<부품>(opts)` → 요소 또는 `{ root, … }` 손잡이 · 클래스 `ui-<부품>` · 속 `ui-<부품>__<조각>` · 꼴 `ui-<부품>--<꼴>` · 지금 공용 이름(`ui-btn--filled` · `ui-collapsible__title` · `ui-sidebar-actions` · `ui-data-table__table` …)은 부품이 그대로 냄 — 시험 270 파일 · 가이드 장면 704 · B09 표 PDF 가 잡음.
|
||||
3. 크기 — `data-size="18|20|22|24|28|32|36|42"` 한 속성(단추 · 아이콘 단추 · 입력 · 고르기 · 분할 · 탭 같음) · 옵션 `size: 18 | … | 42` · 옛 `size: "sm"` · `compact` 는 받아서 단으로 바꿈(sm = 18 · compact = 32).
|
||||
4. 상태 — 마우스 `:hover` · 눌림 `:active` · 고름 `.is-active` / `aria-selected` / `aria-pressed` · 막힘 `disabled` / `aria-disabled` · 오류 `.is-error` / `aria-invalid` · CSS 는 `:is(:hover, [data-state="hover"])` · `:is(:active, [data-state="active"])` 로 써서 부품 모음 화면이 상태를 굳혀 보임.
|
||||
5. 색 — 공통 값(`--color-*` · `--radius-*` · `--shadow-*` · `--text-*`)만 · 날 색 · `--b01-*` · 그림 값(`--draw-*`) 금지 · 성공 램프는 ✓ 같이(색만으로 안 가름).
|
||||
6. 글꼴 — `--font-ui` 상속 · 부품이 font-family 를 안 적음.
|
||||
7. 아이콘 — `icon(name, size)` 만 · 그림 이모지 금지 · 글자 기호(→ ← ▾ ▲▼◀▶ ✓ ✗)는 시험이 글자로 잡아 그대로 · 아이콘만 단추는 `title` + `aria-label`.
|
||||
8. 머리 — 파일 머리 주석에 무엇 · 꼴 · 크기 · 상태 · 쓰는 법(한 줄 예) · 대신하는 옛 변종.
|
||||
9. 부품 모음 — 부품을 만들면 `ui_template_ui_kit_parts.ts` 자기 줄의 `file` 을 맞추고 `demo(state)` 를 채움(상태 없는 칸은 null) · 화면에서 밝음 · 어두움 · 다섯 상태가 다 보여야 끝.
|
||||
10. 시험 — 부품마다 `resources/tester/test_552_<n>_<부품>.py` 지킴 시험(이름 · data-size · 상태 규칙 · 날 색 없음) · 부품 모음 화면 ORCA 한 장.
|
||||
11. 새 화면 — 날 `<button>` · 날 `<input>` · 페이지 CSS 의 btn · tab · table · badge · chip 선택자를 새로 만들지 않음(553 에서 옛 것을 걷음).
|
||||
|
||||
## 7. 552-2 ~ 552-4 나눔 제안
|
||||
|
||||
| 걸음 | 부품 | 수 |
|
||||
|---|---|---|
|
||||
| 552-2 기본 | 단추 · 아이콘 단추 · 입력 · 고르기 · 체크 · 라디오 · 켜기 · 분할 고르기 · 탭 · 배지 · 툴팁 · 아이콘 · 슬라이더 · 보조 글 | 13 |
|
||||
| 552-3 묶음 | 카드 · 접이 카드 · 표 · ⋯ 메뉴 · 빈 상태 · 모달 · 알림 · 띠 알림 · 숫자 카드 · 값 목록 · 진행 막대 · 작은 그래프 · 범례 · 설정 줄 · 파일 놓기 칸 | 15 |
|
||||
| 552-4 틀 | 작업 화면 틀 · 일반 화면 틀 · 공개 화면 틀 + 떠 있는 판 · 오른쪽 서랍 · 도구줄 · 단계 줄 · 패널 머리 · 목록 줄 | 9 |
|
||||
|
||||
- 차례 — 552-2 의 단추 · 아이콘 · 크기 단을 먼저 push(552-3 · 552-4 가 씀) · 셋 다 `ui_template_ui_kit_parts.ts` 의 자기 묶음 줄만 고침(묶음 사이가 떨어져 있어 합칠 때 안 겹침).
|
||||
- 나눔을 바꾸면 `ui_template_ui_kit_parts.ts` 의 `group` 만 옮기면 됨(지금은 PLAN 552 글대로 552-3 = 21).
|
||||
|
||||
## 8. 함께 본 흠(553 몫 · 지움 후보)
|
||||
|
||||
- 죽은 CSS — B02 `b02-proj__select` · B03 `b03-file__cards-grid` · B04 `b04-surface__*` 열여섯 · B05 `b05-route__chip` 외 약 15 · ui `.ui-wf` · CAD `DropdownButton`(문자열 조합 이름은 확인 못 함 — 지우기 전 grep).
|
||||
- 남의 클래스 빌림 — D01 · E01 `b02-proj__grid` · D03 `b05-route__3d-modal` · B08 `b01-dashboard__address-item` · M02 `m01-master__grid` · `b05-structure__group` · D03 `ui-workflow-overlay__handle`.
|
||||
- CSS 없는 클래스 — `ui-popup`(B09 · M01 · B03) · `.aislo-cad-toast` · `d03-plan__3d-year` · `d04-confirm__pick` · `m02-layers__btn`.
|
||||
- 시스템 대화상자 — CAD `window.confirm` · `window.prompt` → 모달 · 확인창.
|
||||
Reference in New Issue
Block a user