Merge remote-tracking branch 'origin/sub_laptop_2' into sub_laptop_3

ui_template/ui_template_kakao_map.ts

@@ -6,6 +6,7 @@
  *     (.env JS 키 · 공개용 · 도메인 등록으로 막힘) · 키 없음 · 못 뜸 = 안내 한 줄 + 사진 올리기
  *   길 선 = 부르는 쪽이 준 [위도, 경도] 목록 · 처음 한 번만 맞춤(153 · 그 뒤 보기 그대로)
  *   (244-10) SDK 못 받음(도메인 미등록 401) = 지금 주소(location.origin) 등록 안내 한 줄
+ *   (560-3) 바탕 종류 = `setType("ROADMAP" | "HYBRID")`(위성 + 지명) · 단추는 부르는 쪽 부품
  * ========================================================================== */
 
 import "./ui_template_kakao_map.css";
@@ -29,6 +30,7 @@ interface KMap {
   relayout(): void;
   getBounds(): { contain(p: LatLng): boolean };
   panTo(p: LatLng): void;
+  setMapTypeId(id: number): void;
 }
 interface KOverlay {
   setMap(map: KMap | null): void;
@@ -52,8 +54,12 @@ interface KakaoMaps {
     addListener(target: object, type: string, fn: (e: { latLng: LatLng }) => void): void;
   };
   CustomOverlay: new (o: { position: LatLng; content: HTMLElement; yAnchor: number }) => KOverlay;
+  MapTypeId: Record<MapType, number>;
 }
 
+/** 바탕 지도 종류 — 일반 · 위성 + 지명 */
+export type MapType = "ROADMAP" | "HYBRID";
+
 let sdk: Promise<KakaoMaps> | null = null;
 
 /** SDK 한 번 싣기 — 키 없음 · 못 받음 = NO_MAP 으로 거절(다음 부름 때 다시) */
@@ -111,6 +117,8 @@ export interface EditMap {
     colors?: string[],
     focus?: string,
   ) => void;
+  /** 바탕 종류(지도가 아직 없으면 만들 때 씀) */
+  setType: (type: MapType) => void;
 }
 
 /** 고르는 지도 — 움직일 표지 끌기 = onMove · 지도 누름 = onClick(있을 때만) · 점 없으면 center(경도, 위도) */
@@ -126,6 +134,8 @@ export function editMap(opts: {
   let map: KMap | null = null;
   let drawn: KOverlay[] = [];
   let fitted = false; // 153 — 처음 한 번만 맞춤 · 그 뒤 고름 · 끌기는 보기(중심 · 줌) 그대로
+  let type: MapType = "ROADMAP";
+  let mapTypes: KakaoMaps["MapTypeId"] | null = null;
 
   const set = (
     pins: MapPin[],
@@ -147,6 +157,8 @@ export function editMap(opts: {
           box.hidden = false;
           if (!map) {
             map = new maps.Map(box, { center: first, level: 7 });
+            mapTypes = maps.MapTypeId;
+            map.setMapTypeId(mapTypes[type]);
             if (opts.onClick)
               maps.event.addListener(map, "click", (e) =>
                 opts.onClick!(e.latLng.getLng(), e.latLng.getLat()),
@@ -222,5 +234,9 @@ export function editMap(opts: {
   return {
     root: el("div", { className: "ui-kakao-map", children: [hint, box] }),
     set,
+    setType: (next) => {
+      type = next;
+      if (map && mapTypes) map.setMapTypeId(mapTypes[next]);
+    },
   };
 }

ui_template/ui_template_locale_de.ts

@@ -129,6 +129,9 @@ export const ui_locales_de = {
   D02_Lat: ["위도", "Lat"],
   D02_Pick_Point: ["지도에 놓을 지점 고르기", "Pick the point to place on the map"],
   D02_Map_Hint: ["지도를 눌러 지점을 놓습니다.", "Click the map to place a point."],
+  D02_Map_Type: ["바탕 지도", "Base map"],
+  D02_Map_Normal: ["일반", "Map"],
+  D02_Map_Satellite: ["위성", "Satellite"],
   D02_View_Only: [
     "보기 전용 — 지점은 산림청만 고칩니다.",
     "View only — only the Forest Service edits points.",