modal

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveshare.populateGitCoAuthors": "never"
+}

src/Map/button.jsx

@@ -0,0 +1,52 @@
+// Button.jsx
+
+import styled, { css } from "styled-components";
+
+const SIZES = {
+  // 생략
+};
+
+const VARIANTS = {
+  success: css`
+    --button-color: #ffffff;
+    --button-bg-color: #28a745;
+    --button-hover-bg-color: #218838;
+  `,
+  error: css`
+    --button-color: #ffffff;
+    --button-bg-color: #dc3545;
+    --button-hover-bg-color: #c82333;
+  `,
+  warning: css`
+    --button-color: #212529;
+    --button-bg-color: #ffc107;
+    --button-hover-bg-color: #e0a800;
+  `,
+};
+
+function Button({ disabled, size, variant, children }) {
+  const sizeStyle = SIZES[size];
+  const variantStyle = VARIANTS[variant];
+
+  return (
+    <StyledButton
+      disabled={disabled}
+      sizeStyle={sizeStyle}
+      variantStyle={variantStyle}
+    >
+      {children}
+    </StyledButton>
+  );
+}
+
+const StyledButton = styled.button`
+  ${(p) => p.sizeStyle}
+  ${(p) => p.variantStyle}
+
+  margin: 0;
+  border: none;
+  cursor: pointer;
+  /* 이하 생략 */
+`;
+
+export default Button;

src/Map/map.js

@@ -1,25 +1,28 @@
 import { getDoc } from "firebase/firestore";
-import React, { useEffect, useState } from "react";
-import { NaverMap, Marker } from "react-naver-maps";
+import React, { useEffect, useState, useRef } from "react";
+import { NaverMap, Marker, Polyline } from "react-naver-maps";
 import { RenderAfterNavermapsLoaded } from "react-naver-maps";
 import CheckGreen from "../Algorithm/CheckGreen";
 import FindFastRoute from "../Algorithm/FindFastRoute";
 import { Crosswalk } from "../database/data";
 import { getPosition, getData, db, getDocs } from "../database/firebase";
