feat(M01): 「로직 쉽게 보기·만들기」·「로직 흐름 보기」 컨테이너와 계산 코드 걷음 · 정본 로직 화면 복사본 「로직 개선 시험」 컨테이너 더함

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016WRFJmmhPi4exAzHgPZHMT
This commit is contained in:
2026-09-21 19:26:58 +09:00
co-authored by Claude Sonnet 5
parent 472a63cfde
commit 5b69324207
24 changed files with 471 additions and 4242 deletions
+12 -30
View File
@@ -54,8 +54,7 @@ function buildPage(): HTMLElement {
let query = "";
let dispose = (): void => {};
let logicMounted = false;
let easyMounted = false;
let cviewMounted = false;
let labMounted = false;
/* --- 우측: 머리(제목·찾기·저장) + 알림 + 본문 --- */
const title = el("h2", { className: "m01-master__title", text: L("M01_PickFile") });
@@ -71,8 +70,7 @@ function buildPage(): HTMLElement {
children: [title, searchField.root, summary, drop, save],
});
const logicHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
const easyHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
const cviewHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
const labHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
const elementView = el("div", {
className: "m01-master__elements",
children: [head, notice, body],
@@ -90,10 +88,9 @@ function buildPage(): HTMLElement {
onDraftChange(refreshBar);
refreshBar();
const showMode = (mode: "elements" | "logic" | "easy" | "cview"): void => {
const showMode = (mode: "elements" | "logic" | "lab"): void => {
logicHost.hidden = mode !== "logic";
easyHost.hidden = mode !== "easy";
cviewHost.hidden = mode !== "cview";
labHost.hidden = mode !== "lab";
elementView.hidden = mode !== "elements";
};
@@ -199,34 +196,19 @@ function buildPage(): HTMLElement {
});
};
/** 「로직 쉽게 보기·만들기」 — 같은 로직 목록에 방식 C 흐름 그림 + 새로 만들기 모달 */
const openEasyTab = (): void => {
/** 「로직 개선 시험」 — 정본 로직 화면의 복사본(개선은 여기서만) */
const openLabTab = (): void => {
dispose();
dispose = (): void => {};
current = null;
showMode("easy");
if (easyMounted) return;
easyMounted = true;
void import("./M01_MasterData_UI_Logic_Page").then((m) =>
m.mountM01Logic(easyHost, side, undefined, "easy"),
);
};
/** 「로직 흐름 보기」 — 같은 로직 목록에 방식 C 흐름 그림(읽기 + 시험 계산) */
const openCViewTab = (): void => {
dispose();
dispose = (): void => {};
current = null;
showMode("cview");
if (cviewMounted) return;
cviewMounted = true;
void import("./M01_MasterData_UI_Logic_Page").then((m) =>
m.mountM01Logic(cviewHost, side, undefined, "cview"),
);
showMode("lab");
if (labMounted) return;
labMounted = true;
void import("./M01_MasterData_UI_LogicLab").then((m) => m.mountM01LogicLab(labHost, side));
};
/* --- 좌측: 컨테이너 --- */
const side = buildSide(openFile, () => openLogicTab(), openEasyTab, openCViewTab);
const side = buildSide(openFile, () => openLogicTab(), openLabTab);
const layout = el("div", { className: "ui-workflow-layout m01-master" });
const main = el("main", {
@@ -234,7 +216,7 @@ function buildPage(): HTMLElement {
children: [
el("div", {
className: "m01-master__panel",
children: [elementView, logicHost, easyHost, cviewHost],
children: [elementView, logicHost, labHost],
}),
],
});