diff --git a/M02_MasterTemplete/M02_Labor_Values.ts b/M02_MasterTemplete/M02_Labor_Values.ts index 1171ce553..ac0fbabe6 100644 --- a/M02_MasterTemplete/M02_Labor_Values.ts +++ b/M02_MasterTemplete/M02_Labor_Values.ts @@ -22,7 +22,7 @@ import "./M02_Labor_Values.css"; const fill = (text: string, values: Record): string => text.replace(/\{(\w+)\}/g, (_, key: string) => String(values[key] ?? "")); -const CONTROL_TEXT = { auto: "자동값", outOfRange: "범위 {value} 밖" }; +const CONTROL_TEXT = { outOfRange: "범위 {value} 밖" }; const autoValue = (input: ItemInput): string | number | null => { const auto = input.자동값; @@ -60,17 +60,20 @@ export function createValueControl( }, }) ) as HTMLInputElement | HTMLSelectElement; + // 고르기 칸 — 「자동값 xx」 빈 선택지는 두지 않음(40-1 ③ · 자동값 = 늘 첫 선택지) · 값이 없으면 자동값을 + // 고른 채 흐리게 보이고 저장은 사용자가 바꿀 때만 · 자동값도 없으면 「—」 빈 선택지 하나 if (control instanceof HTMLSelectElement) { control.append( - el("option", { - attrs: { value: "" }, - text: auto === null ? "—" : `${CONTROL_TEXT.auto} ${String(auto)}`, - }), + ...(auto === null ? [el("option", { attrs: { value: "" }, text: "—" })] : []), ...choices.map((c) => el("option", { attrs: { value: c.값 }, text: c.이름 })), ); } const empty = value === null || value === ""; - control.value = empty ? "" : String(value); + control.value = empty + ? control instanceof HTMLSelectElement && auto !== null + ? String(auto) + : "" + : String(value); control.classList.toggle("is-auto", empty); const error = el("span", { className: "m02-inputval__error" }); const out: ValueControl = { control, error, wasBad: false }; @@ -81,7 +84,7 @@ export function createValueControl( error.textContent = bad ? fill(CONTROL_TEXT.outOfRange, { value: `${range?.min ?? ""}~${range?.max ?? ""}` }) : ""; - control.classList.toggle("is-auto", raw === ""); + control.classList.toggle("is-auto", raw === ""); // 고르기 칸은 고르면 늘 저장 값 onChange(storedOf(input, raw), bad); }); return out;