feat: 디자인시스템에서의 토스트 컴포넌트 제거

src/components/Common/ImageUploader/ImageUploader.tsx

@@ -1,8 +1,8 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import type { ChangeEventHandler } from 'react';
 
 import { container, deleteButton, image, imageWrapper, uploadInput, uploadLabel } from './imageUploader.css';
 import SvgIcon from '../Svg/SvgIcon';
+import { useToastActionContext } from '../Toast/context';
 import Text from '../Typography/Text/Text';
 
 import { IMAGE_MAX_SIZE } from '@/constants';

src/components/Members/MemberReviewItem/MemberReviewItem.tsx

@@ -1,10 +1,10 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import type { MouseEventHandler } from 'react';
 import { Link } from 'react-router-dom';
 
 import { titleWrapper } from './memberReviewItem.css';
 
 import { SvgIcon, Text } from '@/components/Common';
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { ReviewItemInfo } from '@/components/Review';
 import { PATH } from '@/constants/path';
 import { useDeleteReview } from '@/hooks/queries/members';
@@ -40,7 +40,7 @@ const MemberReviewItem = ({ review }: MemberReviewItemProps) => {
           return;
         }
 
-        toast.error('리뷰 좋아요를 다시 시도해주세요.');
+        toast.error('리뷰 삭제를 다시 시도해주세요.');
       },
     });
   };

src/components/Recipe/CommentForm/CommentForm.tsx

@@ -1,10 +1,10 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import type { ChangeEventHandler, FormEventHandler, RefObject } from 'react';
 import { useRef, useState } from 'react';
 
 import { commentForm, commentTextarea, container, sendButton } from './commentForm.css';
 
 import { SvgIcon, Text } from '@/components/Common';
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { MemberImage } from '@/components/Members';
 import { useScroll } from '@/hooks/common';
 import { useMemberQuery } from '@/hooks/queries/members';

src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx

@@ -2,6 +2,7 @@ import { container, countWrapper } from './recipeFavoriteButton.css';
 
 import HeartEmpty from '@/assets/heart-empty.png';
 import { SvgIcon, Text } from '@/components/Common';
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { useTimeout } from '@/hooks/common';
 import { useMemberQuery } from '@/hooks/queries/members';
 import { useRecipeBookmarkMutation, useRecipeFavoriteMutation } from '@/hooks/queries/recipe';
