feature/map

카카오 지도 연결만됨
#15

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": {

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) {

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;

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>
+        </>
+
     );
+
+
 }

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;