Merge: merge feature/112 to main

Feat: connect data to map marker and drawer
TripTory · May 23, 2024 · 0fe1ce9 · 0fe1ce9
2 parents 3b35264 + 47a3a36
commit 0fe1ce9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/components/common/map/MapComponent.js b/src/components/common/map/MapComponent.js
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { Map, CustomOverlayMap } from "react-kakao-maps-sdk";
-import Busan from "../../../assets/images/busan.jpg";
 import MARKERFRAME from "../../../assets/icons/markericon.svg";
 import { PropTypes } from "prop-types";
 import Drawer from "@mui/material/Drawer";
@@ -10,9 +9,13 @@ import MapDrawer from "../../../components/common/map/MapDrawer";
 const MapComponent = (props) => {
   const [data, setData] = useState({});
   const [isOpen, setIsOpen] = useState(false);
-  const toggleDrawer = (newOpen, data) => () => {
+  const [url, setUrl] = useState(props.urls);
+  const [pickedUrl, setPickedUrl] = useState("");
+
+  const toggleDrawer = (newOpen, data, url) => () => {
     setIsOpen(newOpen);
     setData(data);
+    setPickedUrl(url);
   };
 
   return (
@@ -24,7 +27,7 @@ const MapComponent = (props) => {
         zoomable={false}
         disableDoubleClickZoom={true}
       >
-        {props.data.map((it) => {
+        {props.data.map((it, index) => {
           return (
             <CustomOverlayMap
               key={it._id}
@@ -36,19 +39,16 @@ const MapComponent = (props) => {
               <div>
                 <MarkerImg src={MARKERFRAME} />
                 <TripImg
-                  src={Busan}
-                  // onClick={() => {
-                  //   handleDrawer(it);
-                  // }}
-                  onClick={toggleDrawer(true, it)}
+                  src={props.urls[index]}
+                  onClick={toggleDrawer(true, it, props.urls[index])}
                 />
               </div>
             </CustomOverlayMap>
           );
         })}
       </Map>
-      <Drawer anchor="bottom" open={isOpen} onClose={toggleDrawer(false, data)}>
-        <MapDrawer data={data} />
+      <Drawer anchor="bottom" open={isOpen} onClose={toggleDrawer(false, data, pickedUrl)}>
+        <MapDrawer data={data} url={pickedUrl} />
       </Drawer>
     </StMap>
   );
@@ -65,6 +65,7 @@ MapComponent.propTypes = {
   latitude: PropTypes.number.isRequired,
   longitude: PropTypes.number.isRequired,
   travelimg: PropTypes.string.isRequired,
+  urls: PropTypes.node.isRequired,
 };
 
 const StMap = styled.div`

diff --git a/src/components/common/map/MapDrawer.js b/src/components/common/map/MapDrawer.js
@@ -8,7 +8,7 @@ import LocationOnIcon from "@mui/icons-material/LocationOn";
 const MapDrawer = (props) => {
   return (
     <StMapDrawer>
-      <TripImg src={props.data.travelimg} />
+      <TripImg src={props.url} />
       <InfoDiv>
         <TitleP>{props.data.title}</TitleP>
         <DataP>{props.data.startdate.slice(0,10)}~{props.data.enddate.slice(0,10)}</DataP>
@@ -29,6 +29,7 @@ MapDrawer.propTypes = {
   location: PropTypes.node.isRequired,
   region: PropTypes.string.isRequired,
   travelimg: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
 };
 
 const StMapDrawer = styled.div`

diff --git a/src/pages/MapPage.js b/src/pages/MapPage.js
@@ -9,6 +9,7 @@ import axios from "axios";
 const MapPage = () => {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
+  const [url, setUrl] = useState("");
 
   useEffect(() => {
     let completed = false;
@@ -21,6 +22,8 @@ const MapPage = () => {
       );
       if (!completed) {
         setData(result.data.travels);
+        setUrl(result.data.travelUrls);
+        // console.log(url);
       }
       setLoading(true);
     }
@@ -34,7 +37,7 @@ const MapPage = () => {
       <TitleDiv>
         <TitleTypo variant="h4">나의 여행 지도</TitleTypo>
       </TitleDiv>
-      <MapComponent data={data} style={{ zIndex: 999 }} />
+      <MapComponent data={data} urls={url} style={{ zIndex: 999 }} />
       <BottomNav style={{ zIndex: 900 }} />
     </StMapPage>
   );