From 5b6ecc779d3283d8df03866512c7ac7d0dbdf0e9 Mon Sep 17 00:00:00 2001 From: JunSeok Date: Tue, 15 Oct 2024 19:34:15 +0900 Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC?= =?UTF-8?q?=20url=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/CategoryList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/home/CategoryList.tsx b/src/components/home/CategoryList.tsx index 67f33685..501cedc3 100644 --- a/src/components/home/CategoryList.tsx +++ b/src/components/home/CategoryList.tsx @@ -5,7 +5,7 @@ const CategoryItem = ({ code, name, icon }: { code: string; name: string; icon: const navigate = useNavigate(); const onClickCategory = () => { - navigate(`/product/list?category=${code}`); + navigate(`/product/list?category=${code.toLocaleLowerCase().replaceAll('_', '-')}`); }; return (
  • From 16f7e70cd59f5f2d7d899aee0b8806f5554f51f7 Mon Sep 17 00:00:00 2001 From: JunSeok Date: Tue, 15 Oct 2024 19:34:33 +0900 Subject: [PATCH 2/8] =?UTF-8?q?chore:=20es2021=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.app.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tsconfig.app.json b/tsconfig.app.json index 4a16e84c..6a8dd1cb 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -3,9 +3,9 @@ "compilerOptions": { "composite": true, "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", - "target": "ES2020", + "target": "ES2021", "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": ["ES2021", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, From c76d10fdef1dd3ac45e48babc4f368e1460cb824 Mon Sep 17 00:00:00 2001 From: JunSeok Date: Tue, 15 Oct 2024 22:56:19 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=EC=A2=85=EB=A3=8C=EC=9E=84?= =?UTF-8?q?=EB=B0=95=20=EA=B2=BD=EB=A7=A4=20=EC=B6=94=EA=B0=80=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Test.tsx | 32 ++++++++++++++++++++++++++++++++ src/router.tsx | 16 +++++++++++----- 2 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 src/pages/Test.tsx diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx new file mode 100644 index 00000000..edc2daa6 --- /dev/null +++ b/src/pages/Test.tsx @@ -0,0 +1,32 @@ +import { httpClient } from "@/api/axios"; +import Button from "@/components/common/Button"; +import Layout from "@/components/layout/Layout"; +import { Input } from "@/components/ui/input"; +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; + +const Test = () => { + const [state, setState] = useState(0) + const navigate = useNavigate() + + const clickButton = async () => { + await httpClient.post(`/api/v1/auctions/test?minutes=${state}`) + navigate('/') + } + return ( + + + +
    + + setState(Number(e.target.value))} /> + +
    +     +     + ); +} + +export default Test; diff --git a/src/router.tsx b/src/router.tsx index 3109abee..53d2bd1e 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -1,3 +1,9 @@ +import AuctionDetails, { loader as auctionDetailsLoader } from './pages/AuctionDetails'; +import Bid, { loader as bidLoader } from './pages/Bid'; +import BidderList, { loader as bidderListLoader } from './pages/BidderList'; +import PreAuctionDetails, { loader as preAuctionDetailsLoader } from './pages/PreAuctionDetails'; +import Register, { loader as registerLoader } from './pages/Register'; + import ROUTERS from '@/constants/route'; import ProductList from '@/pages/ProductList'; import { createBrowserRouter } from 'react-router-dom'; @@ -9,18 +15,14 @@ import PublicRoute from './components/common/route/PublicRoute'; import GlobalLayout from './components/layout/GlobalLayout'; import LayoutWithNav from './components/layout/LayoutWithNav'; import AddressBook from './pages/AddressBook'; -import AuctionDetails, { loader as auctionDetailsLoader } from './pages/AuctionDetails'; -import Bid, { loader as bidLoader } from './pages/Bid'; -import BidderList, { loader as bidderListLoader } from './pages/BidderList'; import Heart from './pages/Heart'; import Home from './pages/Home'; import Login from './pages/Login'; import Notification from './pages/Notification'; import Payment from './pages/Payment'; -import PreAuctionDetails, { loader as preAuctionDetailsLoader } from './pages/PreAuctionDetails'; import ProfileEdit from './pages/ProfileEdit'; -import Register, { loader as registerLoader } from './pages/Register'; import Signup from './pages/Signup'; +import Test from './pages/Test'; import User from './pages/User'; import OrderHistory from './pages/UserParticipatedList'; import UserRegisteredList from './pages/UserRegisteredList'; @@ -156,6 +158,10 @@ export const router = createBrowserRouter([ { path: `${ROUTERS.PAYMENT}/:auctionId`, }, + { + path: `/test`, + element: + }, ], }, ]); From 8a5637b6bdbcf26324344b17a59f26b05b205160 Mon Sep 17 00:00:00 2001 From: JunSeok Date: Tue, 15 Oct 2024 23:01:00 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20carousel=20loop=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/CustomCarousel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/CustomCarousel.tsx b/src/components/common/CustomCarousel.tsx index b83b9e31..d0e30338 100644 --- a/src/components/common/CustomCarousel.tsx +++ b/src/components/common/CustomCarousel.tsx @@ -1,6 +1,7 @@ -import { ReactNode } from 'react'; import { Carousel, CarouselContent, CarouselNext, CarouselPrevious } from '../ui/carousel'; +import { ReactNode } from 'react'; + const CustomCarousel = ({ contentStyle, length, children }: { contentStyle?: string; length: number; children: ReactNode }) => { return ( From e6fc7816dabe0eaf93fe03e2dfa97ceea315e084 Mon Sep 17 00:00:00 2001 From: JunSeok Date: Tue, 15 Oct 2024 23:02:53 +0900 Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=EC=9D=BC=EB=B0=98=20hook=EA=B3=BC?= =?UTF-8?q?=20suspense=20hook=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/details/queries.ts | 61 ++++++++++++------------ src/components/navigation/Navigation.tsx | 25 +++++----- src/components/notification/queries.ts | 21 +++++++- src/pages/Notification.tsx | 4 +- src/pages/PreAuctionDetails.tsx | 18 ++++--- 5 files changed, 71 insertions(+), 58 deletions(-) diff --git a/src/components/details/queries.ts b/src/components/details/queries.ts index 34fe6daa..24e43f50 100644 --- a/src/components/details/queries.ts +++ b/src/components/details/queries.ts @@ -1,13 +1,9 @@ -import { IAuctionDetails, IPreAuctionDetails } from "AuctionDetails"; -import { API_END_POINT } from "@/constants/api"; -import { httpClient } from "@/api/axios"; -import { queryKeys } from "@/constants/queryKeys"; -import { - UseMutateFunction, - useMutation, - useQueryClient, - useSuspenseQuery, -} from "@tanstack/react-query"; +import { UseMutateFunction, useMutation, useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; +import { IAuctionDetails, IPreAuctionDetails } from 'AuctionDetails'; + +import { httpClient } from '@/api/axios'; +import { API_END_POINT } from '@/constants/api'; +import { queryKeys } from '@/constants/queryKeys'; export const useConvertToAuction = (): { mutate: UseMutateFunction; @@ -16,10 +12,7 @@ export const useConvertToAuction = (): { const { mutate } = useMutation({ mutationFn: async (productId: number) => { - const response = await httpClient.post( - `${API_END_POINT.AUCTIONS}/start`, - productId, - ); + const response = await httpClient.post(`${API_END_POINT.AUCTIONS}/start`, productId); return response.data; }, onSuccess: (_, productId) => { @@ -39,9 +32,7 @@ export const useLikeAuctionItem = (): { mutate: UseMutateFunction; } => { const likeAuctionItem = async (auctionId: number) => { - const response = await httpClient.post( - `${API_END_POINT.PRE_AUCTION}/${auctionId}/likes`, - ); + const response = await httpClient.post(`${API_END_POINT.PRE_AUCTION}/${auctionId}/likes`); return response.data; }; @@ -64,9 +55,7 @@ export const useCancelBid = (): { const queryClient = useQueryClient(); const cancelBid = async (bidId: number) => { - const response = await httpClient.patch( - `${API_END_POINT.BID}/${bidId}/cancel`, - ); + const response = await httpClient.patch(`${API_END_POINT.BID}/${bidId}/cancel`); return response.data; }; @@ -87,9 +76,7 @@ export const useCancelBid = (): { export const useGetAuctionDetails = (auctionId: number) => { const getAuctionDetails = async (): Promise => { - const response = await httpClient.get( - `${API_END_POINT.AUCTIONS}/${auctionId}`, - ); + const response = await httpClient.get(`${API_END_POINT.AUCTIONS}/${auctionId}`); return response.data; }; @@ -104,13 +91,27 @@ export const useGetAuctionDetails = (auctionId: number) => { }; }; -export const useGetPreAuctionDetails = (preAuctionId: number) => { - if (!preAuctionId) return { preAuctionDetails: undefined }; +export const useGetPreAuctionDetails = (preAuctionId: number | undefined) => { + const getPreAuctionDetails = async (): Promise => { + const response = await httpClient.get(`${API_END_POINT.PRE_AUCTION}/${preAuctionId}`); + + return response.data; + }; + + const { data: preAuctionDetails } = useQuery({ + queryKey: [queryKeys.PRE_AUCTION_DETAILS, preAuctionId], + queryFn: getPreAuctionDetails, + enabled: preAuctionId === undefined ? false : true, + }); + + return { + preAuctionDetails, + }; +}; +export const useGetPreAuctionDetailsWithSuspense = (preAuctionId: number) => { const getPreAuctionDetails = async (): Promise => { - const response = await httpClient.get( - `${API_END_POINT.PRE_AUCTION}/${preAuctionId}`, - ); + const response = await httpClient.get(`${API_END_POINT.PRE_AUCTION}/${preAuctionId}`); return response.data; }; @@ -131,9 +132,7 @@ export const useDeletePreAuction = (): { const queryClient = useQueryClient(); const deletePreAuction = async (preAuctionId: number) => { - const response = await httpClient.delete( - `${API_END_POINT.PRE_AUCTION}/${preAuctionId}`, - ); + const response = await httpClient.delete(`${API_END_POINT.PRE_AUCTION}/${preAuctionId}`); return response.data; }; diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx index 87e8a0cd..27dd15ba 100644 --- a/src/components/navigation/Navigation.tsx +++ b/src/components/navigation/Navigation.tsx @@ -2,23 +2,26 @@ import { navIcons } from '@/constants/navIcons'; import { useNavigate } from 'react-router-dom'; import { useGetNotifications } from '../notification/queries'; +interface NavigationItemProps { + name: string; + active: boolean; + path: string + unreadNotificationsCount: number; +} + const NavigationItem = ({ name, active, - onClick, + path, unreadNotificationsCount = 0, -}: { - name: string; - active: boolean; - onClick: () => void; - unreadNotificationsCount: number; -}) => { +}: NavigationItemProps) => { + const navigate = useNavigate(); const iconSrc = navIcons[name][active ? 'on' : 'off']; const notificationCondition = name === 'notification' && unreadNotificationsCount > 0; return (
  • - {`${name}_${active + navigate(path)} src={iconSrc} alt={`${name}_${active ? 'on' : 'off'}_icon`} className='cursor-pointer size-6' /> {notificationCondition && (
    )} @@ -27,9 +30,7 @@ const NavigationItem = ({ }; const Navigation = ({ active }: { active: string }) => { - const navigate = useNavigate(); const { notifications } = useGetNotifications(); - const unreadNotificationsCount = notifications ? notifications.reduce( (acc, cur) => (!cur.isRead ? acc + 1 : acc), 0, @@ -42,9 +43,7 @@ const Navigation = ({ active }: { active: string }) => { key={name} name={name} active={active === name} - onClick={() => { - navigate(value.path); - }} + path={value.path} unreadNotificationsCount={unreadNotificationsCount} /> ))} diff --git a/src/components/notification/queries.ts b/src/components/notification/queries.ts index 87488b20..e26776c6 100644 --- a/src/components/notification/queries.ts +++ b/src/components/notification/queries.ts @@ -1,4 +1,4 @@ -import { UseMutateFunction, useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; +import { UseMutateFunction, useMutation, useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; import { httpClient } from '@/api/axios'; import { API_END_POINT } from '@/constants/api'; @@ -9,7 +9,6 @@ import { useSelector } from 'react-redux'; export const useGetNotifications = () => { const isLogin = useSelector(isLoggedIn); - if (!isLogin) return { notifications: [] }; const getNotifications = async (): Promise => { const response = await httpClient.get(`${API_END_POINT.NOTIFICATIONS}`); @@ -19,6 +18,24 @@ export const useGetNotifications = () => { return response.data.items; }; + const { data: notifications } = useQuery({ + queryKey: [queryKeys.NOTIFICATIONS], + queryFn: getNotifications, + enabled: isLogin, + }); + + return { notifications }; +}; + +export const useGetNotificationsWithSuspense = () => { + const getNotifications = async (): Promise => { + const response = await httpClient.get(`${API_END_POINT.NOTIFICATIONS}`); + if (!response.data || !response.data.items) { + throw new Error('No items found in the response'); + } + return response.data.items; + }; + const { data: notifications } = useSuspenseQuery({ queryKey: [queryKeys.NOTIFICATIONS], queryFn: getNotifications, diff --git a/src/pages/Notification.tsx b/src/pages/Notification.tsx index 843c1a27..8de6cf54 100644 --- a/src/pages/Notification.tsx +++ b/src/pages/Notification.tsx @@ -1,11 +1,11 @@ -import { useDeleteNotification, useGetNotifications, useReadNotification } from '@/components/notification/queries'; +import { useDeleteNotification, useGetNotificationsWithSuspense, useReadNotification } from '@/components/notification/queries'; import EmptyBoundary from '@/components/common/boundary/EmptyBoundary'; import NotificationItem from '@/components/notification/NotificationItem'; import type { INotification } from 'Notification'; const Notification = () => { - const { notifications } = useGetNotifications(); + const { notifications } = useGetNotificationsWithSuspense(); const { mutate: deleteNotification } = useDeleteNotification(); const { mutate: readNotification } = useReadNotification(); diff --git a/src/pages/PreAuctionDetails.tsx b/src/pages/PreAuctionDetails.tsx index cb006ba8..ab3f6ca6 100644 --- a/src/pages/PreAuctionDetails.tsx +++ b/src/pages/PreAuctionDetails.tsx @@ -1,24 +1,22 @@ -/* eslint-disable prettier/prettier */ -import { useState } from 'react'; -import Layout from '@/components/layout/Layout'; -import { useNavigate, useLoaderData, LoaderFunction } from 'react-router-dom'; -import Price from '@/assets/icons/price.svg'; import { useDeletePreAuction, - useGetPreAuctionDetails, + useGetPreAuctionDetailsWithSuspense } from '@/components/details/queries'; +import { LoaderFunction, useLoaderData, useNavigate } from 'react-router-dom'; + +import Price from '@/assets/icons/price.svg'; import BuyersFooter from '@/components/details/BuyersFooter'; import ConfirmationModal from '@/components/details/ConfirmationModal'; import SellersFooter from '@/components/details/SellersFooter'; import SuccessModal from '@/components/details/SuccessModal'; +import Layout from '@/components/layout/Layout'; import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon'; +/* eslint-disable prettier/prettier */ +import { useState } from 'react'; const PreAuction = () => { const preAuctionId = useLoaderData() as number; - const { preAuctionDetails } = useGetPreAuctionDetails(preAuctionId); - if (!preAuctionDetails) { - throw new Error('해당 사전 경매 정보를 찾을 수 없습니다.'); - } + const { preAuctionDetails } = useGetPreAuctionDetailsWithSuspense(preAuctionId); const [isMenuOpen, setIsMenuOpen] = useState(false); const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false); From 263e24b4a236781cc769cfe59c6e07d72fcdb82c Mon Sep 17 00:00:00 2001 From: JunSeok Date: Tue, 15 Oct 2024 23:03:09 +0900 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=ED=86=A0=ED=81=B0=20=EB=A7=8C?= =?UTF-8?q?=EB=A3=8C=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/axios.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/api/axios.ts b/src/api/axios.ts index 4a3f06e1..82a1c71c 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -1,5 +1,5 @@ -import axios, { AxiosError, AxiosRequestConfig } from 'axios'; import { getToken, removeToken, setToken } from '@/utils/tokenUtils'; +import axios, { AxiosError, AxiosRequestConfig } from 'axios'; import { refreshToken } from '@/components/login/queries'; import { toast } from 'sonner'; @@ -66,25 +66,27 @@ export const createClient = (config?: AxiosRequestConfig) => { try { await refreshToken(); const newAccessToken = getToken(); - + if (!newAccessToken) { throw new Error('리프레시 토큰이 만료되었습니다.'); } - + originalRequest.headers = originalRequest.headers || {}; originalRequest.headers.Authorization = `Bearer ${newAccessToken}`; setToken(newAccessToken); - + return await axiosInstance(originalRequest); } catch (refreshError) { handleTokenError('리프레시 토큰이 만료되었습니다. 다시 로그인해주세요.'); return Promise.reject(refreshError); } + } else { + removeToken(); } } return Promise.reject(error); - }, + } ); return axiosInstance; From db8e260de7ac7cdabf50737a8af239f9143a30d4 Mon Sep 17 00:00:00 2001 From: JunSeok Date: Tue, 15 Oct 2024 23:03:22 +0900 Subject: [PATCH 7/8] =?UTF-8?q?style:=20=EA=B8=B0=ED=83=80=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/login/queries.ts | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/components/login/queries.ts b/src/components/login/queries.ts index 5d2989de..3ad1ea9d 100644 --- a/src/components/login/queries.ts +++ b/src/components/login/queries.ts @@ -2,15 +2,16 @@ import { removeToken, setToken } from '@/utils/tokenUtils'; import { API_END_POINT } from '@/constants/api'; // eslint-disable-next-line import/no-cycle -import { User } from '@/@types/user'; +import type { User } from '@/@types/user'; import { httpClient } from '@/api/axios'; -import { useMutation } from '@tanstack/react-query'; -import { useDispatch } from 'react-redux'; import { storeLogin } from '@/store/authSlice'; +import { toast } from 'sonner'; +import { useDispatch } from 'react-redux'; import { useEffect } from 'react'; +import { useMutation } from '@tanstack/react-query'; export const postSignup = async (data: User) => { - const response = await httpClient.post(API_END_POINT.SIGNUP, { ...data }, { withCredentials: true }); + const response = await httpClient.post(API_END_POINT.SIGNUP, { ...data }); const accessToken = response.headers.authorization?.split(' ')[1]; @@ -22,23 +23,19 @@ export const postSignup = async (data: User) => { }; export const logout = async () => { - try { - await refreshToken(); - await httpClient.post(API_END_POINT.LOGOUT, { withCredentials: true }); - removeToken(); - } catch (error) { - throw error; - } + await refreshToken(); + await httpClient.post(API_END_POINT.LOGOUT); + removeToken(); }; export const refreshToken = async () => { try { - const response = await httpClient.post(API_END_POINT.REFRESH_TOKEN, {}, { withCredentials: true }); - + const response = await httpClient.post(API_END_POINT.REFRESH_TOKEN); const newAccessToken = response.headers.authorization?.split(' ')[1]; if (newAccessToken) { setToken(newAccessToken); + toast.success('로그인 되었습니다.'); } return newAccessToken; @@ -50,7 +47,7 @@ export const refreshToken = async () => { export const nicknameCheck = async (nickname: string) => { const response = await httpClient.get(`${API_END_POINT.NICKNAME_CHECK}/${nickname}`); return response.data; -} +}; export const useRefreshTokenOnSuccess = () => { const dispatch = useDispatch(); @@ -65,9 +62,7 @@ export const useRefreshTokenOnSuccess = () => { dispatch(storeLogin({ token: newAccessToken })); } }, - onError: () => { - - }, + onError: () => {}, }); useEffect(() => { From a02d5474af22c4f063fd74c360c2749acd664a0d Mon Sep 17 00:00:00 2001 From: JunSeok Date: Tue, 15 Oct 2024 23:16:45 +0900 Subject: [PATCH 8/8] =?UTF-8?q?fix:=20local=20query=20reset=20=EB=B0=8F=20?= =?UTF-8?q?local=20spinner=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/boundary/APIAsyncBoundary.tsx | 15 ++++++++------- .../common/boundary/LocalAPIAsyncBoundary.tsx | 17 +++++++++-------- src/components/common/loading/LocalSpinner.tsx | 9 +++++++++ 3 files changed, 26 insertions(+), 15 deletions(-) create mode 100644 src/components/common/loading/LocalSpinner.tsx diff --git a/src/components/common/boundary/APIAsyncBoundary.tsx b/src/components/common/boundary/APIAsyncBoundary.tsx index 10a8fe77..d32614c2 100644 --- a/src/components/common/boundary/APIAsyncBoundary.tsx +++ b/src/components/common/boundary/APIAsyncBoundary.tsx @@ -2,7 +2,7 @@ import { ReactNode, Suspense } from 'react'; import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; import ErrorIcon from '@/assets/icons/error.svg'; -import { useQueryErrorResetBoundary } from '@tanstack/react-query'; +import { QueryErrorResetBoundary } from '@tanstack/react-query'; import { isAxiosError } from 'axios'; import { useLocation } from 'react-router-dom'; import Button from '../Button'; @@ -29,14 +29,15 @@ const FallbackComponent = ({ error, resetErrorBoundary }: FallbackProps) => { const APIAsyncBoundary = ({ children }: { children: ReactNode }) => { const { pathname, key } = useLocation(); - const { reset } = useQueryErrorResetBoundary() return ( - - }> - {children} - - + + {({ reset }) => ( + }> + {children} + + )} + ); }; diff --git a/src/components/common/boundary/LocalAPIAsyncBoundary.tsx b/src/components/common/boundary/LocalAPIAsyncBoundary.tsx index 3fd1f1ed..cecf341f 100644 --- a/src/components/common/boundary/LocalAPIAsyncBoundary.tsx +++ b/src/components/common/boundary/LocalAPIAsyncBoundary.tsx @@ -2,10 +2,10 @@ import { ReactNode, Suspense } from 'react'; import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; import ErrorIcon from '@/assets/icons/error.svg'; -import { useQueryErrorResetBoundary } from '@tanstack/react-query'; +import { QueryErrorResetBoundary } from '@tanstack/react-query'; import { isAxiosError } from 'axios'; import Button from '../Button'; -import GlobalSpinner from '../loading/GlobalSpinner'; +import LocalSpinner from '../loading/LocalSpinner'; interface FallbackComponentProps extends FallbackProps { height: number @@ -29,14 +29,15 @@ const FallbackComponent = ({ error, resetErrorBoundary, height }: FallbackCompon }; const LocalAPIAsyncBoundary = ({ children, height }: { children: ReactNode, height: number }) => { - const { reset } = useQueryErrorResetBoundary() return ( - }> - }> - {children} - - + + {({ reset }) => ( }> + }> + {children} + + )} + ); }; diff --git a/src/components/common/loading/LocalSpinner.tsx b/src/components/common/loading/LocalSpinner.tsx new file mode 100644 index 00000000..8085d0b1 --- /dev/null +++ b/src/components/common/loading/LocalSpinner.tsx @@ -0,0 +1,9 @@ +const LocalSpinner = ({ height }: { height: number }) => { + return ( +
    +
    +
    + ); +} + +export default LocalSpinner;