diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.css b/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.css index 41743b472..faf687b08 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.css +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.css @@ -17,6 +17,12 @@ gap: var(--spacing-8); } +/* 아이콘 단추(128-1) — 기호 하나 · 정사각에 가깝게 */ +.m02-labordg__icon { + min-width: 1.75rem; + font-size: var(--text-body); +} + .m02-labordg__zoom { min-width: 3em; font-weight: var(--font-weight-bold); diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.ts index 4b464ba3d..c1194b438 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.ts @@ -251,6 +251,14 @@ function mountShell(host: HTMLElement): State { children: [world], }); const label = el("span", { className: "m02-labordg__zoom" }); + /** 아이콘 단추(128-1) — 공용 단추 + B05 · B06 확대 단추와 같은 기호 · 글은 title · aria-label */ + const icon = (glyph: string, key: keyof typeof TEXT, onClick: () => void): HTMLButtonElement => { + const b = createButton({ label: glyph, variant: "ghost", size: "sm", onClick }); + b.classList.add("m02-labordg__icon"); + b.title = td(key); + b.setAttribute("aria-label", td(key)); + return b; + }; const st: State = { view: { x: 0, y: 0, zoom: 1, fitted: false }, viewport, @@ -263,24 +271,9 @@ function mountShell(host: HTMLElement): State { el("div", { className: "m02-labordg__bar", children: [ - createButton({ - label: td("Zoom_Out"), - variant: "ghost", - size: "sm", - onClick: () => zoomAt(st, 1 / 1.2), - }), - createButton({ - label: td("Zoom_In"), - variant: "ghost", - size: "sm", - onClick: () => zoomAt(st, 1.2), - }), - createButton({ - label: td("Fit"), - variant: "ghost", - size: "sm", - onClick: () => fit(st, true), - }), + icon("−", "Zoom_Out", () => zoomAt(st, 1 / 1.2)), + icon("+", "Zoom_In", () => zoomAt(st, 1.2)), + icon("⤢", "Fit", () => fit(st, true)), label, el("span", { className: "m02-labordg__hint", text: td("Hint") }), ],