From 4440331e0a2e9038d43cdc60c23512d37d9fa7b4 Mon Sep 17 00:00:00 2001
From: jimin <moana16@naver.com>
Date: Wed, 31 Aug 2022 15:49:02 +0900
Subject: [PATCH] =?UTF-8?q?feature/map=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EC=A7=80=EB=8F=84=20=EC=97=B0=EA=B2=B0=EB=A7=8C=EB=90=A8=20#15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json         |  31 +++++++++++++++++++++++++++++++
 package.json              |   1 +
 pages/index.js            |   2 ++
 pages/map/NaverAPIMap.jsx |  37 +++++++++++++++++++++++++++++++++++++
 pages/map/index.js        |  17 +++++++++++------
 public/img_rank.png       | Bin 0 -> 3762 bytes
 styles/Map.module.css     |   2 +-
 7 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 pages/map/NaverAPIMap.jsx
 create mode 100644 public/img_rank.png

diff --git a/package-lock.json b/package-lock.json
index 0391526..109bc86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "next": "12.2.3",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-kakao-maps-sdk": "^1.1.3",
         "react-naver-maps": "^0.0.13"
       },
       "devDependencies": {
@@ -2353,6 +2354,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/kakao.maps.d.ts": {
+      "version": "0.1.33",
+      "resolved": "https://registry.npmjs.org/kakao.maps.d.ts/-/kakao.maps.d.ts-0.1.33.tgz",
+      "integrity": "sha512-ANsAznVkdnaV1EhZcbE3wcEOWbJSX7YOs3Cka1gOPzMDVibNQ6mm8zgju26R1qSAKWBNNGbDZy5BmtZ6pQ8peA=="
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.22",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
@@ -2999,6 +3005,18 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-kakao-maps-sdk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-kakao-maps-sdk/-/react-kakao-maps-sdk-1.1.3.tgz",
+      "integrity": "sha512-r3ypRhgG17nCO1g6umYBLLVQo/hV3gi0EasFxTjr3A6ghV+UfyqTTYYmO6hYyVOQtrBkn9il3vaV8j/AHabj1A==",
+      "dependencies": {
+        "kakao.maps.d.ts": "^0.1.33"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/react-naver-maps": {
       "version": "0.0.13",
       "resolved": "https://registry.npmjs.org/react-naver-maps/-/react-naver-maps-0.0.13.tgz",
@@ -5223,6 +5241,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "kakao.maps.d.ts": {
+      "version": "0.1.33",
+      "resolved": "https://registry.npmjs.org/kakao.maps.d.ts/-/kakao.maps.d.ts-0.1.33.tgz",
+      "integrity": "sha512-ANsAznVkdnaV1EhZcbE3wcEOWbJSX7YOs3Cka1gOPzMDVibNQ6mm8zgju26R1qSAKWBNNGbDZy5BmtZ6pQ8peA=="
+    },
     "language-subtag-registry": {
       "version": "0.3.22",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
@@ -5643,6 +5666,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-kakao-maps-sdk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-kakao-maps-sdk/-/react-kakao-maps-sdk-1.1.3.tgz",
+      "integrity": "sha512-r3ypRhgG17nCO1g6umYBLLVQo/hV3gi0EasFxTjr3A6ghV+UfyqTTYYmO6hYyVOQtrBkn9il3vaV8j/AHabj1A==",
+      "requires": {
+        "kakao.maps.d.ts": "^0.1.33"
+      }
+    },
     "react-naver-maps": {
       "version": "0.0.13",
       "resolved": "https://registry.npmjs.org/react-naver-maps/-/react-naver-maps-0.0.13.tgz",
diff --git a/package.json b/package.json
index cc647d3..2cc7743 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "next": "12.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-kakao-maps-sdk": "^1.1.3",
     "react-naver-maps": "^0.0.13"
   },
   "devDependencies": {
diff --git a/pages/index.js b/pages/index.js
index b1b0fad..0ce2015 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,6 +7,8 @@ export default function Home() {
   const [count, setCount] = useState(0); // 글자 수 카운터 변수
   const scrollRef = useRef();
 
+  console.log(process.env.NEXT_PUBLIC_MAP_KEY)
+
   useEffect(() => {
     const textInterval = setInterval(() => {
       if (count < totalText.length) {
diff --git a/pages/map/NaverAPIMap.jsx b/pages/map/NaverAPIMap.jsx
new file mode 100644
index 0000000..d61d2cf
--- /dev/null
+++ b/pages/map/NaverAPIMap.jsx
@@ -0,0 +1,37 @@
+import React, { FC, useState, useEffect } from 'react';
+import { CustomOverlayMap } 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>
+  );
+};
+
+export default NaverAPIMap;
\ No newline at end of file
diff --git a/pages/map/index.js b/pages/map/index.js
index 7fb03a0..f09c211 100644
--- a/pages/map/index.js
+++ b/pages/map/index.js
@@ -1,12 +1,14 @@
 import { useEffect, useRef, useState } from "react";
 import styles from "../../styles/Map.module.css";
+import NaverAPIMap from "./NaverAPIMap";
 
-export default function Map() {
-
-    
 
+export default function Map() {
     return (
-    <div className={styles.map}>
+    <>
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=1664a34e52ea5802af4d289cbdeef3ed"/>
+    
+        <NaverAPIMap>
         <div className={styles.stardust_container}>
             <div className={styles.stardust_black}></div>
             <div className={styles.stardust_yellow}></div>
@@ -25,7 +27,10 @@ export default function Map() {
             <div className={styles.qr_btn}></div>
 
         </div>
-
-    </div>
+        </NaverAPIMap>
+        </>
+        
     );
+
+    
 }
diff --git a/public/img_rank.png b/public/img_rank.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c3457d82829214717a04876f3d69c1f951e58d9
GIT binary patch
literal 3762
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

literal 0
HcmV?d00001

diff --git a/styles/Map.module.css b/styles/Map.module.css
index 2732224..97148dc 100644
--- a/styles/Map.module.css
+++ b/styles/Map.module.css
@@ -39,7 +39,7 @@
     position: fixed;
     bottom: 50px;
     left: 50px;
-    content: url(../public/logo_small.png);
+    content: url(../public/img_rank.png);
 }
 .button_container {
     position: fixed;