refactor(E04): 보기 고르기 · 구간 줄 · 결과 값 목록 · 범례 판 · 진행 막대 · 띠 알림을 부품으로 (PLAN 553-4)

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

E04_Stab3D/E04_Stab3D_UI_View3D.ts

@@ -9,7 +9,9 @@
 
 import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { createCheckbox } from "@ui/ui_template_checkbox";
 import { createTerrainCompass } from "@ui/ui_template_compass";
+import { createFloatPanel } from "@ui/ui_template_float_panel";
 import { el } from "@ui/ui_template_elements";
 import { t } from "@ui/ui_template_locale";
 import {
@@ -46,13 +48,13 @@ export function createView3D(): View3D {
   const canvas = el("canvas", { className: "e04-view3d__canvas" });
   const compass = createTerrainCompass({ sizePx: 88, className: "e04-view3d__compass" });
   // [임계 활동면] 켬 = 활동체를 걷어낸 지표 + 잘린 활동면(Scoops3D 꼴) · 끔 = 원래 지표
-  const slipToggle = el("input", { attrs: { type: "checkbox" } });
-  slipToggle.checked = true;
-  const tools = el("div", { className: "e04-view3d__tools" });
-  const label = el("label", { className: "e04-view3d__toggle" });
-  label.append(slipToggle, el("span", { text: t("E04_SlipSurface") }));
-  tools.append(label);
-  root.append(canvas, compass.root, tools);
+  const slipBox = createCheckbox(t("E04_SlipSurface"), { checked: true });
+  const slipToggle = slipBox.input;
+  slipBox.root.classList.add("e04-view3d__toggle");
+  const tools = createFloatPanel({ popover: true });
+  tools.root.classList.add("e04-view3d__tools");
+  tools.body.append(slipBox.root);
+  root.append(canvas, compass.root, tools.root);
 
   const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
   renderer.setPixelRatio(window.devicePixelRatio || 1);