diff --git a/A00_Common/design/design_structure_form.ts b/A00_Common/design/design_structure_form.ts index de75abeb6..10d353761 100644 --- a/A00_Common/design/design_structure_form.ts +++ b/A00_Common/design/design_structure_form.ts @@ -41,7 +41,6 @@ import { import { buildSummaryRow } from "../../B05_Profile/B05_Profile_UI_Structures_Summary_Row"; import type { GroupItems, SummaryItem } from "../../common_util/common_util_summary_item"; import { followPipeHeights } from "../../common_util/common_util_culvert_sets"; -import { createCheckbox } from "../../ui_template/ui_template_checkbox"; /** 잇기 값 자리 — 패널 그룹 값(`group_items`)을 그대로 씀. */ export interface SpecLinks { @@ -144,13 +143,6 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = { select.value = tag ? "" : now; return select; } - if (item.kind === "bool") { - // 빈 값 = 기본값으로 체크(173-7) · 듣개가 `.value` 를 읽음 — 바뀔 때 "true" / "false" - const box = createCheckbox("", { checked: (values[item.id] || item.default) === "true" }); - box.input.value = String(box.input.checked); - box.input.addEventListener("change", () => (box.input.value = String(box.input.checked))); - return box.root; - } if (item.kind === "text") { const input = document.createElement("input"); input.type = "text"; diff --git a/A00_Common/design/design_structure_pipe.ts b/A00_Common/design/design_structure_pipe.ts index 3aa987a31..9b1e7b79e 100644 --- a/A00_Common/design/design_structure_pipe.ts +++ b/A00_Common/design/design_structure_pipe.ts @@ -70,11 +70,15 @@ export const PIPE_SPEC: StructureSpec = { [BASIN]: { form: "inlet_structure", height: "inlet_basin_height_m" }, [SOIL]: revetKeys("inlet"), }), - // 집수정만 · 빈 값 = 참(키 없는 옛 관도 동물이동형 · 173-7) · 저장만(B07 · B08 안 읽음) + // 집수정만 · 유 / 무 = 저장 "true" / "false" · 빈 값 = 유(필수 상자 기본 채움 · 177-2) · 저장만(B07 · B08 안 읽음) { id: "animal", label: "동물이동형", - kind: "bool", + kind: "select", + choices: [ + { value: "true", label: "유" }, + { value: "false", label: "무" }, + ], default: "true", by: { item: "structure", map: { [BASIN]: { key: "inlet_basin_animal" } } }, }, diff --git a/A00_Common/design/design_structure_spec.ts b/A00_Common/design/design_structure_spec.ts index 5c80408e8..3ba11d1d1 100644 --- a/A00_Common/design/design_structure_spec.ts +++ b/A00_Common/design/design_structure_spec.ts @@ -32,8 +32,7 @@ export type SplitRole = "length" | "before" | "after"; export interface SpecItem { id: string; label: string; - /** bool = 체크박스 · 저장 글 "true" / "false" · 빈 값 = `default`(173-7). */ - kind: "select" | "number" | "text" | "auto" | "bool"; + kind: "select" | "number" | "text" | "auto"; /** 저장 키(필수 컨테이너 · `by` 없을 때). */ key?: string; choices?: SpecChoice[]; diff --git a/B05_Profile/B05_Profile_UI_Style_Structures.css b/B05_Profile/B05_Profile_UI_Style_Structures.css index 63c9af9cc..d8fcc2277 100644 --- a/B05_Profile/B05_Profile_UI_Style_Structures.css +++ b/B05_Profile/B05_Profile_UI_Style_Structures.css @@ -453,6 +453,12 @@ background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface)); } +/* 미연결 — 연한 노랑 배경 + 노랑 테두리(경고 · 밝음 · 어두움 같은 토큰). */ +.b05-structure__summary-name:not(.is-assigned) { + border-color: var(--color-warning); + background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface)); +} + .b05-structure__summary .b05-route__irregular-btn { flex: none; } diff --git a/B06_Section/B06_Section_UI_Cross_Design.ts b/B06_Section/B06_Section_UI_Cross_Design.ts index 723b97f95..5020be6bb 100644 --- a/B06_Section/B06_Section_UI_Cross_Design.ts +++ b/B06_Section/B06_Section_UI_Cross_Design.ts @@ -385,7 +385,7 @@ export function buildDesignControls( const groundSegment = groundToggle.wrap; groundSegment.classList.add("b06-design__seg--header"); // 단면 유형은 지형에서 자동 판정되며(D-2), 제목행 pill로 표시한다(E-3, Cross_View에서 생성). - // 아래 옵션은 상시 노출하되 선행 조건 미충족 시 비활성 처리한다(E-6). + // 아래 옵션은 선행 조건 미충족 시 비활성 = 숨김(179-2 · CSS) — 편측의 쪽은 알약 글에. const rockCut = isRock(state.ground) && state.mode !== "both_fill"; const hasDitch = state.mode !== "both_fill"; // 측구 생성 여부(자동 판정 or 사용자 override) — 측구형식은 측구가 있을 때만 의미 있다. @@ -417,9 +417,9 @@ export function buildDesignControls( !hasDitch, L("B06_Design_Disabled_NoDitch"), ); - // 측구형식(일반/L형): 암 지반 + 절토 단면 + 측구가 실제 있을 때만 활성. + // 측구형식(일반/L형): 암 지반 + 절토 단면 + 측구가 실제 있을 때만 활성 · 이름 글 없이 툴팁(179-2). const ditchTypeSeg = segment( - L("B06_Design_DitchType_Legend"), + "", DITCH_TYPE_OPTIONS, state.ditchType, (value) => { @@ -429,6 +429,7 @@ export function buildDesignControls( !rockCut || !ditchOn, !ditchOn ? L("B06_Design_Disabled_NoDitchType") : L("B06_Design_Disabled_RockCut"), ); + ditchTypeSeg.title = L("B06_Design_DitchType_Legend"); // 2단계 경사 토글: 암 지반 + 절토 단면에서만 활성. 활성="복합경사"/비활성="단경사"(E-7). const twoStage = toggle( "", @@ -486,7 +487,8 @@ export function buildDesignControls( let overflow = bar.scrollWidth - clientWidth; let moveCount = 0; while (overflow > 1 && moveCount < moveable.length) { - overflow -= widths[moveable.length - 1 - moveCount] + barGapPx; + const width = widths[moveable.length - 1 - moveCount]; // 숨긴 칸(179-2)은 폭 · 간격 0 + overflow -= width ? width + barGapPx : 0; moveCount += 1; } return moveCount; diff --git a/B06_Section/B06_Section_UI_Style_Cross.css b/B06_Section/B06_Section_UI_Style_Cross.css index 2694593da..0effa7db6 100644 --- a/B06_Section/B06_Section_UI_Style_Cross.css +++ b/B06_Section/B06_Section_UI_Style_Cross.css @@ -532,13 +532,9 @@ white-space: nowrap; } -/* 선행 조건 미충족 옵션(E-6) — 상시 노출하되 흐리게·클릭 불가. */ +/* 선행 조건 미충족 옵션 — 숨김(179-2 · 옛 E-6 「흐리게 늘 보임」 폐기 · 쪽은 단면유형 알약에). */ .b06-design__seg--disabled { - opacity: 0.4; -} - -.b06-design__seg--disabled .b06-design__btn { - cursor: not-allowed; + display: none; } .b06-design__seg-buttons { diff --git a/B06_Section/B06_Section_UI_Style_Cross_Controls.css b/B06_Section/B06_Section_UI_Style_Cross_Controls.css index d12b689e4..f4fee5c15 100644 --- a/B06_Section/B06_Section_UI_Style_Cross_Controls.css +++ b/B06_Section/B06_Section_UI_Style_Cross_Controls.css @@ -223,7 +223,7 @@ background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent); } -/* 고른 보라 선 치수(137-2) — [+ − ⤢] 왼쪽 · 두 줄(151-1 · 길이 · 수평 / 높이 · 구배). */ +/* 고른 보라 선 치수(137-2) — 카드 폭 무관 늘 [+ − ⤢] 왼쪽(179-1) · 두 줄(151-1 · 길이 · 수평 / 높이 · 구배). */ .b06-cross-card__line-dims { align-self: center; padding: 1px var(--spacing-4); @@ -234,30 +234,6 @@ white-space: pre-line; } -/* 좁은 카드(3열 등)는 막대 옆에 두면 왼쪽 면적표를 덮음 — 표 아래 높이로 내려 오른쪽에 붙임(151-1). */ -.b06-cross-card__chart-wrap { - container-type: inline-size; -} - -@container (max-width: 620px) { - .b06-cross-card__zoom { - overflow: visible; - } - - .b06-cross-card__line-dims { - position: absolute; - top: calc(var(--spacing-8) + var(--b06-areas-height, 3.6rem)); - right: -1px; - border: 1px solid var(--color-border); - border-radius: var(--radius-inputs); - background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent); - } - - .b06-cross-card__line-dims + .b06-cross-card__zoom-btn { - border-left: none; - } -} - .b06-cross-card__line-dims[hidden] { display: none; } diff --git a/resources/master_template/구조물정의.json b/resources/master_template/구조물정의.json index 6cc24ba67..732b9baa1 100644 --- a/resources/master_template/구조물정의.json +++ b/resources/master_template/구조물정의.json @@ -3333,6 +3333,8 @@ "inlet.before": "기준측점 전 (m)", "inlet.after": "기준측점 후 (m)", "inlet.animal": "동물이동형", + "inlet.animal=true": "유", + "inlet.animal=false": "무", "outlet.structure": "구조", "outlet.structure=기슭막이": "흙막이", "outlet.form": "형태", diff --git a/resources/tester/helper_173_7_inlet_animal.cjs b/resources/tester/helper_173_7_inlet_animal.cjs index 609c9c8db..89f9a38be 100644 --- a/resources/tester/helper_173_7_inlet_animal.cjs +++ b/resources/tester/helper_173_7_inlet_animal.cjs @@ -1,5 +1,5 @@ -/* 집수정 「동물이동형」 체크 칸(PLAN 173-7) 단위검증 헬퍼 — 공용 명세 폼을 그 자리에서 트랜스파일해 Node 로 돌린다. - * 빈 값 = 체크 · 끄면 "false" · 다시 켜면 "true" · 흙막이 갈래엔 칸 없음. 결과는 표준출력에 JSON 한 벌. +/* 집수정 「동물이동형」 칸(PLAN 173-7 · 177-2 고르기 유 / 무) 단위검증 헬퍼 — 공용 명세 폼을 그 자리에서 트랜스파일해 Node 로 돌린다. + * 빈 값 = 유("true" 적힘) · 무 = "false" · 다시 유 = "true" · 흙막이 갈래엔 칸 없음. 결과는 표준출력에 JSON 한 벌. * 짝 = `test_173_7_inlet_animal.py` · 화면 그릇 흉내는 `helper_54_10_soil_tiers.cjs` 꼴(+ 듣개). */ const fs = require("fs"); @@ -121,32 +121,44 @@ const { createSpecForm } = loadTs( const { PIPE_SPEC } = loadTs(path.join(ROOT, "A00_Common", "design", "design_structure_pipe.ts")); const form = createSpecForm(null, {}); +// 177-2 — 체크박스 → 고르기(유 / 무) · 저장 글 "true" / "false" 그대로 const box = () => form.root .querySelectorAll("label") .find((l) => l.dataset.specItem === "inlet.animal") - ?.querySelector("input") ?? null; + ?.querySelector("select") ?? null; const animal = () => form.read().inlet_basin_animal ?? null; -const toggle = (on) => { - const input = box(); - input.checked = on; - input.fire("change"); +const pick = (v) => { + const select = box(); + select.value = v; + select.fire("change"); +}; +const shown = () => { + const select = box(); + return select + ? { + value: select.value, + options: select.children.map((o) => [o.value, o.textContent]), + saved: animal(), + } + : null; }; const out = {}; form.write(PIPE_SPEC, { pipe_diameter_mm: 1000, inlet_type: "집수정" }); -out.blank = { checked: box()?.checked ?? null, saved: animal() }; -toggle(false); -out.off = { checked: box().checked, saved: animal() }; -toggle(true); -out.on = { checked: box().checked, saved: animal() }; +out.blank = shown(); +pick("false"); +out.off = shown(); +pick("true"); +out.on = shown(); form.write(PIPE_SPEC, { pipe_diameter_mm: 1000, inlet_type: "집수정", inlet_basin_animal: "false", }); -out.storedOff = { checked: box().checked, saved: animal() }; +out.storedOff = shown(); form.write(PIPE_SPEC, { pipe_diameter_mm: 1000, inlet_type: "기슭막이" }); out.soil = { shown: box() !== null, saved: animal() }; +out.checkbox = form.root.querySelectorAll("input").some((i) => i.type === "checkbox"); process.stdout.write(JSON.stringify(out)); diff --git a/resources/tester/test_137_design_pick.py b/resources/tester/test_137_design_pick.py index 0e88ef6c9..0e17f6d7e 100644 --- a/resources/tester/test_137_design_pick.py +++ b/resources/tester/test_137_design_pick.py @@ -106,14 +106,13 @@ def test_카드_배선_하나만() -> None: assert ".b06-chart__design-hit.is-active {" in css -def test_치수_두_줄_좁은_카드는_표_아래로() -> None: - """151-1 — 줄바꿈 글자를 살리고 오른쪽 맞춤 · 좁은 카드(3열 등)는 표 높이 아래로 내려 표를 안 덮음.""" +def test_치수_두_줄_늘_단추_왼쪽() -> None: + """151-1 — 줄바꿈 글자를 살리고 오른쪽 맞춤 · 179-1 — 좁은 카드도 표 아래로 안 내림(늘 [+ − ⤢] 왼쪽).""" css = _src("B06_Section/B06_Section_UI_Style_Cross_Controls.css") dims = css.split(".b06-cross-card__line-dims {", 1)[1].split("}", 1)[0] assert "white-space: pre-line;" in dims and "text-align: right;" in dims - assert "container-type: inline-size;" in css - narrow = css.split("@container (max-width: 620px) {", 1)[1] - assert "top: calc(var(--spacing-8) + var(--b06-areas-height, 3.6rem));" in narrow + assert "position:" not in dims + assert "@container" not in css def test_폴리곤_자르기는_공용_한_벌() -> None: diff --git a/resources/tester/test_173_7_inlet_animal.py b/resources/tester/test_173_7_inlet_animal.py index b8539c476..ccb323207 100644 --- a/resources/tester/test_173_7_inlet_animal.py +++ b/resources/tester/test_173_7_inlet_animal.py @@ -1,4 +1,4 @@ -"""173-7 집수정 「동물이동형」 체크 칸 — 공용 체크박스 · 저장 키 inlet_basin_animal · 빈 값 = 참. +"""173-7 · 177-2 집수정 「동물이동형」 칸 — 고르기 유 / 무 · 저장 키 inlet_basin_animal("true"/"false") · 빈 값 = 유. 공용 명세 폼(`design_structure_form.ts`)을 그 자리에서 돌린 값(`helper_173_7_inlet_animal.cjs`) + 배관 폼 키 목록(`B05_Profile_UI_Drainage_Facility_Merge.ts`). @@ -28,14 +28,18 @@ def out() -> dict: return json.loads(done.stdout) -def test_빈_값은_체크_저장_안_함(out: dict) -> None: - assert out["blank"] == {"checked": True, "saved": None} +YU_MU = [["true", "유"], ["false", "무"]] -def test_끄면_false_다시_켜면_true(out: dict) -> None: - assert out["off"] == {"checked": False, "saved": "false"} - assert out["on"] == {"checked": True, "saved": "true"} - assert out["storedOff"] == {"checked": False, "saved": "false"} +def test_빈_값은_유_실제_값으로_적힘(out: dict) -> None: + # 177-2 — 필수 상자 빈 고르기 칸 = 기본값을 실제 값으로(54-43) · 옛 「저장 안 함」 뒤집음 + assert out["blank"] == {"value": "true", "options": YU_MU, "saved": "true"} + + +def test_무면_false_다시_유면_true(out: dict) -> None: + assert out["off"] == {"value": "false", "options": YU_MU, "saved": "false"} + assert out["on"] == {"value": "true", "options": YU_MU, "saved": "true"} + assert out["storedOff"] == {"value": "false", "options": YU_MU, "saved": "false"} def test_흙막이엔_칸_없음(out: dict) -> None: diff --git a/resources/tester/test_177_1_summary_unassigned_bg.py b/resources/tester/test_177_1_summary_unassigned_bg.py new file mode 100644 index 000000000..bafa3cf4f --- /dev/null +++ b/resources/tester/test_177_1_summary_unassigned_bg.py @@ -0,0 +1,27 @@ +# -*- coding: utf-8 -*- +"""PLAN 177-1 — 구조물 조합 미연결 라벨 = 연한 노랑(경고) 배경 + 테두리(소스 시험).""" + +import os +import re + +ROOT = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))) +CSS = os.path.join(ROOT, "B05_Profile", "B05_Profile_UI_Style_Structures.css") + + +def _rule(sel: str) -> str: + src = open(CSS, encoding="utf-8").read() + m = re.search(re.escape(sel) + r"\s*\{([^}]*)\}", src) + assert m, sel + return m.group(1) + + +def test_미연결_배경_테두리_경고색_글자색_없음(): + body = _rule(".b05-structure__summary-name:not(.is-assigned)") + assert re.search(r"border-color:\s*var\(--color-warning\)", body) + assert re.search(r"background:\s*color-mix\([^;]*--color-warning[^;]*--color-surface", body) + assert not re.search(r"(^|[;\s])color:", body) + + +def test_테마_토큰_밝음_어두움_둘다(): + th = open(os.path.join(ROOT, "ui_template", "ui_template_theme.css"), encoding="utf-8").read() + assert len(re.findall(r"--color-warning:\s*#", th)) >= 2 diff --git a/resources/tester/test_177_2_inlet_animal_select.py b/resources/tester/test_177_2_inlet_animal_select.py new file mode 100644 index 000000000..c77e1f35c --- /dev/null +++ b/resources/tester/test_177_2_inlet_animal_select.py @@ -0,0 +1,38 @@ +# -*- coding: utf-8 -*- +"""PLAN 177-2 — 동물이동형 = 고르기(유 / 무) · 체크박스 꼴(bool) 지움 · 화면 값은 helper_173_7.""" + +import json +import subprocess +from pathlib import Path + +import pytest + +HERE = Path(__file__).parent +ROOT = HERE.parents[1] +DESIGN = ROOT / "A00_Common" / "design" + + +@pytest.fixture(scope="module") +def out() -> dict: + if not (ROOT / "config" / "node_modules").is_dir(): + pytest.skip("의존성 미설치") + done = subprocess.run( # noqa: S603 — 고정 실행 파일 + ["node", str(HERE / "helper_173_7_inlet_animal.cjs")], + capture_output=True, + text=True, + encoding="utf-8", + ) + assert done.returncode == 0, done.stderr + return json.loads(done.stdout) + + +def test_체크박스_없음(out: dict) -> None: + assert out["checkbox"] is False + + +def test_bool_꼴_지움() -> None: + spec = (DESIGN / "design_structure_spec.ts").read_text("utf-8") + form = (DESIGN / "design_structure_form.ts").read_text("utf-8") + pipe = (DESIGN / "design_structure_pipe.ts").read_text("utf-8") + assert '"bool"' not in spec and '"bool"' not in form and '"bool"' not in pipe + assert "createCheckbox" not in form diff --git a/resources/tester/test_179_1_line_dims_left.py b/resources/tester/test_179_1_line_dims_left.py new file mode 100644 index 000000000..7d9406081 --- /dev/null +++ b/resources/tester/test_179_1_line_dims_left.py @@ -0,0 +1,33 @@ +# -*- coding: utf-8 -*- +"""PLAN 179-1 — 선 길이 정보창 = 열 수 무관 늘 줌 [+ − ⤢] 왼쪽(좁은 카드 내림 규칙 지움 · 소스 시험).""" + +import os +import re + +ROOT = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))) + + +def _src(rel: str) -> str: + return open(os.path.join(ROOT, rel), encoding="utf-8").read() + + +def test_좁은_카드_내림_규칙_없음(): + css = _src("B06_Section/B06_Section_UI_Style_Cross_Controls.css") + assert "@container" not in css + # 치수 칸 규칙은 기본 꼴 · 숨김(+ 옆 단추) 뿐 — 절대 자리 · 왼선 지움 규칙 없음 + assert re.findall(r"\.b06-cross-card__line-dims[^{,;]*\{", css) == [ + ".b06-cross-card__line-dims {", + ".b06-cross-card__line-dims[hidden] {", + ".b06-cross-card__line-dims[hidden] + .b06-cross-card__zoom-btn {", + ] + + +def test_치수_칸은_줌_막대_맨_앞(): + view = _src("B06_Section/B06_Section_UI_Cross_View.ts") + assert "zoomBar.prepend(linePick.label);" in view + zoom = ( + _src("B06_Section/B06_Section_UI_Style_Cross_Controls.css") + .split(".b06-cross-card__zoom {", 1)[1] + .split("}", 1)[0] + ) + assert "display: flex;" in zoom and "position: absolute;" in zoom diff --git a/resources/tester/test_179_2_ditch_row_compact.py b/resources/tester/test_179_2_ditch_row_compact.py new file mode 100644 index 000000000..c1c0866ba --- /dev/null +++ b/resources/tester/test_179_2_ditch_row_compact.py @@ -0,0 +1,36 @@ +# -*- coding: utf-8 -*- +"""PLAN 179-2 — 측구 줄 컴팩트(W16 (가)): 막힌 단추 숨김 · 「측구형식」 글 지움(툴팁) · 알약에 편측 쪽(소스 시험).""" + +import os +import re + +ROOT = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))) + + +def _src(rel: str) -> str: + return open(os.path.join(ROOT, rel), encoding="utf-8").read() + + +def test_막힌_묶음은_숨김(): + css = _src("B06_Section/B06_Section_UI_Style_Cross.css") + body = re.search(r"\.b06-design__seg--disabled\s*\{([^}]*)\}", css).group(1) + assert "display: none;" in body + assert "opacity" not in body + + +def test_측구형식_글_없이_툴팁(): + cd = _src("B06_Section/B06_Section_UI_Cross_Design.ts") + seg = cd.split("const ditchTypeSeg = segment(", 1)[1].split(");", 1)[0] + assert seg.lstrip().startswith('"",') + assert 'ditchTypeSeg.title = L("B06_Design_DitchType_Legend");' in cd + + +def test_넘침_셈은_숨긴_칸_폭_간격_뺌(): + cd = _src("B06_Section/B06_Section_UI_Cross_Design.ts") + assert "overflow -= width ? width + barGapPx : 0;" in cd + + +def test_알약에_편측_쪽(): + lb = _src("ui_template/ui_template_locale_b2.ts") + assert 'B06_Design_Mode_LeftCut: ["편측 성토(좌 절토)"' in lb + assert 'B06_Design_Mode_RightCut: ["편측 성토(우 절토)"' in lb diff --git a/ui_template/ui_template_locale_b2.ts b/ui_template/ui_template_locale_b2.ts index e84c27cf3..a97c57165 100644 --- a/ui_template/ui_template_locale_b2.ts +++ b/ui_template/ui_template_locale_b2.ts @@ -420,8 +420,8 @@ export const ui_locales_b2 = { B06_Design_Ground_Ripping: ["리핑암", "Ripping rock"], B06_Design_Ground_Blasting: ["발파암", "Blasting rock"], B06_Design_Mode_Legend: ["단면유형", "Section type"], - B06_Design_Mode_LeftCut: ["편측 성토", "One-side fill"], - B06_Design_Mode_RightCut: ["편측 성토", "One-side fill"], + B06_Design_Mode_LeftCut: ["편측 성토(좌 절토)", "One-side fill (left cut)"], + B06_Design_Mode_RightCut: ["편측 성토(우 절토)", "One-side fill (right cut)"], B06_Design_Mode_BothCut: ["양측 절토", "Both cut"], B06_Design_Mode_BothFill: ["양측 성토", "Both fill"], B06_Design_Ditch_Legend: ["측구위치", "Ditch side"],