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 ?? '',