refactor:토스트 생성 메소드 이름 변경

woowacourse-teams · Aug 13, 2023 · 1c91b59 · 1c91b59
1 parent 3bd0146
commit 1c91b59
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 34 deletions.
diff --git a/frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx b/frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx
@@ -15,7 +15,7 @@ interface ImageInputProps {
 }
 
 const ImageInput = ({ initialImageUrls, updateInputValue }: ImageInputProps) => {
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
 
   const handleImageUrlsChange = useCallback(
     (imageUrls: string[]) => {
@@ -25,7 +25,7 @@ const ImageInput = ({ initialImageUrls, updateInputValue }: ImageInputProps) =>
   );
 
   const handleImageUploadError = () => {
-    generateToast('이미지는 최대 5개 업로드할 수 있습니다.', 'error');
+    createToast('이미지는 최대 5개 업로드할 수 있습니다.', 'error');
   };
 
   const { uploadedImageUrls, handleImageUpload, handleImageRemoval } = useImageUpload({

diff --git a/frontend/src/hooks/api/useAddTripItemMutation.ts b/frontend/src/hooks/api/useAddTripItemMutation.ts
@@ -10,7 +10,7 @@ import { ERROR_CODE } from '@constants/api';
 
 export const useAddTripItemMutation = () => {
   const queryClient = useQueryClient();
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
 
   const { handleTokenError } = useTokenError();
 
@@ -26,7 +26,7 @@ export const useAddTripItemMutation = () => {
         return;
       }
 
-      generateToast('아이템 추가에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('아이템 추가에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/api/useCreateTripMutation.ts b/frontend/src/hooks/api/useCreateTripMutation.ts
@@ -9,7 +9,7 @@ import { postTrip } from '@api/trip/postTrip';
 import { ERROR_CODE } from '@constants/api';
 
 export const useCreateTripMutation = () => {
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
   const { handleTokenError } = useTokenError();
 
   const newTripMutation = useMutation({
@@ -21,7 +21,7 @@ export const useCreateTripMutation = () => {
         return;
       }
 
-      generateToast('새로운 여행기록을 생성하지 못했습니다. 잠시 후 다시 시도해주세요.', 'error');
+      createToast('새로운 여행기록을 생성하지 못했습니다. 잠시 후 다시 시도해주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/api/useDayLogOrderMutation.ts b/frontend/src/hooks/api/useDayLogOrderMutation.ts
@@ -10,7 +10,7 @@ import { ERROR_CODE } from '@constants/api';
 
 export const useDayLogOrderMutation = () => {
   const queryClient = useQueryClient();
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
 
   const { handleTokenError } = useTokenError();
 
@@ -26,7 +26,7 @@ export const useDayLogOrderMutation = () => {
         return;
       }
 
-      generateToast('아이템 순서 변경에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('아이템 순서 변경에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/api/useDayLogTitleMutation.ts b/frontend/src/hooks/api/useDayLogTitleMutation.ts
@@ -11,7 +11,7 @@ import { ERROR_CODE } from '@constants/api';
 export const useDayLogTitleMutation = () => {
   const queryClient = useQueryClient();
 
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
   const { handleTokenError } = useTokenError();
 
   const dayLogTitleMutation = useMutation({
@@ -23,7 +23,7 @@ export const useDayLogTitleMutation = () => {
         return;
       }
 
-      generateToast('소제목 변경에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('소제목 변경에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
     onSuccess: (_, { tripId }) => {
       queryClient.invalidateQueries(['trip', tripId]);

diff --git a/frontend/src/hooks/api/useDeleteTripItemMutation.ts b/frontend/src/hooks/api/useDeleteTripItemMutation.ts
@@ -13,7 +13,7 @@ import { ERROR_CODE } from '@constants/api';
 export const useDeleteTripItemMutation = () => {
   const queryClient = useQueryClient();
 
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
   const { handleTokenError } = useTokenError();
 
   const deleteTripItemMutation = useMutation({
@@ -45,7 +45,7 @@ export const useDeleteTripItemMutation = () => {
 
       queryClient.setQueryData<TripData>(['trip', tripId], context?.tripData);
 
-      generateToast('아이템 삭제에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('아이템 삭제에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
 
     onSettled: (data, error, { tripId }) => {

diff --git a/frontend/src/hooks/api/useDeleteTripMutation.ts b/frontend/src/hooks/api/useDeleteTripMutation.ts
@@ -11,7 +11,7 @@ import { ERROR_CODE } from '@constants/api';
 export const useDeleteTripMutation = () => {
   const queryClient = useQueryClient();
 
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
   const { handleTokenError } = useTokenError();
 
   const deleteTripMutation = useMutation({
@@ -26,7 +26,7 @@ export const useDeleteTripMutation = () => {
         return;
       }
 
-      generateToast('여행 삭제에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('여행 삭제에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/api/useImageMutation.ts b/frontend/src/hooks/api/useImageMutation.ts
@@ -9,7 +9,7 @@ import type { ErrorResponseData } from '@api/interceptors';
 import { ERROR_CODE } from '@constants/api';
 
 export const useImageMutation = () => {
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
   const { handleTokenError } = useTokenError();
 
   const imageMutation = useMutation({
@@ -21,7 +21,7 @@ export const useImageMutation = () => {
         return;
       }
 
-      generateToast('이미지 업로드에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('이미지 업로드에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/api/useLogInMutation.ts b/frontend/src/hooks/api/useLogInMutation.ts
@@ -16,7 +16,7 @@ import { PATH } from '@constants/path';
 
 export const useLogInMutation = () => {
   const navigate = useNavigate();
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
 
   const setIsLoggedIn = useSetRecoilState(isLoggedInState);
 
@@ -31,7 +31,7 @@ export const useLogInMutation = () => {
     onError: () => {
       setIsLoggedIn(false);
 
-      generateToast('오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'error');
+      createToast('오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'error');
     },
     onSettled: () => {
       navigate(PATH.ROOT);

diff --git a/frontend/src/hooks/api/useLogOutMutation.ts b/frontend/src/hooks/api/useLogOutMutation.ts
@@ -15,7 +15,7 @@ import { PATH } from '@constants/path';
 
 export const useLogOutMutation = () => {
   const navigate = useNavigate();
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
   const queryClient = useQueryClient();
 
   const setIsLoggedIn = useSetRecoilState(isLoggedInState);
@@ -29,7 +29,7 @@ export const useLogOutMutation = () => {
       navigate(PATH.ROOT);
     },
     onError: () => {
-      generateToast('로그아웃에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('로그아웃에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/api/useTripEditMutation.ts b/frontend/src/hooks/api/useTripEditMutation.ts
@@ -11,7 +11,7 @@ import { ERROR_CODE } from '@constants/api';
 export const useTripEditMutation = () => {
   const queryClient = useQueryClient();
 
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
   const { handleTokenError } = useTokenError();
 
   const tripMutation = useMutation({
@@ -26,7 +26,7 @@ export const useTripEditMutation = () => {
         return;
       }
 
-      generateToast('여행 정보 변경에 실패했습니다. 잠시 후 다시 시도해주세요.', 'error');
+      createToast('여행 정보 변경에 실패했습니다. 잠시 후 다시 시도해주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/api/useUpdateTripItemMutation.ts b/frontend/src/hooks/api/useUpdateTripItemMutation.ts
@@ -11,7 +11,7 @@ import { ERROR_CODE } from '@constants/api';
 export const useUpdateTripItemMutation = () => {
   const queryClient = useQueryClient();
   const { handleTokenError } = useTokenError();
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
 
   const updateTripItemMutation = useMutation({
     mutationFn: putTripItem,
@@ -25,7 +25,7 @@ export const useUpdateTripItemMutation = () => {
         return;
       }
 
-      generateToast('아이템 수정에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('아이템 수정에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/api/useUserInfoMutation.ts b/frontend/src/hooks/api/useUserInfoMutation.ts
@@ -11,15 +11,15 @@ import { ERROR_CODE } from '@constants/api';
 export const useUserInfoMutation = () => {
   const queryClient = useQueryClient();
 
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
   const { handleTokenError } = useTokenError();
 
   const userInfoMutation = useMutation({
     mutationFn: putUserInfo,
     onSuccess: () => {
       queryClient.invalidateQueries(['userInfo']);
 
-      generateToast('정보를 성공적으로 수정했습니다!', 'success');
+      createToast('정보를 성공적으로 수정했습니다!', 'success');
     },
     onError: (error: ErrorResponseData) => {
       if (error.code && error.code > ERROR_CODE.TOKEN_ERROR_RANGE) {
@@ -28,7 +28,7 @@ export const useUserInfoMutation = () => {
         return;
       }
 
-      generateToast('정보 수정에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
+      createToast('정보 수정에 실패했습니다. 잠시 후 다시 시도해 주세요.', 'error');
     },
   });
 

diff --git a/frontend/src/hooks/common/useToast.ts b/frontend/src/hooks/common/useToast.ts
@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { useSetRecoilState } from 'recoil';
 
 import { toastListState } from '@store/toast';
@@ -9,11 +11,14 @@ import type { ToastType } from '@type/toast';
 export const useToast = () => {
   const setToastList = useSetRecoilState(toastListState);
 
-  const generateToast = (message: string, variant?: ToastType['variant']) => {
-    const newToast = { id: generateUniqueId(), variant: variant ?? 'default', message };
+  const createToast = useCallback(
+    (message: string, variant: ToastType['variant'] = 'error') => {
+      const newToast = { id: generateUniqueId(), variant, message };
 
-    setToastList((prevToastList) => [...prevToastList, newToast]);
-  };
+      setToastList((prevToastList) => [...prevToastList, newToast]);
+    },
+    [setToastList]
+  );
 
-  return { generateToast };
+  return { createToast };
 };
diff --git a/frontend/src/hooks/member/useTokenError.ts b/frontend/src/hooks/member/useTokenError.ts
@@ -12,7 +12,7 @@ import { PATH } from '@constants/path';
 export const useTokenError = () => {
   const navigate = useNavigate();
 
-  const { generateToast } = useToast();
+  const { createToast } = useToast();
 
   const setIsLoggedIn = useSetRecoilState(isLoggedInState);
 
@@ -21,7 +21,7 @@ export const useTokenError = () => {
     setIsLoggedIn(false);
     navigate(PATH.ROOT);
 
-    generateToast('다시 로그인해 주세요.', 'error');
+    createToast('다시 로그인해 주세요.', 'error');
   };
 
   return { handleTokenError };