6주차 7차 배포

frontend/src/component/bottomsheet/BottomSheet.tsx

@@ -88,7 +88,7 @@ export const BottomSheet = ({
   return (
     <>
       <div
-        className={classNames('absolute bottom-14 z-[5000]')}
+        className={classNames('absolute bottom-14')}
         style={{
           height: `${sheetHeight * 100}vh`,
           transition: 'height 0.3s ease-out',

frontend/src/hooks/getUserLocation.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 interface IGetUserLocation {
   lat: number | null;
@@ -7,7 +7,11 @@ interface IGetUserLocation {
   error: string | null;
 }
 
-interface IDeviceOrientationEventWithPermission extends DeviceOrientationEvent {
+interface IGetUserLocationRes extends IGetUserLocation {
+  updateLocation: () => void;
+}
+
+export interface IDeviceOrientationEventWithPermission extends DeviceOrientationEvent {
   requestPermission?: () => Promise<'granted' | 'denied'>;
 }
 
@@ -33,14 +37,37 @@ interface IDeviceOrientationEventWithPermission extends DeviceOrientationEvent {
  * ```
  */
 
-export const getUserLocation = (): IGetUserLocation => {
+export const getUserLocation = (): IGetUserLocationRes => {
   const [location, setLocation] = useState<IGetUserLocation>({
     lat: null,
     lng: null,
     alpha: null,
     error: null,
   });
 
+  const updateLocation = useCallback(() => {
+    navigator.geolocation.getCurrentPosition(
+      position => {
+        setLocation(prev => ({
+          ...prev,
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+          error: null,
+        }));
+      },
+      error => {
+        setLocation(prev => ({ ...prev, error: error.message }));
+      },
+    );
+
+    window.addEventListener('deviceorientation', event => {
+      setLocation(prev => ({
+        ...prev,
+        alpha: event.alpha ?? null,
+      }));
+    });
+  }, []);
+
   useEffect(() => {
     let watchId: number;
 
@@ -107,15 +134,17 @@ export const getUserLocation = (): IGetUserLocation => {
       }
     };
 
-    requestOrientationPermission().then(() => {
-      window.addEventListener('deviceorientation', handleOrientation);
-    });
+    requestOrientationPermission();
 
     return () => {
       if (watchId) navigator.geolocation.clearWatch(watchId);
       window.removeEventListener('deviceorientation', handleOrientation);
     };
   }, []);
 
-  return location;
+  useEffect(() => {
+    updateLocation();
+  }, [updateLocation]);
+
+  return { ...location, updateLocation };
 };

frontend/src/pages/GuestView.tsx

@@ -15,7 +15,8 @@ import { AlertUI } from '@/component/common/alert/Alert.tsx';
 import { PATH_COLOR } from '@/lib/constants/canvasConstants.ts';
 
 export const GuestView = () => {
-  const { lat, lng, alpha, error } = getUserLocation();
+  const { lat, lng, alpha, error, updateLocation } = getUserLocation();
+
   const location = useLocation();
   const navigate = useNavigate(); // 네비게이션 훅 추가
 
@@ -59,6 +60,14 @@ export const GuestView = () => {
     }
   }, [lat, lng, alpha]);
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      updateLocation();
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [updateLocation]);
+
   const transformTypeGuestEntityToIGuest = (props: guestEntity | undefined): IGuest => {
     return {
       id: props?.id ?? '',