Merge pull request #110 from TEAM-SYLUV/develop

Develop
TEAM-SYLUV · Aug 5, 2024 · 8e0713c · 8e0713c
2 parents 55edf05 + 503c1ee
commit 8e0713c
Show file tree

Hide file tree

Showing 6 changed files with 237 additions and 193 deletions.
diff --git a/src/components/Home/HotMarketList.js b/src/components/Home/HotMarketList.js
@@ -8,7 +8,7 @@ const HotMarketList = ({ hotMarkets }) => {
     return (
         <MarketWrapper>
             <span className="text-title mt">요즘 핫한 시장</span>
-            <StyledSwiper slidesPerView={2} spaceBetween={20}>
+            <StyledSwiper slidesPerView={2} spaceBetween={0}>
                 {hotMarkets.map((market, index) => (
                     <SwiperSlide key={index}>
                         <HotMarket market={market} />

diff --git a/src/components/Home/LatestMarketList.js b/src/components/Home/LatestMarketList.js
@@ -8,7 +8,7 @@ const LatestMarketList = ({ latestMarkets }) => {
     return (
         <MarketWrapper>
             <span className="text-title mt">최근 방문한 시장</span>
-            <StyledSwiper slidesPerView={2} spaceBetween={20}>
+            <StyledSwiper slidesPerView={2} spaceBetween={0}>
                 {latestMarkets.map((market, index) => (
                     <SwiperSlide key={index}>
                         <LatestMarket market={market} />

diff --git a/src/components/Market/VisitTab.js b/src/components/Market/VisitTab.js
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import VisitList from "./VisitList";
-import { Map, MapMarker, Polyline } from "react-kakao-maps-sdk";
+import { CustomOverlayMap, Map, MapMarker, useMap } from "react-kakao-maps-sdk";
 import { useCallback, useEffect, useState } from "react";
 import EditList from "./EditList";
 import useSyluvAxios from "hooks/useSyluvAxios";
@@ -99,6 +99,41 @@ const VisitTab = ({
         return `data:image/svg+xml;base64,${btoa(svg)}`;
     };
 
+    const MapMarkerWithCustomeOverlay = ({ lat, lng, number, content }) => {
+        const map = useMap();
+        const [isVisible, setIsVisible] = useState(false);
+
+        return (
+            <>
+                <MapMarker
+                    position={{
+                        lat,
+                        lng,
+                    }}
+                    onClick={(marker) => map.panTo(marker.getPosition())}
+                    onMouseOver={() => setIsVisible(true)}
+                    onMouseOut={() => setIsVisible(false)}
+                    image={{
+                        src: createMarkerSvg(number),
+                        size: { width: 28, height: 32 },
+                        alt: "마커 이미지",
+                    }}
+                />
+                {isVisible && (
+                    <CustomOverlayMap
+                        position={{
+                            lat,
+                            lng,
+                        }}
+                        yAnchor={0}
+                    >
+                        <WindowContainer>{content}</WindowContainer>
+                    </CustomOverlayMap>
+                )}
+            </>
+        );
+    };
+
     if (mapCenter.latitude === undefined || mapCenter.longitude === undefined) {
         return <Splash />;
     }
@@ -126,17 +161,12 @@ const VisitTab = ({
                 /> */}
 
                 {visitList.map((item) => (
-                    <MapMarker
+                    <MapMarkerWithCustomeOverlay
                         key={item.visitListId}
-                        position={{
-                            lat: item.latitude,
-                            lng: item.longitude,
-                        }}
-                        image={{
-                            src: createMarkerSvg(visitList.indexOf(item) + 1),
-                            size: { width: 28, height: 32 },
-                            alt: "마커 이미지",
-                        }}
+                        lat={item.latitude}
+                        lng={item.longitude}
+                        number={visitList.indexOf(item) + 1}
+                        content={item.store}
                     />
                 ))}
             </Map>
@@ -229,3 +259,15 @@ const Container = styled.div`
 const BodyContainer = styled.div`
     overflow-y: auto;
 `;
+
+const WindowContainer = styled.div`
+    border: 2px solid ${({ theme }) => theme.color.primary};
+    background-color: white;
+    padding: 4px 10px;
+    margin-top: 2px;
+    border-radius: 10px;
+
+    font-size: 14px;
+    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+    color: ${({ theme }) => theme.color.primary};
+`;