feat: 반려동물 인증 횟수 컴포넌트도 동일하게 api errorboundary를 적용할 수 있게 suspense 적용[#82]

meong-story · Jul 15, 2024 · aad4ee6 · aad4ee6
1 parent db4c385
commit aad4ee6
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 58 deletions.
diff --git a/src/entities/verification/api/useVerificationCount.ts b/src/entities/verification/api/useVerificationCount.ts
@@ -1,10 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { verificationKey } from '../../../shared/lib/query/queryKey';
 import verificationAPI from './verificationAPI';
 
 const useVerificationCount = ({ petId }: { petId: string }) => {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: verificationKey.pet(petId),
     queryFn: () => verificationAPI.getVerificationCount(petId),
   });

diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -1,58 +1,56 @@
+import { Suspense } from 'react';
+
 import ROUTE_PATH from '../../shared/constants/routePath';
 import { Layout } from '../../shared/ui';
 import { Bath, Meal, Treats, Walk } from '../../shared/ui/Icons';
 import VerificationButton from '../../widgets/verification/ui/VerificationButton';
 import VerificationField from '../../widgets/verification/ui/VerificationField';
 import { VERIFICATION } from '../../shared/constants/verification';
-import { useVerificationCount } from '../../entities/verification';
+import Spinner from '../../shared/ui/Spinner';
 
 import * as S from './HomePage.styled';
 
 const HomePage = () => {
-  const { data, isLoading } = useVerificationCount({ petId: '1' });
-
   return (
     <Layout>
-      {isLoading ? (
-        <div>로딩</div>
-      ) : (
-        <S.Container>
-          <VerificationField pet={data} />
-          <S.VerificationContainer>
-            <S.VerificationWrapper>
-              <VerificationButton
-                name={VERIFICATION.WALK}
-                navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.WALK}`}
-                title="산책인증"
-                icon={<Walk />}
-              />
-              <VerificationButton
-                name={VERIFICATION.MEAL}
-                navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.MEAL}`}
-                title="식사인증"
-                icon={<Meal />}
-              />
-              <VerificationButton
-                name={VERIFICATION.TREATS}
-                navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.TREATS}`}
-                title="간식인증"
-                icon={<Treats />}
-              />
-              <VerificationButton
-                name={VERIFICATION.BATH}
-                navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.BATH}`}
-                title="목욕인증"
-                icon={<Bath />}
-              />
-            </S.VerificationWrapper>
+      <S.Container>
+        <Suspense fallback={<Spinner />}>
+          <VerificationField petId="1" />
+        </Suspense>
+        <S.VerificationContainer>
+          <S.VerificationWrapper>
+            <VerificationButton
+              name={VERIFICATION.WALK}
+              navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.WALK}`}
+              title="산책인증"
+              icon={<Walk />}
+            />
+            <VerificationButton
+              name={VERIFICATION.MEAL}
+              navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.MEAL}`}
+              title="식사인증"
+              icon={<Meal />}
+            />
+            <VerificationButton
+              name={VERIFICATION.TREATS}
+              navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.TREATS}`}
+              title="간식인증"
+              icon={<Treats />}
+            />
             <VerificationButton
-              name={VERIFICATION.DAILY}
-              navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.DAILY}`}
-              title="순간포착! 일상인증"
+              name={VERIFICATION.BATH}
+              navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.BATH}`}
+              title="목욕인증"
+              icon={<Bath />}
             />
-          </S.VerificationContainer>
-        </S.Container>
-      )}
+          </S.VerificationWrapper>
+          <VerificationButton
+            name={VERIFICATION.DAILY}
+            navigatePath={`${ROUTE_PATH.VERIFICATION}/${VERIFICATION.DAILY}`}
+            title="순간포착! 일상인증"
+          />
+        </S.VerificationContainer>
+      </S.Container>
     </Layout>
   );
 };

diff --git a/src/pages/setting/SettingPage.tsx b/src/pages/setting/SettingPage.tsx
@@ -1,5 +1,6 @@
 import { Suspense, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import Spinner from '../../shared/ui/Spinner';
 
 import { Layout } from '../../shared/ui';
 import { Message, RightArrowIcon } from '../../shared/ui/Icons';
@@ -8,7 +9,6 @@ import ROUTE_PATH from '../../shared/constants/routePath';
 import FamilyItemList from '../../widgets/family/ui/FamilyItemList';
 import Switch from '../../shared/ui/Switch';
 import useFamilyMembers from '../../entities/family/api/useFamilyMembers';
-import useVerificationCount from '../../entities/verification/api/useVerificationCount';
 import UserImage from '../../shared/ui/UserImage';
 
 import * as S from './SettingPage.styled';
@@ -17,17 +17,16 @@ const SettingPage = () => {
   const navigate = useNavigate();
   const [isAlarm, setIsAlarm] = useState(true);
   const { data: familyMembers } = useFamilyMembers({ petId: '1' });
-  const { data: verificationCount } = useVerificationCount({
-    petId: '1',
-  });
 
   return (
     <Layout>
       <S.Container>
         <S.LoggedInUserField>
           <UserImage size="XS" imageUrl={familyMembers?.manager.imageUrl} />
         </S.LoggedInUserField>
-        <VerificationField pet={verificationCount} />
+        <Suspense fallback={<Spinner />}>
+          <VerificationField petId="1" />
+        </Suspense>
         <S.FamilyContainer>
           <S.FamilyTitle>
             <span>월이의 가족</span>

diff --git a/src/widgets/verification/ui/VerificationField.tsx b/src/widgets/verification/ui/VerificationField.tsx
@@ -1,29 +1,42 @@
 import { Female, Male } from '../../../shared/ui/Icons';
 import UserImage from '../../../shared/ui/UserImage';
 import getAge from '../../../shared/lib/getAge';
-import { VerificationCount } from '../../../shared/types/verification';
 import { GENDER } from '../../../shared/constants/pet';
 
 import * as S from './VerificationField.styled';
+import { useVerificationCount } from '../../../entities/verification';
 
-const VerificationField = ({ pet }: { pet?: VerificationCount }) => {
+const VerificationField = ({ petId }: { petId: string }) => {
+  const { data: verificationCount } = useVerificationCount({
+    petId,
+  });
   return (
     <S.Information>
       <S.PetInformation>
-        <UserImage size="MD" imageUrl={pet?.imageUrl} />
-        <span id="name">{pet?.name}</span>
+        <UserImage size="MD" imageUrl={verificationCount.imageUrl} />
+        <span id="name">{verificationCount.name}</span>
         <span id="age">
-          {pet?.birthYear ? `${getAge(pet.birthYear)}살` : ''}
-          {pet?.gender === GENDER.MALE ? <Male /> : <Female />}
+          {verificationCount.birthYear
+            ? `${getAge(verificationCount.birthYear)}살`
+            : ''}
+          {verificationCount.gender === GENDER.MALE ? <Male /> : <Female />}
         </span>
       </S.PetInformation>
       <S.VerificationInformation>
         <h3 id="title">오늘의 횟수</h3>
         <S.VerificationCount>
-          <span id="walk">산책 {pet?.verification.walkCount}번</span>
-          <span id="meal">식사 {pet?.verification.walkCount}번</span>
-          <span id="treats">간식 {pet?.verification.treatsCount}번</span>
-          <span id="bath">목욕 {pet?.verification.walkCount}번</span>
+          <span id="walk">
+            산책 {verificationCount.verification.walkCount}번
+          </span>
+          <span id="meal">
+            식사 {verificationCount.verification.walkCount}번
+          </span>
+          <span id="treats">
+            간식 {verificationCount.verification.treatsCount}번
+          </span>
+          <span id="bath">
+            목욕 {verificationCount.verification.walkCount}번
+          </span>
         </S.VerificationCount>
       </S.VerificationInformation>
     </S.Information>