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; }