feat: 카카오맵 api를 위한 script load

imddoy · Nov 19, 2024 · 492e1a4 · 492e1a4
1 parent 0f2e17f
commit 492e1a4
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
   <head>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-HHZWCY4574"></script>
+    <!--<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f4b73490dbec6c62c45107b45cc7ba84&libraries=services,clusterer,drawing"></script> -->
+
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
@@ -31,5 +33,7 @@
         }
       })();
     </script>
+
+
   </body>
 </html>
diff --git a/src/pages/test/KakaoMap.tsx b/src/pages/test/KakaoMap.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+
+const useLoadKakaoMap = () => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const loadKakaoSDK = () => {
+      return new Promise((resolve, reject) => {
+        if (window.kakao && window.kakao.maps) {
+          resolve(window.kakao);
+          return;
+        }
+        const script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${import.meta.env.VITE_KAKAO_MAP}&libraries=services,clusterer,drawing`;
+        script.onload = () => {
+          if (window.kakao && window.kakao.maps) {
+            resolve(window.kakao);
+          } else {
+            reject(new Error("Kakao SDK 로드 실패"));
+          }
+        };
+        script.onerror = () => reject(new Error("Kakao SDK 로드 실패"));
+        document.head.appendChild(script);
+      });
+    };
+
+    loadKakaoSDK()
+      .then(() => setIsLoaded(true))
+      .catch((error) => console.error(error));
+  }, []);
+
+  return isLoaded;
+};
+
+const KakaoMap = () => {
+  const isLoaded = useLoadKakaoMap();
+
+  useEffect(() => {
+    if (!isLoaded) {
+      return;
+    }
+
+    const { kakao } = window;
+
+    // kakao.maps.LatLng 확인
+    console.log(kakao.maps); // 제대로 로드되었는지 확인
+    console.log(kakao.maps.LatLng);
+    console.log(kakao.maps.Map);
+
+    // if (!kakao.maps.LatLng) {
+    //   console.error("kakao.maps.LatLng is not available.");
+    //   return;
+    // }
+
+    // 카카오 지도 객체 생성 예제
+    const container = document.getElementById("map"); // 지도를 표시할 div
+    const options = {
+      center: new kakao.maps.LatLng(37.5665, 126.978), // 초기 위치
+      level: 3, // 초기 확대 레벨
+    };
+    const map = new kakao.maps.Map(container, options);
+
+    // 지도에 마커 추가
+    const marker = new kakao.maps.Marker({
+      position: new kakao.maps.LatLng(37.5665, 126.978),
+    });
+    marker.setMap(map);
+  }, [isLoaded]);
+
+  return (
+    <div>
+      {isLoaded ? (
+        <div id="map" style={{ width: "100%", height: "400px" }}></div>
+      ) : (
+        <p>Loading map...</p>
+      )}
+    </div>
+  );
+};
+
+export default KakaoMap;
diff --git a/src/pages/test/kakao.d.ts b/src/pages/test/kakao.d.ts
@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    kakao: any; // 기본적으로 `any`로 설정. 더 상세한 타입 정의 가능.
+  }
+}
+
+export {};
diff --git a/src/routes/TestRoutes.tsx b/src/routes/TestRoutes.tsx
@@ -1,5 +1,6 @@
 import ActionBottomSheetTest from "@pages/test/ActionBottomSheetTest";
 import KakaoLoginTest from "@pages/test/KakaoLoginTest";
+import KakaoMap from "@pages/test/KakaoMap";
 import ModalTest from "@pages/test/modalTest/ModalTest";
 import ViewBottomSheetTest from "@pages/test/ViewBottomSheetTest";
 
@@ -23,6 +24,10 @@ const TEST_ROUTES = [
         path: "view-bottom-sheet",
         element: <ViewBottomSheetTest />,
       },
+      {
+        path: "kakaomap",
+        element: <KakaoMap />,
+      },
     ],
   },
 ];