+import {PopUp} from "./modal";
 
 const Map = ({ mapLat, mapLng }) => {
-  //FindFastRoute("shortRoute", "road1", "road5");
 
   const YOUR_CLIENT_ID = "w4msaekuxw";
-  const [result, setResult] = useState([]);
-  // const [totalDB, setTotalDB] = useState([]);
 
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [result, setResult] = useState([]);
   const [isLoaded, setLoad] = useState(false);
   const [center, setCenter] = useState({
     lat: mapLat,
     lng: mapLng,
   });
   let interval;
+
+
+  //FindFastRoute("shortRoute", "road1", "road5");
   useEffect(() => {
     const totalDBPromise = getDocs("crosswalk");
     let loaded = false;
@@ -35,16 +38,80 @@ const Map = ({ mapLat, mapLng }) => {
     interval = setInterval(() => {
       if (loaded) setResult(displayMarker(totalDB));
     }, 1000);
+
+
   }, []);
 
   useEffect(() => {
     setLoad(true);
     return () => {
       console.log(">>>>>>>>>>>>>>>>>before clear interval");
       clearInterval(interval);
-    };
+    }; 
   }, []);
 
+
+  function displayMarker(totalDB) {
+    let index = 0;
+    let p = []; // db doc안에 모든 position 좌표
+    let t = []; // db doc안에 모든 duration 시간 근데 얘는 변화가 될수도?
+    let time = []; // 일단 임시로 두개 받음
+    let isGreen = []; // 지금 초록불인지 이것도 필요없을듯
+    let mt = []; //measureTime 가져옴
+    let wt = []; //waitingTime 가져옴
+
+    totalDB.forEach((value) => {
+      for (let i = 0; i < value.position.length; i++) {
+        p.push(value.position[i]);
+
+        t.push(value.duration[i]);
+        time.push(value.duration[i]);
+        isGreen.push(true);
+        mt.push(value.measureTime);
+        wt.push(value.waitingTime[i]);
+      }
+    });
+
+
+
+    const r = [];
+    for (let i = 0; i < t.length; i++) {
+      const check = CheckGreen(mt[i], t[i], wt[i]);
+      r.push(
+
+        <Marker
+          key={index++}
+          position={{
+            lat: p[i]._lat,
+            lng: p[i]._long,
+          }}
+          icon={{
+            content:
+              '<div class="cs_mapbridge" style="background-color:' +
+              check.currentSign +
+              ';">' +
+              '<div class="map_group _map_group">' +
+              '<div class="map_marker _marker tvhp tvhp_big">' +
+              '<span class="ico _icon"></span>' +
+              '<span class="shd">' +
+              check.leftTime +
+              "</span>" +
+              "</div>" +
+              "</div>" +
+              "</div>",
+          }}
+
+          onClick={() => {
+            setModalOpen(true)
+          }}
+        />
+
+      );
+    }
+
+    return r;
+  }
+
   // console.log(result);
   return isLoaded ? (
     <>
@@ -60,13 +127,32 @@ const Map = ({ mapLat, mapLng }) => {
           //onCenterChanged={(center) => setCenter({ center })}
           defaultZoom={17}
         >
-          {result}
+          {result}          
           <Marker
             position={{ lat: mapLat, lng: mapLng }}
             onClick={() => {
-              alert("여기는 입구입니다");
+              setModalOpen(true)
+            }}
+
+          />
+          <Marker
+            position={{  lat: "37.230598234139315", lng: "127.18792639494912"  }}
+            onClick={() => {
+              setModalOpen(true)
             }}
           />
+          <Polyline 
+            path={[
+              {  lat: mapLat, lng: mapLng  },
+              {  lat: "37.230598234139315", lng: "127.18792639494912"  },
+
+            ]}
+            strokeColor={'#5347AA'}
+            strokeStyle={'longdash'}
+            strokeOpacity={0.5}
+            strokeWeight={5}               
+          />
+          <PopUp isModalOpen={isModalOpen} setModalOpen={setModalOpen} ></PopUp>  
         </NaverMap>
       </RenderAfterNavermapsLoaded>
     </>
@@ -77,58 +163,3 @@ const Map = ({ mapLat, mapLng }) => {
 
 export default Map;
 
-function displayMarker(totalDB) {
-  let index = 0;
-  let p = []; // db doc안에 모든 position 좌표
-  let t = []; // db doc안에 모든 duration 시간 근데 얘는 변화가 될수도?
-  let time = []; // 일단 임시로 두개 받음
-  let isGreen = []; // 지금 초록불인지 이것도 필요없을듯
-  let mt = []; //measureTime 가져옴
-  let wt = []; //waitingTime 가져옴
-
-  totalDB.forEach((value) => {
-    for (let i = 0; i < value.position.length; i++) {
-      p.push(value.position[i]);
-
-      t.push(value.duration[i]);
-      time.push(value.duration[i]);
-      isGreen.push(true);
-      mt.push(value.measureTime);
-      wt.push(value.waitingTime[i]);
-    }
-  });
-
-  const r = [];
-  for (let i = 0; i < t.length; i++) {
-    const check = CheckGreen(mt[i], t[i], wt[i]);
-    r.push(
-      <Marker
-        key={index++}
-        position={{
-          lat: p[i]._lat,
-          lng: p[i]._long,
-        }}
-        icon={{
-          content:
-            '<div class="cs_mapbridge" style="background-color:' +
-            check.currentSign +
-            ';">' +
-            '<div class="map_group _map_group">' +
-            '<div class="map_marker _marker tvhp tvhp_big">' +
-            '<span class="ico _icon"></span>' +
-            '<span class="shd">' +
-            check.leftTime +
-            "</span>" +
-            "</div>" +
-            "</div>" +
-            "</div>",
-        }}
-        onClick={() => {
-          alert("click");
-        }}
-      />
-    );
-  }
-
-  return r;
-}

src/Map/modal.js

@@ -0,0 +1,35 @@
+import Modal from 'react-modal';
+import React, { useState } from 'react';
+
+const customStyles = {
+  content: {
+    top: '35%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    height: '30%',
+    width: '20%',
+    transform: 'translate(-40%, -10%)',
+  },
+};
+
+export function PopUp({isModalOpen,setModalOpen}) {
+
+    return (
+      <>
+        <button onClick={()=> setModalOpen(true)}>Modal Open</button>
+        <Modal  isOpen={isModalOpen} onRequestClose={() => setModalOpen(false)}
+            style={customStyles}>
+            <div>여기에 정보 입력합니다</div>
+            <div>
+              <button>출발</button>
+              <button>도착</button>
+            </div>
+        </Modal>
+      </>
+    )
+}
+
+
+