refactor: 사용자 위치 조회 로직 수정 (#596)

woowacourse-teams · Oct 17, 2023 · 9ee045a · 9ee045a
1 parent a28aaec
commit 9ee045a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
@@ -125,7 +125,7 @@ const CurrentLocationIcon = styled(CurrentLocation)<{
   z-index: 10;
   opacity: 0.85;
   filter: ${({ $isUsingUserLocation }) =>
-    !$isUsingUserLocation && 'brightness(0.6)'};
+    $isUsingUserLocation && 'brightness(0.6)'};
 
   @media (max-width: 1036px) {
     bottom: 8%;

diff --git a/frontend/src/hooks/useGeolocation.ts b/frontend/src/hooks/useGeolocation.ts
@@ -18,21 +18,30 @@ const useGeoLocation = (mapInstance: TMap | null) => {
     coordinates: { lat: '', lng: '' },
   });
   const [userMarker, setUserMarker] = useState<Marker | null>(null);
-  const [isUsingUserLocation, setIsUsingUserLocation] = useState<boolean>(true);
+  const [isUsingUserLocation, setIsUsingUserLocation] =
+    useState<boolean>(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: '' },
+      });
     }
 
-    userMarker?.setMap(null);
-    setUserMarker(null);
+    if (userMarker) {
+      userMarker.setMap(null);
+      setUserMarker(null);
+    }
   };
 
   const createUserMarkerWithZoomingMap = () => {
     if (!mapInstance) return;
 
-    if (!isUsingUserLocation) {
+    if (isUsingUserLocation) {
       removeUserMarker();
       return;
     }
@@ -55,7 +64,7 @@ const useGeoLocation = (mapInstance: TMap | null) => {
   };
 
   const toggleUsingUserLocation = () => {
-    if (location.coordinates.lat === '') return;
+    console.log(watchPositionId.current, 'ref');
 
     setIsUsingUserLocation((prev) => !prev);
     createUserMarkerWithZoomingMap();
@@ -86,19 +95,28 @@ const useGeoLocation = (mapInstance: TMap | null) => {
   };
 
   const requestUserLocation = () => {
+    console.log('request');
     if (!('geolocation' in navigator)) {
       onError({ code: 0, message: 'Geolocation not supported' });
     }
 
     showToast('info', '위치 정보를 불러오는 중입니다.');
 
+    if (isUsingUserLocation) {
+      showToast('info', '잠시 후 다시 시도해주세요.');
+      return;
+    }
+
     watchPositionId.current = navigator.geolocation.watchPosition(
       onSuccess,
       onError,
     );
   };
 
   useEffect(() => {
+    if (location.coordinates.lat === '') return;
+
+    console.log('useEffect');
     toggleUsingUserLocation();
   }, [location]);