refactor: alert를 toast로 변경 (#789)

woowacourse-teams · Oct 18, 2023 · ef2ee73 · ef2ee73
1 parent 6fc930b
commit ef2ee73
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 11 deletions.
diff --git a/frontend/src/components/Recipe/RecipeFavorite/RecipeFavorite.tsx b/frontend/src/components/Recipe/RecipeFavorite/RecipeFavorite.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { SvgIcon } from '@/components/Common';
 import { useTimeout } from '@/hooks/common';
+import { useToastActionContext } from '@/hooks/context';
 import { useRecipeFavoriteMutation } from '@/hooks/queries/recipe';
 
 interface RecipeFavoriteProps {
@@ -15,6 +16,8 @@ interface RecipeFavoriteProps {
 const RecipeFavorite = ({ recipeId, favorite, favoriteCount }: RecipeFavoriteProps) => {
   const [isFavorite, setIsFavorite] = useState(favorite);
   const [currentFavoriteCount, setCurrentFavoriteCount] = useState(favoriteCount);
+  const { toast } = useToastActionContext();
+
   const { mutate } = useRecipeFavoriteMutation(Number(recipeId));
 
   const handleToggleFavorite = async () => {
@@ -24,9 +27,10 @@ const RecipeFavorite = ({ recipeId, favorite, favoriteCount }: RecipeFavoritePro
         onSuccess: () => {
           setIsFavorite((prev) => !prev);
           setCurrentFavoriteCount((prev) => (isFavorite ? prev - 1 : prev + 1));
+          toast.success('🍯 꿀조합이 등록 됐어요');
         },
         onError: () => {
-          alert('꿀조합 좋아요를 다시 시도해주세요.');
+          toast.error('꿀조합 좋아요를 다시 시도해주세요.');
         },
       }
     );

diff --git a/frontend/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx b/frontend/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx
@@ -8,7 +8,7 @@ import RecipeUsedProducts from '../RecipeUsedProducts/RecipeUsedProducts';
 
 import { ImageUploader, SvgIcon } from '@/components/Common';
 import { useImageUploader, useFormData } from '@/hooks/common';
-import { useRecipeFormValueContext, useRecipeFormActionContext } from '@/hooks/context';
+import { useRecipeFormValueContext, useRecipeFormActionContext, useToastActionContext } from '@/hooks/context';
 import { useRecipeRegisterFormMutation } from '@/hooks/queries/recipe';
 import type { RecipeRequest } from '@/types/recipe';
 
@@ -23,6 +23,7 @@ const RecipeRegisterForm = ({ closeRecipeDialog }: RecipeRegisterFormProps) => {
 
   const recipeFormValue = useRecipeFormValueContext();
   const { resetRecipeFormValue } = useRecipeFormActionContext();
+  const { toast } = useToastActionContext();
 
   const formData = useFormData<RecipeRequest>({
     imageKey: 'images',
@@ -52,11 +53,11 @@ const RecipeRegisterForm = ({ closeRecipeDialog }: RecipeRegisterFormProps) => {
       onError: (error) => {
         resetAndCloseForm();
         if (error instanceof Error) {
-          alert(error.message);
+          toast.error(error.message);
           return;
         }
 
-        alert('꿀조합 등록을 다시 시도해주세요');
+        toast.error('꿀조합 등록을 다시 시도해주세요');
       },
     });
   };

diff --git a/frontend/src/components/Review/ReviewItem/ReviewItem.tsx b/frontend/src/components/Review/ReviewItem/ReviewItem.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { SvgIcon, TagList } from '@/components/Common';
 import { useTimeout } from '@/hooks/common';
+import { useToastActionContext } from '@/hooks/context';
 import { useReviewFavoriteMutation } from '@/hooks/queries/review';
 import type { Review } from '@/types/review';
 import { getRelativeDate } from '@/utils/date';
@@ -18,6 +19,8 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
     review;
   const [isFavorite, setIsFavorite] = useState(favorite);
   const [currentFavoriteCount, setCurrentFavoriteCount] = useState(favoriteCount);
+
+  const { toast } = useToastActionContext();
   const { mutate } = useReviewFavoriteMutation(productId, id);
 
   const theme = useTheme();
@@ -32,11 +35,11 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
         },
         onError: (error) => {
           if (error instanceof Error) {
-            alert(error.message);
+            toast.error(error.message);
             return;
           }
 
-          alert('리뷰 좋아요를 다시 시도해주세요.');
+          toast.error('리뷰 좋아요를 다시 시도해주세요.');
         },
       }
     );

diff --git a/frontend/src/hooks/queries/members/useLogoutMutation.ts b/frontend/src/hooks/queries/members/useLogoutMutation.ts
@@ -3,11 +3,14 @@ import { useNavigate } from 'react-router-dom';
 
 import { logoutApi } from '@/apis';
 import { PATH } from '@/constants/path';
+import { useToastActionContext } from '@/hooks/context';
 
 const useLogoutMutation = () => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
+  const { toast } = useToastActionContext();
+
   return useMutation({
     mutationFn: () => logoutApi.post({ credentials: true }),
     onSuccess: () => {
@@ -16,10 +19,10 @@ const useLogoutMutation = () => {
     },
     onError: (error) => {
       if (error instanceof Error) {
-        alert(error.message);
+        toast.error(error.message);
         return;
       }
-      alert('로그아웃을 다시 시도해주세요.');
+      toast.error('로그아웃을 다시 시도해주세요.');
     },
   });
 };

diff --git a/frontend/src/hooks/search/useSearch.ts b/frontend/src/hooks/search/useSearch.ts
@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { useGA } from '../common';
+import { useToastActionContext } from '../context';
 
 const useSearch = () => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -14,6 +15,8 @@ const useSearch = () => {
   const [isSubmitted, setIsSubmitted] = useState(!!currentSearchQuery);
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(searchQuery.length > 0);
 
+  const { toast } = useToastActionContext();
+
   const { gaEvent } = useGA();
 
   const focusInput = () => {
@@ -35,7 +38,7 @@ const useSearch = () => {
     const trimmedSearchQuery = searchQuery.trim();
 
     if (!trimmedSearchQuery) {
-      alert('검색어를 입력해주세요');
+      toast.error('검색어를 입력해주세요');
       focusInput();
       resetSearchQuery();
       return;

diff --git a/frontend/src/pages/MemberModifyPage.tsx b/frontend/src/pages/MemberModifyPage.tsx
@@ -62,11 +62,11 @@ export const MemberModifyPage = () => {
       },
       onError: (error) => {
         if (error instanceof Error) {
-          alert(error.message);
+          toast.error(error.message);
           return;
         }
 
-        alert('회원정보 수정을 다시 시도해주세요.');
+        toast.error('회원정보 수정을 다시 시도해주세요.');
       },
     });
   };