feat(560-3): D02 지도 [일반][위성] — 카카오 HYBRID · 부품 상자 분할 고르기 · 화면 취향 기억

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

D02_PlanBase/D02_PlanBase_UI_Page.ts

@@ -4,6 +4,7 @@
  *   조작(끌기 · 지도 누름 · 경위도 입력) = sessionStorage 캐시 · [저장] · [>] = PUT 정본(서버가 TM 셈)
  *   · [>] = 저장 성공 뒤 D03 · 자동저장 없음(CLAUDE.md 5장).
  *   산림청이 아니면(지정 회사 = 보기만) 끌기 · 누름 · 입력 · [저장] 없음 · [>] = 그냥 D03.
+ *   지도 [일반][위성](560-3) = 카카오 HYBRID · 고른 값 = 화면 취향(`aislo:pref:`) 기억.
  * ========================================================================== */
 
 import "./D02_PlanBase_UI_Style.css";
@@ -18,8 +19,10 @@ import {
 } from "@ui/ui_template_elements";
 import { createPanelCard } from "@ui/ui_template_collapsible";
 import { createText } from "@ui/ui_template_text";
-import { editMap, type MapPin } from "@ui/ui_template_kakao_map";
+import { editMap, type MapPin, type MapType } from "@ui/ui_template_kakao_map";
+import { createSegment } from "@ui/ui_template_segment";
 import { t } from "@ui/ui_template_locale";
+import { readByKey, writeByKey } from "../A00_Common/b_page_state";
 import { mountGroupStep } from "../A00_Common/group_workflow";
 import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
 import { navigateTo } from "../A00_Common/router";
@@ -40,6 +43,7 @@ interface PointsView {
 
 const KOREA_CENTER: [number, number] = [127.8, 36.3];
 const DIGITS = 7; // 경위도 소수 7 자리 ≈ 1 cm
+const PREF_MAP_TYPE = "aislo:pref:d02.map.type";
 
 const cacheKey = (projectId: string): string => `d02_points_${projectId}`;
 
@@ -103,7 +107,22 @@ export async function renderD02PlanBase(root: HTMLElement): Promise<void> {
       place(active, { lon, lat });
     },
   });
-  mapHost.append(map.root);
+  const mapType = (readByKey(PREF_MAP_TYPE) === "HYBRID" ? "HYBRID" : "ROADMAP") as MapType;
+  map.setType(mapType);
+  const typePick = createSegment({
+    options: [
+      { value: "ROADMAP", label: t("D02_Map_Normal") },
+      { value: "HYBRID", label: t("D02_Map_Satellite") },
+    ],
+    value: mapType,
+    ariaLabel: t("D02_Map_Type"),
+    onChange: (value) => {
+      map.setType(value as MapType);
+      writeByKey(PREF_MAP_TYPE, value);
+    },
+  });
+  typePick.root.classList.add("d02-map__type");
+  mapHost.append(map.root, typePick.root);
 
   function place(index: number, at: LonLat): void {
     points[index] = { lon: +at.lon.toFixed(DIGITS), lat: +at.lat.toFixed(DIGITS) };