From ab79764ce37fc6cc4c0fd9e184c9d85182784688 Mon Sep 17 00:00:00 2001
From: jimin <moana16@naver.com>
Date: Wed, 31 Aug 2022 16:26:50 +0900
Subject: [PATCH] =?UTF-8?q?feature/map=20=EB=9D=BC=EC=9D=B4=EB=B8=8C?=
 =?UTF-8?q?=EB=9F=AC=EB=A6=AC=EB=A1=9C=20=EC=B9=B4=EC=B9=B4=EC=98=A4?=
 =?UTF-8?q?=EB=A7=B5=20=EC=A0=81=EC=9A=A9=EC=99=84=EB=A3=8C=20#15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_app.js             |  3 +++
 pages/map/NaverAPIMap.jsx | 51 ++++++++++++++++-----------------------
 pages/map/index.js        |  5 ++--
 3 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/pages/_app.js b/pages/_app.js
index 7031851..dda419b 100644
--- 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
index d61d2cf..88a1b81 100644
--- 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
index f09c211..a0c846e 100644
--- 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}>