feat(m02-df): 입력 판 단위 칸을 UnitPick 으로 — 변수 · 새 요소 · DF 길로 확인

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019ACSGaHdLgnkEkoA4LDtMU

M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css

@@ -143,3 +143,9 @@
   max-height: 24vh;
   overflow: auto;
 }
+
+.m02-dfip__unitfield {
+  display: flex;
+  gap: var(--spacing-8);
+  align-items: center;
+}

M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts

@@ -38,6 +38,7 @@ import {
   type M01Row,
 } from "./M02_DF_InputPanel_Build";
 import { renderLogicInput } from "./M02_DF_InputPanel_Logic";
+import { NO_UNIT, createUnitPick } from "./M02_DF_UnitPick";
 import { renderMaterial } from "./M02_DF_InputPanel_Material";
 import { renderTablePick } from "./M02_DF_InputPanel_Table";
 import { renderVariables } from "./M02_DF_InputPanel_Vars";
@@ -417,7 +418,18 @@ function newForm(
 ): HTMLElement {
   const name = createInputField({ type: "text", label: t("NewName"), compact: true });
   const spec = createInputField({ type: "text", label: t("NewSpec"), compact: true });
-  const unit = createInputField({ type: "text", label: t("NewUnit"), compact: true });
+  let unitValue = "";
+  const unit = el("div", { className: "m02-dfip__unitfield" });
+  const drawUnit = (): void =>
+    unit.replaceChildren(
+      el("span", { className: "m02-dfip__muted", text: t("NewUnit") }),
+      createUnitPick({
+        value: unitValue || NO_UNIT,
+        ariaLabel: t("NewUnit"),
+        onPick: (u) => ((unitValue = u === NO_UNIT ? "" : u), drawUnit()),
+      }),
+    );
+  drawUnit();
   const value = createInputField({ type: "text", label: t("NewValue"), compact: true });
   const go = createButton({
     label: t("Make"),
@@ -432,7 +444,7 @@ function newForm(
         group,
         name: name.input.value.trim(),
         spec: spec.input.value.trim(),
-        unit: unit.input.value.trim(),
+        unit: unitValue,
         value: n,
       }).then(
         (made) => {
@@ -455,14 +467,7 @@ function newForm(
   });
   const d = el("details", {
     className: "m02-dfip__new",
-    children: [
-      el("summary", { text: t("NewHead") }),
-      name.root,
-      spec.root,
-      unit.root,
-      value.root,
-      go,
-    ],
+    children: [el("summary", { text: t("NewHead") }), name.root, spec.root, unit, value.root, go],
   });
   return d;
 }

M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts

@@ -7,6 +7,7 @@
 import { currentLanguageIndex } from "@ui/ui_template_locale";
 import { createButton, createInputField, createSelectField, el } from "@ui/ui_template_elements";
 import type { CfLogic, CfVariable } from "./M02_DF_Model";
+import { NO_UNIT, createUnitPick } from "./M02_DF_UnitPick";
 import { checkVariable, putVariable, removeVariable } from "./M02_DF_InputPanel_Build";
 
 const TEXT = {
@@ -84,13 +85,19 @@ export function renderVariables(
       compact: true,
       onChange: () => paint(),
     });
-    const unit = createInputField({
-      type: "text",
-      label: t("Unit"),
-      value: cur?.unit ?? "",
-      placeholder: "예: ㎡",
-      compact: true,
-    });
+    // 단위 = 고르기만(표준 단위 목록) — 손글 안 받음
+    let unitValue = cur?.unit ?? "";
+    const unit = el("div", { className: "m02-dfip__unitfield" });
+    const drawUnit = (): void =>
+      unit.replaceChildren(
+        el("span", { className: "m02-dfip__muted", text: t("Unit") }),
+        createUnitPick({
+          value: unitValue || NO_UNIT,
+          ariaLabel: t("Unit"),
+          onPick: (u) => ((unitValue = u === NO_UNIT ? "" : u), drawUnit()),
+        }),
+      );
+    drawUnit();
     const lo = createInputField({
       type: "text",
       label: t("Min"),
@@ -129,7 +136,7 @@ export function renderVariables(
       const v: CfVariable = {
         name: name.input.value.trim(),
         type: ty,
-        unit: unit.input.value.trim(),
+        unit: unitValue,
         example: ex === "" ? null : ty === "number" ? (numOf(ex) ?? ex) : ex,
         ...(ty === "number" && numOf(lo.input.value) !== null && numOf(hi.input.value) !== null
           ? { range: [Number(lo.input.value), Number(hi.input.value)] as [number, number] }
@@ -164,7 +171,7 @@ export function renderVariables(
       children: [
         name.root,
         type.root,
-        unit.root,
+        unit,
         extra,
         example.root,
         el("div", { className: "m02-dfip__chips", children: cancel ? [ok, cancel] : [ok] }),