refactor: watchPosition 에서 getCurrentPosition으로 변경 (#600)

woowacourse-teams · Oct 17, 2023 · 4f477d0 · 4f477d0
1 parent f9c8a8b
commit 4f477d0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 42 deletions.
diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
@@ -29,8 +29,7 @@ function Map() {
   const { mapInstance, setMapInstance } = useMapStore((state) => state);
 
   const mapContainer = useRef(null);
-  const { location, isUsingUserLocation, requestUserLocation } =
-    useGeoLocation(mapInstance);
+  const { location, requestUserLocation } = useGeoLocation(mapInstance);
   const { showToast } = useToast();
 
   const handleCurrentLocationClick = () => {
@@ -79,10 +78,7 @@ function Map() {
         height="calc(var(--vh, 1vh) * 100)"
         $minWidth={width}
       />
-      <CurrentLocationIcon
-        onClick={handleCurrentLocationClick}
-        $isUsingUserLocation={isUsingUserLocation}
-      />
+      <CurrentLocationIcon onClick={handleCurrentLocationClick} />
     </MapContainer>
   );
 }
@@ -104,9 +100,7 @@ const MapFlex = styled(Flex)`
   }
 `;
 
-const CurrentLocationIcon = styled(CurrentLocation)<{
-  $isUsingUserLocation: boolean;
-}>`
+const CurrentLocationIcon = styled(CurrentLocation)`
   position: absolute;
   cursor: pointer;
   bottom: 8%;
@@ -115,8 +109,6 @@ const CurrentLocationIcon = styled(CurrentLocation)<{
   height: 52px;
   z-index: 10;
   opacity: 0.85;
-  filter: ${({ $isUsingUserLocation }) =>
-    $isUsingUserLocation && 'brightness(0.6)'};
 
   @media (max-width: 1036px) {
     bottom: 8%;

diff --git a/frontend/src/hooks/useGeolocation.ts b/frontend/src/hooks/useGeolocation.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { USER_LOCATION_IMAGE } from '../constants/pinImage';
 import useToast from './useToast';
@@ -13,26 +13,16 @@ const INIT_VALUE = '';
 const useGeoLocation = (mapInstance: TMap | null) => {
   const { Tmapv3 } = window;
   const { showToast } = useToast();
-  const watchPositionId = useRef<number | null>(null);
+  const [userMarker, setUserMarker] = useState<Marker | null>(null);
+  const [isRequesting, setIsRequesting] = useState<boolean>(false);
   const [location, setLocation] = useState<GeoLocationState>({
     coordinates: { lat: '', lng: '' },
   });
-  const [userMarker, setUserMarker] = useState<Marker | null>(null);
-  const [isUsingUserLocation, setIsUsingUserLocation] =
-    useState<boolean>(false);
-  const [isRequesting, setIsRequesting] = useState<boolean>(false);
 
   const removeUserMarker = () => {
-    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);
@@ -43,11 +33,6 @@ const useGeoLocation = (mapInstance: TMap | null) => {
   const createUserMarkerWithZoomingMap = () => {
     if (!mapInstance) return;
 
-    if (isUsingUserLocation) {
-      removeUserMarker();
-      return;
-    }
-
     const userCoordinates = new Tmapv3.LatLng(
       Number(location.coordinates.lat),
       Number(location.coordinates.lng),
@@ -63,7 +48,6 @@ const useGeoLocation = (mapInstance: TMap | null) => {
     });
 
     setUserMarker(userPositionMarker);
-    setIsUsingUserLocation(true);
   };
 
   const onSuccess = (position: GeolocationPosition) => {
@@ -100,22 +84,16 @@ const useGeoLocation = (mapInstance: TMap | null) => {
       onError({ code: 0, message: 'Geolocation not supported' });
     }
 
-    if (isUsingUserLocation) {
-      removeUserMarker();
-      return;
-    }
-
     if (isRequesting) {
       showToast('info', '현재 위치를 찾고 있어요.');
       return;
     }
 
+    removeUserMarker();
+
     showToast('info', '현재 위치를 불러옵니다.');
 
-    watchPositionId.current = navigator.geolocation.watchPosition(
-      onSuccess,
-      onError,
-    );
+    navigator.geolocation.getCurrentPosition(onSuccess, onError);
 
     setIsRequesting(true);
   };
@@ -126,13 +104,10 @@ const useGeoLocation = (mapInstance: TMap | null) => {
     }
 
     createUserMarkerWithZoomingMap();
-
-    return () => removeUserMarker();
   }, [location]);
 
   return {
     location,
-    isUsingUserLocation,
     requestUserLocation,
   };
 };