diff --git a/src/hooks/useKakaoMap.js b/src/hooks/useKakaoMap.js index 1c985d3932e8ddee22b06cf56ac39d769525b15c..ccbbc0df097c926bf7b28ef96f90551806a9efcf 100644 --- a/src/hooks/useKakaoMap.js +++ b/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(() => { diff --git a/src/pages/Home.js b/src/pages/Home.js index d5166c5e2bc123864c4a73577bfdbba8147f50f6..b00b2181232e7eccbf31e0c6d1c761b0bdc3a98e 100644 --- a/src/pages/Home.js +++ b/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('로그인이 필요합니다');