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 {