diff --git a/frontend/src/component/bottomsheet/BottomSheet.tsx b/frontend/src/component/bottomsheet/BottomSheet.tsx index 31d25c0..00c901c 100644 --- a/frontend/src/component/bottomsheet/BottomSheet.tsx +++ b/frontend/src/component/bottomsheet/BottomSheet.tsx @@ -88,7 +88,7 @@ export const BottomSheet = ({ return ( <>
void; +} + +export interface IDeviceOrientationEventWithPermission extends DeviceOrientationEvent { requestPermission?: () => Promise<'granted' | 'denied'>; } @@ -33,7 +37,7 @@ interface IDeviceOrientationEventWithPermission extends DeviceOrientationEvent { * ``` */ -export const getUserLocation = (): IGetUserLocation => { +export const getUserLocation = (): IGetUserLocationRes => { const [location, setLocation] = useState({ lat: null, lng: null, @@ -41,6 +45,29 @@ export const getUserLocation = (): IGetUserLocation => { 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,9 +134,7 @@ export const getUserLocation = (): IGetUserLocation => { } }; - requestOrientationPermission().then(() => { - window.addEventListener('deviceorientation', handleOrientation); - }); + requestOrientationPermission(); return () => { if (watchId) navigator.geolocation.clearWatch(watchId); @@ -117,5 +142,9 @@ export const getUserLocation = (): IGetUserLocation => { }; }, []); - return location; + useEffect(() => { + updateLocation(); + }, [updateLocation]); + + return { ...location, updateLocation }; }; diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx index 3a568bd..751fd48 100644 --- a/frontend/src/pages/GuestView.tsx +++ b/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 ?? '',