From 341943235c192b6387e2db192b6314f165dd4ee7 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 20:40:25 +0900 Subject: [PATCH 01/17] =?UTF-8?q?feat:=20react-query=20keys=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/feed-main-like/api/useLikes.tsx | 2 +- src/shared/consts/index.ts | 1 - src/shared/react-query/index.ts | 1 + src/shared/{consts/query-key => react-query}/queryKeys.ts | 0 src/widgets/feed-main-list/api/useInfinityFeeds.tsx | 3 ++- 5 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 src/shared/react-query/index.ts rename src/shared/{consts/query-key => react-query}/queryKeys.ts (100%) diff --git a/src/features/feed-main-like/api/useLikes.tsx b/src/features/feed-main-like/api/useLikes.tsx index f64894f..3d46a4f 100644 --- a/src/features/feed-main-like/api/useLikes.tsx +++ b/src/features/feed-main-like/api/useLikes.tsx @@ -1,7 +1,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { requestLikeFeed, requestUnlikeFeed } from '@/shared/axios'; -import { QUERY_KEYS } from '@/shared/consts'; +import { QUERY_KEYS } from '@/shared/react-query'; import { isErrorResponse } from '@/shared/utils'; import { FeedsQueryData } from '../consts'; diff --git a/src/shared/consts/index.ts b/src/shared/consts/index.ts index 783d4c4..58cd54c 100644 --- a/src/shared/consts/index.ts +++ b/src/shared/consts/index.ts @@ -1,3 +1,2 @@ -export { QUERY_KEYS } from './query-key/queryKeys'; export type * from './types'; export * from './color'; diff --git a/src/shared/react-query/index.ts b/src/shared/react-query/index.ts new file mode 100644 index 0000000..82bcd77 --- /dev/null +++ b/src/shared/react-query/index.ts @@ -0,0 +1 @@ +export { QUERY_KEYS } from './queryKeys'; diff --git a/src/shared/consts/query-key/queryKeys.ts b/src/shared/react-query/queryKeys.ts similarity index 100% rename from src/shared/consts/query-key/queryKeys.ts rename to src/shared/react-query/queryKeys.ts diff --git a/src/widgets/feed-main-list/api/useInfinityFeeds.tsx b/src/widgets/feed-main-list/api/useInfinityFeeds.tsx index ba997fd..e3d080e 100644 --- a/src/widgets/feed-main-list/api/useInfinityFeeds.tsx +++ b/src/widgets/feed-main-list/api/useInfinityFeeds.tsx @@ -1,7 +1,8 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import { axiosInstance } from '@/shared/axios'; -import { FetchFeeds, QUERY_KEYS } from '@/shared/consts'; +import { FetchFeeds } from '@/shared/consts'; +import { QUERY_KEYS } from '@/shared/react-query'; async function fetchFeeds( page: number, From d16c55f1d232c331253b1a6c3e4ccf72a6d1bcea Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 20:41:22 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=EC=BF=BC=EB=A6=AC=20=ED=82=A4=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8C=8C=EC=9D=BC=20=EB=AA=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/index.ts | 2 +- src/shared/react-query/{queryKeys.ts => keys.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/shared/react-query/{queryKeys.ts => keys.ts} (100%) diff --git a/src/shared/react-query/index.ts b/src/shared/react-query/index.ts index 82bcd77..c9a19cf 100644 --- a/src/shared/react-query/index.ts +++ b/src/shared/react-query/index.ts @@ -1 +1 @@ -export { QUERY_KEYS } from './queryKeys'; +export { QUERY_KEYS } from './keys'; diff --git a/src/shared/react-query/queryKeys.ts b/src/shared/react-query/keys.ts similarity index 100% rename from src/shared/react-query/queryKeys.ts rename to src/shared/react-query/keys.ts From 9b32d9335166aadce702e0b60ba4c3895f15ffe8 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 20:42:36 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20queryClient=20shared=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/App.tsx | 3 ++- .../providers/query-client.ts => shared/react-query/client.ts} | 0 src/shared/react-query/index.ts | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) rename src/{app/providers/query-client.ts => shared/react-query/client.ts} (100%) diff --git a/src/app/App.tsx b/src/app/App.tsx index a76a0c6..8c4c04f 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -2,7 +2,8 @@ import { QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { RouterProvider } from 'react-router-dom'; -import { queryClient } from './providers/query-client'; +import { queryClient } from '@/shared/react-query'; + import { router } from './routers/index'; import './styles/global.scss'; diff --git a/src/app/providers/query-client.ts b/src/shared/react-query/client.ts similarity index 100% rename from src/app/providers/query-client.ts rename to src/shared/react-query/client.ts diff --git a/src/shared/react-query/index.ts b/src/shared/react-query/index.ts index c9a19cf..fbed3c0 100644 --- a/src/shared/react-query/index.ts +++ b/src/shared/react-query/index.ts @@ -1 +1,2 @@ export { QUERY_KEYS } from './keys'; +export { queryClient } from './client'; From 090bdf08c3f3ef39864ca4e14cd78f5c84b5ec70 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 20:50:09 +0900 Subject: [PATCH 04/17] =?UTF-8?q?refactor:=20=EB=84=A4=ED=8A=B8=EC=9B=8C?= =?UTF-8?q?=ED=81=AC=20=EC=97=90=EB=9F=AC=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=B5=9C=EC=83=81=EB=8B=A8=20=EC=9C=84=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/App.tsx | 3 ++ .../network-error-toast/NetworkErrorToast.tsx | 34 ++----------------- .../feed-main-list/ui/FeedMainList.tsx | 6 +--- 3 files changed, 6 insertions(+), 37 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 8c4c04f..cad867e 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -3,6 +3,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { RouterProvider } from 'react-router-dom'; import { queryClient } from '@/shared/react-query'; +import { NetworkErrorToast } from '@/shared/ui'; import { router } from './routers/index'; import './styles/global.scss'; @@ -11,6 +12,8 @@ function App() { return ( + + ); diff --git a/src/shared/ui/network-error-toast/NetworkErrorToast.tsx b/src/shared/ui/network-error-toast/NetworkErrorToast.tsx index 9c29008..744dcdc 100644 --- a/src/shared/ui/network-error-toast/NetworkErrorToast.tsx +++ b/src/shared/ui/network-error-toast/NetworkErrorToast.tsx @@ -1,43 +1,13 @@ -import { useEffect, useRef } from 'react'; -import { ToastContainer, toast } from 'react-toastify'; +import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import './NetworkErrorToast.scss'; import { Icon } from '..'; -interface NetworkToastErrorProps { - isVisible: boolean; - errorMessage: string; -} - -export const NetworkErrorToast: React.FC = ({ - isVisible, - errorMessage, -}) => { - const toastId = useRef(-1); - - useEffect(() => { - // 에러 메시지가 보여야 하고, 현재 토스트가 표시되지 않았다면, - // 새로운 토스트를 표시하고 그 ID를 toastId에 저장합니다. - if (isVisible && toastId.current === -1) { - toastId.current = toast(errorMessage); - return; - } - - // 에러 메시지가 보여지지 않아야 하고, 현재 토스트가 표시되어 있다면, - // 토스트를 제거하고 toastId를 초기화합니다. - if (!isVisible && toastId.current !== -1) { - toast.dismiss(toastId.current); - toastId.current = -1; - return; - } - }, [isVisible, errorMessage]); - +export const NetworkErrorToast = () => { return ( } hideProgressBar={true} rtl={false} diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx index 90be68d..0f94eca 100644 --- a/src/widgets/feed-main-list/ui/FeedMainList.tsx +++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx @@ -1,4 +1,4 @@ -import { NetworkError, NetworkErrorToast, Observer } from '@/shared/ui'; +import { NetworkError, Observer } from '@/shared/ui'; import { useInfinityFeeds } from '../api/useInfinityFeeds'; @@ -42,10 +42,6 @@ export const FeedMainList = () => { )} {hasNextFeeds && } - ); }; From 99014708c573ab29ec695c376ad8f9cba12f30fc Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 21:03:46 +0900 Subject: [PATCH 05/17] =?UTF-8?q?feat:=20=EB=AA=A8=EB=93=A0=20API=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=97=90=20=EB=8C=80=ED=95=B4=20=ED=86=A0?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/client.ts | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/shared/react-query/client.ts b/src/shared/react-query/client.ts index 1c134b9..4da80cf 100644 --- a/src/shared/react-query/client.ts +++ b/src/shared/react-query/client.ts @@ -1,4 +1,26 @@ -import { QueryClient, QueryClientConfig } from '@tanstack/react-query'; +import { + MutationCache, + QueryCache, + QueryClient, + QueryClientConfig, +} from '@tanstack/react-query'; +import { toast } from 'react-toastify'; + +/** + * 에러 메시지를 토스트 메시지로 변환합니다. + */ +function showErrorHandler() { + // reference: https://fkhadra.github.io/react-toastify/api/toast + const id = 'react-query-toast'; + + if (!toast.isActive(id)) { + toast('인터넷 연결이 불안정해요', { + toastId: id, + autoClose: 3000, + position: 'bottom-center', + }); + } +} const queryClientOptions: QueryClientConfig = { defaultOptions: { @@ -9,5 +31,11 @@ const queryClientOptions: QueryClientConfig = { retry: false, }, }, + queryCache: new QueryCache({ + onError: () => showErrorHandler(), + }), + mutationCache: new MutationCache({ + onError: () => showErrorHandler(), + }), }; export const queryClient = new QueryClient(queryClientOptions); From b1613051214f996bcd132618301994cab5f523d9 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 21:04:57 +0900 Subject: [PATCH 06/17] =?UTF-8?q?feat:=20=EC=9D=B8=ED=84=B0=EB=84=B7?= =?UTF-8?q?=EC=97=90=20=EC=97=B0=EA=B2=B0=EB=90=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EC=9D=84=20=EC=8B=9C,=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20X?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/client.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/shared/react-query/client.ts b/src/shared/react-query/client.ts index 4da80cf..5afb563 100644 --- a/src/shared/react-query/client.ts +++ b/src/shared/react-query/client.ts @@ -32,7 +32,16 @@ const queryClientOptions: QueryClientConfig = { }, }, queryCache: new QueryCache({ - onError: () => showErrorHandler(), + onError: (_, query) => { + const { queryKey, state } = query; + + // feeds 쿼리에서 데이터가 없을 경우 에러 토스트를 띄우지 않습니다. + if (queryKey[0] === 'feeds' && state.data === undefined) { + return; + } + + showErrorHandler(); + }, }), mutationCache: new MutationCache({ onError: () => showErrorHandler(), From 207611dc2b83b11e5cafbca0c565025401da33e4 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 21:26:22 +0900 Subject: [PATCH 07/17] =?UTF-8?q?feat:=20consts=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/{ => consts}/client.ts | 1 - src/shared/react-query/consts/index.ts | 2 ++ src/shared/react-query/{ => consts}/keys.ts | 0 src/shared/react-query/index.ts | 3 +-- 4 files changed, 3 insertions(+), 3 deletions(-) rename src/shared/react-query/{ => consts}/client.ts (98%) create mode 100644 src/shared/react-query/consts/index.ts rename src/shared/react-query/{ => consts}/keys.ts (100%) diff --git a/src/shared/react-query/client.ts b/src/shared/react-query/consts/client.ts similarity index 98% rename from src/shared/react-query/client.ts rename to src/shared/react-query/consts/client.ts index 5afb563..4625f4b 100644 --- a/src/shared/react-query/client.ts +++ b/src/shared/react-query/consts/client.ts @@ -16,7 +16,6 @@ function showErrorHandler() { if (!toast.isActive(id)) { toast('인터넷 연결이 불안정해요', { toastId: id, - autoClose: 3000, position: 'bottom-center', }); } diff --git a/src/shared/react-query/consts/index.ts b/src/shared/react-query/consts/index.ts new file mode 100644 index 0000000..94adb01 --- /dev/null +++ b/src/shared/react-query/consts/index.ts @@ -0,0 +1,2 @@ +export { queryClient } from './client'; +export { QUERY_KEYS } from './keys'; diff --git a/src/shared/react-query/keys.ts b/src/shared/react-query/consts/keys.ts similarity index 100% rename from src/shared/react-query/keys.ts rename to src/shared/react-query/consts/keys.ts diff --git a/src/shared/react-query/index.ts b/src/shared/react-query/index.ts index fbed3c0..208236d 100644 --- a/src/shared/react-query/index.ts +++ b/src/shared/react-query/index.ts @@ -1,2 +1 @@ -export { QUERY_KEYS } from './keys'; -export { queryClient } from './client'; +export * from './consts'; From 7f7de7528be8b659c1627f74eb5c07a5dd66ffe7 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 21:32:12 +0900 Subject: [PATCH 08/17] =?UTF-8?q?feat:=20=EC=BF=BC=EB=A6=AC=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EB=B0=8F=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=ED=95=B8?= =?UTF-8?q?=EB=93=A4=EB=9F=AC=20=ED=95=A8=EC=88=98=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/consts/client.ts | 29 ++----------------- .../react-query/dir/handleQueryError.ts | 25 ++++++++++++++++ src/shared/react-query/dir/index.ts | 2 ++ src/shared/react-query/dir/toastHandlers.ts | 16 ++++++++++ 4 files changed, 46 insertions(+), 26 deletions(-) create mode 100644 src/shared/react-query/dir/handleQueryError.ts create mode 100644 src/shared/react-query/dir/index.ts create mode 100644 src/shared/react-query/dir/toastHandlers.ts diff --git a/src/shared/react-query/consts/client.ts b/src/shared/react-query/consts/client.ts index 4625f4b..7e9085f 100644 --- a/src/shared/react-query/consts/client.ts +++ b/src/shared/react-query/consts/client.ts @@ -4,22 +4,8 @@ import { QueryClient, QueryClientConfig, } from '@tanstack/react-query'; -import { toast } from 'react-toastify'; -/** - * 에러 메시지를 토스트 메시지로 변환합니다. - */ -function showErrorHandler() { - // reference: https://fkhadra.github.io/react-toastify/api/toast - const id = 'react-query-toast'; - - if (!toast.isActive(id)) { - toast('인터넷 연결이 불안정해요', { - toastId: id, - position: 'bottom-center', - }); - } -} +import { handleMutationError, handleQueryError } from '../dir'; const queryClientOptions: QueryClientConfig = { defaultOptions: { @@ -31,19 +17,10 @@ const queryClientOptions: QueryClientConfig = { }, }, queryCache: new QueryCache({ - onError: (_, query) => { - const { queryKey, state } = query; - - // feeds 쿼리에서 데이터가 없을 경우 에러 토스트를 띄우지 않습니다. - if (queryKey[0] === 'feeds' && state.data === undefined) { - return; - } - - showErrorHandler(); - }, + onError: (_, query) => handleQueryError(query), }), mutationCache: new MutationCache({ - onError: () => showErrorHandler(), + onError: () => handleMutationError(), }), }; export const queryClient = new QueryClient(queryClientOptions); diff --git a/src/shared/react-query/dir/handleQueryError.ts b/src/shared/react-query/dir/handleQueryError.ts new file mode 100644 index 0000000..85f1c5d --- /dev/null +++ b/src/shared/react-query/dir/handleQueryError.ts @@ -0,0 +1,25 @@ +import { Query, QueryKey } from '@tanstack/react-query'; + +import { showErrorHandler } from './toastHandlers'; + +/** + * 쿼리 에러 핸들러 + * @param query 쿼리 + * @returns + */ +export function handleQueryError( + query: Query, +) { + const { queryKey, state } = query; + + // feeds 쿼리에서 데이터가 없을 경우 에러 토스트를 띄우지 않습니다. + if (queryKey[0] === 'feeds' && state.data === undefined) { + return; + } + + showErrorHandler(); +} + +export function handleMutationError() { + showErrorHandler(); +} diff --git a/src/shared/react-query/dir/index.ts b/src/shared/react-query/dir/index.ts new file mode 100644 index 0000000..3ee7f75 --- /dev/null +++ b/src/shared/react-query/dir/index.ts @@ -0,0 +1,2 @@ +export * from './handleQueryError'; +export * from './toastHandlers'; diff --git a/src/shared/react-query/dir/toastHandlers.ts b/src/shared/react-query/dir/toastHandlers.ts new file mode 100644 index 0000000..6400f53 --- /dev/null +++ b/src/shared/react-query/dir/toastHandlers.ts @@ -0,0 +1,16 @@ +import { toast } from 'react-toastify'; + +/** + * 에러 메시지를 토스트 메시지로 변환합니다. + */ +export function showErrorHandler() { + // reference: https://fkhadra.github.io/react-toastify/api/toast + const id = 'react-query-toast'; + + if (!toast.isActive(id)) { + toast('인터넷 연결이 불안정해요', { + toastId: id, + position: 'bottom-center', + }); + } +} From 64e8ed70c7c2366abbe1b86f5fe159621f51189d Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 21:41:34 +0900 Subject: [PATCH 09/17] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=8A=A4=EB=B0=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/network-error-toast/NetworkErrorToast.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui/network-error-toast/NetworkErrorToast.scss b/src/shared/ui/network-error-toast/NetworkErrorToast.scss index b22760c..9060361 100644 --- a/src/shared/ui/network-error-toast/NetworkErrorToast.scss +++ b/src/shared/ui/network-error-toast/NetworkErrorToast.scss @@ -29,7 +29,7 @@ .Toastify__close-button, .Toastify__progress-bar--wrp { - display: none; + visibility: hidden; } } } From 0a5cb5213896b829e44cea19c9b5dfd99a39758b Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 21:42:03 +0900 Subject: [PATCH 10/17] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/network-error-toast/NetworkErrorToast.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/ui/network-error-toast/NetworkErrorToast.tsx b/src/shared/ui/network-error-toast/NetworkErrorToast.tsx index 744dcdc..d902788 100644 --- a/src/shared/ui/network-error-toast/NetworkErrorToast.tsx +++ b/src/shared/ui/network-error-toast/NetworkErrorToast.tsx @@ -9,9 +9,9 @@ export const NetworkErrorToast = () => { } - hideProgressBar={true} - rtl={false} limit={1} + pauseOnHover={false} + pauseOnFocusLoss={false} theme='colored' /> ); From 282bda07a0383248478dfbf6735bd8279554abf0 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 22:46:05 +0900 Subject: [PATCH 11/17] =?UTF-8?q?feat:=20autoClose=203=EC=B4=88=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/dir/toastHandlers.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/shared/react-query/dir/toastHandlers.ts b/src/shared/react-query/dir/toastHandlers.ts index 6400f53..3205aa3 100644 --- a/src/shared/react-query/dir/toastHandlers.ts +++ b/src/shared/react-query/dir/toastHandlers.ts @@ -1,4 +1,4 @@ -import { toast } from 'react-toastify'; +import { Bounce, toast } from 'react-toastify'; /** * 에러 메시지를 토스트 메시지로 변환합니다. @@ -10,7 +10,9 @@ export function showErrorHandler() { if (!toast.isActive(id)) { toast('인터넷 연결이 불안정해요', { toastId: id, + autoClose: 3000, position: 'bottom-center', + transition: Bounce, }); } } From 48101d4cf01b3335b04b1e9be421f5c5b19a5dce Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 22:48:00 +0900 Subject: [PATCH 12/17] =?UTF-8?q?feat:=20handleQueryError=20=EB=A9=94?= =?UTF-8?q?=EC=84=9C=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/dir/handleQueryError.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/shared/react-query/dir/handleQueryError.ts b/src/shared/react-query/dir/handleQueryError.ts index 85f1c5d..0ca4103 100644 --- a/src/shared/react-query/dir/handleQueryError.ts +++ b/src/shared/react-query/dir/handleQueryError.ts @@ -12,12 +12,8 @@ export function handleQueryError( ) { const { queryKey, state } = query; - // feeds 쿼리에서 데이터가 없을 경우 에러 토스트를 띄우지 않습니다. - if (queryKey[0] === 'feeds' && state.data === undefined) { - return; - } - - showErrorHandler(); + // feeds 쿼리에서 2 페이지부터 에러가 발생하면 네트워크 에러 토스트를 띄웁니다. + if (queryKey[0] === 'feeds' && state.data) showErrorHandler(); } export function handleMutationError() { From f7c1b9439d7c41bb302b7dbca75d4e14830a9657 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 22:50:10 +0900 Subject: [PATCH 13/17] =?UTF-8?q?feat:=20like=20mutation=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EB=A9=94=EC=8B=9C?= =?UTF-8?q?=EC=A7=80=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/dir/handleQueryError.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/react-query/dir/handleQueryError.ts b/src/shared/react-query/dir/handleQueryError.ts index 0ca4103..8688193 100644 --- a/src/shared/react-query/dir/handleQueryError.ts +++ b/src/shared/react-query/dir/handleQueryError.ts @@ -17,5 +17,5 @@ export function handleQueryError( } export function handleMutationError() { - showErrorHandler(); + return; } From 39b90ff4789acd19f48d8c1e1b602a5bb78896f3 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 22:55:40 +0900 Subject: [PATCH 14/17] =?UTF-8?q?feat:=20handleQuery=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dir/{handleQueryError.ts => handleQuery.ts} | 9 ++++++++- src/shared/react-query/dir/index.ts | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) rename src/shared/react-query/dir/{handleQueryError.ts => handleQuery.ts} (73%) diff --git a/src/shared/react-query/dir/handleQueryError.ts b/src/shared/react-query/dir/handleQuery.ts similarity index 73% rename from src/shared/react-query/dir/handleQueryError.ts rename to src/shared/react-query/dir/handleQuery.ts index 8688193..5d3edad 100644 --- a/src/shared/react-query/dir/handleQueryError.ts +++ b/src/shared/react-query/dir/handleQuery.ts @@ -1,6 +1,13 @@ import { Query, QueryKey } from '@tanstack/react-query'; -import { showErrorHandler } from './toastHandlers'; +import { removeErrorHandler, showErrorHandler } from './toastHandlers'; + +/** + * 쿼리 성공 핸들러 + */ +export function handleQuerySuccess() { + removeErrorHandler(); +} /** * 쿼리 에러 핸들러 diff --git a/src/shared/react-query/dir/index.ts b/src/shared/react-query/dir/index.ts index 3ee7f75..e591523 100644 --- a/src/shared/react-query/dir/index.ts +++ b/src/shared/react-query/dir/index.ts @@ -1,2 +1,2 @@ -export * from './handleQueryError'; +export * from './handleQuery'; export * from './toastHandlers'; From 9c5c1261f14088f67b99dea0cbc9cd27612c25d3 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 10 May 2024 22:55:55 +0900 Subject: [PATCH 15/17] =?UTF-8?q?feat:=20=EC=BF=BC=EB=A6=AC=20=EC=84=B1?= =?UTF-8?q?=EA=B3=B5=20=EC=8B=9C=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/consts/client.ts | 7 ++++++- src/shared/react-query/dir/toastHandlers.ts | 13 +++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/shared/react-query/consts/client.ts b/src/shared/react-query/consts/client.ts index 7e9085f..a2e6b12 100644 --- a/src/shared/react-query/consts/client.ts +++ b/src/shared/react-query/consts/client.ts @@ -5,7 +5,11 @@ import { QueryClientConfig, } from '@tanstack/react-query'; -import { handleMutationError, handleQueryError } from '../dir'; +import { + handleMutationError, + handleQueryError, + handleQuerySuccess, +} from '../dir'; const queryClientOptions: QueryClientConfig = { defaultOptions: { @@ -17,6 +21,7 @@ const queryClientOptions: QueryClientConfig = { }, }, queryCache: new QueryCache({ + onSuccess: () => handleQuerySuccess(), onError: (_, query) => handleQueryError(query), }), mutationCache: new MutationCache({ diff --git a/src/shared/react-query/dir/toastHandlers.ts b/src/shared/react-query/dir/toastHandlers.ts index 3205aa3..a682bf7 100644 --- a/src/shared/react-query/dir/toastHandlers.ts +++ b/src/shared/react-query/dir/toastHandlers.ts @@ -1,12 +1,12 @@ import { Bounce, toast } from 'react-toastify'; +const id = 'react-query-toast'; + /** * 에러 메시지를 토스트 메시지로 변환합니다. */ export function showErrorHandler() { // reference: https://fkhadra.github.io/react-toastify/api/toast - const id = 'react-query-toast'; - if (!toast.isActive(id)) { toast('인터넷 연결이 불안정해요', { toastId: id, @@ -16,3 +16,12 @@ export function showErrorHandler() { }); } } + +/** + * 에러 메시지 토스트를 제거합니다. + */ +export function removeErrorHandler() { + if (toast.isActive(id)) { + toast.dismiss(id); + } +} From bfcb610b7157db438ff93a2046af17e59e5a6b09 Mon Sep 17 00:00:00 2001 From: BangDori Date: Sat, 11 May 2024 00:04:13 +0900 Subject: [PATCH 16/17] =?UTF-8?q?feat:=20handleQuery=20=EC=A3=BC=EC=84=9D?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/dir/handleQuery.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/shared/react-query/dir/handleQuery.ts b/src/shared/react-query/dir/handleQuery.ts index 5d3edad..505b0f4 100644 --- a/src/shared/react-query/dir/handleQuery.ts +++ b/src/shared/react-query/dir/handleQuery.ts @@ -10,9 +10,9 @@ export function handleQuerySuccess() { } /** - * 쿼리 에러 핸들러 + * 쿼리 에러 핸들러 함수 * @param query 쿼리 - * @returns + * @if 피드 메인 페이지 2 페이지부터 에러가 발생하면 네트워크 에러 토스트를 띄웁니다. */ export function handleQueryError( query: Query, @@ -23,6 +23,9 @@ export function handleQueryError( if (queryKey[0] === 'feeds' && state.data) showErrorHandler(); } +/** + * 뮤테이션 에러 핸들러 + */ export function handleMutationError() { return; } From 73449ea4217ffb316b563eee93f2641b02516cf4 Mon Sep 17 00:00:00 2001 From: BangDori Date: Sat, 11 May 2024 00:09:01 +0900 Subject: [PATCH 17/17] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/styles/_reset.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/styles/_reset.scss b/src/app/styles/_reset.scss index 8063ff5..a3a0a85 100644 --- a/src/app/styles/_reset.scss +++ b/src/app/styles/_reset.scss @@ -126,6 +126,10 @@ button { background-color: transparent; border: none; padding: 0; + + &:disabled { + color: inherit; + } } .icon {