diff --git a/docs/raw/요구_1025/_분석_375-A_토큰_공용부품.md b/docs/raw/요구_1025/_분석_375-A_토큰_공용부품.md new file mode 100644 index 000000000..b382db00e --- /dev/null +++ b/docs/raw/요구_1025/_분석_375-A_토큰_공용부품.md @@ -0,0 +1,163 @@ +# 375-A 토큰 · 공용 부품 전역화 — 대시보드 테마를 프로젝트 안 화면까지 + +## ① 결론 다섯 줄 + +1. 토큰이 두 벌 — 옛 전역 `theme.css`(보라 Wiza · `:root` · CAD iframe 도 import) vs 대시보드 `--b01-*`(초록 · `.b01-shell` 안만 · 셸 안에서 `--color-*` 10개를 거꾸로 덮음) → **값 = 대시보드 값인 전역 의미 토큰 한 벌을 `theme.css` 에 두고 `--b01-*` 는 그 별칭으로 뒤집음** · 셸 덮어쓰기 10줄 · 셸 어두움 블록은 반드시 지움(남기면 순환 참조로 둘 다 무효). +2. 보라를 직접 부르는 옛 이름 약 260곳(`royal-amethyst` 67 · `mist-violet` 51 · `deep-iris` 20 …)은 이름을 두고 새 토큰의 별칭으로 돌림 → 파일 하나로 B · D · E · M · CAD 가 함께 바뀜 · 시험 11개가 지키는 값(12/14/16px · 320 · 밝음/어두움/시스템 블록)은 그대로. +3. 공용 부품은 거의 「제자리 다시 칠하기」 — 클래스 · `data-` 그대로(가이드 장면이 `ui-collapsible__title` 78 · `ui-sidebar-actions` 63 · `ui-btn--filled` 13 · `ui-btn--ghost` 11 씀) · PageKit 으로 갈아 끼울 곳 없음 · 탭만 공용 `.ui-tabs` 한 벌 새로(채운 단추 = 고른 탭 규칙 유지). +4. 상세 틀은 값만 — 좌측 패널 = 대시보드 메뉴처럼 1px 선 · 그림자 없음 · 카드 10px · 손잡이만 강조색 · 위 얇은 머리줄은 `--app-header-h` 가 이미 19 파일에 깔려 있어 뒤 단계로 가능(날 `100dvh` 5곳만 손봄). +5. 차례 = 0 토큰(1창 · 먼저) → 1 공용 틀 · 부품 · 아이콘(3창) → 2 페이지별(5창) → 3 머리줄(선택) → 가이드 재촬영 한 번 · 글꼴은 `--font-ui` 한 토큰으로 묶어 Pretendard 결정 뒤 한 줄 교체. + +## ② 항목별 현황(근거) + +### 1. 토큰 두 벌 + +| 구분 | 옛 전역 `ui_template/ui_template_theme.css` | 대시보드 `B01_Dashboard_UI_Style_Shell.css` | +|---|---|---| +| 자리 | `:root`(:12) · CAD `openwebcad/src/App.css:3` 가 import | `.b01-shell` 안만(:2-16) · 시험이 `:root` 금지 · `#1f7a4d` 글자 확인(`test_546_b01_shell.py:106-107`) | +| 강조 | primary = deep-iris #26114a(:19,77) · accent · 초점 = royal-amethyst #3e0079(:21,79-80) | accent #1f7a4d · soft #eaf5ee · 위 글 #fff(:3-5) | +| 바탕 · 카드 | bg = canvas #fff · surface = paper #f6f7fa · raised #fff(:69-71) | bg #f6f7f9 · card #fff(:6-7) | +| 선 · 글 | mist #e6e2e3 · text = deep-iris · body #333 · secondary #615e6e · muted #9491a1(:29,73-76) | line #e6e8ec · text #1f2328 · muted #6b7280(:8-10) | +| 올림 · 위험 | 올림 없음 · danger #c0392b(:40) | hover #f3f4f6 · alert #e5484d(:11-12) | +| 둥긂 · 그림자 | 8 시그니처(:149) · 파랑 끼 여러 겹(:179-189) | 10(:13) · 메뉴만 `0 8px 24px rgba(16,24,40,.12)`(:186) · 카드는 선만 | +| 어두움 | `:root[data-theme=dark]` 보라 끼(:303-342) + 시스템 자동(:345-381) | `:root[data-theme=dark] .b01-shell`(:37-48) 중립 회색 | + +- 셸 안 덮어쓰기 — `--color-bg` · `surface` · `border` · `primary` · `text` 등 10개를 `--b01-*` 로(`Style_Shell.css:19-28`) → 옛 단추 · 카드 · 표가 셸 안에서만 초록 · 셸 밖은 보라. +- 대시보드가 따로 막은 보라 — 단추 hover(`Style_Pages.css:632-638` ← `elements_styles.ts:48,55`) · 알약 색(`Style_Pages.css:431-457` ← `elements_styles.ts:190-194`). +- 하드코딩 보라 — 고르기 화살표 SVG `%233e0079`(`elements_styles.ts:143`) · 가림막 `rgba(38,17,74,…)` 7곳(`elements_styles.ts:203,253` · `modal.css:8` · `overlay.css:541` · `app_shell.ts:469` · `B01_Dashboard_UI_Style.css:275` · `M01_MasterData_UI_Logic_Style.css:340`). +- 흠 — 정의 없는 `--color-muted`(`workflow_layout.css:102`) · `--color-surface-sunken`(`context_menu.css:42,56` · `Style_Projects.css:11`) · 안 쓰는 것 = 그라디언트 3 · `--shadow-feature` · `.ui-wf` 규칙(`elements_styles.ts:276-302` · `createWorkflowShell` 부름 0). +- 사용 수(theme.css 밖) — 옛 이름: canvas 84 · royal-amethyst 67 · mist-violet 51 · slate 24 · deep-iris 20 · paper 17 · plum-velvet 9 / 별칭: border 399 · surface 190 · danger 188 · text 144 · accent 111 · primary 83. +- 값 지키는 시험 — `--text-body-sm: 14px`(164 · 228_1) · `--text-body: 16px` · `--text-caption: 12px`(228_1) · `--wf-left-panel-width: 320px`(173_2) · 어두움 블록 안 canvas · mist · accent · shadow-lg(185_3 · 218_1) · 시스템 블록 안 success · danger(215_1) · warning · success `#` 두 번(177_1 · 198_1 · 247_1) · `--map-route-locked` 개수(391). +- 캔버스가 `--color-primary` 를 읽어 선을 그림 — `B05_Profile_UI_RouteEdit_Recommend_Map.ts:132` · `D03_PlanAnalysis_UI_Map.ts:251` · `E07_StabArea_UI_Map.ts:171` → 초록이 되면 숲 위성 위에서 묻힘. + +### 2. 공용 부품 + +| 부품 | 지금(근거) | 대시보드 짝 | 권함 | +|---|---|---|---| +| 단추 6꼴 | `.ui-btn` filled · ghost · pill · danger · danger-ghost · glass(`elements_styles.ts:17-94`) · hover 보라 고정(:48,55,63) | 같은 `.ui-btn` + hover 덮음(`Style_Pages.css:632-638`) | 제자리 — hover 를 `--color-primary-hover` · `--color-accent-soft` 로 · 꼴 이름 그대로 | +| 입력 · 고르기 | `.ui-input` · `.ui-select` 42px(:97-162) · 화살표 보라(:143) · 좌측 양식 26px(`overlay.css:419-488`) | 같은 부품 · `b01-sys-input` 32px(`Style_Pages.css:476-489`) | 제자리 — 화살표 회색 · 초점 = 토큰 · 높이는 정할 거리 | +| 카드 · 구역 | `.ui-card` 여백 24 · 그림자 · 제목 plum-velvet · font-display(:165-178) | `.b01-pg-card` 선 + 10px · 그림자 없음(`Style_Pages.css:43-47`) | 제자리 — `--card-padding` 16 · 그림자 0 · 제목 글색 | +| 접는 판 | `createPanelCard`(`collapsible.ts:18-24`) · 캐럿 ▾▸ 1.7em 글자(`theme.css:450-471`) · ⚙ 글자(`collapsible.ts:32`) | 셰브런 아이콘(`icons.ts:56`) | 제자리 — 캐럿 = CSS mask 셰브런(TS 안 고침) · ⚙ → `icon("settings")` | +| 표 | 데이터표 28px · 세로선 · 머리 · hover 강조색 섞음(`data_table.css:6-29,54-65`) · 일반표 위아래 12 · 16(`general_layout.css:92-102`) · 손표(M02 16 · M01 11 · E03 5) | `dataTable` 40px · 세로선 없음 · 머리 12px 회색(`PageKit.ts:182` · `Style_Pages.css:51-93`) | 데이터표 = 밀도 그대로 · 머리 `--color-surface` · hover `--color-hover` / 일반표 = PageKit 꼴을 `general_layout.css` 로 옮김(M02 가 클래스 직접 씀 — 교체 불가) | +| 탭 7꼴 | B08 · B09 위 탭 = filled/ghost 단추(`B08_Quantity_UI_Page.ts:120-135` · `B09_Estimation_UI_TabBar.ts:23-40` · css `B08…Page.css:14` · `B09…Page.css:21`) · `.ui-subtabs`(`general_layout.css:59-71`) · `app-settings__tabs`(`app_settings.css:2`) · `m02-sod__tabs`(`M02_SO_Style.css:373`) · 문서 탭 `cad-tabs`(`cad_host_tabs.css:3-40`) · `ss-tabs`(`spreadsheet_toolbar.css:190-233`) | 밑줄 탭 `tabBar`(`PageKit.ts:224-265` · `Style_Pages.css:185-223`) | 공용 `.ui-tabs` 새 규칙(밑줄 꼴 · `.ui-btn--filled` = 고른 탭) + 탭 줄 4곳에 클래스 한 줄 · `.ui-subtabs` = 작은 알약 꼴 · 문서 탭 둘은 꼴 그대로(토큰만) | +| 알약 · 배지 | `.ui-tag` 5색 · 여백 4/16 · mist-violet 바탕(`elements_styles.ts:181-194`) | `badge()`(`PageKit.ts:49`) + 색 규칙(`Style_Pages.css:123-128,431-457`) | B01 색 규칙을 전역으로 올림 · 여백 2/8 | +| 모달 · 확인창 | `openModal`(`modal.ts:28-50`) · 12px · 가림막 보라 · 제목 = 전역 h3 24px(`modal.css:1-66` · `theme.css:531`) · `.ui-confirm`(`elements_styles.ts:247-274`) | 같은 `openModal`(B01 5 파일) | 제자리 — 가림막 토큰 · 제목 16px 600 | +| 토스트 | 단색 4꼴 · info = royal-amethyst(`elements_styles.ts:221-244`) | 같은 `showToast` | 토큰만(info = `--color-info`) | +| 툴팁 | `.ui-hover-info` 2px · 12px(`hover_info.css:6-21`) + `title=` | 없음 | 둥긂 6 · 그림자 `--shadow-lg` | +| ⋯ · 오른쪽 메뉴 | `.ui-ctx-menu`(`context_menu.css:12-62`) | `rowMenu`(`PageKit.ts:100-142` · `Style_Pages.css:131-182`) | 제자리 — `--color-surface-sunken` 정의로 hover 해결 · 줄 둥긂 6 | +| 세그먼트 | 공용 없음 · 페이지마다 filled/ghost 짝 · `.b06-design__seg`(`B06…Cross_Chart.css:250`) | 셋 따로(`b01-home__seg` Home.css:44 · `b01-proj-seg` Projects.css:88 · `b01-sys-seg` Pages.css:522-541) | 새로 안 만듦 — 쓸 페이지가 생길 때 `b01-sys-seg` 를 `.ui-seg` 로 올림 | +| 아래 단추 줄 | `.ui-sidebar-actions`(`overlay.css:317-385`) · B05 · B06 dock 도 같은 클래스(`design_dock.ts:56`) | 없음 | 토큰만 · 바탕 = 패널 바탕 | +| [?][<][>] | ghost 단추 글자 `?` `<` `>`(`help.ts:41,49,322-345,354-374`) · 정사각(`help.css:2-11`) | 머리 아이콘 단추 32 · 선 · 회색(`Style_Shell.css:107-125`) | `help.css` 에서 같은 꼴로 · 글자 유지(시험 = 클래스 · `data-step-nav` 만 봄 `helper_280_2_step_nav.cjs:228`) | + +### 3. 상세 틀(좌측 패널 · 본문 · 아래 줄 · 덮개) + +- 좌측 패널 = `.ui-workflow-overlay__panel--title`(`overlay.css:21-40`) — 흰 바탕 · `--shadow-lg`(:16) · 오른쪽 테두리 = 강조 파랑 75%(:33-37) · 손잡이 파랑 테두리 · 접힘 시 파랑 칠(:156-187) → 대시보드 메뉴(`Style_Shell.css:248-256` 흰 판 · 1px 선 · 그림자 없음)와 다름. +- 바꿀 값(배치 · 동작 그대로) — 판 그림자 0 · 오른쪽 선 `--color-border` · 손잡이 = `--panel-handle-border: var(--color-accent)`(보임 지시 2026-08-04 유지) · 머리 제목 16 → 14px 600 · 프로젝트 이름 12px 회색(:116-143) · 카드 `.ui-sidebar-card` 둥긂 10(:407-411) · 강한 외곽선 `.ui-sidebar-section` 은 섞기 대신 `--color-border-strong`(:392-396 · 흐리다는 보고 두 번 — 너무 옅게 안 함) · 줄 고름 = accent-soft(:519-526 · 별칭으로 자동) · 덮개 = `--color-scrim`(:541). +- 단계 목록(☰ 서랍 안 · `workflow_layout.css:7-108`) — 고름 = mist-violet · accent(:83-86) → 별칭으로 대시보드 메뉴 고름(`Style_Shell.css:275-279`)과 같은 꼴이 됨 · `--color-muted` 흠 고침(:102). +- 본문 `__main` = 흰 canvas(`workflow_layout.css:132-138`) — 지도 · 3D · CAD 라 흰 바탕 유지. +- ☰ 서랍 CSS(`app_shell.ts:445-581` 문자열) — 대시보드 메뉴 줄 꼴(36px 줄 · 8px 둥긂 · 고름 accent-soft)로 맞춤. +- 위 얇은 머리줄(프로젝트 이름 + 단계 막대) — 가능 · 뒤 단계: 지금 B · M 은 머리 0 + ☰ 만 띄움(`device_context.css:89-98` · `app_shell.ts:534-556`) · 높이 계산이 `--app-header-h` 하나(19 파일)라 `html.is-bm-route { --app-header-h: 48px }` 로 판 · 덮개 · 본문이 함께 내려감 · 손볼 곳 = 날 `100dvh` 5곳(`design_page.css:51,84` · `E04…Style.css:8` · `E06…Style.css:15` · `E07…Style.css:8`) · ☰ 들여쓰기 변수(`--app-burger-inset` · `--wf-burger-pad` `workflow_layout.css:143-155`) 0 · 단계 막대는 `createStepBar` 의 `compact` 꼴(`workflow_layout.ts:77`) 재사용 · 패널 머리의 프로젝트 이름(`overlay.ts:148`)과 겹침 정리 · 가이드 그림 전부 바뀜 → 마지막. + +### 4. 글꼴 + +- 지금 — `body { font-family: var(--font-body) }`(`theme.css:504`) · 첫 둘 Inter · Noto Sans KR 은 파일 없음(@font-face 0) → 깔린 PC 만 그 글꼴 · 아니면 Segoe UI + 맑은 고딕 · 대시보드도 글꼴 지정 없음(상속) = 「시스템 글꼴」 · 제목은 `--font-display`(Britti Sans 등 · 역시 없음 · :92-94 · h1~h6 :519 · 쓰는 곳 7). +- Pretendard = SIL OFL 1.1(웹 내장 · 상용 가능 · 글꼴만 팔기 금지) · 허용 목록(BSD · MIT · Apache) 밖 → 결정 대기(`_조사_366-B_대시보드_SaaS.md:95,107` · `PLAN.md:110`). +- 한 줄 교체 설계 — `--font-ui` 하나 · `--font-body` · `--font-display` = `var(--font-ui)` · 코드의 font-family 는 이미 전부 var(인쇄 HTML `spreadsheet_print_html.ts:200` 은 문서 글꼴이라 제외) · 채택 시 `theme.css` 안 `@font-face` 한 블록(상대 경로 woff2) + `--font-ui` 첫 칸 → CAD 도 theme.css 를 import 해 함께 따라옴(CAD 빌드 1번) · 숫자 칸 = `tabular-nums`(`data_table.css:70` 이미). + +### 5. 아이콘(이모지 · 글자 기호 — git 추적 .ts/.css · 주석 · 글 화살표 → ← 뺌) + +| 폴더 | 이모지 | 도형 · 화살표 | 대표 자리 | +|---|---|---|---| +| A00_Common | 29 | 13 | 단계 📍🧭✅ · 🪨📐🧊📄⛰️🗺️(`group_workflow.ts:30,42`) · ☰ ☀ ☾(`app_shell.ts:98,166,221`) · ↶↷(`spreadsheet_toolbar.ts:147,149`) | +| B06 | 11 | 41 | ▲▼◀▶ 미세 이동 · ⚠ · ↺ | +| B05 | 6 | 28 | ✕(`RouteEdit_Chrome.ts:226` · `RouteEdit_Label.ts:175`) · ▲▼ · ⇧⇩ | +| ui_template | 8 | 11 | 📁🗺️🛣️📐∑🏗️📄(`workflow_layout.ts:65`) · 🏠(:88) · ⚙(`collapsible.ts:32`) · ▾▸(`theme.css:460,470`) | +| 글 묶음(locale) | 18 | 15 | `locale_b5.ts` 14 | +| M02 | 13 | 16 | ×(`Hopyo_Ledger.ts:200` · `M02_DF_FuncPanel.ts:339`) · 🔒 | +| B09 · B08 | 2 · 0 | 10 · 1 | ×(`B09_Estimation_UI_Popup.ts:157` · `B08_Quantity_UI_Milestone_LegModal.ts:82`) | +| B07 · B03 · M01 · E03 · D02 · D04 · E06 | 4 · 1 · 1 · 2 · 1 · 0 · 0 | 0 · 8 · 3 · 1 · 0 · 1 · 1 | ⚙ · 📍 단추(`D02_PlanBase_UI_Page.ts:164`) · ×(`D04…Page.ts:196` · `E06…Joints.ts:150`) | + +- 바꾸는 길 — `ui_template_icons.ts`(Tabler MIT · 21개 :30-64)에 약 20개 한 줄씩 더함(map · road · ruler · sum · crane · mapPin · compass · circleCheck · mountain · cube · settings · x · chevronLeft/Right · menu · undo/redo · alert · lock · help) · `PageKit.ts:14-22` 의 6개도 이 파일로 옮겨 중복 없앰. +- 단계 아이콘 — `createStepBar` 의 `icon.textContent = iconText`(`workflow_layout.ts:102-107`) → 아이콘 이름이면 `icon(name, 16)` · 배열 셋(`workflow_layout.ts:65` · `group_workflow.ts:30,42`)을 이름으로. +- 단추 — `createButton({ label, iconStart: icon(…, 16) })`(`elements.ts:39-52` · PageKit 과 같은 길) · 아이콘만 단추 = label "" + title · aria-label. +- 함정 — `.ui-icon` 규칙이 대시보드 CSS 에만 있음(`Style_Shell.css:132-136` · 대시보드를 안 거친 화면엔 없음) → 전역(`elements_styles.ts`)으로 옮김. + +### 6. 어두움 + +- 켜는 법은 이미 하나 — 둘 다 `` + localStorage `frd_theme`(`app_shell.ts:26-42` · `B01_Dashboard_UI_Shell.ts:53-57`) · CAD 도 같은 열쇠(`openwebcad/src/theme.ts:13-36`) · 단 바꾸는 함수가 두 벌 · 단추 셋(`app_shell.ts:97-98,221` · `B01…Shell.ts:127-134`). +- 값이 세 벌 — 전역 어두움(`theme.css:303-342`) · 시스템 자동(:345-381 · `--color-warning` 빠짐 · `index.html:2` `data-theme="light"` 고정이라 사실상 안 쓰임) · 셸 어두움(`Style_Shell.css:37-48`). +- 하나로 — 값은 theme.css 두 블록에만(시스템 블록은 시험 215_1 때문에 두되 같은 값) · 셸 블록 지움 · 바꾸는 함수는 `app_shell.ts` 하나를 내보내 B01 이 부름. + +## ③ 권하는 전역화 설계 + +### 토큰 표(`theme.css` 한 곳 · 「대시보드 별칭」 = `.b01-shell` 안 새 정의) + +| 토큰 | 밝음 | 어두움 | 대시보드 별칭 · 비고 | +|---|---|---|---| +| `--font-ui`(새) | 지금 `--font-body` 줄 그대로 | 같음 | `--font-body` · `--font-display` = `var(--font-ui)` | +| `--color-accent` | #1f7a4d | #3fae75 | `--b01-accent` · focus-ring · panel-handle-border 도 이것 | +| `--color-accent-soft`(새) | #eaf5ee | #173326 | `--b01-accent-soft` | +| `--color-primary` · `-text` | var(accent) · #ffffff | var(accent) · #0e1512 | `--b01-accent-text` | +| `--color-primary-hover`(새) | `color-mix(in srgb, var(--color-primary) 88%, #000)` | `… 85%, #fff` | `Style_Pages.css:632-638` 대체 | +| `--color-bg` | #f6f7f9 | #121417 | `--b01-bg` | +| `--color-surface`(= paper) | #f6f7f9 | #121417 | 얼룩줄 · 표 머리 · 판 바탕 | +| `--color-surface-raised` · `--color-canvas` | #ffffff | #1b1e23 | `--b01-card` | +| `--color-hover`(새) · `--color-surface-sunken`(새 · 별칭) | #f3f4f6 | #242830 | `--b01-hover` | +| `--color-border`(= mist) | #e6e8ec | #2c3038 | `--b01-line` | +| `--color-border-strong`(새 · 제안값) | #cfd4db | #3b414b | 좌측 카드 외곽 · 표 머리 밑줄 | +| `--color-text` · `-body` | #1f2328 | #e6e8eb | `--b01-text` | +| `--color-text-secondary` · `-muted` | #6b7280 | #9aa1ab | `--b01-muted`(셸이 지금도 둘을 한 값으로 씀) | +| `--color-success` | #1f8a4c | #3fbb6f | 그대로 | +| `--color-warning` | #b45309 | #f5a524 | 대시보드 알약 값(`Style_Pages.css:449,456`) | +| `--color-danger` | #e5484d | #f06b6f | `--b01-alert` · 대비는 정할 거리 | +| `--color-info` | #3b82c4 | #6aa6e0(제안) | `--b01-s2` | +| `--color-scrim`(새) | rgba(16,24,40,.40) | rgba(0,0,0,.55) | 가림막 7곳 | +| `--radius-cards` | 10px | — | `--b01-radius` · 단추 · 입력 8 그대로 | +| `--shadow-sm` · `-lg` | 0 1px 2px rgba(16,24,40,.06) · 0 8px 24px rgba(16,24,40,.12) | 지금 값 | 카드는 선만 | +| `--card-padding` | 16px | — | 지금 24 | + +- 옛 이름 — deep-iris · plum-velvet → `var(--color-text)` · royal-amethyst · lavender-wash → `var(--color-accent)` · mist-violet → `var(--color-accent-soft)` · 중립(canvas · paper · mist · smoke · ash · slate · charcoal · carbon · ink)은 새 값을 직접 둠(시험이 어두움 블록 안 canvas · mist 를 봄) · 의미 토큰이 중립을 부르는 지금 방향은 둠 · 「옛 이름 — 새 코드 금지」 주석 · twilight-beam · 그라디언트 3 · shadow-feature 지움. +- 대시보드 — `.b01-shell { --b01-accent: var(--color-accent); … --b01-radius: var(--radius-cards); }` · 배치 값(head-h 48 · nav-w 210 · rail-w 56)은 그대로 · `Style_Shell.css:19-28` · `:37-48` 지움 · `test_546_b01_shell.py:106-107` 을 「theme.css 에 `--color-accent: #1f7a4d;` · 셸에 별칭」으로 고침(까닭은 커밋 글에). + +### 부품 · 틀 표(클래스 이름 그대로 · 값만) + +| 파일 | 바꿀 것 | +|---|---| +| `ui_template_elements_styles.ts` | 단추 hover · 고르기 화살표 회색 · 카드(16 · 그림자 0) · 알약 5색(B01 규칙 이전) · 토스트 info · 가림막 · `.ui-icon` 이전 · `.ui-wf` 지움 | +| `ui_template_theme.css` | 토큰 표 · 캐럿 ▾▸ → mask 셰브런(:450-471) | +| `ui_template_overlay.css` | 판 그림자 · 오른쪽 선 · 머리 글 크기 · 카드 둥긂 · 강한 외곽선 · 덮개 | +| `ui_template_workflow_layout.css` · `ui_template_help.css` | `--color-muted` 흠 · [?][<][>] = 대시보드 아이콘 단추 꼴 | +| `ui_template_general_layout.css` | 제목 32 → 20px 700 · 부제 13 · 바깥 여백 20/24/32(B02 · D01 · E01 · B03 꼴이 대시보드 페이지 머리와 같아짐) · 일반표 = PageKit 표 꼴 · `.ui-tabs` 새 규칙 · `.ui-subtabs` 알약 꼴 | +| `ui_template_modal.css` · `_data_table.css` · `_context_menu.css` · `_hover_info.css` | 제목 16 · 가림막 / 머리 · hover 중립 / hover · 둥긂 / 둥긂 · 그림자 | + +## ④ 단계 · 창 나눔(같은 단계 안 파일 겹침 0 · 단계는 앞 단계 dev 합류 뒤 시작) + +| 단계 | 창 | 이 창만 고치는 파일 | 검증 | +|---|---|---|---| +| 0 토큰 | W0 | `ui_template_theme.css` · `ui_template_elements_styles.ts` · `B01_Dashboard_UI_Style_Shell.css` · `B01_Dashboard_UI_Style_Pages.css`(:430-465 · 631-638만) · `resources/tester/test_546_b01_shell.py` | `npm run typecheck` · 테마 시험 11(164 · 173_2 · 177_1 · 185_3 · 198_1 · 212_3 · 215_1 · 218_1 · 228_1 · 247_1 · 391) + 546 · 549 · 대시보드 홈 · 목록 · 시스템 밝음/어두움 전후 그림이 같음 · B05 · B08 · D03 한 장씩 · `openwebcad` `npm run build` 뒤 B07 한 장 | +| 1 틀 | W1 | `ui_template_overlay.css` · `ui_template_workflow_layout.css` · `ui_template_help.css` · `A00_Common/design/design_dock.css` | 280_2 · 538 · 122 · 302_1 · design_view_parity · B04 · B05 · B08 · E02 · M02 패널 열림/접힘 · 폭 860 · 560 그림 | +| 1 부품 | W2 | `ui_template_general_layout.css` · `_modal.css` · `_data_table.css` · `_context_menu.css` · `_hover_info.css` · `_group_cards.css` · `_tree.css` · `_side_panels.css` | 228_1 · 199_1 · 201_1 · 243_1 · 246_2 · 185_3 · B02 양식 · B08 표 · M02 표 · 모달 · 오른쪽 메뉴 그림 | +| 1 아이콘 · 셸 | W3 | `ui_template_icons.ts` · `ui_template_workflow_layout.ts` · `ui_template_collapsible.ts` · `A00_Common/group_workflow.ts` · `A00_Common/app_shell.ts` · `B01_Dashboard_UI_Shell.ts` · `B01_Dashboard_UI_PageKit.ts` | typecheck · 546 · 549 · 280_2 · ☰ 서랍 · 단계 목록 · 대시보드 머리 그림 · 아이콘 파일은 먼저 push(2단계가 씀) | +| 2 페이지 | P1 | `B02_*` · `B03_*` · `B04_*` · `B07_*`(openwebcad 은 빌드만) | 자기 페이지 시험 · 자기 포트 그림 | +| 2 페이지 | P2 | `A00_Common/design/` · `B05_*` · `B06_*` | 〃 · `test_design_view_parity.py` | +| 2 페이지 | P3 | `B08_*` · `B09_*` · `A00_Common/app_settings.*` | 〃 · 122 · 156_1 · 185_1 · 200_2 · 235_1 | +| 2 페이지 | P4 | `D01~D04_*` · `E01~E07_*` | 〃 | +| 2 페이지 | P5 | `M01_*` · `M02_*` · `A00_Common/spreadsheet/` | 〃 · `test_cad_host_tabs.py` · M02 시험 | +| 3 머리줄(선택) | H1 | `app_shell.ts` · `device_context.css` · `overlay.css`(bm 규칙) · `workflow_layout.css` · `general_layout.css` · `design_page.css` · E04 · E06 · E07 `*_UI_Style.css` | 전 상세 페이지 높이 · 넘침 0 · 터치 모드 그림 | +| 끝 | 1창 | `A05_EduDetail/guide/*` 그림만 | `A05_EduDetail_Guide_Capture.py --page ` 20 페이지 · 장면 셀렉터 깨짐 0 | + +- 2단계 공통 할 일 — 탭 줄에 `ui-tabs` 한 줄(B08 `Page.ts:120` · B09 `TabBar.ts:37` · `app_settings` · `m02-sod__tabs`) · ×✕📍↶↷⚙ → `icon()` · 겉 틀 hex → 토큰(캔버스 · 3D · 지도 그림 색 제외) · `--color-primary` 로 선 그리는 지도 3곳 → 지도 전용 토큰. +- 공용 파일 변경 = 알릴 일 — 0 · 1단계 push 때 쪽지 한 줄. + +## ⑤ 정할 거리 + +- 공개 쪽(A01~A08)도 초록 · 회색 바탕을 함께 받음(theme.css 전역) — 기본 = 같이 바뀜 · 막으려면 `html.is-bm-route` 범위(단 CAD iframe 은 그 클래스 없음). +- 위험색 #e5484d 글 대비 3.9:1(작은 글 AA 미달) — 대시보드 값 통일 vs 글 전용만 #c0392b 유지. +- 좌측 패널 — 흰 판(대시보드 메뉴 꼴) vs 회색 판 + 흰 카드. +- 밀도 — 입력 높이 42 유지 vs 36(대시보드 양식도 같이 바뀜). +- 지도 위 계획선 색 — 지금 보라 primary · 초록이면 숲에 묻힘 → 지도 전용 색 고름. +- 시스템 어두움 따름(`index.html:2` 고정 풀기) 여부. +- 글꼴 — Pretendard(OFL) 허용 여부 · 글꼴 줄을 시스템 먼저로 고정할지(Noto Sans KR 깔린 PC 와 아닌 PC 의 차이). +- 구분 색(임도 · 예정노선 · 안정성 `Style_Projects.css:17-19`)을 전역 토큰으로 올릴지. +- PageKit(⋯ 메뉴 · 빈 상태 · 설정 줄)을 `ui_template` 로 올릴지 — 페이지가 쓸 때만. +- 위 머리줄(3단계) 할지 · 가이드 그림 300장 재촬영 시점(마지막 한 번 권함). diff --git a/docs/raw/요구_1025/_분석_375-B_페이지별_위험.md b/docs/raw/요구_1025/_분석_375-B_페이지별_위험.md new file mode 100644 index 000000000..e58aebe22 --- /dev/null +++ b/docs/raw/요구_1025/_분석_375-B_페이지별_위험.md @@ -0,0 +1,136 @@ +# 375-B 페이지별 손볼 양 · 위험 목록 — 대시보드 테마를 프로젝트 안 화면까지 + +세는 법 — 주석 뺀 원본(`node_modules` · `dist` · `guide` 뺌). 색 = CSS 날값(var 대체값 · `--변수:` 정의 따로) · TS 는 hex+rgb(그림 상수 섞임). 글자 = `font-size: 숫자` · `font: …px`. 기호 = 따옴표 안 그림 이모지 / 화살표 · 도형 기호. 자체 부품 = 페이지 CSS 의 btn · tab · table · badge · chip · pill · tag · toolbar 선택자(ui- 뺌) / `ui-btn` 없는 날 `