src/hooks/useKakaoMap.js

@@ -24,7 +24,10 @@ const UseKakaoMap = (initialLocation) => {
     }, [initialLocation, map]);
 
     const clearMap = useCallback(() => {
+        console.log('clearMap1');
         if (!map) return;
+        console.log('clearMap2');
+        console.log(markers);
 
         markers.forEach(marker => {
             if (marker.marker) marker.marker.setMap(null);
@@ -42,10 +45,14 @@ const UseKakaoMap = (initialLocation) => {
             map.infowindow = null;
         }
 
-        if (map.clusterer) {
-            map.clusterer.clear();
-            map.clusterer = null;
-        }
+        const clusterers = map.markerClusterers || [];
+        clusterers.forEach(clusterer => {
+            if (clusterer) {
+                clusterer.clear();
+                clusterer.setMap(null);
+            }
+        });
+        map.markerClusterers = [];
     }, [map, markers]);
 
     const loadKakaoMapScript = useCallback(() => {

src/pages/Home.js

@@ -187,15 +187,19 @@ const Home = () => {
 
     setselectedTrip(trip);
     clearMap();
+    
     const newMarkers = [];
     const bounds = new window.kakao.maps.LatLngBounds();
     const linePath = [];
-    const allPlaces = Object.values(trip.plans)
-      .flatMap(day => day.places);
+
+    const allPlaces = Object.values(trip.plans).flatMap(day => {
+      return day.route.map(routeId => 
+        day.places.find(place => place.id === routeId)
+      );
+    });
 
     if (allPlaces.length === 0) {
       const geocoder = new window.kakao.maps.services.Geocoder();
-
       geocoder.addressSearch(trip.location, (result, status) => {
         if (status === window.kakao.maps.services.Status.OK) {
           const position = new window.kakao.maps.LatLng(
@@ -205,8 +209,6 @@ const Home = () => {
           map.setCenter(position);
           map.setLevel(8);
           map.relayout();
-        } else {
-          console.error('주소를 좌표로 변환하는데 실패했습니다.');
         }
       });
       return;
@@ -248,14 +250,16 @@ const Home = () => {
       }]
     });
 
-    const markers = allPlaces.map((place, index) => {
+    const markers = [];
+    const overlayMarkers = [];
+
+    allPlaces.forEach((place, index) => {
       const position = new window.kakao.maps.LatLng(
         place.coordinates.lat,
         place.coordinates.lng
       );
 
       const marker = new window.kakao.maps.Marker({ position });
-
       const overlayMarker = new window.kakao.maps.Marker({
         position,
         opacity: 0
@@ -269,16 +273,18 @@ const Home = () => {
 
       bounds.extend(position);
       linePath.push(position);
+      markers.push(marker);
+      overlayMarkers.push(overlayMarker);
       newMarkers.push({ marker, overlay });
-
-      return {
-        marker,
-        overlayMarker
-      };
     });
 
-    markerClusterer.addMarkers(markers.map(m => m.marker));
-    overlayClusterer.addMarkers(markers.map(m => m.overlayMarker));
+    markerClusterer.addMarkers(markers);
+    overlayClusterer.addMarkers(overlayMarkers);
+
+    window.kakao.maps.event.addListener(markerClusterer, 'clusterclick', (cluster) => {
+      const level = map.getLevel() - 1;
+      map.setLevel(level, { anchor: cluster.getCenter() });
+    });
 
     const polyline = new window.kakao.maps.Polyline({
       path: linePath,
@@ -290,21 +296,18 @@ const Home = () => {
 
     polyline.setMap(map);
     map.polyline = polyline;
-    map.relayout();
+
+    setMarkers(newMarkers);
     map.setBounds(bounds);
+    map.relayout();
 
-    window.kakao.maps.event.addListener(markerClusterer, 'clusterclick', (cluster) => {
-      const level = map.getLevel() - 1;
-      map.setLevel(level, { anchor: cluster.getCenter() });
-    });
+    map.markerClusterers = [markerClusterer, overlayClusterer];
 
-    setMarkers(newMarkers);
   }, [map, clearMap, handlePlaceSelect, createCustomOverlay]);
 
   const handleRouteChange = async (tripId, day, newRoute, places, newName) => {
     try {
       if (newName) {
-        // 여행 이름 수정
         const response = await axios.put(
           `${API_URL}/api/trips/trips/${tripId}`,
           { name: newName }
@@ -313,7 +316,6 @@ const Home = () => {
           refreshTrips();
         }
       } else if (day && newRoute) {
-        // 기존 경로 수정 로직
         const requestData = {
           dayKey: day,
           places: places,
@@ -420,6 +422,7 @@ const Home = () => {
 
   const refreshTrips = async () => {
     try {
+      clearMap();
       const token = localStorage.getItem('token');
       const response = await axios.get(
         `${API_URL}/api/trips/trips`,
@@ -430,6 +433,13 @@ const Home = () => {
         }
       );
       setTrips(response.data);
+
+      if (selectedTrip) {
+        const updatedTrip = response.data.find(trip => trip._id === selectedTrip._id);
+        if (updatedTrip) {
+          handleTripSelect(updatedTrip);
+        }
+      }
     } catch (error) {
       if (error.response?.status === 401) {
         toast.error('로그인이 필요합니다');