From d0a75a39e7eef404bedebabf99df319641a2a5db Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Thu, 8 Oct 2026 20:03:56 +0900
Subject: [PATCH] =?UTF-8?q?feat(M02):=20=EA=B5=AC=EC=A1=B0=EB=AC=BC=20?=
 =?UTF-8?q?=EC=A1=B0=ED=95=A9=20=EB=8B=A4=EC=9D=B4=EC=96=B4=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=A8=20[=EC=9E=91=EA=B2=8C]=20=C2=B7=20[=ED=81=AC=EA=B2=8C?=
 =?UTF-8?q?]=20=C2=B7=20[=ED=95=9C=EB=88=88=EC=97=90]=20=3D=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EB=8B=A8=EC=B6=94(=E2=88=92=20=C2=B7=20+?=
 =?UTF-8?q?=20=C2=B7=20=E2=A4=A2=20=C2=B7=20=EA=B8=80=EC=9D=80=20title=20?=
 =?UTF-8?q?=C2=B7=20aria-label)(128-1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7
---
 .../M02_MasterTemplete_Labor_Diagram.css      |  6 ++++
 .../M02_MasterTemplete_Labor_Diagram.ts       | 29 +++++++------------
 2 files changed, 17 insertions(+), 18 deletions(-)

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") }),
       ],