Portfolio


NEXT_PUBLIC_KAKAO_JS_KEY=카카오_자바스크립트_키


// app/layout.tsx 또는 별도 _document.tsx 없이 Head에서 삽입
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <head>
        <Script
          strategy="beforeInteractive"
          src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_JS_KEY}&libraries=services&autoload=false`}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}


// components/KakaoMap.tsx
"use client";
import { useEffect, useRef } from "react";

interface KakaoMapProps {
  lat: number;
  lng: number;
}

export default function KakaoMap({ lat, lng }: KakaoMapProps) {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!window.kakao || !window.kakao.maps) return;
    
    window.kakao.maps.load(() => {
      const container = mapRef.current;
      const options = {
        center: new window.kakao.maps.LatLng(lat, lng),
        level: 5,
      };

      const map = new window.kakao.maps.Map(container, options);
      const marker = new window.kakao.maps.Marker({
        position: new window.kakao.maps.LatLng(lat, lng),
      });
      marker.setMap(map);
    });
  }, [lat, lng]);

  return <div ref={mapRef} className="w-full h-[400px]" />;
}


<KakaoMap lat={35.815302} lng={127.147893} />

시작하기 : Kakao Maps JavaScript SDK 연동하기

✅ 1. Kakao Developers에 앱 등록 + 키 발급

✅ 2. .env.local에 키 저장

✅ 3. Kakao Maps 스크립트 로딩

✅ 4. 지도 생성 컴포넌트 (Client)

✅ 5. 사용 예시