From d19234301289e90ee941beb09b4f6175de938f47 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Tue, 18 Aug 2026 17:29:11 +0900 Subject: [PATCH] =?UTF-8?q?feat(B05):=20=EA=B5=AC=EC=A1=B0=EB=AC=BC=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=95=AD=EB=AA=A9=20=EC=96=91=EC=8B=9D=20?= =?UTF-8?q?=E2=80=94=20=EC=B8=A1=EC=A0=90=20=EC=A2=8C=EC=B8=A1=C2=B7?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EC=9A=B0=EC=B8=A1,=20=EA=B7=B8=20?= =?UTF-8?q?=EC=99=B8=20=EC=A0=95=EB=B3=B4=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 한 항목 = [측점(좌측 맞춤)][구조물 이름(우측 맞춤)]. 메모·"배수유역 연동" 등 부가 표기는 지운다(2026-08-18 사용자 지시). - labelOfStructure/labelOfPipe("측점 · 이름" 결합 문자열) 폐지 — 측점 표기만 stationOfStructure로 남기고 이름은 렌더에서 따로 그린다. - 이름 span: margin-left:auto + text-align:right, 주 정보가 되었으므로 본문색으로 승격(기존 muted 캡션은 메모용이었다). Co-Authored-By: Claude Opus 5 (1M context) --- B05_Profile/B05_Profile_UI_Structures_List.ts | 44 ++++++------------- B05_Profile/B05_Profile_UI_Style.css | 6 ++- 2 files changed, 19 insertions(+), 31 deletions(-) diff --git a/B05_Profile/B05_Profile_UI_Structures_List.ts b/B05_Profile/B05_Profile_UI_Structures_List.ts index e846b674..de239d17 100644 --- a/B05_Profile/B05_Profile_UI_Structures_List.ts +++ b/B05_Profile/B05_Profile_UI_Structures_List.ts @@ -33,29 +33,11 @@ export interface StructureListParams { onSelectPipe: (pipe: PipeFacilityItem) => void; } -/** 구조물 한 건의 표시 이름 — 점형은 기준 측점, 구간형은 시작~종료 측점. */ -export function labelOfStructure( - structure: StructureInstance, - typeMap: Map, - intervalM: number, -): string { - const name = typeMap.get(structure.type_id)?.name ?? structure.type_id; - const position = - structure.placement === "interval" - ? `${formatStation(structure.start_m ?? 0, intervalM)}~${formatStation(structure.end_m ?? 0, intervalM)}` - : formatStation(structure.chainage_m ?? 0, intervalM); - return `${position} · ${name}`; -} - -/** 계곡 통과 시설 한 건의 표시 이름 — 점형이라 기준 측점 하나로 적는다 - * (2026-08-17 사용자 지시 2). */ -export function labelOfPipe( - pipe: PipeFacilityItem, - typeMap: Map, - intervalM: number, -): string { - const name = typeMap.get(pipe.facility)?.name ?? pipe.facility; - return `${formatStation(pipe.chainage_m, intervalM)} · ${name}`; +/** 구조물 한 건의 측점 표기 — 점형은 기준 측점, 구간형은 시작~종료 측점. */ +export function stationOfStructure(structure: StructureInstance, intervalM: number): string { + return structure.placement === "interval" + ? `${formatStation(structure.start_m ?? 0, intervalM)}~${formatStation(structure.end_m ?? 0, intervalM)}` + : formatStation(structure.chainage_m ?? 0, intervalM); } export function renderStructureList(params: StructureListParams): void { @@ -85,16 +67,18 @@ export function renderStructureList(params: StructureListParams): void { list.append(empty); return; } + // 한 항목 = [측점(좌측 맞춤)][구조물 이름(우측 맞춤)] — 메모·연동 표기 등 그 외 + // 정보는 적지 않는다(2026-08-18 사용자 지시). rows.forEach((row) => { const item = document.createElement("li"); item.className = "b05-route__irregular-item"; - const name = document.createElement("strong"); - const info = document.createElement("span"); + const station = document.createElement("strong"); + const name = document.createElement("span"); if (row.kind === "structure") { const { structure } = row; item.classList.toggle("is-selected", structure.structure_id === editingId); - name.textContent = labelOfStructure(structure, typeMap, intervalM); - info.textContent = structure.memo ?? ""; + station.textContent = stationOfStructure(structure, intervalM); + name.textContent = typeMap.get(structure.type_id)?.name ?? structure.type_id; item.addEventListener("click", () => params.onSelectStructure(structure)); if (structure.structure_id === editingId) item.scrollIntoView({ block: "nearest" }); } else { @@ -103,11 +87,11 @@ export function renderStructureList(params: StructureListParams): void { "is-selected", selectedPipeChainage !== null && Math.abs(selectedPipeChainage - pipe.chainage_m) < 0.05, ); - name.textContent = labelOfPipe(pipe, typeMap, intervalM); - info.textContent = "배수유역 연동"; + station.textContent = formatStation(pipe.chainage_m, intervalM); + name.textContent = typeMap.get(pipe.facility)?.name ?? pipe.facility; item.addEventListener("click", () => params.onSelectPipe(pipe)); } - item.append(name, info); + item.append(station, name); list.append(item); }); } diff --git a/B05_Profile/B05_Profile_UI_Style.css b/B05_Profile/B05_Profile_UI_Style.css index bc0011f9..7ce6c58b 100644 --- a/B05_Profile/B05_Profile_UI_Style.css +++ b/B05_Profile/B05_Profile_UI_Style.css @@ -362,10 +362,14 @@ font-variant-numeric: tabular-nums; } +/* 항목 = [측점(좌측)][구조물 이름(우측)] — 이름이 주 정보라 본문색, 남는 폭은 + 왼쪽 마진이 먹어 오른쪽 끝에 붙는다(2026-08-18 사용자 지시). */ .b05-route__irregular-item span { overflow: hidden; - color: var(--color-text-muted); + margin-left: auto; + color: var(--color-text); font-size: var(--text-caption); + text-align: right; text-overflow: ellipsis; white-space: nowrap; }