feat(m02-cf): 입력 상자 판(renderInputPanel) 이음 · 기계 요소 「키#칸」 은 키와 칸으로 나눠 물음

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

M02_MasterTemplete/CostFlow/M02_CF_Entry.ts

@@ -36,7 +36,8 @@ const loadMods = () =>
     import("./M02_CF_OutputPanel"),
     import("./M02_CF_Summary"),
     import("./M02_CF_Sample"),
-  ]).then(([model, ev, api, diagram, func, output, summary, sample]) => ({
+    import("./M02_CF_InputPanel"),
+  ]).then(([model, ev, api, diagram, func, output, summary, sample, input]) => ({
     model,
     ev,
     api,
@@ -45,6 +46,7 @@ const loadMods = () =>
     output,
     summary,
     sample,
+    input,
   }));
 type Mods = Awaited<ReturnType<typeof loadMods>>;
 
@@ -69,7 +71,6 @@ const TEXT = {
   Diagram: ["다이어그램", "Diagram"],
   Box: ["고른 상자", "Chosen box"],
   PickBox: ["다이어그램에서 상자를 고르면 여기에 그 상자 판이 보임", "Choose a box in the diagram"],
-  InputSoon: ["입력 상자 판은 곧 붙음", "The input box panel is coming"],
   Summary: ["원가", "Cost"],
   NoName: ["로직 이름을 넣어 주세요", "Enter a logic name"],
   SaveAnyway: [
@@ -128,11 +129,13 @@ function queriesOf(lg: CfLogic): { q: CfQuery; box: string; port: string }[] {
     const group = inp.group;
     const els = inp.elements
       .filter((e) => e.ref && !e.ref.startsWith("UE-"))
-      .map((e) => ({
-        q: { id: `${b.id}\u0001${e.name}`, group, ref: e.ref, unit: e.unit },
-        box: b.id,
-        port: e.name,
-      }));
+      .map((e) => {
+        // 기계 요소는 「키#값 칸」 — 서버에는 키와 칸(field)을 따로 넘김
+        const [ref, field] = group === "기계" ? e.ref.split("#") : [e.ref, undefined];
+        const q: CfQuery = { id: `${b.id}\u0001${e.name}`, group, ref, unit: e.unit };
+        if (field) q.field = field;
+        return { q, box: b.id, port: e.name };
+      });
     const table = inp.table
       ? [{ q: { id: `${b.id}\u0001표`, group, table: inp.table }, box: b.id, port: "표" }]
       : [];
@@ -327,7 +330,7 @@ function openCostFlow(): void {
     // 판마다 제 상태를 쥠 — 종류마다 따로 두고 숨기기만(갈아끼우면 편집기가 있다고 여김)
     const funcHost = el("div");
     const outHost = el("div");
-    const inHost = el("div", { children: [muted(te("InputSoon"))] });
+    const inHost = el("div");
     const summaryHost = el("div");
 
     const evalNow = (): CfEvalResult => {
@@ -415,6 +418,7 @@ function openCostFlow(): void {
       funcHost.hidden = box?.kind !== "function";
       outHost.hidden = box?.kind !== "output";
       inHost.hidden = box?.kind !== "input";
+      if (box?.kind === "input") M.input.renderInputPanel(inHost, lg, box.id, { change: edit });
       if (box?.kind === "function") M.func.renderFuncPanel(funcHost, lg, box.id, { change: edit });
       if (box?.kind === "output")
         M.output.renderOutputPanel(outHost, lg, box.id, { change: edit }, { result });