fix: Change the display based on location permission

capstone-maru · May 30, 2024 · d6bfd10 · d6bfd10
1 parent b35f2cb
commit d6bfd10
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 28 deletions.
diff --git a/src/app/pages/main-page.tsx b/src/app/pages/main-page.tsx
@@ -144,6 +144,8 @@ export function MainPage() {
 
   const router = useRouter();
 
+  const [permission, setPermission] = useState<string>();
+
   const handleScrollRight = () => {
     if (scrollRef.current !== null) {
       scrollRef.current.scrollBy({ left: 300, behavior: 'smooth' });
@@ -156,6 +158,22 @@ export function MainPage() {
     }
   };
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const permissionStatus = await navigator.permissions.query({
+          name: 'geolocation',
+        });
+
+        permissionStatus.onchange = () => {
+          setPermission(permissionStatus.state);
+        };
+      } catch (error) {
+        console.error('Error checking geolocation permission:', error);
+      }
+    })();
+  }, []);
+
   useEffect(() => {
     getGeolocation({
       onSuccess: position => {
@@ -257,21 +275,27 @@ export function MainPage() {
     };
   }, [createdMarkers, map]);
 
+  const renderIndicator = () => {
+    if (permission != null && permission !== 'granted')
+      return <p className="caption">(위치 권한이 필요합니다)</p>;
+    if (map == null)
+      return (
+        <ColorRing
+          visible={true}
+          height="80"
+          width="80"
+          ariaLabel="color-ring-loading"
+          wrapperStyle={{}}
+          wrapperClass="color-ring-wrapper"
+          colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']}
+        />
+      );
+    return <></>;
+  };
+
   return (
     <styles.container>
-      <styles.map id="map">
-        {map == null && (
-          <ColorRing
-            visible={true}
-            height="80"
-            width="80"
-            ariaLabel="color-ring-loading"
-            wrapperStyle={{}}
-            wrapperClass="color-ring-wrapper"
-            colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']}
-          />
-        )}
-      </styles.map>
+      <styles.map id="map">{renderIndicator()}</styles.map>
       <styles.mateRecommendationContainer>
         <styles.mateRecommendationTitle>
           {auth?.user?.name}님의 추천 메이트

diff --git a/src/app/pages/mobile/mobile-main-page.tsx b/src/app/pages/mobile/mobile-main-page.tsx
@@ -149,6 +149,8 @@ export function MobileMainPage() {
 
   const router = useRouter();
 
+  const [permission, setPermission] = useState<string>();
+
   useEffect(() => {
     getGeolocation({
       onSuccess: position => {
@@ -171,6 +173,22 @@ export function MobileMainPage() {
     });
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const permissionStatus = await navigator.permissions.query({
+          name: 'geolocation',
+        });
+
+        permissionStatus.onchange = () => {
+          setPermission(permissionStatus.state);
+        };
+      } catch (error) {
+        console.error('Error checking geolocation permission:', error);
+      }
+    })();
+  }, []);
+
   const [createdMarkers, setCreatedMarkers] = useState<naver.maps.Marker[]>([]);
 
   useEffect(() => {
@@ -250,23 +268,27 @@ export function MobileMainPage() {
     };
   }, [createdMarkers, map]);
 
+  const renderIndicator = () => {
+    if (permission != null && permission !== 'granted')
+      return <p className="caption">(위치 권한이 필요합니다)</p>;
+    if (map == null)
+      return (
+        <ColorRing
+          visible={true}
+          height="80"
+          width="80"
+          ariaLabel="color-ring-loading"
+          wrapperStyle={{}}
+          wrapperClass="color-ring-wrapper"
+          colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']}
+        />
+      );
+    return <></>;
+  };
+
   return (
     <styles.container>
-      <styles.map id="map">
-        {map == null && (
-          <>
-            <ColorRing
-              visible={true}
-              height="80"
-              width="80"
-              ariaLabel="color-ring-loading"
-              wrapperStyle={{}}
-              wrapperClass="color-ring-wrapper"
-              colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']}
-            />
-          </>
-        )}
-      </styles.map>
+      <styles.map id="map">{renderIndicator()}</styles.map>
       <styles.mateRecommendationContainer>
         <styles.mateRecommendationTitle>
           <h1>{auth?.user?.name}님의 추천 메이트</h1>