diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx index 4a006c93d..614066b5e 100644 --- a/frontend/src/components/Map/index.tsx +++ b/frontend/src/components/Map/index.tsx @@ -29,12 +29,8 @@ function Map() { const { mapInstance, setMapInstance } = useMapStore((state) => state); const mapContainer = useRef(null); - const { - location, - isUsingUserLocation, - requestUserLocation, - toggleUsingUserLocation, - } = useGeoLocation(mapInstance); + const { location, isUsingUserLocation, requestUserLocation } = + useGeoLocation(mapInstance); const { showToast } = useToast(); const handleCurrentLocationClick = () => { @@ -43,12 +39,7 @@ function Map() { return; } - if (!location.loaded) { - requestUserLocation(); - return; - } - - toggleUsingUserLocation(); + requestUserLocation(); }; useEffect(() => { diff --git a/frontend/src/hooks/useGeolocation.ts b/frontend/src/hooks/useGeolocation.ts index fdbf25548..512045fde 100644 --- a/frontend/src/hooks/useGeolocation.ts +++ b/frontend/src/hooks/useGeolocation.ts @@ -4,33 +4,35 @@ import { USER_LOCATION_IMAGE } from '../constants/pinImage'; import useToast from './useToast'; type GeoLocationState = { - loaded: boolean; coordinates: { lat: string | number; lng: string | number }; error?: { code: number; message: string }; }; +const INIT_VALUE = ''; + const useGeoLocation = (mapInstance: TMap | null) => { const { Tmapv3 } = window; const { showToast } = useToast(); const watchPositionId = useRef(null); const [location, setLocation] = useState({ - loaded: false, coordinates: { lat: '', lng: '' }, }); const [userMarker, setUserMarker] = useState(null); const [isUsingUserLocation, setIsUsingUserLocation] = useState(false); + const [isRequesting, setIsRequesting] = useState(false); const removeUserMarker = () => { - if (watchPositionId.current) { - console.log('clear', watchPositionId.current); - navigator.geolocation.clearWatch(watchPositionId.current); - watchPositionId.current = null; - setLocation({ - loaded: false, - coordinates: { lat: '', lng: '' }, - }); - } + if (watchPositionId.current === null) return; + + navigator.geolocation.clearWatch(watchPositionId.current); + watchPositionId.current = null; + + setLocation({ + coordinates: { lat: INIT_VALUE, lng: INIT_VALUE }, + }); + setIsUsingUserLocation(false); + setIsRequesting(false); if (userMarker) { userMarker.setMap(null); @@ -61,70 +63,77 @@ const useGeoLocation = (mapInstance: TMap | null) => { }); setUserMarker(userPositionMarker); - }; - - const toggleUsingUserLocation = () => { - console.log(watchPositionId.current, 'ref'); - - setIsUsingUserLocation((prev) => !prev); - createUserMarkerWithZoomingMap(); + setIsUsingUserLocation(true); }; const onSuccess = (position: GeolocationPosition) => { setLocation({ - loaded: true, coordinates: { lat: position.coords.latitude, lng: position.coords.longitude, }, }); + + setIsRequesting(false); }; const onError = ( error: Pick, ) => { setLocation({ - loaded: true, - coordinates: { lat: '', lng: '' }, + coordinates: { lat: INIT_VALUE, lng: INIT_VALUE }, error: { code: error.code, message: error.message, }, }); - showToast('error', '위치 정보 사용을 허용해주세요.'); + + showToast( + 'error', + '현재 위치를 사용하려면 설정에서 위치 권한을 허용해주세요.', + ); + setIsRequesting(false); }; const requestUserLocation = () => { - console.log('request'); if (!('geolocation' in navigator)) { onError({ code: 0, message: 'Geolocation not supported' }); } - showToast('info', '위치 정보를 불러오는 중입니다.'); - if (isUsingUserLocation) { - showToast('info', '잠시 후 다시 시도해주세요.'); + removeUserMarker(); + return; + } + + if (isRequesting) { + showToast('info', '현재 위치를 찾고 있어요.'); return; } + showToast('info', '현재 위치를 불러옵니다.'); + watchPositionId.current = navigator.geolocation.watchPosition( onSuccess, onError, ); + + setIsRequesting(true); }; useEffect(() => { - if (location.coordinates.lat === '') return; + if (location.coordinates.lat === INIT_VALUE) { + return; + } + + createUserMarkerWithZoomingMap(); - console.log('useEffect'); - toggleUsingUserLocation(); + return () => removeUserMarker(); }, [location]); return { location, isUsingUserLocation, requestUserLocation, - toggleUsingUserLocation, }; };