feat: 먼지 마커 렌더링 (더미데이터)

Soongsil-University-MakeUs-Challenge · Sep 24, 2022 · f17b701 · f17b701
1 parent 00ddda0
commit f17b701
Show file tree

Hide file tree

Showing 14 changed files with 2,475 additions and 99 deletions.
diff --git a/apis/service.js b/apis/service.js
@@ -0,0 +1,17 @@
+import axios from "axios";
+
+// export const getToken = () => localStorage.getItem('access_token') ?? null
+
+export const statDustAPI = axios.create({
+    baseURL: '',
+    headers: {
+      accept: "application/json",
+      "Content-Type": "application/json",
+      "Access-Control-Allow-Origin": "*",
+    //   "ACCESS-TOKEN": getToken() ?? ''
+    },
+});
+
+export async function getDusts(university) {
+    return await statDustAPI.get(`/map/${university}`)
+}
diff --git a/image/img-dust-black.png b/image/img-dust-black.png
diff --git a/pages/_document.jsx b/pages/_document.jsx
@@ -23,10 +23,7 @@ export default class MyDocument extends Document {
     return (
         <Html lang="ko">
           <Head />
-          <script
-            type="text/javascript"
-            src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoMapKey}&libraries=services`}
-          />
+          <script type="text/javascript" src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoMapKey}&libraries=services`}/>
           <body>
           <Main />
           <NextScript />

diff --git a/pages/map/_components/Dust.jsx b/pages/map/_components/Dust.jsx
@@ -0,0 +1,27 @@
+
+import { useState, useRef, useEffect }  from 'react';
+import { DustBlack } from '../../../public/img-dust-black.svg'
+import { DustPurple } from '../../../public/img-dust-purple.svg'
+import { DustOrange } from '../../../public/img-dust-orange.svg'
+import { DustGreen } from '../../../public/img-dust-green.svg'
+import { DustWhite } from '../../../public/img-dust-white.svg'
+import Image from 'next/image';
+
+const DustMapper = {
+    1 : DustBlack,
+    2 : DustPurple,
+    3 : DustOrange,
+    4 : DustGreen,
+    5 : DustWhite
+}
+
+
+const Dust = ({ dustId }) => {
+    return (
+        <div>
+            <Image src={DustMapper[dustId]} alt='dust-image'/>
+        </div>
+    )
+}
+
+export default Dust
diff --git a/pages/map/_components/KakaoAPIMap.jsx b/pages/map/_components/KakaoAPIMap.jsx
@@ -1,12 +1,55 @@
 import { useState,useRef, useEffect }  from 'react';
-import { Map,CustomOverlayMap } from 'react-kakao-maps-sdk';
+import { Map,CustomOverlayMap, MapMarker } from 'react-kakao-maps-sdk';
+import Image from 'next/image';
+import styles from "../../../styles/Map.module.css";
 
-export const KakaoAPIMap = () => {
+const dusts = [
+  {
+      "dustId": 1,
+      "longitude": 126.9548168,
+      "latitude": 37.495626,
+      "caught": true
+  },
+  {
+      "dustId": 2,
+      "longitude": 126.9596122,
+      "latitude": 37.4954321,
+      "caught": false
+  },
+  {
+      "dustId": 3,
+      "longitude": 126.9561681,
+      "latitude":  37.4957653,
+      "caught": false
+  },
+  {
+      "dustId": 4,
+      "longitude": 126.9562425,
+      "latitude": 37.4972478,
+      "caught": false
+  },
+  {
+      "dustId": 5,
+      "longitude": 126.9551486,
+      "latitude": 37.4965255,
+      "caught": false
+  }
+]
+
+const dustMapper = {
+  1: styles.dust_black,
+  2: styles.dust_white,
+  3: styles.dust_green,
+  4: styles.dust_orange,
+  5: styles.dust_purple
+}
 
+export const KakaoAPIMap = () => {
   const mapRef = useRef(null);
   const [myLocation, setMyLocation] = useState('');
   const latitude=0, longitude=0;
   const currentPosition=[];
+
   useEffect(() => {
     // geolocation 이용 현재 위치 확인, 위치 미동의 시 기본 위치로 지정
     if (navigator.geolocation) {
@@ -34,19 +77,38 @@ export const KakaoAPIMap = () => {
 
 
   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>
+    <Map center={{ lat: 37.496313, lng: 126.957037 }}style={{ width: "100%", height: "100vh" }}>
+
+      {dusts.map((dust) => {
+          return <CustomOverlayMap key={dust.dustId} position={{ lat: dust.latitude, lng: dust.longitude }}>
+            <div className={dustMapper[dust.dustId]}></div>
+          </CustomOverlayMap>
+      })}
+
+      {/* <CustomOverlayMap position={{ lat: 37.495626, lng: 126.9548168 }}>
+        <div className={styles.dust_black}></div>
+
+        <Image src="/img-dust-black.svg" width={30} height={30} alt="dust-black-image" />
       </CustomOverlayMap>
+
+      <CustomOverlayMap position={{ lat: 37.4954321, lng: 126.9596122 }}>
+        <div className={styles.dust_orange}></div>
+      </CustomOverlayMap>
+
+      <CustomOverlayMap position={{ lat: 37.4957653, lng: 126.9561681 }}>
+        <div className={styles.dust_green}></div>
+      </CustomOverlayMap>
+
+      <CustomOverlayMap position={{ lat: 37.4972478, lng: 126.9562425 }}>
+        <div className={styles.dust_purple}></div>
+      </CustomOverlayMap>
+
+      <CustomOverlayMap position={{ lat: 37.4965255, lng: 126.9551486 }}>
+        <div className={styles.dust_white}></div>
+      </CustomOverlayMap> */}
     </Map>
   )
 };
+//!4d
 
 export default KakaoAPIMap;
diff --git a/pages/qrcode/index.js b/pages/qrcode/index.js
@@ -10,25 +10,19 @@ export default function QrcodeScanner () {
 
     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>
+            {hasRendered && (
+                <QrReader
+                    onResult={(result, error) => {
+                    if (!!result) {
+                        setData(result?.text);
+                    }
+
+                    if (!!error) {
+                        console.info(error);
+                    } }}
+                    style={{ width: '100%' }} />
             )}
-
-    </div>
-    <p>{data}</p>
-
-    </>
+             <p>{data}</p>
+        </>
     )
 }
diff --git a/public/img-dust-black.png b/public/img-dust-black.png
diff --git a/public/img-dust-black.svg b/public/img-dust-black.svg
diff --git a/public/img-dust-green.svg b/public/img-dust-green.svg