diff --git a/index.html b/index.html index 71e96c37..dd6c29f6 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,8 @@ + + + + diff --git a/src/pages/test/KakaoMap.tsx b/src/pages/test/KakaoMap.tsx new file mode 100644 index 00000000..2a60c943 --- /dev/null +++ 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 ( +
+ {isLoaded ? ( +
+ ) : ( +

Loading map...

+ )} +
+ ); +}; + +export default KakaoMap; diff --git a/src/pages/test/kakao.d.ts b/src/pages/test/kakao.d.ts new file mode 100644 index 00000000..6da1ed60 --- /dev/null +++ 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 index faf0133d..ae5f2a0f 100644 --- 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: , }, + { + path: "kakaomap", + element: , + }, ], }, ];