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; 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 }; 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/food.ts b/frontend/src/hooks/query/food.ts index c8d77031..d297c99b 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), suspense: false, @@ -38,7 +38,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), }); @@ -50,7 +50,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/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('반려동물 정보를 삭제했습니다.'); }, 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)); }, });