refactor(E03·E04·E07): 지도 값 풍선을 툴팁 부품으로 (PLAN 553-4)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

E03_StabSection/E03_StabSection_UI_Section.ts

@@ -11,6 +11,7 @@ import "./E03_StabSection_UI_Walls.css";
 import "./E03_StabSection_UI_Support.css";
 import { t } from "@ui/ui_template_locale";
 import { el } from "@ui/ui_template_elements";
+import { tooltipBox } from "@ui/ui_template_hover_info";
 import { legend, muted } from "./E03_StabSection_UI_Parts";
 import { attachSvgZoomPan, type ZoomPanState } from "../A00_Common/b_svg_zoom_pan";
 import {
@@ -113,7 +114,8 @@ export interface SectionCanvas {
 
 export function createSectionCanvas(onPick: (index: number | null) => void): SectionCanvas {
   const root = el("div", { className: "e03-section" });
-  const tip = el("div", { className: "e03-tip" });
+  const tip = tooltipBox("");
+  tip.classList.add("e03-tip");
   let last: SectionDraw | null = null;
   let zoom: ZoomPanState | undefined;
   let zoomKey = "";

E03_StabSection/E03_StabSection_UI_Style.css

@@ -350,17 +350,11 @@
   font-size: 11px;
 }
 
-.e03-tip {
+/* 값 풍선 모양은 툴팁 부품 — 자리만 */
+.e03-section .e03-tip {
   position: absolute;
-  pointer-events: none;
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-  font-size: var(--text-body-sm);
-  white-space: nowrap;
   display: none;
+  white-space: nowrap;
 }
 
 /* ---- 우측 결과 ---- */

E04_Stab3D/E04_Stab3D_UI_Map.ts

@@ -6,6 +6,7 @@
  * ========================================================================== */
 
 import { el } from "@ui/ui_template_elements";
+import { tooltipBox } from "@ui/ui_template_hover_info";
 import { t } from "@ui/ui_template_locale";
 import { cutCells, footprintCenter } from "./logic/E04_Stab3D_Mesh";
 import {
@@ -50,7 +51,8 @@ const css = (name: string, fallback: string): string =>
 export function createPlanMap(): PlanMap {
   const root = el("div", { className: "e04-map" });
   const canvas = el("canvas", { className: "e04-map__canvas" });
-  const tip = el("div", { className: "e04-map__tip" });
+  const tip = tooltipBox("");
+  tip.classList.add("e04-map__tip");
   const empty = el("p", { className: "e04-map__empty", text: t("E04_Map_Empty") });
   tip.hidden = true;
   root.append(canvas, tip, empty);

E04_Stab3D/E04_Stab3D_UI_Style.css

@@ -61,16 +61,9 @@
   cursor: grab;
 }
 
-.e04-map__tip {
+/* 값 풍선 모양은 툴팁 부품 — 자리만 */
+.e04-map .e04-map__tip {
   position: absolute;
-  padding: var(--spacing-4) var(--spacing-8);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  font-size: 12px;
-  white-space: pre;
-  pointer-events: none;
 }
 
 .e04-map__empty {

E07_StabArea/E07_StabArea_UI_Map.ts

@@ -5,6 +5,7 @@
  * ========================================================================== */
 
 import { el } from "@ui/ui_template_elements";
+import { tooltipBox } from "@ui/ui_template_hover_info";
 import { t, type LocaleKey } from "@ui/ui_template_locale";
 import { CLASS_KEYS, cellIndex, rasterRgba, type Decoded } from "./logic/E07_StabArea_Raster";
 
@@ -41,7 +42,8 @@ const css = (name: string, fallback: string): string =>
 export function createAreaMap(): AreaMap {
   const root = el("div", { className: "e07-map" });
   const canvas = el("canvas", { className: "e07-map__canvas" });
-  const tip = el("div", { className: "e07-map__tip" });
+  const tip = tooltipBox("");
+  tip.classList.add("e07-map__tip");
   const empty = el("p", { className: "e07-map__empty", text: t("E07_Map_Empty") });
   tip.hidden = true;
   root.append(canvas, tip, empty);

E07_StabArea/E07_StabArea_UI_Style.css

@@ -45,16 +45,9 @@
   cursor: grab;
 }
 
-.e07-map__tip {
+/* 값 풍선 모양은 툴팁 부품 — 자리만 */
+.e07-map .e07-map__tip {
   position: absolute;
-  padding: var(--spacing-4) var(--spacing-8);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  font-size: 12px;
-  white-space: pre;
-  pointer-events: none;
 }
 
 .e07-map__empty {

resources/tester/test_553_4_de_parts.py

@@ -202,3 +202,22 @@ def test_e07_parts():
         ".e07-progress {",
     ):
         assert dead not in css, dead
+
+
+def test_map_tips_use_tooltip_part():
+    for path, hook in (
+        ("E03_StabSection/E03_StabSection_UI_Section.ts", "e03-tip"),
+        ("E04_Stab3D/E04_Stab3D_UI_Map.ts", "e04-map__tip"),
+        ("E07_StabArea/E07_StabArea_UI_Map.ts", "e07-map__tip"),
+    ):
+        ts = _src(path)
+        assert 'tooltipBox("")' in ts and f'classList.add("{hook}")' in ts, path
+    for path, dead in (
+        (
+            "E03_StabSection/E03_StabSection_UI_Style.css",
+            "background: var(--color-surface);\n  border:",
+        ),
+        ("E04_Stab3D/E04_Stab3D_UI_Style.css", "white-space: pre;"),
+        ("E07_StabArea/E07_StabArea_UI_Style.css", "white-space: pre;"),
+    ):
+        assert dead not in _src(path).replace("\r\n", "\n"), path