release: v0.11.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -17,6 +17,7 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-loader-spinner": "^6.1.6",
     "react-redux": "^9.1.0",
     "recoil": "^0.7.7",
     "sass": "^1.71.1",

src/app/pages/main-page.tsx

@@ -11,6 +11,7 @@ import { UserCard } from '@/components/main-page';
 import { useAuthValue } from '@/features/auth';
 import { fromAddrToCoord, getGeolocation } from '@/features/geocoding';
 import { useRecommendMates } from '@/features/profile';
+import { ColorRing } from 'react-loader-spinner';
 
 const styles = {
   container: styled.div`
@@ -143,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' });
@@ -155,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 => {
@@ -180,9 +199,9 @@ export function MainPage() {
   const [createdMarkers, setCreatedMarkers] = useState<naver.maps.Marker[]>([]);
 
   useEffect(() => {
-    if (map == null) return;
+    if (map == null || recommendationMates == null) return;
 
-    recommendationMates?.data.forEach(mate => {
+    recommendationMates.forEach(mate => {
       fromAddrToCoord({ query: mate.location }).then(res => {
         const address = res.shift();
         if (address == null) return;
@@ -209,7 +228,7 @@ export function MainPage() {
         setCreatedMarkers(prev => prev.concat(marker));
       });
     });
-  }, [map, recommendationMates?.data, router]);
+  }, [map, recommendationMates, router]);
 
   useEffect(() => {
     if (map == null) return () => {};
@@ -256,31 +275,41 @@ 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 && (
-          <>
-            <p>지도를 불러오는 중입니다.</p>
-            <p className="caption">(위치 권한이 필요합니다)</p>
-          </>
-        )}
-      </styles.map>
+      <styles.map id="map">{renderIndicator()}</styles.map>
       <styles.mateRecommendationContainer>
         <styles.mateRecommendationTitle>
           {auth?.user?.name}님의 추천 메이트
         </styles.mateRecommendationTitle>
         <styles.mateRecommendationRow>
-          {recommendationMates?.data != null &&
-          recommendationMates.data.length > 0 ? (
+          {recommendationMates != null && recommendationMates.length > 0 ? (
             <>
               <CircularButton
                 direction="left"
                 disabled={false}
                 onClick={handleScrollLeft}
               />
               <styles.mateRecommendation ref={scrollRef}>
-                {recommendationMates.data.map(
+                {recommendationMates.map(
                   ({
                     memberId,
                     score,

src/app/pages/mobile/mobile-main-page.tsx

@@ -11,6 +11,7 @@ import { UserCard } from '@/components/main-page';
 import { useAuthValue } from '@/features/auth';
 import { fromAddrToCoord, getGeolocation } from '@/features/geocoding';
 import { useRecommendMates } from '@/features/profile';
+import { ColorRing } from 'react-loader-spinner';
 
 const styles = {
   container: styled.div`
@@ -148,6 +149,8 @@ export function MobileMainPage() {
 
   const router = useRouter();
 
+  const [permission, setPermission] = useState<string>();
+
   useEffect(() => {
     getGeolocation({
       onSuccess: position => {
@@ -170,12 +173,28 @@ 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(() => {
-    if (map == null) return;
+    if (map == null || recommendationMates == null) return;
 
-    recommendationMates?.data.forEach(mate => {
+    recommendationMates.forEach(mate => {
       fromAddrToCoord({ query: mate.location }).then(res => {
         const address = res.shift();
         if (address == null) return;
@@ -202,7 +221,7 @@ export function MobileMainPage() {
         setCreatedMarkers(prev => prev.concat(marker));
       });
     });
-  }, [map, recommendationMates?.data, router]);
+  }, [map, recommendationMates, router]);
 
   useEffect(() => {
     if (map == null) return () => {};
@@ -249,24 +268,34 @@ 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 && (
-          <>
-            <p>지도를 불러오는 중입니다.</p>
-            <p className="caption">(위치 권한이 필요합니다)</p>
-          </>
-        )}
-      </styles.map>
+      <styles.map id="map">{renderIndicator()}</styles.map>
       <styles.mateRecommendationContainer>
         <styles.mateRecommendationTitle>
           <h1>{auth?.user?.name}님의 추천 메이트</h1>
         </styles.mateRecommendationTitle>
-        {recommendationMates?.data != null &&
-        recommendationMates.data.length > 0 ? (
+        {recommendationMates != null && recommendationMates.length > 0 ? (
           <styles.mateRecommendation>
-            {recommendationMates.data.map(
+            {recommendationMates.map(
               ({
                 memberId,
                 score,

src/app/pages/mobile/mobile-shared-posts-page.tsx

@@ -201,9 +201,9 @@ export function MobileSharedPostsPage() {
 
   useEffect(() => {
     if (selected === 'hasRoom' && sharedPosts != null) {
-      setTotalPageCount(sharedPosts.data.totalPages);
+      setTotalPageCount(sharedPosts.totalPages);
     } else if (selected === 'dormitory' && dormitorySharedPosts != null) {
-      setTotalPageCount(dormitorySharedPosts.data.totalPages);
+      setTotalPageCount(dormitorySharedPosts.totalPages);
     }
   }, [selected, dormitorySharedPosts, sharedPosts]);
 
@@ -227,8 +227,8 @@ export function MobileSharedPostsPage() {
       {selected === 'hasRoom' || selected === 'dormitory' ? (
         <>
           <styles.posts>
-            {posts?.data != null && posts.data.content.length > 0 ? (
-              posts?.data.content.map(post => (
+            {posts != null && posts.data.length > 0 ? (
+              posts.data.map(post => (
                 <PostCard
                   key={post.id}
                   post={post}
@@ -245,7 +245,7 @@ export function MobileSharedPostsPage() {
               </styles.noRecommendation>
             )}
           </styles.posts>
-          {posts?.data.content.length !== 0 && (
+          {posts?.data.length !== 0 && (
             <styles.pagingRow>
               <styles.CircularButton
                 direction="left"
@@ -292,9 +292,8 @@ export function MobileSharedPostsPage() {
         </>
       ) : (
         <styles.cards>
-          {recommendationMates?.data != null &&
-          recommendationMates.data.length > 0 ? (
-            recommendationMates.data.map(
+          {recommendationMates != null && recommendationMates.length > 0 ? (
+            recommendationMates.map(
               ({
                 memberId,
                 score,