feature/map

일단 qr추가
#15

package.json

@@ -12,10 +12,12 @@
     "@types/navermaps": "^3.0.17",
     "axios": "^0.27.2",
     "next": "^12.2.5",
+    "next-qrcode": "^2.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-kakao-maps-sdk": "^1.1.3",
-    "react-naver-maps": "^0.0.13"
+    "react-naver-maps": "^0.0.13",
+    "react-qr-reader": "^3.0.0-beta-1"
   },
   "devDependencies": {
     "eslint": "8.21.0",

pages/map/_components/KakaoAPIMap.jsx

@@ -0,0 +1,52 @@
+import { useState,useRef, useEffect }  from 'react';
+import { Map,CustomOverlayMap } from 'react-kakao-maps-sdk';
+
+export const KakaoAPIMap = () => {
+
+  const mapRef = useRef(null);
+  const [myLocation, setMyLocation] = useState('');
+  const latitude=0, longitude=0;
+  const currentPosition=[];
+  useEffect(() => {
+    // geolocation 이용 현재 위치 확인, 위치 미동의 시 기본 위치로 지정
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((position) => {
+        setMyLocation({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+
+        });
+      });
+    } else {
+      window.alert('현재 위치를 알 수 없어 기본 위치로 지정합니다.');
+      setMyLocation({ latitude: 37.4862618, longitude: 127.1222903 });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof myLocation !== 'string') {
+      // 현재 위치 추적
+      currentPosition = [myLocation.latitude, myLocation.longitude];
+      console.log(currentPosition[0], currentPosition[1]);
+    }
+
+  });
+
+
+  return (
+    <Map
+      center={{ lat: 37.496313, lng: 126.957037 }}
+      style={{ width: "100%", height: "100vh" }}
+    >
+      <CustomOverlayMap position={{ lat: 37.496313, lng: 126.957037 }}>
+        <div
+          style={{padding:"10px", backgroundColor:"#fff", color:"#000"}}
+        >
+          숭실대학교 SSUMC
+        </div>
+      </CustomOverlayMap>
+    </Map>
+  )
+};
+
+export default KakaoAPIMap;

pages/map/index.js

@@ -1,11 +1,16 @@
 import styles from "../../styles/Map.module.css";
-import NaverAPIMap from "./_components/NaverAPIMap";
+import { KakaoAPIMap } from "./_components/KakaoAPIMap";
+import Link from 'next/link'
+import {useRouter} from 'next/router'
 
 
 export default function Map() {
+    const router = useRouter();
+
+
     return (
     <>
-        <NaverAPIMap/>
+        <KakaoAPIMap/>
         <div className={styles.stardust_container}>
             <div className={styles.stardust_black}></div>
             <div className={styles.stardust_yellow}></div>
@@ -20,8 +25,10 @@ export default function Map() {
         <div className={styles.button_container}>
             <div className={styles.location_btn}></div>
             <div className={styles.refresh_btn}></div>
-            <div className={styles.guide_btn}></div>
-            <div className={styles.qr_btn}></div>
+            <div className={styles.guide_btn}><Link href="/"><a></a></Link></div>
+            <div className={styles.qr_btn} onClick={()=>router.push('/../qrcode')}>
+
+            </div>
 
         </div>
 

pages/map/test copy.jsx

@@ -0,0 +1,16 @@
+import { useState,useRef, useEffect }  from 'react';
+import { Map,CustomOverlayMap } from 'react-kakao-maps-sdk';
+
+export const KakaoAPIMap = () => {
+
+
+
+
+
+  return (
+
+
+  );
+};
+
+export default KakaoAPIMap;

pages/qrcode/index.js

@@ -0,0 +1,34 @@
+import React, {useState, useEffect} from "react";
+import { QrReader } from "react-qr-reader";
+
+export default function QrcodeScanner () {
+    const [data, setData] = useState('No result');
+    const [hasRendered, setHasRendered] = useState(false);
+    useEffect(() => {
+        setHasRendered(true)
+      }, [])
+
+    return (
+        <>
+       <div>
+        {hasRendered && (
+        <QrReader
+        onResult = {(result, error) =>{
+        if(!result) {
+            setData(result?.text);
+            console.log(result?.text);
+        }
+        if(!error) {
+            console.info(error);
+        }
+        }}
+        styles={{width : '100%'}}>
+        </QrReader>
+            )}
+
+    </div>
+    <p>{data}</p>
+
+    </>
+    )
+}