diff --git a/src/components/common/map/MapComponent.js b/src/components/common/map/MapComponent.js index d9e3063..081d23d 100644 --- 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 ( { { - // handleDrawer(it); - // }} - onClick={toggleDrawer(true, it)} + src={props.urls[index]} + onClick={toggleDrawer(true, it, props.urls[index])} /> ); })} - - + + ); @@ -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 index 5f70d20..b6e552c 100644 --- 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 ( - + {props.data.title} {props.data.startdate.slice(0,10)}~{props.data.enddate.slice(0,10)} @@ -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 index c6a623a..2e3f121 100644 --- 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 = () => { 나의 여행 지도 - + );