From ef2ee7328868e20ca74f6342d8a854e2a8b69ad8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?s=E1=B4=8F=CA=9F=CA=99=C9=AA=20=E2=98=94=EF=B8=8F?= Date: Wed, 18 Oct 2023 20:17:17 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20alert=EB=A5=BC=20toast=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(#789)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Recipe/RecipeFavorite/RecipeFavorite.tsx | 6 +++++- .../Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx | 7 ++++--- frontend/src/components/Review/ReviewItem/ReviewItem.tsx | 7 +++++-- frontend/src/hooks/queries/members/useLogoutMutation.ts | 7 +++++-- frontend/src/hooks/search/useSearch.ts | 5 ++++- frontend/src/pages/MemberModifyPage.tsx | 4 ++-- 6 files changed, 25 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/Recipe/RecipeFavorite/RecipeFavorite.tsx b/frontend/src/components/Recipe/RecipeFavorite/RecipeFavorite.tsx index 882ca0eed..8df4e9e13 100644 --- 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 index 238de3574..074d8f4f6 100644 --- 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({ 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 index 112824ada..14cd83d18 100644 --- 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 index 3e586adc7..afc27e2bc 100644 --- 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 index 4c438d4ec..ba9853940 100644 --- 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(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 index a5c21490b..6b3031a9e 100644 --- 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('νšŒμ›μ •λ³΄ μˆ˜μ •μ„ λ‹€μ‹œ μ‹œλ„ν•΄μ£Όμ„Έμš”.'); }, }); };