hotfix: 리뷰, 펫 프로필 업데이트에 따라 상태 동기화 (#514)

n0eyes · web-flow · commit c19ecfcad0ec · 2023-10-19T22:41:50.000+09:00
* refactor: 불필요한 컴포넌트 분리 병합

* fix: 1분 잘못된 시간 수정

* fix: 리뷰 업데이트에 따라 상품 별점 동기화

* fix: 펫 프로필 업데이트에 따라 펫 프로필 정보 동기화
diff --git a/frontend/src/components/PetProfile/PetListBottomSheet.tsx b/frontend/src/components/PetProfile/PetListBottomSheet.tsx
@@ -12,38 +12,26 @@ const PetListBottomSheet = () => (
       <Loading>
         <Dialog.BackDrop />
         <Dialog.Content asChild>
-          {({ openHandler }) => <PetListContainer toggleDialog={openHandler} />}
+          <ContentLayout>
+            <DialogHeader>어떤 아이 식품을 찾으세요?</DialogHeader>
+            <DialogContent>
+              <PetList />
+            </DialogContent>
+            <ButtonWrapper>
+              <Dialog.Close asChild>
+                <CloseButton type="button">닫기</CloseButton>
+              </Dialog.Close>
+            </ButtonWrapper>
+          </ContentLayout>
         </Dialog.Content>
       </Loading>
     </Dialog.Portal>
   </Dialog>
 );
 
-interface PetListContainerProps {
-  toggleDialog: VoidFunction;
-}
-
-const PetListContainer = (props: PetListContainerProps) => {
-  const { toggleDialog } = props;
-
-  return (
-    <Layout>
-      <DialogHeader>어떤 아이 식품을 찾으세요?</DialogHeader>
-      <DialogContent>
-        <PetList />
-      </DialogContent>
-      <ButtonWrapper>
-        <CloseButton type="button" onClick={toggleDialog}>
-          닫기
-        </CloseButton>
-      </ButtonWrapper>
-    </Layout>
-  );
-};
-
 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
@@ -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
@@ -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<HTMLInputElement>) => {
     const petName = e.target.value;
 
diff --git 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<typeof getFoodList>) => {
   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<typeof getFoodList>)
 
 export const useFoodDetailQuery = (payload: Parameter<typeof getFoodDetail>) => {
   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<typeof getFoodDetail>) =>
 
 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
@@ -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<typeof getPet>) => {
   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
@@ -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));
     },
   });
 
