Merge remote-tracking branches 'origin/sub_laptop_1' and 'origin/sub_laptop_3' into main_laptop_1

D03_PlanAnalysis/D03_PlanAnalysis_Api.ts

@@ -135,10 +135,11 @@ export async function fetchPlanSurface(projectId: string): Promise<PlanSurface |
   return { modelId: model.id, grid: parseDtmGrid(await fetchCachedBytes(projectId, url)) };
 }
 
-/** 지도 겹 그림(569-1) — 작업 좌표계 m 상자 · data URL. */
+/** 지도 겹 그림(569-1) — 작업 좌표계 m 상자(칸 가장자리) · data URL(위 = 북) · 단계 색 · 넓이 비율. */
 export interface PlanRaster {
   box_m: [number, number, number, number];
   image: string;
+  bands: Array<{ min_deg: number; max_deg: number; color: string; ratio: number }>;
 }
 
 export const fetchPlanCadastral = (projectId: string): Promise<GeoJsonCollection> =>

D03_PlanAnalysis/D03_PlanAnalysis_UI_Layers.ts

@@ -60,11 +60,6 @@ const LAYERS: readonly LayerDef[] = [
 const PREF_KEY = "aislo:pref:d03.layers";
 /** 등고선을 받아 올 그은 선 둘레(m). */
 const CONTOUR_PAD_M = 600;
-const SLOPE_STEPS = [
-  { label: "15°", token: "--draw-slope-15" },
-  { label: "35°", token: "--draw-slope-35" },
-  { label: "40°", token: "--draw-slope-40" },
-];
 
 interface Prepared {
   contour: PreparedLayer;
@@ -142,10 +137,7 @@ export function createPlanLayers(opts: {
   bar.classList.add("d03-plan__layers");
   const legend = document.createElement("div");
   legend.className = "d03-plan__legend";
-  legend.title = "급경사 색 — 그 값 이상";
-  legend.append(
-    createLegend(SLOPE_STEPS.map((step) => ({ label: step.label, color: `var(${step.token})` }))),
-  );
+  legend.title = "급경사 색 — 단계 · 받은 지형 안 넓이 비율";
 
   function sync(): void {
     for (const def of LAYERS) {
@@ -159,6 +151,8 @@ export function createPlanLayers(opts: {
     legend.hidden = !meta || !on.slope || !data.slope;
   }
 
+  sync();
+
   function toggle(key: PlanLayerKey): void {
     on[key] = !on[key];
     writeByKey(PREF_KEY, JSON.stringify(on));
@@ -239,6 +233,15 @@ export function createPlanLayers(opts: {
     } else {
       const raster = await fetchPlanRaster(projectId, "slope");
       data.slope = { raster, image: await loadImage(raster.image) };
+      // 범례 = 서버 단계 색 그대로(색 한 곳)
+      legend.replaceChildren(
+        createLegend(
+          raster.bands.map((band) => ({
+            label: `${band.min_deg}${band.max_deg < 90 ? `~${band.max_deg}°` : "°↑"} ${(band.ratio * 100).toFixed(1)} %`,
+            color: band.color,
+          })),
+        ),
+      );
     }
   }
 
@@ -271,7 +274,7 @@ export function createPlanLayers(opts: {
       draw: (context, map) => {
         if (!on.cadastral || !data.cadastral) return;
         context.globalAlpha = 0.8;
-        stroke(context, map, data.cadastral, themeColor("--draw-map-parcel", "#facc15"), 0.8);
+        stroke(context, map, data.cadastral, themeColor("--draw-map-parcel", "#f0abfc"), 0.8);
       },
     },
     {

D03_PlanAnalysis/D03_PlanAnalysis_UI_Style.css

@@ -29,7 +29,6 @@
   position: absolute;
   top: var(--spacing-8);
   right: var(--spacing-8);
-  align-items: flex-end;
 }
 
 /* 569-2 바탕 겹 단추 — 왼쪽 위 · 급경사 범례 — 왼쪽 아래 */