From ddc1204255988b90b66b71a7353ef996b9be8834 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 1 Jun 2024 15:03:43 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=20=EB=A7=88=EC=BB=A4?= =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=20=EB=B0=A9=EB=B2=95=202=EC=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/UseMap.tsx | 137 ++++++++++++++++++++++------------ src/types/naver-maps.d.ts | 1 + 2 files changed, 89 insertions(+), 49 deletions(-) diff --git a/src/components/map/UseMap.tsx b/src/components/map/UseMap.tsx index dd4ddc7..ad2d301 100644 --- a/src/components/map/UseMap.tsx +++ b/src/components/map/UseMap.tsx @@ -35,15 +35,16 @@ const UseMap: React.FC = () => { }; const mapInstance = new naver.maps.Map(mapRef.current, mapOptions); setMap(mapInstance); - + naver.maps.Event.addListener(mapInstance, 'click', () => { setSelectedMarker(null); setIsModalOpen(false); + resetMarkers(); }); + setMarkers(mapInstance); } }; - if (typeof window !== 'undefined' && window.naver) { initMap(); @@ -70,81 +71,119 @@ const UseMap: React.FC = () => { } }, [branches, map]); - useEffect(() => { - if (map) { - setMarkers(map); - } - }, [selectedMarker]); - useEffect(() => { const filtered = branches.filter(branch => branch.branchName.includes(searchQuery)); setFilteredBranches(filtered); }, [searchQuery, branches]); + useEffect(() => { + if (selectedMarker !== null) { + updateMarkers(); + } + }, [selectedMarker]); + const setMarkers = (map: naver.maps.Map) => { Object.values(markerRefs.current).forEach(marker => marker.setMap(null)); markerRefs.current = {}; branches.forEach((branch) => { - const isSelected = selectedMarker === branch.branchName; const marker = new naver.maps.Marker({ position: new naver.maps.LatLng(branch.branchLatitude, branch.branchLongitude), map: map, icon: { - url: isSelected || selectedMarker === null ? '/map/OfficeActive.svg' : '/map/OfficeInActive.svg', + url: '/map/OfficeInActive.svg', size: new naver.maps.Size(48, 48), - scaledSize: new naver.maps.Size(isSelected ? 60 : 48, isSelected ? 60 : 48), + scaledSize: new naver.maps.Size(48, 48), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(24, 24), }, }); + naver.maps.Event.addListener(marker, 'click', () => { handleMarkerClick(branch); }); + markerRefs.current[branch.branchName] = marker; }); }; - useEffect(() => { - const handleCurrentLocation = () => { - setLoading(true); - if (navigator.geolocation && map) { - navigator.geolocation.getCurrentPosition( - (position) => { - const { latitude, longitude } = position.coords; - setCurrentLatitude(latitude); - setCurrentLongitude(longitude); - - const currentLocation = new naver.maps.LatLng(latitude, longitude); - map.panTo(currentLocation); - if (markerRef.current) { - markerRef.current.setPosition(currentLocation); - } else { - markerRef.current = new naver.maps.Marker({ - position: currentLocation, - map: map, - icon: { - url: '/map/MyLocation.png', - size: new naver.maps.Size(48, 48), - scaledSize: new naver.maps.Size(48, 48), - origin: new naver.maps.Point(0, 0), - anchor: new naver.maps.Point(24, 24), - }, - }); - } - setLoading(false); - }, - (error) => { - console.error('Error getting current location:', error); - setLoading(false); - } - ); - } else { - alert('Geolocation is not supported by this browser.'); - setLoading(false); + const updateMarkers = () => { + Object.values(markerRefs.current).forEach(marker => { + marker.setIcon({ + url: '/map/OfficeInActive.svg', + size: new naver.maps.Size(48, 48), + scaledSize: new naver.maps.Size(48, 48), + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(24, 24), + }); + }); + + if (selectedMarker) { + const selectedMarkerRef = markerRefs.current[selectedMarker]; + if (selectedMarkerRef) { + selectedMarkerRef.setIcon({ + url: '/map/OfficeActive.svg', + size: new naver.maps.Size(60, 60), + scaledSize: new naver.maps.Size(60, 60), + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(30, 30), + }); } - }; + } + }; + + const resetMarkers = () => { + Object.values(markerRefs.current).forEach(marker => { + marker.setIcon({ + url: '/map/OfficeInActive.svg', + size: new naver.maps.Size(48, 48), + scaledSize: new naver.maps.Size(48, 48), + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(24, 24), + }); + }); + }; + const handleCurrentLocation = () => { + setLoading(true); + if (navigator.geolocation && map) { + navigator.geolocation.getCurrentPosition( + (position) => { + const { latitude, longitude } = position.coords; + setCurrentLatitude(latitude); + setCurrentLongitude(longitude); + + const currentLocation = new naver.maps.LatLng(latitude, longitude); + map.panTo(currentLocation); + if (markerRef.current) { + markerRef.current.setPosition(currentLocation); + } else { + markerRef.current = new naver.maps.Marker({ + position: currentLocation, + map: map, + icon: { + url: '/map/MyLocation.png', + size: new naver.maps.Size(48, 48), + scaledSize: new naver.maps.Size(48, 48), + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(24, 24), + }, + }); + } + setLoading(false); + }, + (error) => { + console.error('Error getting current location:', error); + setLoading(false); + } + ); + } else { + alert('Geolocation is not supported by this browser.'); + setLoading(false); + } + }; + + useEffect(() => { const button = document.getElementById('current-location-button'); if (button) { button.addEventListener('click', handleCurrentLocation); diff --git a/src/types/naver-maps.d.ts b/src/types/naver-maps.d.ts index ba5456b..e7b279f 100644 --- a/src/types/naver-maps.d.ts +++ b/src/types/naver-maps.d.ts @@ -12,6 +12,7 @@ declare namespace naver.maps { } class Marker { + setIcon: any; constructor(options: MarkerOptions); setMap(map: Map | null): void; setPosition(latlng: LatLng): void;