From 492e1a4d045c2c9256ea32a13746af2f0681550c Mon Sep 17 00:00:00 2001 From: ocahs9 Date: Tue, 19 Nov 2024 17:55:51 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=EB=A7=B5=20?= =?UTF-8?q?api=EB=A5=BC=20=EC=9C=84=ED=95=9C=20script=20load?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++ src/pages/test/KakaoMap.tsx | 82 +++++++++++++++++++++++++++++++++++++ src/pages/test/kakao.d.ts | 7 ++++ src/routes/TestRoutes.tsx | 5 +++ 4 files changed, 98 insertions(+) create mode 100644 src/pages/test/KakaoMap.tsx create mode 100644 src/pages/test/kakao.d.ts 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: , + }, ], }, ];