feature/map

라이브러리로 카카오맵 적용완료 #15
Soongsil-University-MakeUs-Challenge · Aug 31, 2022 · ab79764 · ab79764
1 parent 4440331
commit ab79764
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 33 deletions.
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,9 +1,12 @@
 import ContextStore from "../Contexts/contextApi";
+import Script from 'next/script'
 import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
   return (
     <ContextStore>
+      <Script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=1664a34e52ea5802af4d289cbdeef3ed&libraries=services,clusterer&autoload=false"
+    strategy="beforeInteractive"/>
       <Component {...pageProps} />
     </ContextStore>
   );

diff --git a/pages/map/NaverAPIMap.jsx b/pages/map/NaverAPIMap.jsx
@@ -1,36 +1,27 @@
-import React, { FC, useState, useEffect } from 'react';
-import { CustomOverlayMap } from 'react-kakao-maps-sdk';
-const { kakao } = window;
+import React  from 'react';
+import { CustomOverlayMap, Map, MapMarker } from 'react-kakao-maps-sdk';
+//const { kakao } = window;
 
 export const NaverAPIMap = () => {
-  const [map,setMap] = useState(null);
-
-  //처음 지도 그리기
-  useEffect(()=>{
-
-
-      const container = document.getElementById('map');
-      const options = { center: new kakao.maps.LatLng(33.450701, 126.570667) };
-      const kakaoMap = new kakao.maps.Map(container, options);
-      setMap(kakaoMap);
-  },[])
-
+
   return (
-      <div
-          style={{
-              width: '100%',
-              height: '100%',
-              marginLeft: '5px',
-              marginRight: '5px',
-          }}
-          level={3}
-      >
-
-          <div id="map" style={{ width: '100%', height: '2000px' }}>
-
-
-          </div>
-      </div>
+    <Map // 지도를 표시할 Container
+      center={{
+        // 지도의 중심좌표
+        lat: 33.450701,
+        lng: 126.570667,
+      }}
+      style={{
+        // 지도의 크기
+        width: "100%",
+        height: "450px",
+      }}
+      level={3} // 지도의 확대 레벨
+    >
+      <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}>
+        <div style={{ color: "#000" }}>Hello World!</div>
+      </MapMarker>
+    </Map>
   );
 };
 

diff --git a/pages/map/index.js b/pages/map/index.js
@@ -1,12 +1,11 @@
-import { useEffect, useRef, useState } from "react";
 import styles from "../../styles/Map.module.css";
 import NaverAPIMap from "./NaverAPIMap";
-
+import Script from 'next/script'
 
 export default function Map() {
     return (
     <>
-    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=1664a34e52ea5802af4d289cbdeef3ed"/>
+
 
         <NaverAPIMap>
         <div className={styles.stardust_container}>