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));
},
});