From ef94b1dd3e31053d11651a5a9e685e431cc8c35b Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Sun, 28 Jul 2024 17:44:59 +0200 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20Toast=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 1 + src/components/Common/Toast/Toast.stories.tsx | 48 +++++++++++++ src/components/Common/Toast/Toast.tsx | 25 +++++++ .../Common/Toast/context/ToastContext.tsx | 71 +++++++++++++++++++ src/components/Common/Toast/context/index.ts | 3 + .../Toast/context/useToastActionContext.ts | 14 ++++ .../Toast/context/useToastValueContext.ts | 14 ++++ src/components/Common/Toast/toast.css.ts | 62 ++++++++++++++++ src/components/Common/Toast/useToast.ts | 37 ++++++++++ src/index.tsx | 7 +- 10 files changed, 280 insertions(+), 2 deletions(-) create mode 100644 src/components/Common/Toast/Toast.stories.tsx create mode 100644 src/components/Common/Toast/Toast.tsx create mode 100644 src/components/Common/Toast/context/ToastContext.tsx create mode 100644 src/components/Common/Toast/context/index.ts create mode 100644 src/components/Common/Toast/context/useToastActionContext.ts create mode 100644 src/components/Common/Toast/context/useToastValueContext.ts create mode 100644 src/components/Common/Toast/toast.css.ts create mode 100644 src/components/Common/Toast/useToast.ts diff --git a/public/index.html b/public/index.html index 6abbc8f7..a1ed5fde 100644 --- a/public/index.html +++ b/public/index.html @@ -32,6 +32,7 @@ /> +
diff --git a/src/components/Common/Toast/Toast.stories.tsx b/src/components/Common/Toast/Toast.stories.tsx new file mode 100644 index 00000000..5b58031a --- /dev/null +++ b/src/components/Common/Toast/Toast.stories.tsx @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { useToastActionContext } from './context'; +import ToastProvider from './context/ToastContext'; +import Toast from './Toast'; + +const meta: Meta = { + title: 'common/Toast', + component: Toast, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => { + const { toast } = useToastActionContext(); + const handleClick = () => { + toast.success('성공'); + }; + return ( +
+ +
+ ); + }, +}; + +export const Error: Story = { + render: () => { + const { toast } = useToastActionContext(); + const handleClick = () => { + toast.error('실패'); + }; + return ( +
+ +
+ ); + }, +}; diff --git a/src/components/Common/Toast/Toast.tsx b/src/components/Common/Toast/Toast.tsx new file mode 100644 index 00000000..a24e6212 --- /dev/null +++ b/src/components/Common/Toast/Toast.tsx @@ -0,0 +1,25 @@ +import cx from 'classnames'; + +import { wrapper, toastMessage } from './toast.css'; +import useToast from './useToast'; +import Text from '../Typography/Text/Text'; + +export interface ToastProps { + id: number; + message: string; + isError?: boolean; +} + +const Toast = ({ id, message, isError = false }: ToastProps) => { + const isShown = useToast(id); + + return ( +
+ + {message} + +
+ ); +}; + +export default Toast; diff --git a/src/components/Common/Toast/context/ToastContext.tsx b/src/components/Common/Toast/context/ToastContext.tsx new file mode 100644 index 00000000..f278d933 --- /dev/null +++ b/src/components/Common/Toast/context/ToastContext.tsx @@ -0,0 +1,71 @@ +import type { PropsWithChildren } from 'react'; +import { createContext, useState } from 'react'; +import { createPortal } from 'react-dom'; + +import Toast from '../Toast'; +import { container } from '../toast.css'; + +export interface ToastState { + id: number; + message: string; + isError?: boolean; +} + +export interface ToastValue { + toasts: ToastState[]; +} + +export interface ToastAction { + toast: { + success: (message: string) => void; + error: (message: string) => void; + }; + deleteToast: (id: number) => void; +} + +export const ToastValueContext = createContext(null); +export const ToastActionContext = createContext(null); + +export const ToastProvider = ({ children }: PropsWithChildren) => { + const [toasts, setToasts] = useState([]); + + const showToast = (id: number, message: string, isError?: boolean) => { + setToasts([...toasts, { id, message, isError }]); + }; + + const deleteToast = (id: number) => { + setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id)); + }; + + const toast = { + success: (message: string) => showToast(Number(Date.now()), message), + error: (message: string) => showToast(Number(Date.now()), message, true), + }; + + const toastValue = { + toasts, + }; + + const toastAction = { + toast, + deleteToast, + }; + + return ( + + + {children} + {createPortal( +
+ {toasts.map(({ id, message, isError }) => ( + + ))} +
, + document.getElementById('toast-container-root') as HTMLElement + )} + + + ); +}; + +export default ToastProvider; diff --git a/src/components/Common/Toast/context/index.ts b/src/components/Common/Toast/context/index.ts new file mode 100644 index 00000000..95fdb8e5 --- /dev/null +++ b/src/components/Common/Toast/context/index.ts @@ -0,0 +1,3 @@ +export { default as useToastActionContext } from './useToastActionContext'; +export { default as useToastValueContext } from './useToastValueContext'; +export { default as ToastContext } from './ToastContext'; diff --git a/src/components/Common/Toast/context/useToastActionContext.ts b/src/components/Common/Toast/context/useToastActionContext.ts new file mode 100644 index 00000000..3c176478 --- /dev/null +++ b/src/components/Common/Toast/context/useToastActionContext.ts @@ -0,0 +1,14 @@ +import { useContext } from 'react'; + +import { ToastActionContext } from './ToastContext'; + +export const useToastActionContext = () => { + const toastAction = useContext(ToastActionContext); + if (!toastAction) { + throw new Error('useToastActionContext는 Toast Provider 안에서 사용해야 합니다.'); + } + + return toastAction; +}; + +export default useToastActionContext; diff --git a/src/components/Common/Toast/context/useToastValueContext.ts b/src/components/Common/Toast/context/useToastValueContext.ts new file mode 100644 index 00000000..7413f884 --- /dev/null +++ b/src/components/Common/Toast/context/useToastValueContext.ts @@ -0,0 +1,14 @@ +import { useContext } from 'react'; + +import { ToastValueContext } from './ToastContext'; + +export const useToastValueContext = () => { + const toastValue = useContext(ToastValueContext); + if (!toastValue) { + throw new Error('useToastValueContext는 Toast Provider 안에서 사용해야 합니다.'); + } + + return toastValue; +}; + +export default useToastValueContext; diff --git a/src/components/Common/Toast/toast.css.ts b/src/components/Common/Toast/toast.css.ts new file mode 100644 index 00000000..f1be1ac1 --- /dev/null +++ b/src/components/Common/Toast/toast.css.ts @@ -0,0 +1,62 @@ +import { vars } from '@/styles/theme.css'; +import { keyframes, style } from '@vanilla-extract/css'; + +const fadeOut = keyframes({ + '0%': { + transform: 'translateY(70px)', + opacity: 1, + }, + '100%': { + transform: 'translateY(70px)', + opacity: 0, + }, +}); + +const slideIn = keyframes({ + '0%': { + transform: 'translateY(-100px)', + }, + '100%': { + transform: 'translateY(70px)', + }, +}); + +export const container = style({ + position: 'fixed', + zIndex: 1000, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + width: '100%', + transform: 'translate(0, -10px)', +}); + +export const wrapper = style({ + display: 'flex', + alignItems: 'center', + position: 'relative', + width: 'calc(100% - 20px)', + height: 55, + maxWidth: 560, + borderRadius: 10, + background: vars.colors.black, + selectors: { + '&.isError': { + backgroundColor: vars.colors.error, + }, + '&.isShown': { + animation: `${slideIn} 0.3s ease-in-out forwards`, + }, + '&:not(.isShown)': { + animation: `${fadeOut} 0.3s ease-in-out forwards`, + }, + }, +}); + +export const isError = style({ + background: vars.colors.error, +}); + +export const toastMessage = style({ + marginLeft: 20, +}); diff --git a/src/components/Common/Toast/useToast.ts b/src/components/Common/Toast/useToast.ts new file mode 100644 index 00000000..dba923d4 --- /dev/null +++ b/src/components/Common/Toast/useToast.ts @@ -0,0 +1,37 @@ +import { useEffect, useRef, useState } from 'react'; + +import { useToastActionContext } from './context'; + +const useToast = (id: number) => { + const { deleteToast } = useToastActionContext(); + const [isShown, setIsShown] = useState(true); + + const showTimeoutRef = useRef(null); + const deleteTimeoutRef = useRef(null); + + useEffect(() => { + showTimeoutRef.current = window.setTimeout(() => setIsShown(false), 2000); + + return () => { + if (showTimeoutRef.current) { + clearTimeout(showTimeoutRef.current); + } + }; + }, []); + + useEffect(() => { + if (!isShown) { + deleteTimeoutRef.current = window.setTimeout(() => deleteToast(id), 2000); + } + + return () => { + if (deleteTimeoutRef.current) { + clearTimeout(deleteTimeoutRef.current); + } + }; + }, [isShown]); + + return isShown; +}; + +export default useToast; diff --git a/src/index.tsx b/src/index.tsx index b2428c13..7618dc14 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,6 +7,7 @@ import ReactGA from 'react-ga4'; import { RouterProvider } from 'react-router-dom'; import { SvgSprite } from './components/Common'; +import { ToastProvider } from './components/Common/Toast/context/ToastContext'; import { ENVIRONMENT } from './constants'; import router from './router'; @@ -41,8 +42,10 @@ root.render( - - + + + + From 0e4c1d5716278defd90dedce6faa258e02c9a00f Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Sun, 28 Jul 2024 17:59:33 +0200 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=EC=97=90=EC=84=9C=EC=9D=98=20?= =?UTF-8?q?=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/ImageUploader/ImageUploader.tsx | 2 +- .../MemberReviewItem/MemberReviewItem.tsx | 4 +-- .../Recipe/CommentForm/CommentForm.tsx | 2 +- .../RecipeFavoriteButton.tsx | 33 +++++++++++++++++-- .../RecipeRegisterForm/RecipeRegisterForm.tsx | 2 +- .../ReviewFavoriteButton.tsx | 10 +++++- .../ReviewRegisterForm/ReviewRegisterForm.tsx | 3 +- src/contexts/ReviewFormContext.tsx | 2 +- src/hooks/common/useImageUploader.ts | 3 +- .../queries/members/useLogoutMutation.ts | 2 +- .../recipe/useRecipeFavoriteMutation.ts | 7 ---- .../review/useReviewFavoriteMutation.ts | 10 ------ src/hooks/search/useSearch.ts | 2 +- .../MemberModifyPage/MemberModifyPage.tsx | 2 +- 14 files changed, 53 insertions(+), 31 deletions(-) diff --git a/src/components/Common/ImageUploader/ImageUploader.tsx b/src/components/Common/ImageUploader/ImageUploader.tsx index 60b7b14d..2b2c2ac2 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 52efee7b..cf426366 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 24fc6ffa..ed89b69a 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 de77e477..71f7fc11 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 1fafcd4c..90e2b87b 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 38ed5291..7e572b08 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 29b8f793..b37f086c 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 65e2f18c..517c151f 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 1f56a992..cc1bde45 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 8aed8884..5d603fda 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 38da1ec5..af59bc7f 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 c80a8c26..d9efac9c 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 5b062295..eaa8be09 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 ca2f024e..666d3989 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'; From 1b7cb10b32aac18214598ea245690d8dbb36b1ea Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Sun, 28 Jul 2024 18:04:53 +0200 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81?= =?UTF-8?q?=EC=97=90=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EC=BB=A8=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=84=88=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-body.html | 1 + 1 file changed, 1 insertion(+) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index f1751ae4..47e09cd4 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -409,4 +409,5 @@
+
From 89d00a323579f698c787accde79f1c1bc9bad08f Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Sun, 28 Jul 2024 19:11:56 +0200 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81?= =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 944ee1c0..aa93f21e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -13,6 +13,7 @@ import { } from '../src/mocks/handlers'; import { BrowserRouter } from 'react-router-dom'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import ToastProvider from '../src/components/Common/Toast/context/ToastContext'; initialize({ serviceWorker: { @@ -27,7 +28,9 @@ export const decorators = [ - + + +