From 3fd85f1499aeaf16db988216a43fafd8f8a233e7 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <jhi2359@naver.com>
Date: Thu, 5 Dec 2024 18:06:50 +0900
Subject: [PATCH] [FE][Fix] QA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- guestView에서 방향 받아오지 못하는 문제 해결
---
 frontend/src/hooks/getUserLocation.ts | 41 ++++-----------------------
 frontend/src/pages/GuestView.tsx      | 40 +++++++++++++++++++-------
 2 files changed, 35 insertions(+), 46 deletions(-)

diff --git a/frontend/src/hooks/getUserLocation.ts b/frontend/src/hooks/getUserLocation.ts
index 98e704d..a62b216 100644
--- a/frontend/src/hooks/getUserLocation.ts
+++ b/frontend/src/hooks/getUserLocation.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 interface IGetUserLocation {
   lat: number | null;
@@ -7,10 +7,6 @@ interface IGetUserLocation {
   error: string | null;
 }
 
-interface IGetUserLocationRes extends IGetUserLocation {
-  updateLocation: () => void;
-}
-
 export interface IDeviceOrientationEventWithPermission extends DeviceOrientationEvent {
   requestPermission?: () => Promise<'granted' | 'denied'>;
 }
@@ -37,7 +33,7 @@ export interface IDeviceOrientationEventWithPermission extends DeviceOrientation
  * ```
  */
 
-export const getUserLocation = (): IGetUserLocationRes => {
+export const getUserLocation = (): IGetUserLocation => {
   const [location, setLocation] = useState<IGetUserLocation>({
     lat: null,
     lng: null,
@@ -45,29 +41,6 @@ export const getUserLocation = (): IGetUserLocationRes => {
     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;
 
@@ -134,7 +107,9 @@ export const getUserLocation = (): IGetUserLocationRes => {
       }
     };
 
-    requestOrientationPermission();
+    requestOrientationPermission().then(() => {
+      window.addEventListener('deviceorientation', handleOrientation);
+    });
 
     return () => {
       if (watchId) navigator.geolocation.clearWatch(watchId);
@@ -142,9 +117,5 @@ export const getUserLocation = (): IGetUserLocationRes => {
     };
   }, []);
 
-  useEffect(() => {
-    updateLocation();
-  }, [updateLocation]);
-
-  return { ...location, updateLocation };
+  return location;
 };
diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx
index 751fd48..eea0b45 100644
--- a/frontend/src/pages/GuestView.tsx
+++ b/frontend/src/pages/GuestView.tsx
@@ -7,7 +7,7 @@ import { IPoint } from '@/lib/types/canvasInterface.ts';
 import { guestEntity } from '@/api/dto/channel.dto.ts';
 import { GuestMarker } from '@/component/IconGuide/GuestMarker.tsx';
 import { LoadingSpinner } from '@/component/common/loadingSpinner/LoadingSpinner.tsx';
-import { getUserLocation } from '@/hooks/getUserLocation.ts';
+import { getUserLocation, IDeviceOrientationEventWithPermission } from '@/hooks/getUserLocation.ts';
 import { loadLocalData, saveLocalData } from '@/utils/common/manageLocalData.ts';
 import { AppConfig } from '@/lib/constants/commonConstants.ts';
 import { v4 as uuidv4 } from 'uuid';
@@ -15,8 +15,7 @@ import { AlertUI } from '@/component/common/alert/Alert.tsx';
 import { PATH_COLOR } from '@/lib/constants/canvasConstants.ts';
 
 export const GuestView = () => {
-  const { lat, lng, alpha, error, updateLocation } = getUserLocation();
-
+  const { lat, lng, alpha, error } = getUserLocation();
   const location = useLocation();
   const navigate = useNavigate(); // 네비게이션 훅 추가
 
@@ -32,6 +31,33 @@ export const GuestView = () => {
 
   const wsRef = useRef<WebSocket | null>(null);
 
+  useEffect(() => {
+    const requestOrientationPermission = async () => {
+      const DeviceOrientationEventTyped =
+        DeviceOrientationEvent as unknown as IDeviceOrientationEventWithPermission;
+
+      if (
+        typeof DeviceOrientationEventTyped !== 'undefined' &&
+        typeof DeviceOrientationEventTyped.requestPermission === 'function'
+      ) {
+        try {
+          const permission = await DeviceOrientationEventTyped.requestPermission();
+          if (permission === 'granted') {
+            console.log('Device Orientation permission granted.');
+          } else {
+            console.error('Device Orientation permission denied.');
+          }
+        } catch {
+          console.error('Failed to request Device Orientation permission:');
+        }
+      } else {
+        console.warn('DeviceOrientationEvent.requestPermission is not supported on this browser.');
+      }
+    };
+
+    requestOrientationPermission();
+  }, []);
+
   useEffect(() => {
     // 소켓 연결 초기화
     const token = loadLocalData(AppConfig.KEYS.BROWSER_TOKEN) || uuidv4();
@@ -60,14 +86,6 @@ 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 ?? '',