diff --git a/src/components/Common/ImageUploader/ImageUploader.tsx b/src/components/Common/ImageUploader/ImageUploader.tsx index 60b7b14de..2b2c2ac23 100644 --- a/src/components/Common/ImageUploader/ImageUploader.tsx +++ b/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'; diff --git a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx b/src/components/Members/MemberReviewItem/MemberReviewItem.tsx index 52efee7b1..cf4263662 100644 --- a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx +++ b/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('리뷰 삭제를 다시 시도해주세요.'); }, }); }; diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx index 24fc6ffa6..ed89b69a2 100644 --- a/src/components/Recipe/CommentForm/CommentForm.tsx +++ b/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'; diff --git a/src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx b/src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx index de77e4774..71f7fc117 100644 --- a/src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx +++ b/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); diff --git a/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx b/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx index 1fafcd4c6..90e2b87b6 100644 --- a/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx +++ b/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'; diff --git a/src/components/Review/ReviewFavoriteButton/ReviewFavoriteButton.tsx b/src/components/Review/ReviewFavoriteButton/ReviewFavoriteButton.tsx index 38ed52914..7e572b088 100644 --- a/src/components/Review/ReviewFavoriteButton/ReviewFavoriteButton.tsx +++ b/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('좋아요를 다시 시도해주세요.'); }, } ); diff --git a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx index 29b8f793b..b37f086cf 100644 --- a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx +++ b/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'; diff --git a/src/contexts/ReviewFormContext.tsx b/src/contexts/ReviewFormContext.tsx index 65e2f18ca..517c151fc 100644 --- a/src/contexts/ReviewFormContext.tsx +++ b/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'; diff --git a/src/hooks/common/useImageUploader.ts b/src/hooks/common/useImageUploader.ts index 1f56a9923..cc1bde453 100644 --- a/src/hooks/common/useImageUploader.ts +++ b/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 = { diff --git a/src/hooks/queries/members/useLogoutMutation.ts b/src/hooks/queries/members/useLogoutMutation.ts index 8aed88849..5d603fdac 100644 --- a/src/hooks/queries/members/useLogoutMutation.ts +++ b/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 = () => { diff --git a/src/hooks/queries/recipe/useRecipeFavoriteMutation.ts b/src/hooks/queries/recipe/useRecipeFavoriteMutation.ts index 38da1ec54..af59bc7f4 100644 --- a/src/hooks/queries/recipe/useRecipeFavoriteMutation.ts +++ b/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 }); diff --git a/src/hooks/queries/review/useReviewFavoriteMutation.ts b/src/hooks/queries/review/useReviewFavoriteMutation.ts index c80a8c262..d9efac9c3 100644 --- a/src/hooks/queries/review/useReviewFavoriteMutation.ts +++ b/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 }), }); }; diff --git a/src/hooks/search/useSearch.ts b/src/hooks/search/useSearch.ts index 5b062295d..eaa8be092 100644 --- a/src/hooks/search/useSearch.ts +++ b/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'; diff --git a/src/pages/MemberModifyPage/MemberModifyPage.tsx b/src/pages/MemberModifyPage/MemberModifyPage.tsx index ca2f024ed..666d39890 100644 --- a/src/pages/MemberModifyPage/MemberModifyPage.tsx +++ b/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';