diff --git a/B06_Section/B06_Section_UI_Cross_Structure_Panel.ts b/B06_Section/B06_Section_UI_Cross_Structure_Panel.ts index b58527ad..6e2e8802 100644 --- a/B06_Section/B06_Section_UI_Cross_Structure_Panel.ts +++ b/B06_Section/B06_Section_UI_Cross_Structure_Panel.ts @@ -101,8 +101,13 @@ export function buildStructurePanel(deps: StructurePanelDeps): StructurePanelHan const title = document.createElement("span"); title.className = "b06-structure-panel__title"; - const value = document.createElement("span"); + // 정보 표시(2026-08-22 사용자 — 항목당 한 행): 관 길이 / 좌우 / 상하. + const value = document.createElement("div"); value.className = "b06-structure-panel__value"; + const pipeLine = document.createElement("span"); + const lateralLine = document.createElement("span"); + const slopeLine = document.createElement("span"); + value.append(pipeLine, lateralLine, slopeLine); let current: RevetKey | null = null; const act = (run: (key: RevetKey) => void) => () => { @@ -288,22 +293,22 @@ export function buildStructurePanel(deps: StructurePanelDeps): StructurePanelHan currentCount = extra.count; countValue.textContent = `${extra.count}단`; const adjust = deps.adjustFor(key); - // 조작 요약 — 0이면 "자동". 좌우는 안/바깥, 상하는 위/아래로 적는다. - const parts: string[] = []; - if (Math.abs(adjust.x) > 1e-9) { - parts.push( - `${L(adjust.x > 0 ? "B06_Cross_Revet_Outward" : "B06_Cross_Revet_Inward")} ${Math.abs(adjust.x).toFixed(1)}m`, - ); - } - if (Math.abs(adjust.d) > 1e-9) { - parts.push( - `${L(adjust.d > 0 ? "B06_Cross_Revet_DirDown" : "B06_Cross_Revet_DirUp")} ${Math.abs(adjust.d).toFixed(1)}m`, - ); - } - const moved = parts.length ? parts.join(" · ") : L("B06_Cross_Revet_Auto"); + // 정보는 항목당 한 행(2026-08-22 사용자) — 0이면 "자동", 좌우는 안/바깥, + // 상하는 위/아래로 적는다. const pipeLength = deps.pipeLengthM(); - value.textContent = - pipeLength === null ? moved : `${L("B06_Cross_Revet_Pipe")} ${pipeLength}m · ${moved}`; + pipeLine.classList.toggle("is-hidden", pipeLength === null); + pipeLine.textContent = + pipeLength === null ? "" : `${L("B06_Cross_Revet_Pipe")} ${pipeLength}m`; + lateralLine.textContent = + `${L("B06_Cross_Lateral_Label")} ` + + (Math.abs(adjust.x) > 1e-9 + ? `${L(adjust.x > 0 ? "B06_Cross_Revet_Outward" : "B06_Cross_Revet_Inward")} ${Math.abs(adjust.x).toFixed(1)}m` + : L("B06_Cross_Revet_Auto")); + slopeLine.textContent = + `${L("B06_Cross_Slope_Label")} ` + + (Math.abs(adjust.d) > 1e-9 + ? `${L(adjust.d > 0 ? "B06_Cross_Revet_DirDown" : "B06_Cross_Revet_DirUp")} ${Math.abs(adjust.d).toFixed(1)}m` + : L("B06_Cross_Revet_Auto")); }, }; } diff --git a/B06_Section/B06_Section_UI_Style_Cross.css b/B06_Section/B06_Section_UI_Style_Cross.css index 04e3e732..e74dc5c8 100644 --- a/B06_Section/B06_Section_UI_Style_Cross.css +++ b/B06_Section/B06_Section_UI_Style_Cross.css @@ -596,7 +596,14 @@ font-weight: var(--font-weight-medium); } +.b06-structure-panel__value span.is-hidden { + display: none; +} + .b06-structure-panel__value { + display: flex; + flex-direction: column; + gap: 1px; color: var(--color-text-secondary); font-size: var(--text-caption); } diff --git a/ui_template/ui_template_locale_b2.ts b/ui_template/ui_template_locale_b2.ts index 978d7a90..43dc99fa 100644 --- a/ui_template/ui_template_locale_b2.ts +++ b/ui_template/ui_template_locale_b2.ts @@ -266,6 +266,8 @@ export const ui_locales_b2 = { ], B06_Cross_Height_Label: ["높이", "Height"], B06_Cross_Move_Label: ["이동(좌우·사면 상하)", "Move (lateral / along slope)"], + B06_Cross_Lateral_Label: ["좌우", "Lateral"], + B06_Cross_Slope_Label: ["상하(사면)", "Along slope"], B06_Cross_Height_Minus: ["높이 −0.1m", "Height −0.1m"], B06_Cross_Height_Plus: ["높이 +0.1m", "Height +0.1m"], B06_Cross_Height_Limit: [