From ffa0821f2d8381c20dd182329d4b547f074a2a51 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Tue, 27 Oct 2026 00:06:50 +0900 Subject: [PATCH] =?UTF-8?q?refactor(M02):=20=ED=9D=90=EB=A6=B0=20=EA=B8=80?= =?UTF-8?q?=20span=20=C2=B7=20div=20=C2=B7=20p=2026=20=EA=B3=B3=EC=9D=84?= =?UTF-8?q?=20=EB=B3=B4=EC=A1=B0=20=EA=B8=80=20=EB=B6=80=ED=92=88=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20(PLAN=20553-8=20=E2=91=A0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - DataFlow 입력 · 출력 · 검증 패널의 옛 __muted 셋(dfip 21 · dfout 2 · dfver 3) = ui-text ui-text--muted (입력 쪽은 글 14) - 죽은 CSS 셋 걷음 · 지킴 시험 test_553_5 에 한 건 더함 Co-Authored-By: Claude Sonnet 5.5 --- .../DataFlow/M02_DF_InputPanel.css | 5 --- .../DataFlow/M02_DF_InputPanel.ts | 20 +++++++++--- .../DataFlow/M02_DF_InputPanel_Logic.ts | 31 +++++++++++++++---- .../DataFlow/M02_DF_InputPanel_Material.ts | 25 +++++++++++---- .../DataFlow/M02_DF_InputPanel_Table.ts | 9 ++++-- .../DataFlow/M02_DF_InputPanel_Vars.ts | 6 +++- .../DataFlow/M02_DF_OutputPanel.css | 6 ---- .../DataFlow/M02_DF_OutputPanel.ts | 4 +-- M02_MasterTemplete/DataFlow/M02_DF_Verify.css | 6 ---- M02_MasterTemplete/DataFlow/M02_DF_Verify.ts | 6 ++-- resources/tester/test_553_5_m01_m02.py | 9 ++++++ 11 files changed, 84 insertions(+), 43 deletions(-) diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css index f33d55d7e..98e17874c 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css @@ -15,11 +15,6 @@ font-size: 1.15em; color: var(--color-text); } -.m02-dfip__muted { - margin: 0; - color: var(--color-text-muted); - font-size: var(--text-body-sm); -} .m02-dfip__unit { margin: 0; font-weight: 600; diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts index 3125fa62e..2c43befb2 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts @@ -263,7 +263,8 @@ function drawChosen( ...(rule && e.rule ? [ el("div", { - className: "m02-dfip__muted", + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, text: t("RuleLine", { f: e.rule.field, n: e.rule.from.name }), }), ] @@ -271,7 +272,11 @@ function drawChosen( ], }), val, - el("span", { className: "m02-dfip__muted", text: e.unit || "-" }), + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: e.unit || "-", + }), createButton({ label: t("Remove"), variant: "ghost", @@ -313,7 +318,7 @@ async function drawFind( ): Promise { const q = createInputField({ type: "search", placeholder: t("Search"), compact: true }); const list = el("div", { className: "m02-dfip__list" }); - const count = el("span", { className: "m02-dfip__muted" }); + const count = el("span", { className: "ui-text ui-text--muted", attrs: { "data-text": "14" } }); const bar: HTMLElement[] = []; let file = ""; let sub = ""; @@ -380,11 +385,16 @@ async function drawFind( className: "m02-dfip__name", children: [ el("strong", { text: String(r["이름"] ?? "") }), - el("span", { className: "m02-dfip__muted", text: ` ${r["규격"] ?? ""}` }), + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: ` ${r["규격"] ?? ""}`, + }), ], }), el("span", { - className: "m02-dfip__muted", + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, text: `${v === null ? "" : fmt(v)} ${unitText}`.trim(), }), ], diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Logic.ts b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Logic.ts index 96103e584..091e9b9f8 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Logic.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Logic.ts @@ -152,7 +152,7 @@ export function renderLogicInput( chapter, ); const list = el("div", { className: "m02-dfip__list" }); - const info = el("span", { className: "m02-dfip__muted" }); + const info = el("span", { className: "ui-text ui-text--muted", attrs: { "data-text": "14" } }); const prev = createButton({ label: t("Prev"), variant: "ghost", @@ -197,10 +197,15 @@ export function renderLogicInput( className: "m02-dfip__name", children: [ el("strong", { text: i.이름 }), - el("span", { className: "m02-dfip__muted", text: ` ${i.원문번호}` }), + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: ` ${i.원문번호}`, + }), // 별칭으로 맞았으면 그 별칭을 작게(208-1) el("span", { - className: "m02-dfip__muted", + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, text: ` ${aliasNote(matchLogic(q.input.value, i).alias)}`, }), el("span", { @@ -210,7 +215,11 @@ export function renderLogicInput( }), ], }), - el("span", { className: "m02-dfip__muted", text: i.결과단위 }), + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: i.결과단위, + }), ], }); b.addEventListener("click", () => void pick(i)); @@ -299,9 +308,19 @@ function showChosen( ...(valueNode ? [valueNode] : extra - ? [el("span", { className: "m02-dfip__muted", text: extra })] + ? [ + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: extra, + }), + ] : []), - el("span", { className: "m02-dfip__muted", text: unit || "-" }), + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: unit || "-", + }), ], }); host.replaceChildren( diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Material.ts b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Material.ts index 5ad9cbe18..498a8f91d 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Material.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Material.ts @@ -178,7 +178,7 @@ function itemList( ): HTMLElement { const q = createInputField({ type: "search", placeholder: t("Search"), compact: true }); const list = el("div", { className: "m02-dfip__list" }); - const info = el("span", { className: "m02-dfip__muted" }); + const info = el("span", { className: "ui-text ui-text--muted", attrs: { "data-text": "14" } }); let page = 1; let seq = 0; const own = base ? null : scopeBoxes({ sub: "", detail: "" }, () => ((page = 1), void load())); @@ -222,11 +222,16 @@ function itemList( className: "m02-dfip__name", children: [ el("strong", { text: it.name }), - el("span", { className: "m02-dfip__muted", text: ` ${it.spec}` }), + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: ` ${it.spec}`, + }), ], }), el("span", { - className: "m02-dfip__muted", + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, text: `${it.price === null ? "" : fmt(it.price)} ${it.unit}`.trim(), }), ], @@ -396,7 +401,10 @@ export function renderMaterial( ...(els.length ? els.map((e) => { const val = el("strong", { className: "m02-dfip__value", text: "—" }); - const note = el("span", { className: "m02-dfip__muted" }); + const note = el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + }); const kind = e.mode === "choice" ? t("Choice") : e.mode === "rule" ? t("Rule") : t("Fixed"); const row = el("div", { @@ -416,7 +424,11 @@ export function renderMaterial( ], }), val, - el("span", { className: "m02-dfip__muted", text: e.unit || "-" }), + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: e.unit || "-", + }), createButton({ label: t("Remove"), variant: "ghost", @@ -600,7 +612,8 @@ export function renderMaterial( }); body.replaceChildren( el("p", { - className: "m02-dfip__muted", + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, text: mode === "choice" ? t("ChoiceHelp") : t("RuleHelp"), }), name.root, diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Table.ts b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Table.ts index 00ba908e8..a9d71da3d 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Table.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Table.ts @@ -195,7 +195,8 @@ export function renderTablePick( children: [ el("strong", { text: `${s.section} ${s.title}` }), el("span", { - className: "m02-dfip__muted", + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, text: `${s.chapter} · ${t("SecLine", { t: s.tables })}`, }), ], @@ -229,7 +230,8 @@ export function renderTablePick( children: [ el("strong", { text: h.이름 }), el("span", { - className: "m02-dfip__muted", + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, text: t("TableLine", { b: h.기준 || "—", c: Object.keys(h.조건).length, @@ -321,7 +323,8 @@ function showChosen( (e) => body.replaceChildren( el("p", { - className: "m02-dfip__muted", + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, text: e instanceof Error ? e.message : t("Failed"), }), ), diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts index d88fe4d02..09f766493 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts @@ -94,7 +94,11 @@ export function renderVariables( const unit = el("div", { className: "m02-dfip__unitfield" }); const drawUnit = (): void => unit.replaceChildren( - el("span", { className: "m02-dfip__muted", text: t("Unit") }), + el("span", { + className: "ui-text ui-text--muted", + attrs: { "data-text": "14" }, + text: t("Unit"), + }), createUnitPick({ value: unitValue || NO_UNIT, ariaLabel: t("Unit"), diff --git a/M02_MasterTemplete/DataFlow/M02_DF_OutputPanel.css b/M02_MasterTemplete/DataFlow/M02_DF_OutputPanel.css index fb7f4e1b4..0d2b21589 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_OutputPanel.css +++ b/M02_MasterTemplete/DataFlow/M02_DF_OutputPanel.css @@ -57,12 +57,6 @@ max-width: 100%; } -.m02-dfout__muted { - margin: 0; - color: var(--color-text-muted); - font-size: var(--text-caption); -} - .m02-dfout__round { margin: var(--spacing-8) 0; color: var(--color-text-body); diff --git a/M02_MasterTemplete/DataFlow/M02_DF_OutputPanel.ts b/M02_MasterTemplete/DataFlow/M02_DF_OutputPanel.ts index 1e8e42312..edfa88881 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_OutputPanel.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_OutputPanel.ts @@ -180,7 +180,7 @@ export function renderOutputPanel( onPick: setUnit, }); /** 단위 표준의 소수자리 제안(주 ① 반올림) — 값(비용 아님)이고 끝수를 안 정했을 때 */ - const suggestNote = el("span", { className: "m02-dfout__muted" }); + const suggestNote = el("span", { className: "ui-text ui-text--muted" }); if (cost === "값" && !box.output?.round) void suggestPlaces(box.output?.unit ?? box.unit).then((p) => { if (p === null) return; @@ -204,7 +204,7 @@ export function renderOutputPanel( const round = box.output?.round; const stepName = (n: number): string => (n === 0 ? "1" : String(Number((10 ** -n).toFixed(n)))); let fallback: CfRound = { places: 1, method: "버림" }; - const roundNote = el("span", { className: "m02-dfout__muted" }); + const roundNote = el("span", { className: "ui-text ui-text--muted" }); const noteOf = (r: CfRound | undefined): string => r ? `${to("RoundUser")}: ${roundText(r)}` diff --git a/M02_MasterTemplete/DataFlow/M02_DF_Verify.css b/M02_MasterTemplete/DataFlow/M02_DF_Verify.css index 48e29cc68..78cb13578 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_Verify.css +++ b/M02_MasterTemplete/DataFlow/M02_DF_Verify.css @@ -95,12 +95,6 @@ white-space: normal; } -.m02-dfver__muted { - margin: 0; - color: var(--color-text-muted); - font-size: var(--text-caption); -} - /* 쉬는 갈래 — 문제가 아니라 회색으로 */ .m02-dfver__rest { padding: var(--spacing-8) var(--spacing-12); diff --git a/M02_MasterTemplete/DataFlow/M02_DF_Verify.ts b/M02_MasterTemplete/DataFlow/M02_DF_Verify.ts index 08d306253..8bba628f8 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_Verify.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_Verify.ts @@ -222,7 +222,7 @@ function slotRow(box: CfBox, e: CfElementRef, on: CfVerifyOn, lg: CfLogic): HTML }, }), el("span", { - className: "m02-dfver__muted", + className: "ui-text ui-text--muted", text: tv("Page", { p: got.page, n: pages, t: got.total }), }), createButton({ @@ -293,7 +293,7 @@ function ruleRow(e: CfElementRef, lg: CfLogic, result: CfEvalResult): HTMLElemen className: "m02-dfver__now", text: value ? tv("Loading") : tv("NeedValue"), }); - const note = el("span", { className: "m02-dfver__muted" }); + const note = el("span", { className: "ui-text ui-text--muted" }); if (value) { void findMaterials({ q: e.scope?.찾는말, @@ -320,7 +320,7 @@ function ruleRow(e: CfElementRef, lg: CfLogic, result: CfEvalResult): HTMLElemen children: [el("strong", { text: elementPort(e) }), state, note], }), el("span", { - className: "m02-dfver__muted", + className: "ui-text ui-text--muted", text: `${from ? `${from} · ` : ""}${tv("Cond", { field: rule.field, v: value || rule.from.name, op: rule.op })}`, }), ], diff --git a/resources/tester/test_553_5_m01_m02.py b/resources/tester/test_553_5_m01_m02.py index c24990aa2..e967d5299 100644 --- a/resources/tester/test_553_5_m01_m02.py +++ b/resources/tester/test_553_5_m01_m02.py @@ -95,3 +95,12 @@ def test_m02_parts_in_place(): def test_m02_css_no_old_alias(): for name, css in _m02_src(".css").items(): assert not OLD_ALIAS.search(css), f"{name}: 옛 보라 별칭" + + +def test_m02_dataflow_muted_spans_use_ui_text(): + """553-8 ① — 흐린 글 span · div · p 는 보조 글 부품 꼴 · 옛 __muted 걷음.""" + ts = "".join(_m02_src(".ts").values()) + css = "".join(_m02_src(".css").values()) + for gone in ("m02-dfip__muted", "m02-dfout__muted", "m02-dfver__muted"): + assert gone not in ts and gone not in css, f"옛 변종 {gone} 남음" + assert len(re.findall(r'"ui-text ui-text--muted",\s*attrs: \{ "data-text": "14" \}', ts)) >= 21