From a5bde66bd391f11f44fac1d7cf50b893bb962e3e Mon Sep 17 00:00:00 2001 From: umsangdon Date: Mon, 26 Oct 2026 22:17:44 +0900 Subject: [PATCH] =?UTF-8?q?style(cad=5Fhost):=20CAD=20=ED=83=AD=20=C3=97?= =?UTF-8?q?=20=C2=B7=20+=20=EB=A5=BC=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=8B=A8=EC=B6=94=20=EA=BC=B4=EB=A1=9C=20=C2=B7=20=EB=8F=84?= =?UTF-8?q?=EA=B0=81=20=ED=8E=B8=EC=A7=91=20=EB=8B=A8=EC=B6=94=2024=20?= =?UTF-8?q?=C2=B7=20=EB=82=A0=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20=C2=B7=20?= =?UTF-8?q?=EB=B3=B4=EB=9D=BC=20=EB=B3=84=EC=B9=AD=20=E2=86=92=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EA=B0=92=20(PLAN=20553-6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 탭 줄 × = 아이콘 단추(18) · + = 아이콘 단추(22) — 문서 탭 꼴은 그대로 · 자체 단추 CSS 지움 - 도각 편집 띠 [완료 · 파일 불러오기 · 기본 도각 복원 · 취소] = 부품 단추 24(자체 여백 · 글 크기 지움) - 불러오는 중 상자 그림자 = --shadow-lg · 오류 색 날 값 지움 · 시트 표(ui-sheet) 켬 색 · 안내 글 = 공통 값 - 시험 test_cad_host_tabs 가 클래스 여럿 붙은 단추를 찾게 고침 · B07 전후 촬영 CAD 안 배치 0 바뀜 · 바탕 색 같음 Co-Authored-By: Claude Opus 5.5 --- resources/tester/test_cad_host_tabs.py | 6 +++--- ui_template/cad_host/cad_host.css | 10 ++++------ ui_template/cad_host/cad_host_frame_edit.ts | 4 ++++ ui_template/cad_host/cad_host_tabs.css | 20 +------------------- ui_template/cad_host/cad_host_tabs.ts | 6 ++++-- ui_template/sheet/ui_template_sheet.css | 4 ++-- 6 files changed, 18 insertions(+), 32 deletions(-) diff --git a/resources/tester/test_cad_host_tabs.py b/resources/tester/test_cad_host_tabs.py index bcffbcd31..5efd4d11c 100644 --- a/resources/tester/test_cad_host_tabs.py +++ b/resources/tester/test_cad_host_tabs.py @@ -81,7 +81,7 @@ const tabsMod = load("ui_template/cad_host/cad_host_tabs.ts", { "@ui/ui_template out.fixedX = tabNode("a").kids.length; // 고정 탭 = 글만(지우기 없음) // ③ 지우기 — 물음 뒤 · 지금 탭이면 다음 탭을 실음 await tabs.select("c"); - const xc = tabNode("c").kids.find((k) => k.className === "cad-tabs__x"); + const xc = tabNode("c").kids.find((k) => k.className.split(" ").includes("cad-tabs__x")); await xc.on.click({ stopPropagation() {} }); out.afterRemove = { ids: tabs.tabs().map((t) => t.id), active: tabs.active().id, confirms: confirms.length }; // ④ [+] — create 없으면 아무것도 안 함 · 닫기 기능(B07) = 미저장 탭만 물음 @@ -97,7 +97,7 @@ const tabsMod = load("ui_template/cad_host/cad_host_tabs.ts", { "@ui/ui_template await closer.open({ id: "d1", name: "종단" }); const before = confirms.length; const d2 = closer.element.kids.find((k) => k.dataset.tabId === "d2"); - await d2.kids.find((k) => k.className === "cad-tabs__x").on.click({ stopPropagation() {} }); + await d2.kids.find((k) => k.className.split(" ").includes("cad-tabs__x")).on.click({ stopPropagation() {} }); const last = closer.element.kids.find((k) => k.dataset.tabId === "d1").kids.length; // 마지막 탭 = 닫기 없음 out.b07 = { log: b07, asked: confirms.length - before, ids: closer.tabs().map((t) => t.id), last }; @@ -137,7 +137,7 @@ const tabsMod = load("ui_template/cad_host/cad_host_tabs.ts", { "@ui/ui_template }); await new Promise((r) => setTimeout(r, 5)); const bar = host.kids[0].kids.find((k) => k.className === "cad-tabs"); - const plus = bar.kids.find((k) => k.className === "cad-tabs__add"); + const plus = bar.kids.find((k) => k.className.split(" ").includes("cad-tabs__add")); await plus.on.click(); await new Promise((r) => setTimeout(r, 5)); inCad = { ...inCad, entities: [...inCad.entities, { type: "Circle" }] }; // 새 장에 하나 그림 diff --git a/ui_template/cad_host/cad_host.css b/ui_template/cad_host/cad_host.css index 282198718..9b53aff16 100644 --- a/ui_template/cad_host/cad_host.css +++ b/ui_template/cad_host/cad_host.css @@ -24,7 +24,7 @@ padding: 10px 18px; border-radius: var(--radius-cards); background-color: var(--color-surface); - box-shadow: 0 2px 10px rgb(0 0 0 / 18%); + box-shadow: var(--shadow-lg); color: var(--color-text); font-size: 13px; } @@ -38,10 +38,10 @@ transform: translateX(-50%); max-width: 70%; padding: 8px 16px; - border: 1px solid var(--color-danger, #d33); + border: 1px solid var(--color-danger); border-radius: var(--radius-cards); background-color: var(--color-surface); - color: var(--color-danger, #d33); + color: var(--color-danger); font-size: 12px; } @@ -86,7 +86,7 @@ } .cad-frame-edit__label { - font-size: 0.78rem; + font-size: var(--text-caption); line-height: 1.4; color: var(--color-text); } @@ -99,8 +99,6 @@ .cad-frame-edit__buttons > button { flex: 1 1 0; min-width: 0; - padding: 4px 8px; - font-size: 0.78rem; } /* 작도 영역 숫자 칸 넷(169-1 · `cad_host_area.ts`) — 두 줄 두 칸 */ diff --git a/ui_template/cad_host/cad_host_frame_edit.ts b/ui_template/cad_host/cad_host_frame_edit.ts index ec2f12eba..4a110fd98 100644 --- a/ui_template/cad_host/cad_host_frame_edit.ts +++ b/ui_template/cad_host/cad_host_frame_edit.ts @@ -86,6 +86,7 @@ export function createFrameTemplateEditor( const finishButton = createButton({ label: "완료", variant: "filled", + size: 24, onClick: () => void finish(), }); /** @@ -95,6 +96,7 @@ export function createFrameTemplateEditor( const resetButton = createButton({ label: "기본 도각 복원", variant: "ghost", + size: 24, onClick: () => void resetToDefault(), }); /** @@ -111,12 +113,14 @@ export function createFrameTemplateEditor( const importButton = createButton({ label: "파일 불러오기", variant: "ghost", + size: 24, onClick: () => fileInput.click(), }); const cancelButton = createButton({ label: "취소", variant: "ghost", + size: 24, onClick: () => leave(), }); const bannerButtons = document.createElement("div"); diff --git a/ui_template/cad_host/cad_host_tabs.css b/ui_template/cad_host/cad_host_tabs.css index abc753155..0efc12b83 100644 --- a/ui_template/cad_host/cad_host_tabs.css +++ b/ui_template/cad_host/cad_host_tabs.css @@ -66,28 +66,10 @@ font: inherit; } -.cad-tabs__x, -.cad-tabs__add { - padding: 0 4px; - border: none; - border-radius: 4px; - background: transparent; - color: var(--color-text-secondary); - font-size: 14px; - line-height: 1; - cursor: pointer; -} - -.cad-tabs__x:hover, -.cad-tabs__add:hover { - background: var(--color-surface-raised); - color: var(--color-text); -} - +/* × · + = 아이콘 단추 부품(18 · 22) — 여기는 자리만(553-6) */ .cad-tabs__add { align-self: center; margin-left: 2px; - font-size: 16px; } .cad-tabs[data-busy="true"] .cad-tabs__tab { diff --git a/ui_template/cad_host/cad_host_tabs.ts b/ui_template/cad_host/cad_host_tabs.ts index 9140d49fc..a40b6c1c4 100644 --- a/ui_template/cad_host/cad_host_tabs.ts +++ b/ui_template/cad_host/cad_host_tabs.ts @@ -233,7 +233,8 @@ export function createCadTabs(options: CadTabsOptions): CadTabs { if ((features.remove || (features.close && list.length > 1)) && !tab.fixed) { const x = document.createElement("button"); x.type = "button"; - x.className = "cad-tabs__x"; + x.className = "ui-icon-btn ui-icon-btn--ghost cad-tabs__x"; // 아이콘 단추 부품 꼴(553-6) + x.dataset.size = "18"; x.textContent = "×"; x.title = x.ariaLabel = features.remove ? text.remove : text.close; x.addEventListener("click", (event) => { @@ -272,7 +273,8 @@ export function createCadTabs(options: CadTabsOptions): CadTabs { if (features.add) { const plus = document.createElement("button"); plus.type = "button"; - plus.className = "cad-tabs__add"; + plus.className = "ui-icon-btn ui-icon-btn--ghost cad-tabs__add"; + plus.dataset.size = "22"; plus.textContent = "+"; plus.title = plus.ariaLabel = text.add; plus.disabled = busy; diff --git a/ui_template/sheet/ui_template_sheet.css b/ui_template/sheet/ui_template_sheet.css index e9163a6f1..e100d1634 100644 --- a/ui_template/sheet/ui_template_sheet.css +++ b/ui_template/sheet/ui_template_sheet.css @@ -18,13 +18,13 @@ } .ui-sheet__toolbar .ui-btn.is-on { - background: var(--color-mist-violet); + background: var(--color-accent-soft); } .ui-sheet__hint { margin: 0; color: var(--color-text-secondary); /* muted 는 작은 글에 대비 3:1 — 모자람 */ - font-size: 0.8rem; + font-size: var(--text-caption); } .ui-sheet__scroll {