Aislo/B08_Quantity/B08_Quantity_UI_Milestone_KakaoMap.ts

/* =============================================================================
 * B08_Quantity_UI_Milestone_KakaoMap.ts
 * 거리이정표 카카오 지도 칸(PLAN 244-9 · 사용자 138번) — 등록 모달(소재지 고르기) · 연결선 모달(길 선 · 표지 끌기)
 *   한 벌(`editMap`) · 경로 하위 탭 지도 칸은 없앰(156 · 탭 = 그림만).
 *
 *   SDK = dapi.kakao.com/v2/maps/sdk.js(autoload=false) · 키 = 서버 GET …/milestone/map-key
 *     (.env JS 키 · 공개용 · 도메인 등록으로 막힘) · 키 없음 · 못 뜸 = 안내 한 줄 + 사진 올리기
 *   길 선 = 마지막 [길찾기] 응답 경로 좌표(메모리만 · 저장 안 함) · 처음 한 번만 맞춤(153 · 그 뒤 보기 그대로)
 *   경로 그림 = 서버 자동 캡처(244-11 · `…_State` autoRouteImage) — 브라우저 캡처 없음(접속 주소 무관)
 *   (244-10) SDK 못 받음(도메인 미등록 401) = 지금 주소(location.origin) 등록 안내 한 줄
 * ========================================================================== */

import { el } from "@ui/ui_template_elements";
import { request } from "./B08_Quantity_UI_Hydro";

export const NO_MAP =
  "카카오 JavaScript 키 · 도메인 등록 필요 — 지도 대신 [그림 변경]으로 넣으세요";
const SDK_FAIL = "KakaoSdkFail";
const SDK = "https://dapi.kakao.com/v2/maps/sdk.js";
const LINE_COLOR = "#E60046"; // 테마 무관 또렷한 길 선

interface LatLng {
  getLat(): number;
  getLng(): number;
}
interface KMap {
  setBounds(bounds: object): void;
  setCenter(p: LatLng): void;
  setLevel(level: number): void;
  relayout(): void;
  getBounds(): { contain(p: LatLng): boolean };
  panTo(p: LatLng): void;
}
interface KOverlay {
  setMap(map: KMap | null): void;
}
interface KMarker extends KOverlay {
  getPosition(): LatLng;
}
interface KakaoMaps {
  load(done: () => void): void;
  LatLng: new (lat: number, lng: number) => LatLng;
  LatLngBounds: new () => { extend(p: LatLng): void };
  Map: new (box: HTMLElement, o: { center: LatLng; level: number }) => KMap;
  Polyline: new (o: {
    path: LatLng[];
    strokeWeight: number;
    strokeColor: string;
    strokeOpacity: number;
  }) => KOverlay;
  Marker: new (o: { position: LatLng; title: string; draggable?: boolean }) => KMarker;
  event: {
    addListener(target: object, type: string, fn: (e: { latLng: LatLng }) => void): void;
  };
  CustomOverlay: new (o: { position: LatLng; content: HTMLElement; yAnchor: number }) => KOverlay;
}

let sdk: Promise<KakaoMaps> | null = null;

/** SDK 한 번 싣기 — 키 없음 · 못 받음 = NO_MAP 으로 거절(다음 부름 때 다시) */
export function loadKakaoMaps(projectId: string): Promise<KakaoMaps> {
  sdk ??= (async () => {
    const { key } = await request<{ key: string | null }>(
      `/projects/${projectId}/quantity/milestone/map-key`,
    );
    if (!key) throw new Error(NO_MAP);
    const w = window as unknown as { kakao?: { maps: KakaoMaps } };
    if (!w.kakao?.maps) {
      await new Promise<void>((done, fail) => {
        const script = document.createElement("script");
        script.src = `${SDK}?appkey=${encodeURIComponent(key)}&autoload=false`;
        script.onload = () => done();
        script.onerror = () =>
          fail(
            Object.assign(
              new Error(
                `카카오 JavaScript 키 도메인에 지금 주소(${location.origin}) 등록 필요 — 지도 대신 [그림 변경]으로 넣으세요`,
              ),
              { name: SDK_FAIL },
            ),
          );
        document.head.append(script);
      });
    }
    const maps = w.kakao?.maps;
    if (!maps) throw new Error(NO_MAP);
    await new Promise<void>((done) => maps.load(done));
    return maps;
  })();
  sdk.catch(() => (sdk = null));
  return sdk;
}

