refactor(예정노선): 구역 목록을 페이지가 직접 붙임 — 속성 판은 판만 (PLAN 597-1)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

D03_PlanAnalysis/D03_PlanAnalysis_UI_Page.ts

@@ -56,6 +56,7 @@ import {
 } from "./D03_PlanAnalysis_UI_Map";
 import { createPlanMeasure } from "./D03_PlanAnalysis_UI_Measure";
 import { createPlanPoints } from "./D03_PlanAnalysis_UI_Points";
+import { createPlanPieces } from "./D03_PlanAnalysis_UI_Pieces";
 import { createPlanProps } from "./D03_PlanAnalysis_UI_Props";
 import { lineLength, stationChainages } from "./logic/D03_PlanAnalysis_Draw";
 import {
@@ -146,6 +147,7 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
     yearStart: () => yearStart,
     commit,
   });
+  const pieces = createPlanPieces({ network: () => network, edit });
   const measure = createPlanMeasure(() => z);
   const marks = createPlanPoints({
     points: () => points,
@@ -221,7 +223,7 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
   const drawCard = createPanelCard("그리기", false);
   drawCard.append(draw.panel);
   const pieceCard = createPanelCard("구역 · 연도", false);
-  pieceCard.append(props.list);
+  pieceCard.append(pieces.list);
   const saveButton = createButton({ label: "저장", variant: "filled", onClick: () => void save() });
   const resetButton = createButton({
     label: "초기화",
@@ -336,6 +338,7 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
     });
     map.redraw();
     props.render();
+    pieces.render();
     marks.render();
     retryButton.hidden = !editable || busy || !failed;
     if (!busy)

D03_PlanAnalysis/D03_PlanAnalysis_UI_Props.ts

@@ -8,7 +8,7 @@
  *     [방향 바꾸기] [갈래 시점 지정] [선 지움](선 하나일 때) · [마크 지움](마크 고름) · 보기만 계정 = 값만.
  *   측점 방향(585-3 · 요구 446 3) = 사용자가 정함 — 본선 = [방향 바꾸기] · 다른 선에 닿은 끝 = [갈래 시점 지정]
  *     (그 점이 시점 · 꼬리에 닿은 머리 = 한 선으로 이음) · 자동 판정 없음.
- *   좌측 「구역 · 연도」 목록 = `UI_Pieces.ts`.
+ *   좌측 「구역 · 연도」 목록 = `UI_Pieces.ts`(페이지가 붙임).
  * ========================================================================== */
 
 import { createButton } from "@ui/ui_template_elements";
@@ -19,7 +19,6 @@ import { stationLabel } from "../common_util/common_util_station";
 import { lineNames, setPiecesYear, type PlanNetwork } from "./logic/D03_PlanAnalysis_Plan";
 import type { PlanEdit, PlanScope } from "./D03_PlanAnalysis_UI_Edit";
 import { PLAN_STATION_INTERVAL_M } from "./D03_PlanAnalysis_UI_Map";
-import { createPlanPieces } from "./D03_PlanAnalysis_UI_Pieces";
 
 /** 조각 연도 고를 수 — 사업연도 시작부터. */
 const YEAR_SPAN = 10;
@@ -38,9 +37,7 @@ export interface PlanPropsParams {
 export interface PlanProps {
   /** 지도 위 속성 판(지도 칸에 붙임). */
   panel: HTMLElement;
-  /** 좌측 「구역 · 연도」 목록 몸. */
+  /** 고름 · 꼴이 바뀜 — 판 다시. */
-  list: HTMLElement;
-  /** 고름 · 꼴이 바뀜 — 판 · 목록 다시. */
   render: () => void;
   /** 고를 해 — 사업연도 시작부터 열 해 + 조각에 있는 해. */
   yearOptions: () => Array<{ value: string; text: string }>;
@@ -56,7 +53,6 @@ export function createPlanProps(params: PlanPropsParams): PlanProps {
   float.root.classList.add("d03-plan__props");
   float.root.dataset.role = "plan-props";
   float.root.hidden = true;
-  const pieceList = createPlanPieces({ network: params.network, edit });
 
   function yearOptions(): Array<{ value: string; text: string }> {
     const start = params.yearStart();
@@ -167,10 +163,8 @@ export function createPlanProps(params: PlanPropsParams): PlanProps {
 
   return {
     panel: float.root,
-    list: pieceList.list,
     render() {
       renderPanel();
-      pieceList.render();
     },
     yearOptions,
   };