From aad4ee632ae4d5e9276d7ea97848e85768c216be Mon Sep 17 00:00:00 2001 From: Dam <60846068+j2h30728@users.noreply.github.com> Date: Mon, 15 Jul 2024 02:14:15 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B0=98=EB=A0=A4=EB=8F=99=EB=AC=BC=20?= =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=ED=9A=9F=EC=88=98=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=8F=84=20=EB=8F=99=EC=9D=BC=ED=95=98?= =?UTF-8?q?=EA=B2=8C=20api=20errorboundary=EB=A5=BC=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EA=B2=8C=20=20suspense=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9[#82]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../verification/api/useVerificationCount.ts | 4 +- src/pages/Home/HomePage.tsx | 80 +++++++++---------- src/pages/setting/SettingPage.tsx | 9 +-- .../verification/ui/VerificationField.tsx | 33 +++++--- 4 files changed, 68 insertions(+), 58 deletions(-) diff --git a/src/entities/verification/api/useVerificationCount.ts b/src/entities/verification/api/useVerificationCount.ts index d73ce71..2bf89fc 100644 --- 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 index ce0c534..5083551 100644 --- 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 ( - {isLoading ? ( -
로딩
- ) : ( - - - - - } - /> - } - /> - } - /> - } - /> - + + }> + + + + + } + /> + } + /> + } + /> } /> - - - )} + + + + ); }; diff --git a/src/pages/setting/SettingPage.tsx b/src/pages/setting/SettingPage.tsx index 19ec76f..b4e1b02 100644 --- 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,9 +17,6 @@ const SettingPage = () => { const navigate = useNavigate(); const [isAlarm, setIsAlarm] = useState(true); const { data: familyMembers } = useFamilyMembers({ petId: '1' }); - const { data: verificationCount } = useVerificationCount({ - petId: '1', - }); return ( @@ -27,7 +24,9 @@ const SettingPage = () => { - + }> + + 월이의 가족 diff --git a/src/widgets/verification/ui/VerificationField.tsx b/src/widgets/verification/ui/VerificationField.tsx index c71b7e9..bda3bae 100644 --- 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 ( - - {pet?.name} + + {verificationCount.name} - {pet?.birthYear ? `${getAge(pet.birthYear)}살` : ''} - {pet?.gender === GENDER.MALE ? : } + {verificationCount.birthYear + ? `${getAge(verificationCount.birthYear)}살` + : ''} + {verificationCount.gender === GENDER.MALE ? : }

오늘의 횟수

- 산책 {pet?.verification.walkCount}번 - 식사 {pet?.verification.walkCount}번 - 간식 {pet?.verification.treatsCount}번 - 목욕 {pet?.verification.walkCount}번 + + 산책 {verificationCount.verification.walkCount}번 + + + 식사 {verificationCount.verification.walkCount}번 + + + 간식 {verificationCount.verification.treatsCount}번 + + + 목욕 {verificationCount.verification.walkCount}번 +