Kakao Maps API 통합 가이드

// app/components/KakaoMapScript.tsx
"use client";
import Script from "next/script";

export function KakaoMapScript() {
  const key = process.env.NEXT_PUBLIC_KAKAO_JS_KEY!;
  return (
    <Script
      src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${key}&libraries=drawing&autoload=false`}
      strategy="afterInteractive"
      onLoad={() => {
        window.kakao.maps.load(() => {
          // 모든 maps API 초기화는 이 콜백 안에서
        });
      }}
    />
  );
}

const container = document.getElementById("map");
const options = {
  center: new kakao.maps.LatLng(36.5, 127.5),  // 한국 중앙
  level: 13,                                    // 줌 (낮을수록 확대)
};
const map = new kakao.maps.Map(container, options);

const manager = new kakao.maps.drawing.DrawingManager({
  map,
  drawingMode: [
    kakao.maps.drawing.DrawingMode.MARKER,
    kakao.maps.drawing.DrawingMode.POLYGON,
    kakao.maps.drawing.DrawingMode.CIRCLE,
  ],
  polygonOptions: {
    draggable: true, removable: true, editable: true,
    strokeColor: "#10B981",
    fillColor: "#10B981",
    fillOpacity: 0.2,
  },
});

// 폴리곤 모드로 진입
manager.select(kakao.maps.drawing.OverlayType.POLYGON);

// 그리기 완료 시 좌표 추출
kakao.maps.event.addListener(manager, "drawend", () => {
  const data = manager.getData();
  // data.polygon : [{ points: [{x, y}, ...] }, ...]
  if (data.polygon.length > 0) {
    const coords = data.polygon[0].points.map(p => [p.x, p.y]);
    coords.push(coords[0]);  // closed ring
    const geojson = { type: "Polygon", coordinates: [coords] };
  }
});

// GET /api/sites/{id}의 geom (GeoJSON Polygon)
const polygon = new kakao.maps.Polygon({
  path: geom.coordinates[0].map(([lon, lat]) =>
    new kakao.maps.LatLng(lat, lon)
  ),
  strokeColor: "#047857",
  fillColor: "#10B981",
  fillOpacity: 0.25,
});
polygon.setMap(map);

// 폴리곤 중심으로 카메라 fit
const bounds = new kakao.maps.LatLngBounds();
polygon.getPath().forEach(p => bounds.extend(p));
map.setBounds(bounds);

const circle = new kakao.maps.Circle({
  center: new kakao.maps.LatLng(36.031, 129.389),
  radius: 1000,  // meters
  strokeColor: "#10B981",
  fillColor: "#10B981",
  fillOpacity: 0.2,
});
circle.setMap(map);