feat(M02-흐름도): 함수 판 식 보기 · 칸 연결 표 · 칸 색 · 조건 만들기 연결 + 선 조건 여러 줄(그리고/또는 · 값 목록 고르기 · 범위 검사)

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

M02_MasterTemplete/DataFlow/M02_DF_FuncPanel.ts

@@ -14,6 +14,8 @@ import type {
   Workbook,
 } from "../../A00_Common/spreadsheet/spreadsheet";
 import type { CfBox, CfFunc, CfLogic, CfRound, CfVariable } from "./M02_DF_Model";
+import type { DetailOptions } from "./M02_DF_Detail";
+import { conditionsOf, drawCells, drawFormula, type ExtraContext } from "./M02_DF_FuncExtra";
 import { createRoundRow } from "./M02_DF_RoundRow";
 import { createUnitPick, suggestPlaces } from "./M02_DF_UnitPick";
 import { ERR_KEY, FRAMES, TEXT, tf } from "./M02_DF_FuncText";
@@ -37,6 +39,8 @@ interface State {
   lg: CfLogic;
   on: Handlers;
   readOnly: boolean;
+  /** 셈에 넘길 것 — 값 묶음 · 다른 로직들 */
+  detail: DetailOptions;
   handle: SpreadsheetHandle | null;
   /** 수식 칸 계산값 — 바뀐 뒤에만 새로 받음(받으면 격자가 다시 그려져, 표시 쪽에서 부르면 맴돎) */
   snap: CalcValues;
@@ -48,6 +52,8 @@ interface State {
   suggest: number | null;
   parts: {
     head: HTMLElement;
+    formula: HTMLElement;
+    cells: HTMLElement;
     got: HTMLElement;
     vars: HTMLElement;
     bar: HTMLElement;
@@ -201,6 +207,20 @@ function problems(st: State): string[] {
   return out;
 }
 
+/* ------------------------------ 식 보기 · 칸 연결 표 · 조건 만들기 ------------------------------ */
+
+/** 보조 파일(M02_DF_FuncExtra)에 넘기는 손잡이 */
+const extra = (st: State): ExtraContext => ({
+  lg: st.lg,
+  boxId: st.boxId,
+  detail: st.detail,
+  readOnly: st.readOnly,
+  place: (port, cell) => placePort(st, port, cell),
+  setOutput: (cell) => setOutput(st, cell),
+  patch: (make) => patchFunc(st, make),
+  used: (f) => usedCells(f),
+});
+
 /* ------------------------------ 칸 위 표시 ------------------------------ */
 
 function applyMarks(st: State): void {
@@ -563,6 +583,7 @@ async function mountSheet(st: State): Promise<void> {
     preview: true,
     tabs: false,
     readOnly: st.readOnly,
+    conditions: conditionsOf(extra(st)),
     onChange: (b) => onBook(st, b),
     onSelect: (s) => {
       st.cell = s.칸;
@@ -593,13 +614,14 @@ export function renderFuncPanel(
   lg: CfLogic,
   boxId: string,
   on: Handlers,
-  opts: { readOnly?: boolean } = {},
+  opts: DetailOptions & { readOnly?: boolean } = {},
 ): void {
   const old = states.get(host);
   const readOnly = !!opts.readOnly;
   if (old && old.boxId === boxId && old.readOnly === readOnly) {
     old.lg = lg;
     old.on = on;
+    old.detail = opts;
     const f = funcOf(old);
     if (old.handle && f && sheetJson(f) !== old.json) {
       old.json = sheetJson(f);
@@ -615,6 +637,8 @@ export function renderFuncPanel(
   }
   const parts: State["parts"] = {
     head: el("div", { className: "m02-dfpanel-head" }),
+    formula: el("div"),
+    cells: el("div"),
     got: el("div", { className: "m02-dfpanel-row" }),
     vars: el("div", { className: "m02-dfpanel-vars" }),
     bar: el("div", { className: "m02-dfpanel-bar" }),
@@ -626,6 +650,7 @@ export function renderFuncPanel(
     lg,
     on,
     readOnly,
+    detail: opts,
     handle: null,
     snap: {},
     json: "",
@@ -639,12 +664,22 @@ export function renderFuncPanel(
       drawGot(st);
       drawVars(st);
       drawBar(st);
+      drawFormula(st.parts.formula, extra(st));
+      drawCells(st.parts.cells, extra(st));
       applyMarks(st);
     },
   };
   states.set(host, st);
   host.classList.add("m02-dfpanel");
-  host.replaceChildren(parts.head, parts.got, parts.vars, parts.bar, parts.msg, parts.sheet);
+  host.replaceChildren(
+    parts.head,
+    parts.formula,
+    parts.got,
+    parts.vars,
+    parts.bar,
+    parts.msg,
+    el("div", { className: "m02-dfpanel-body", children: [parts.sheet, parts.cells] }),
+  );
   parts.msg.hidden = true;
   st.redraw();
   void mountSheet(st);