260725_1

B05_wf2_Route/B05_wf2_Route_UI_Panel.ts

@@ -4,7 +4,7 @@ import {
   type IrregularStation,
   type IrregularStationsSection,
 } from "./B05_wf2_Route_UI_IrregularStations";
-import { type ButtonVariant, createButton } from "@ui/ui_template_elements";
+import { type ButtonVariant, createButton, createSelectField } from "@ui/ui_template_elements";
 import { attachCollapsible } from "@ui/ui_template_collapsible";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 
@@ -218,18 +218,24 @@ export function createRoutePanel(callbacks: PanelCallbacks) {
 
   const conditions = section("임도 기준·옵션");
   conditions.root.classList.add("is-collapsed");
-  const algorithm = document.createElement("select");
-  algorithm.innerHTML =
-    '<option value="dijkstra">Dijkstra</option><option value="ridge_valley">능선·계곡</option>';
-  const gradeClass = document.createElement("select");
-  gradeClass.innerHTML =
-    '<option value="trunk">간선</option><option value="branch">지선</option><option value="work">작업</option>';
-  const algorithmLabel = document.createElement("label");
-  algorithmLabel.className = "b05-route__field";
-  algorithmLabel.append(document.createTextNode("알고리즘"), algorithm);
-  const gradeLabel = document.createElement("label");
-  gradeLabel.className = "b05-route__field";
-  gradeLabel.append(document.createTextNode("임도 등급"), gradeClass);
+  // 드롭다운은 공통 컴포넌트(createSelectField) 재사용. `.select`로 받아 이하 로직 불변.
+  const algorithmField = createSelectField({
+    label: "알고리즘",
+    options: [
+      { value: "dijkstra", text: "Dijkstra" },
+      { value: "ridge_valley", text: "능선·계곡" },
+    ],
+  });
+  const algorithm = algorithmField.select;
+  const gradeField = createSelectField({
+    label: "임도 등급",
+    options: [
+      { value: "trunk", text: "간선" },
+      { value: "branch", text: "지선" },
+      { value: "work", text: "작업" },
+    ],
+  });
+  const gradeClass = gradeField.select;
   const minCurveRadius = numberField("최소 곡선반경 (m)");
   const maxUphillGrade = numberField("오르막 경사 상한 (%)");
   const maxDownhillGrade = numberField("내리막 경사 상한 (%)");
@@ -248,7 +254,13 @@ export function createRoutePanel(callbacks: PanelCallbacks) {
     minUphillGrade.wrapper,
     minDownhillGrade.wrapper,
   );
-  conditions.body.append(algorithmLabel, gradeLabel, paved.wrapper, avoidPass.wrapper, details);
+  conditions.body.append(
+    algorithmField.root,
+    gradeField.root,
+    paved.wrapper,
+    avoidPass.wrapper,
+    details,
+  );
 
   const sectionOptions = section(L("B05_Route_Group_SectionOptions"));
   sectionOptions.root.classList.add("is-collapsed");
@@ -262,12 +274,14 @@ export function createRoutePanel(callbacks: PanelCallbacks) {
   );
 
   const gradeLine = section("종단 설계 기준");
-  const terrainType = document.createElement("select");
-  terrainType.innerHTML =
-    '<option value="normal">일반지형</option><option value="special">특수지형</option>';
-  const terrainLabel = document.createElement("label");
-  terrainLabel.className = "b05-route__field";
-  terrainLabel.append(document.createTextNode("지형 구분"), terrainType);
+  const terrainField = createSelectField({
+    label: "지형 구분",
+    options: [
+      { value: "normal", text: "일반지형" },
+      { value: "special", text: "특수지형" },
+    ],
+  });
+  const terrainType = terrainField.select;
   // 역기울기(5%) 상한 방향은 서버가 지반 형상에서 자동 판정(main_direction="auto")하므로
   // 수동 선택 UI는 두지 않는다. 노선 균형 구역 길이도 자동 산출 기본값(전체 1구역)에 맡긴다.
   const maxGradePct = numberField("최대 종단기울기 (%)");
@@ -288,7 +302,7 @@ export function createRoutePanel(callbacks: PanelCallbacks) {
     startElevationOffset.wrapper,
     endElevationOffset.wrapper,
   );
-  gradeLine.body.append(terrainLabel, criteriaNote, gradeAdvanced);
+  gradeLine.body.append(terrainField.root, criteriaNote, gradeAdvanced);
 
   // 공사 시작점 — 이전 공사에 이어 시공할 때 0측점을 임의 측점/누가거리로 시작 표기한다.
   // (내부 chainage는 0기준 유지, 측점 라벨·누가거리 "표시"만 이 값만큼 이동.) 기본값 0/0.

B05_wf2_Route/B05_wf2_Route_UI_Style.css

@@ -708,10 +708,7 @@
   color: rgb(37 99 235);
 }
 
-.b05-profile-table__irregular-col-cell.is-plan {
-  color: var(--color-royal-amethyst, rgb(109 40 217));
-  font-weight: var(--font-weight-medium);
-}
+/* 계획고(is-plan)는 오버레이에서 별도 강조 없이 다른 값과 동일한 스타일을 쓴다(작업 C-2). */
 
 /* 값 열의 계획고 직접 입력 셀 — 열은 pointer-events:none이라 입력만 되살린다. */
 .b05-profile-table__irregular-input {