From 399c4dd8a270730e818ba9158087f8db320c0c60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=81?= <77565980+abyss-s@users.noreply.github.com>
Date: Fri, 2 Aug 2024 19:05:52 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20#101=20=EC=9B=80=EC=A7=81=EC=9D=B8=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=EA=B0=80=20=EB=B9=A8=EA=B0=84=20=EC=84=A0?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=ED=91=9C=EC=8B=9C=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useUserMap.js | 51 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useUserMap.js b/src/hooks/useUserMap.js
index ce8ab34..38ce6e3 100644
--- a/src/hooks/useUserMap.js
+++ b/src/hooks/useUserMap.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { getCoordinates } from "../apis/geolocation";
 import { getDogInfo } from "../apis/getDogInfo";
 
@@ -11,6 +11,40 @@ const useUserMap = (appKey, dogId, keyword = "") => {
   const infowindow = useRef(null);
   // eslint-disable-next-line no-unused-vars
   const [markers, setMarkers] = useState([]);
+  // eslint-disable-next-line no-unused-vars
+  const [positionArr, setPositionArr] = useState([]);
+
+  const makeLine = useCallback(
+    (position) => {
+      let linePath = position;
+
+      var polyline = new window.kakao.maps.Polyline({
+        path: linePath,
+        strokeWeight: 5,
+        strokeColor: "#FF0000",
+        strokeOpacity: 0.7,
+        strokeStyle: "solid",
+      });
+
+      polyline.setMap(map);
+    },
+    [map],
+  );
+
+  const setLinePathArr = useCallback(
+    (position) => {
+      const moveLatLon = new window.kakao.maps.LatLng(
+        position.coords.latitude,
+        position.coords.longitude,
+      );
+      setPositionArr((prevArr) => {
+        const newPosition = [...prevArr, moveLatLon];
+        makeLine(newPosition);
+        return newPosition;
+      });
+    },
+    [makeLine],
+  );
 
   useEffect(() => {
     const loadKakaoMap = async () => {
@@ -115,7 +149,6 @@ const useUserMap = (appKey, dogId, keyword = "") => {
             newMarkers.push(marker);
             bounds.extend(markerPosition);
 
-            // Add event listener for marker click
             window.kakao.maps.event.addListener(marker, "click", () => {
               infowindow.current.setContent(
                 `<div style="padding:5px;font-size:12px;">${place.place_name}</div>`,
@@ -126,12 +159,24 @@ const useUserMap = (appKey, dogId, keyword = "") => {
 
           setMarkers(newMarkers);
           map.setBounds(bounds);
-          map.setLevel(7); // 지도 레벨 설정
+          map.setLevel(7);
         }
       });
     }
   }, [map, keyword]);
 
+  useEffect(() => {
+    if (map) {
+      const interval = setInterval(() => {
+        navigator.geolocation.getCurrentPosition(setLinePathArr);
+      }, 5000);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }
+  }, [map, setLinePathArr]);
+
   return { mapContainer, map, currentLocation, setCurrentLocation };
 };