/** 고르는 지도 표지(244-13) — key = 끌어 옮길 때 돌려받는 이름 */
export interface MapPin {
  key: string;
  name: string;
  lon: number;
  lat: number;
  movable: boolean;
}

export interface EditMap {
  root: HTMLElement;
  /** 표지 · 길 선 다시 놓고 맞춤 */
  set: (pins: MapPin[], lines: Array<Array<[number, number]>>) => void;
}

/** 고르는 지도 — 움직일 표지 끌기 = onMove · 지도 누름 = onClick(있을 때만) · 점 없으면 center(경도, 위도) */
export function editMap(
  projectId: string,
  opts: {
    onMove: (key: string, lon: number, lat: number) => void;
    onClick?: (lon: number, lat: number) => void;
    center?: () => [number, number] | null;
    hint: string;
  },
): EditMap {
  const box = el("div", { className: "b08-milestone__map" });
  const hint = el("p", { className: "b08-options__hint", text: opts.hint });
  hint.dataset.b08MilestoneMapHint = "";
  let map: KMap | null = null;
  let drawn: KOverlay[] = [];
  let fitted = false; // 153 — 처음 한 번만 맞춤 · 그 뒤 고름 · 끌기는 보기(중심 · 줌) 그대로

  const set = (pins: MapPin[], lines: Array<Array<[number, number]>>): void => {
    loadKakaoMaps(projectId).then(
      (maps) =>
        requestAnimationFrame(() => {
          const points = [
            ...pins.map((p) => new maps.LatLng(p.lat, p.lon)),
            ...lines.flat().map(([lat, lon]) => new maps.LatLng(lat, lon)),
          ];
          const c = opts.center?.();
          const first = points[0] ?? (c ? new maps.LatLng(c[1], c[0]) : null);
          if (!first) return void (box.hidden = true);
          box.hidden = false;
          if (!map) {
            map = new maps.Map(box, { center: first, level: 7 });
            if (opts.onClick)
              maps.event.addListener(map, "click", (e) =>
                opts.onClick!(e.latLng.getLng(), e.latLng.getLat()),
              );
          }
          map.relayout();
          drawn.forEach((o) => o.setMap(null));
          drawn = [
            ...lines.map(
              (line) =>
                new maps.Polyline({
                  path: line.map(([lat, lon]) => new maps.LatLng(lat, lon)),
                  strokeWeight: 6,
                  strokeColor: LINE_COLOR,
                  strokeOpacity: 0.9,
                }),
            ),
            ...pins.flatMap((p) => {
              const at = new maps.LatLng(p.lat, p.lon);
              const marker = new maps.Marker({ position: at, title: p.name, draggable: p.movable });
              if (p.movable)
                maps.event.addListener(marker, "dragend", () => {
                  const to = marker.getPosition();
                  opts.onMove(p.key, to.getLng(), to.getLat());
                });
              return [
                marker,
                new maps.CustomOverlay({
                  position: at,
                  content: el("span", { className: "b08-milestone__map-label", text: p.name }),
                  yAnchor: 2.6,
                }),
              ];
            }),
          ];
          drawn.forEach((o) => o.setMap(map));
          if (fitted) {
            // 보기 밖 표지만 그쪽으로 옮김(줌 그대로)
            const view = map.getBounds();
            const out = pins.find((p) => !view.contain(new maps.LatLng(p.lat, p.lon)));
            if (out) map.panTo(new maps.LatLng(out.lat, out.lon));
          } else if (points.length > 1) {
            const bounds = new maps.LatLngBounds();
            points.forEach((p) => bounds.extend(p));
            map.setBounds(bounds);
            fitted = true;
          } else {
            map.setCenter(first);
            map.setLevel(points.length ? 4 : 9);
            fitted = points.length > 0;
          }
        }),
      (error: unknown) => {
        box.hidden = true;
        hint.textContent = (error as Error)?.name === SDK_FAIL ? (error as Error).message : NO_MAP;
      },
    );
  };

  return {
    root: el("div", { className: "b08-milestone__map-wrap", children: [hint, box] }),
    set,
  };
}