From 447757b259bd9f33d486571acb56b02d24fe46f3 Mon Sep 17 00:00:00 2001 From: n0eyes Date: Thu, 19 Oct 2023 22:03:29 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=20=EB=B3=91=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PetProfile/PetListBottomSheet.tsx | 36 +++++++------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/PetProfile/PetListBottomSheet.tsx b/frontend/src/components/PetProfile/PetListBottomSheet.tsx index c346ddee..03a1b114 100644 --- a/frontend/src/components/PetProfile/PetListBottomSheet.tsx +++ b/frontend/src/components/PetProfile/PetListBottomSheet.tsx @@ -12,38 +12,26 @@ const PetListBottomSheet = () => ( - {({ openHandler }) => } + + 어떤 아이 식품을 찾으세요? + + + + + + 닫기 + + + ); -interface PetListContainerProps { - toggleDialog: VoidFunction; -} - -const PetListContainer = (props: PetListContainerProps) => { - const { toggleDialog } = props; - - return ( - - 어떤 아이 식품을 찾으세요? - - - - - - 닫기 - - - - ); -}; - export default PetListBottomSheet; -const Layout = styled.div` +const ContentLayout = styled.div` position: fixed; z-index: 1001; bottom: 0; From d5e515194a23547a2136d61f9cd525d774029a4e Mon Sep 17 00:00:00 2001 From: n0eyes Date: Thu, 19 Oct 2023 22:04:45 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=201=EB=B6=84=20=EC=9E=98=EB=AA=BB?= =?UTF-8?q?=EB=90=9C=20=EC=8B=9C=EA=B0=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/time.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/constants/time.ts b/frontend/src/constants/time.ts index 0eba76f6..61ae6ef9 100644 --- a/frontend/src/constants/time.ts +++ b/frontend/src/constants/time.ts @@ -1,5 +1,5 @@ const ONE_HOUR = 3600000; -const ONE_MINUTE = 3600000; +const ONE_MINUTE = 60000; export { ONE_HOUR, ONE_MINUTE }; From 958f4cb8c37d7aad7a4cddee13ed65ef898b67e9 Mon Sep 17 00:00:00 2001 From: n0eyes Date: Thu, 19 Oct 2023 22:06:15 +0900 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EB=A6=AC=EB=B7=B0=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=EC=97=90=20=EB=94=B0=EB=9D=BC=20?= =?UTF-8?q?=EC=83=81=ED=92=88=20=EB=B3=84=EC=A0=90=20=EB=8F=99=EA=B8=B0?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/query/food.ts | 10 +++++----- frontend/src/hooks/query/review.ts | 5 +++++ 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/hooks/query/food.ts b/frontend/src/hooks/query/food.ts index 39f60cad..d8c05d29 100644 --- a/frontend/src/hooks/query/food.ts +++ b/frontend/src/hooks/query/food.ts @@ -3,9 +3,9 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; import { getFoodDetail, getFoodList, getFoodListFilterMeta } from '@/apis/food'; import { Parameter } from '@/types/common/utility'; -const QUERY_KEY = { +export const FOOD_QUERY_KEY = { foodList: 'foodList', - foodDetail: 'foodDetail', + foodDetail: (petFoodId: string) => ['foodDetail', petFoodId], petFoods: 'petFoods', foodListFilterMeta: 'foodListFilterMeta', }; @@ -14,7 +14,7 @@ const SIZE_PER_PAGE = 20; export const useFoodListInfiniteQuery = (payload: Parameter) => { const { data, ...restQuery } = useInfiniteQuery({ - queryKey: [QUERY_KEY.petFoods, Object.values(payload).join()], + queryKey: [FOOD_QUERY_KEY.petFoods, location.search], queryFn: ({ pageParam = { ...payload, size: String(SIZE_PER_PAGE) } }) => getFoodList(pageParam), getNextPageParam: (lastFoodListRes, allFoodListRes) => { @@ -37,7 +37,7 @@ export const useFoodListInfiniteQuery = (payload: Parameter) export const useFoodDetailQuery = (payload: Parameter) => { const { data, ...restQuery } = useQuery({ - queryKey: [QUERY_KEY.foodDetail, payload.petFoodId], + queryKey: FOOD_QUERY_KEY.foodDetail(payload.petFoodId), queryFn: () => getFoodDetail(payload), }); @@ -49,7 +49,7 @@ export const useFoodDetailQuery = (payload: Parameter) => export const useFoodListFilterMetaQuery = () => { const { data, ...restQuery } = useQuery({ - queryKey: [QUERY_KEY.foodListFilterMeta], + queryKey: [FOOD_QUERY_KEY.foodListFilterMeta], queryFn: getFoodListFilterMeta, }); return { diff --git a/frontend/src/hooks/query/review.ts b/frontend/src/hooks/query/review.ts index 3a49708b..8ab2f4ea 100644 --- a/frontend/src/hooks/query/review.ts +++ b/frontend/src/hooks/query/review.ts @@ -19,6 +19,8 @@ import { routerPath } from '@/router/routes'; import { Parameter } from '@/types/common/utility'; import { GetReviewsRes } from '@/types/review/remote'; +import { FOOD_QUERY_KEY } from './food'; + const QUERY_KEY = { reviewItem: 'reviewItem', reviewList: (petFoodId: string) => ['reviewList', petFoodId, location.search], @@ -61,6 +63,7 @@ export const useAddReviewMutation = () => { onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); alert('리뷰 작성이 완료되었습니다.'); @@ -80,6 +83,7 @@ export const useEditReviewMutation = () => { onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); alert('리뷰 수정이 완료되었습니다.'); @@ -98,6 +102,7 @@ export const useRemoveReviewMutation = () => { onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); }, }); From d7c4358c226deefc0c6650f889ab642c33d4fdb0 Mon Sep 17 00:00:00 2001 From: n0eyes Date: Thu, 19 Oct 2023 22:40:32 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=ED=8E=AB=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=20=ED=8E=AB=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=8F=99=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hooks/petProfile/usePetProfileEdition.ts | 6 ++++- frontend/src/hooks/query/petProfile.ts | 26 +++++++++++-------- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/frontend/src/hooks/petProfile/usePetProfileEdition.ts b/frontend/src/hooks/petProfile/usePetProfileEdition.ts index 80e04f9d..0daf682e 100644 --- a/frontend/src/hooks/petProfile/usePetProfileEdition.ts +++ b/frontend/src/hooks/petProfile/usePetProfileEdition.ts @@ -1,4 +1,4 @@ -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, useEffect, useState } from 'react'; import { AGE_GROUP, @@ -33,6 +33,10 @@ export const usePetProfileEdition = () => { const [isValidWeightInput, setIsValidWeightInput] = useState(true); const isValidForm = isValidNameInput && isValidAgeSelect && isValidWeightInput; + useEffect(() => { + setPet(petItem); + }, [petItem]); + const onChangeName = (e: ChangeEvent) => { const petName = e.target.value; diff --git a/frontend/src/hooks/query/petProfile.ts b/frontend/src/hooks/query/petProfile.ts index 0887cb6b..acf8b160 100644 --- a/frontend/src/hooks/query/petProfile.ts +++ b/frontend/src/hooks/query/petProfile.ts @@ -13,11 +13,15 @@ import { } from '@/types/petProfile/remote'; import { zipgoLocalStorage } from '@/utils/localStorage'; -const QUERY_KEY = { breedList: 'breedList', petItem: 'petItem', petList: 'petList' }; +const PET_PROFILE_QUERY_KEY = { + breedList: 'breedList', + petItem: (petId: number) => ['petItem', petId], + petList: 'petList', +}; export const useBreedListQuery = () => { const { data, ...restQuery } = useQuery({ - queryKey: [QUERY_KEY.breedList], + queryKey: [PET_PROFILE_QUERY_KEY.breedList], queryFn: () => getBreeds(), }); @@ -29,22 +33,19 @@ export const useBreedListQuery = () => { export const usePetItemQuery = (payload: Parameter) => { const { data, ...restQuery } = useQuery({ - queryKey: [QUERY_KEY.petItem], + queryKey: PET_PROFILE_QUERY_KEY.petItem(payload.petId), queryFn: () => getPet(payload), }); - const queryClient = useQueryClient(); - const resetPetItemQuery = () => queryClient.removeQueries([QUERY_KEY.petItem]); return { petItem: data, ...restQuery, - resetPetItemQuery, }; }; export const usePetListQuery = () => { const { data, ...restQuery } = useQuery({ - queryKey: [QUERY_KEY.petList], + queryKey: [PET_PROFILE_QUERY_KEY.petList], queryFn: () => getPets(), }); @@ -86,7 +87,7 @@ export const useAddPetMutation = () => { }; export const useEditPetMutation = () => { - const { resetPetItemQuery } = usePetItemQuery({ petId: 0 }); + const queryClient = useQueryClient(); const { petProfile: petProfileInHeader, updatePetProfile: updatePetProfileInHeader } = usePetProfile(); @@ -100,7 +101,8 @@ export const useEditPetMutation = () => { onSuccess: (putPetRes, newPetProfile, context) => { if (newPetProfile.id === petProfileInHeader?.id) updatePetProfileInHeader(newPetProfile); - resetPetItemQuery(); + queryClient.invalidateQueries([PET_PROFILE_QUERY_KEY.petList]); + queryClient.invalidateQueries(PET_PROFILE_QUERY_KEY.petItem(newPetProfile.id)); alert('반려동물 정보 수정이 완료되었습니다.'); }, @@ -113,8 +115,9 @@ export const useEditPetMutation = () => { }; export const useRemovePetMutation = () => { + const queryClient = useQueryClient(); const { refetch: refetchPetList } = usePetListQuery(); - const { resetPetItemQuery } = usePetItemQuery({ petId: 0 }); + const { petProfile: petProfileInHeader, updatePetProfile: updatePetProfileInHeader, @@ -141,7 +144,8 @@ export const useRemovePetMutation = () => { if (!newestPet) resetPetProfileInHeader(); } - resetPetItemQuery(); + queryClient.invalidateQueries([PET_PROFILE_QUERY_KEY.petList]); + queryClient.invalidateQueries(PET_PROFILE_QUERY_KEY.petItem(deletePetReq.petId)); alert('반려동물 정보를 삭제했습니다.'); }, From 949ed8318ad42c000dbb6d4fbb340d1767fabcac Mon Sep 17 00:00:00 2001 From: n0eyes Date: Fri, 20 Oct 2023 02:22:27 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=EB=A6=AC=EB=B7=B0=20=EC=84=9C?= =?UTF-8?q?=EB=A8=B8=EB=A6=AC=20=EC=B0=A8=ED=8A=B8=20=EC=BA=90=EC=8B=B1=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/query/review.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/hooks/query/review.ts b/frontend/src/hooks/query/review.ts index 8ab2f4ea..8a84f4ad 100644 --- a/frontend/src/hooks/query/review.ts +++ b/frontend/src/hooks/query/review.ts @@ -24,7 +24,7 @@ import { FOOD_QUERY_KEY } from './food'; const QUERY_KEY = { reviewItem: 'reviewItem', reviewList: (petFoodId: string) => ['reviewList', petFoodId, location.search], - reviewSummary: 'reviewSummary', + reviewSummary: (petFoodId: string) => ['reviewSummary', petFoodId], reviewListMeta: 'reviewListMeta', }; @@ -62,7 +62,7 @@ export const useAddReviewMutation = () => { mutationFn: postReview, onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); - queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(QUERY_KEY.reviewSummary(petFoodId)); queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); alert('리뷰 작성이 완료되었습니다.'); @@ -82,7 +82,7 @@ export const useEditReviewMutation = () => { mutationFn: putReview, onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); - queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(QUERY_KEY.reviewSummary(petFoodId)); queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); alert('리뷰 수정이 완료되었습니다.'); @@ -101,7 +101,7 @@ export const useRemoveReviewMutation = () => { mutationFn: deleteReview, onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); - queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(QUERY_KEY.reviewSummary(petFoodId)); queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); }, }); @@ -111,7 +111,7 @@ export const useRemoveReviewMutation = () => { export const useReviewSummaryQuery = (payload: Parameter) => { const { data, ...restQuery } = useQuery({ - queryKey: [QUERY_KEY.reviewSummary], + queryKey: QUERY_KEY.reviewSummary(payload.petFoodId), queryFn: () => getReviewSummary(payload), });