@@ -17,9 +18,37 @@ const RecipeFavoriteButton = ({ recipeId, favorite, favoriteCount }: RecipeFavor
   const { mutate: bookmarkMutate } = useRecipeBookmarkMutation(Number(recipeId));
   const { data: member } = useMemberQuery();
 
+  const { toast } = useToastActionContext();
+
   const handleToggleFavorite = async () => {
-    favoriteMutate({ favorite: !favorite });
-    bookmarkMutate({ bookmark: !favorite });
+    favoriteMutate(
+      { favorite: !favorite },
+      {
+        onError: (error) => {
+          console.log(error);
+          if (error instanceof Error) {
+            toast.error(error.message);
+            return;
+          }
+
+          toast.error('좋아요를 다시 시도해주세요.');
+        },
+      }
+    );
+    bookmarkMutate(
+      { bookmark: !favorite },
+      {
+        onError: (error) => {
+          console.log(error);
+          if (error instanceof Error) {
+            toast.error(error.message);
+            return;
+          }
+
+          toast.error('북마크를 다시 시도해주세요.');
+        },
+      }
+    );
   };
 
   const [debouncedToggleFavorite] = useTimeout(handleToggleFavorite, 200);

src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx

@@ -1,10 +1,10 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import type { FormEventHandler } from 'react';
 
 import RecipeNameInput from '../RecipeNameInput/RecipeNameInput';
 import RecipeUsedProducts from '../RecipeUsedProducts/RecipeUsedProducts';
 
 import { FormTextarea, ImageUploader } from '@/components/Common';
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { useImageUploader, useFormData } from '@/hooks/common';
 import { useRecipeFormValueContext, useRecipeFormActionContext } from '@/hooks/context';
 import { useRecipeRegisterFormMutation } from '@/hooks/queries/recipe';

src/components/Review/ReviewFavoriteButton/ReviewFavoriteButton.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { favoriteButton } from './reviewFavoriteButton.css';
 
 import { SvgIcon, Text } from '@/components/Common';
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { useTimeout } from '@/hooks/common';
 import { useReviewFavoriteMutation } from '@/hooks/queries/review';
 import { vars } from '@/styles/theme.css';
@@ -23,6 +24,7 @@ const ReviewFavoriteButton = ({ productId, reviewId, favorite, favoriteCount }:
   const [favoriteInfo, setFavoriteInfo] = useState(initialFavoriteState);
   const { isFavorite, currentFavoriteCount } = favoriteInfo;
 
+  const { toast } = useToastActionContext();
   const { mutate } = useReviewFavoriteMutation(productId, reviewId);
 
   const handleToggleFavorite = async () => {
@@ -34,8 +36,14 @@ const ReviewFavoriteButton = ({ productId, reviewId, favorite, favoriteCount }:
     mutate(
       { favorite: !isFavorite },
       {
-        onError: () => {
+        onError: (error) => {
           setFavoriteInfo(initialFavoriteState);
+          if (error instanceof Error) {
+            toast.error(error.message);
+            return;
+          }
+
+          toast.error('좋아요를 다시 시도해주세요.');
         },
       }
     );

src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx

@@ -1,4 +1,4 @@
-import { Spacing, useToastActionContext } from '@fun-eat/design-system';
+import { Spacing } from '@fun-eat/design-system';
 import type { FormEventHandler } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -7,6 +7,7 @@ import StarRate from './StarRate/StarRate';
 import RebuyCheckbox from '../RebuyCheckbox/RebuyCheckbox';
 
 import { FormTextarea, ImageUploader, SvgIcon, Text } from '@/components/Common';
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import type { TagValue } from '@/contexts/ReviewFormContext';
 import { useFormData, useImageUploader } from '@/hooks/common';
 import { useReviewFormActionContext, useReviewFormValueContext } from '@/hooks/context';

src/contexts/ReviewFormContext.tsx

@@ -1,7 +1,7 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import type { PropsWithChildren } from 'react';
 import { createContext, useState } from 'react';
 
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { MAX_DISPLAYED_TAGS_LENGTH, MIN_DISPLAYED_TAGS_LENGTH } from '@/constants';
 import type { ReviewRequest } from '@/types/review';
 

src/hooks/common/useImageUploader.ts

@@ -1,7 +1,8 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import imageCompression from 'browser-image-compression';
 import { useState } from 'react';
 
+import { useToastActionContext } from '@/components/Common/Toast/context';
+
 const isImageFile = (file: File) => file.type !== 'image/png' && file.type !== 'image/jpeg';
 
 const options = {

src/hooks/queries/members/useLogoutMutation.ts

@@ -1,8 +1,8 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
 import { logoutApi } from '@/apis';
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { PATH } from '@/constants/path';
 
 const useLogoutMutation = () => {

src/hooks/queries/recipe/useRecipeFavoriteMutation.ts

@@ -37,13 +37,6 @@ const useRecipeFavoriteMutation = (recipeId: number) => {
     },
     onError: (error, _, context) => {
       queryClient.setQueryData(queryKey, context?.previousRequest);
-
-      if (error instanceof Error) {
-        toast.error(error.message);
-        return;
-      }
-
-      toast.error('좋아요를 다시 시도해주세요.');
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: queryKey });

src/hooks/queries/review/useReviewFavoriteMutation.ts

@@ -1,4 +1,3 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { productApi } from '@/apis';
@@ -12,20 +11,11 @@ const patchReviewFavorite = (productId: number, reviewId: number, body: ReviewFa
 
 const useReviewFavoriteMutation = (productId: number, reviewId: number) => {
   const queryClient = useQueryClient();
-  const { toast } = useToastActionContext();
 
   const queryKey = ['product', productId, 'review'];
 
   return useMutation({
     mutationFn: (body: ReviewFavoriteRequestBody) => patchReviewFavorite(productId, reviewId, body),
-    onError: (error) => {
-      if (error instanceof Error) {
-        toast.error(error.message);
-        return;
-      }
-
-      toast.error('좋아요를 다시 시도해주세요.');
-    },
     onSuccess: () => queryClient.invalidateQueries({ queryKey: queryKey }),
   });
 };

src/hooks/search/useSearch.ts

@@ -1,10 +1,10 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import type { ChangeEventHandler, FormEventHandler, MouseEventHandler } from 'react';
 import { useRef, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { useGA } from '../common';
 
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { PATH } from '@/constants/path';
 import { getLocalStorage, setLocalStorage } from '@/utils/localStorage';
 

src/pages/MemberModifyPage/MemberModifyPage.tsx

@@ -1,4 +1,3 @@
-import { useToastActionContext } from '@fun-eat/design-system';
 import type { ChangeEventHandler, FormEventHandler } from 'react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -17,6 +16,7 @@ import {
 } from './memberModifyPage.css';
 
 import { SvgIcon, TopBar } from '@/components/Common';
+import { useToastActionContext } from '@/components/Common/Toast/context';
 import { MemberModifyInput } from '@/components/Members';
 import { IMAGE_MAX_SIZE } from '@/constants';
 import { useFormData, useImageUploader } from '@/hooks/common';