feat: useSuspenseQuery, useSuspenseInfiniteQuery를 활용하는 페이지에 Suspense …

…추가 (#254) * feat(volunteer): 봉사 모집 상세 페이지에 Suspense 추가 * feat(volunteer): 마이 페이지에 Suspense 추가 * feat(volunteer): MyReviews에 Suspense 제거 * feat(shelter): 봉사 신청 현황 페이지에 Suspense 추가 * feat(volunteer): 보호소 프로필 페이지에 Suspense 추가 * feat(volunteer): ShelterReviews에 Suspense 제거 * feat(shelter): 봉사자 프로필 페이지에 Suspense 추가
anifriends · Dec 1, 2023 · bcde5eb · bcde5eb
1 parent 9a8e90f
commit bcde5eb
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 56 deletions.
diff --git a/apps/shelter/src/pages/manage/apply/index.tsx b/apps/shelter/src/pages/manage/apply/index.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@chakra-ui/react';
 import { useSuspenseQuery } from '@tanstack/react-query';
+import { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { getShelterRecruitmentApplicants } from '@/apis/recruitment';
@@ -9,7 +10,7 @@ import ApplyInfoItem from './_components/ApplyInfoItem';
 import ApprovedCountBox from './_components/ApprovedCountBox';
 import ManageApplyItem from './_components/ManageApplyItem';
 
-export default function ManageApplyPage() {
+function ManageApply() {
   const { id: recruitmentId } = useParams<{ id: string }>();
   const {
     data: {
@@ -51,3 +52,11 @@ export default function ManageApplyPage() {
     </Box>
   );
 }
+
+export default function ManageApplyPage() {
+  return (
+    <Suspense fallback={<p>봉사 신청 현황 페이지 로딩 중...</p>}>
+      <ManageApply />
+    </Suspense>
+  );
+}
diff --git a/apps/shelter/src/pages/volunteers/profile/index.tsx b/apps/shelter/src/pages/volunteers/profile/index.tsx
@@ -1,5 +1,6 @@
 import { Box, useToken } from '@chakra-ui/react';
 import { useSuspenseQuery } from '@tanstack/react-query';
+import { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 import Label from 'shared/components/Label';
 import ProfileInfo from 'shared/components/ProfileInfo';
@@ -10,7 +11,7 @@ import { getVolunteerProfile } from '@/apis/volunteers';
 import VolunteerRecruitments from './_components/VolunteerRecruitments';
 import VolunteerReviews from './_components/VolunteerReviews';
 
-export default function VolunteersProfilePage() {
+function VolunteersProfile() {
   const { id } = useParams<{ id: string }>();
   const [gray200] = useToken('colors', ['gray.200']);
 
@@ -43,10 +44,28 @@ export default function VolunteersProfilePage() {
       </Box>
       <Tabs
         tabs={[
-          ['봉사 후기', <VolunteerReviews id={Number(id)} key={1} />],
-          ['봉사 이력', <VolunteerRecruitments id={Number(id)} key={2} />],
+          [
+            '봉사 후기',
+            <Suspense fallback={<p>봉사 후기 로딩 중...</p>} key={1}>
+              <VolunteerReviews id={Number(id)} />
+            </Suspense>,
+          ],
+          [
+            '봉사 이력',
+            <Suspense fallback={<p>봉사 이력 로딩 중...</p>} key={2}>
+              <VolunteerRecruitments id={Number(id)} />
+            </Suspense>,
+          ],
         ]}
       />
     </Box>
   );
 }
+
+export default function VolunteersProfilePage() {
+  return (
+    <Suspense fallback={<p>봉사자 프로필 페이지 로딩 중...</p>}>
+      <VolunteersProfile />
+    </Suspense>
+  );
+}
diff --git a/apps/volunteer/src/pages/my/_components/MyReviews.tsx b/apps/volunteer/src/pages/my/_components/MyReviews.tsx
@@ -6,7 +6,7 @@ import {
   useSuspenseInfiniteQuery,
 } from '@tanstack/react-query';
 import { AxiosResponse } from 'axios';
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AlertModal from 'shared/components/AlertModal';
 import InfoSubtext from 'shared/components/InfoSubtext';
@@ -17,7 +17,7 @@ import { createFormattedTime } from 'shared/utils/date';
 import { deleteVolunteerReview } from '@/apis/review';
 import { getMyReviewsAPI, MyReviewsResponse } from '@/apis/volunteer';
 
-function MyReviews() {
+export default function MyReviews() {
   const navigate = useNavigate();
 
   const queryClient = useQueryClient();
@@ -123,11 +123,3 @@ function MyReviews() {
     </Box>
   );
 }
-
-export default function MyReviewsTab() {
-  return (
-    <Suspense fallback={<p>'로딩 중 입니다..'</p>}>
-      <MyReviews />
-    </Suspense>
-  );
-}
diff --git a/apps/volunteer/src/pages/my/index.tsx b/apps/volunteer/src/pages/my/index.tsx
@@ -1,4 +1,5 @@
 import { Box, Divider, Highlight } from '@chakra-ui/react';
+import { Suspense } from 'react';
 import Label from 'shared/components/Label';
 import ProfileInfo from 'shared/components/ProfileInfo';
 import Tabs from 'shared/components/Tabs';
@@ -7,7 +8,7 @@ import ApplyRecruitments from './_components/ApplyRecruitments';
 import MyReviewsTab from './_components/MyReviews';
 import useFetchMyVolunteer from './_hooks/useFetchMyVolunteer';
 
-export default function MyPage() {
+function My() {
   const { data } = useFetchMyVolunteer();
 
   return (
@@ -39,10 +40,28 @@ export default function MyPage() {
       </Box>
       <Tabs
         tabs={[
-          ['신청한 봉사 목록', <ApplyRecruitments key={1} />],
-          ['작성한 봉사 후기', <MyReviewsTab key={2} />],
+          [
+            '신청한 봉사 목록',
+            <Suspense key={1} fallback={<p>신청한 봉사 목록 로딩 중...</p>}>
+              <ApplyRecruitments key={1} />
+            </Suspense>,
+          ],
+          [
+            '작성한 봉사 후기',
+            <Suspense key={2} fallback={<p>작성한 봉사 후기 로딩 중...</p>}>
+              <MyReviewsTab key={2} />
+            </Suspense>,
+          ],
         ]}
       />
     </Box>
   );
 }
+
+export default function MyPage() {
+  return (
+    <Suspense fallback={<p>봉사자 마이 페이지 로딩 중...</p>}>
+      <My />
+    </Suspense>
+  );
+}
diff --git a/apps/volunteer/src/pages/shelters/profile/_components/ShelterReviews.tsx b/apps/volunteer/src/pages/shelters/profile/_components/ShelterReviews.tsx
@@ -1,6 +1,5 @@
 import { Box, Heading, HStack, Text, VStack } from '@chakra-ui/react';
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
-import { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 import InfoSubtext from 'shared/components/InfoSubtext';
 import Label from 'shared/components/Label';
@@ -10,7 +9,7 @@ import { createFormattedTime } from 'shared/utils/date';
 
 import { getVolunteerReviewsOnShelter } from '@/apis/review';
 
-function ShelterReviews() {
+export default function ShelterReviews() {
   const { id } = useParams<{ id: string }>();
   const shelterId = Number(id);
 
@@ -76,10 +75,3 @@ function ShelterReviews() {
     </Box>
   );
 }
-export default function ShelterReviewsTab() {
-  return (
-    <Suspense fallback={<p>봉사 후기 로딩중...</p>}>
-      <ShelterReviews />
-    </Suspense>
-  );
-}
diff --git a/apps/volunteer/src/pages/shelters/profile/index.tsx b/apps/volunteer/src/pages/shelters/profile/index.tsx
@@ -11,7 +11,7 @@ import { getShelterProfileDetail } from '@/apis/shelter';
 import ShelterRecruitments from './_components/ShelterRecruitments';
 import ShelterReviewsTab from './_components/ShelterReviews';
 
-export default function SheltersProfilePage() {
+function SheltersProfile() {
   const { id } = useParams<{ id: string }>();
   const shelterId = Number(id);
 
@@ -21,34 +21,50 @@ export default function SheltersProfilePage() {
   });
 
   return (
-    <Suspense fallback={<p>보호소 프로필 정도 로딩 중...</p>}>
-      <Box>
-        <ProfileInfo
-          infoImage={data.shelterImageUrl}
-          infoTitle={data.shelterName}
-          infoTexts={[data.shelterEmail, data.shelterAddress]}
-        />
-        <Divider />
-        <InfoTextList
-          infoTextItems={[
-            { title: '전화번호', content: data.shelterPhoneNumber },
-            {
-              title: '전화번호(임시)',
-              content: data.shelterSparePhoneNumber,
-            },
-            {
-              title: '상세주소',
-              content: data.shelterAddressDetail,
-            },
-          ]}
-        />
-        <Tabs
-          tabs={[
-            ['봉사후기', <ShelterReviewsTab key={1} />],
-            ['봉사모집글', <ShelterRecruitments key={2} />],
-          ]}
-        />
-      </Box>
+    <Box>
+      <ProfileInfo
+        infoImage={data.shelterImageUrl}
+        infoTitle={data.shelterName}
+        infoTexts={[data.shelterEmail, data.shelterAddress]}
+      />
+      <Divider />
+      <InfoTextList
+        infoTextItems={[
+          { title: '전화번호', content: data.shelterPhoneNumber },
+          {
+            title: '전화번호(임시)',
+            content: data.shelterSparePhoneNumber,
+          },
+          {
+            title: '상세주소',
+            content: data.shelterAddressDetail,
+          },
+        ]}
+      />
+      <Tabs
+        tabs={[
+          [
+            '봉사후기',
+            <Suspense fallback={<p>봉사 후기 로징 중...</p>} key={1}>
+              <ShelterReviewsTab key={1} />
+            </Suspense>,
+          ],
+          [
+            '봉사모집글',
+            <Suspense fallback={<p>봉사 모집글 로딩 중...</p>} key={2}>
+              <ShelterRecruitments key={2} />
+            </Suspense>,
+          ],
+        ]}
+      />
+    </Box>
+  );
+}
+
+export default function SheltersProfilePage() {
+  return (
+    <Suspense fallback={<p>보호소 프로필 페이지 로딩 중...</p>}>
+      <SheltersProfile />
     </Suspense>
   );
 }
diff --git a/apps/volunteer/src/pages/volunteers/detail/index.tsx b/apps/volunteer/src/pages/volunteers/detail/index.tsx
@@ -225,7 +225,7 @@ function VolunteersDetail() {
 
 export default function VolunteersDetailPage() {
   return (
-    <Suspense>
+    <Suspense fallback={<p>봉사 상세 페이지 로딩 중...</p>}>
       <VolunteersDetail />
     </Suspense>
   );