Fix: rendering error

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;

src/components/common/CustomCarousel.tsx

@@ -1,14 +1,14 @@
-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 (
     <Carousel
       opts={{
         align: 'start',
         dragFree: true,
         watchDrag: false,
-        loop: true,
       }}
       className='w-full overflow-scroll'
     >

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 (
-    <ErrorBoundary onReset={reset} FallbackComponent={FallbackComponent} resetKeys={[pathname, key]}>
-      <Suspense fallback={<GlobalSpinner />}>
-        {children}
-      </Suspense>
-    </ErrorBoundary>
+    <QueryErrorResetBoundary>
+      {({ reset }) => (<ErrorBoundary onReset={reset} FallbackComponent={FallbackComponent} resetKeys={[pathname, key]}>
+        <Suspense fallback={<GlobalSpinner />}>
+          {children}
+        </Suspense>
+      </ErrorBoundary>)}
+    </QueryErrorResetBoundary>
   );
 };
 

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 (
-    <ErrorBoundary onReset={reset} FallbackComponent={(props) => <FallbackComponent height={height} {...props} />}>
-      <Suspense fallback={<GlobalSpinner />}>
-        {children}
-      </Suspense>
-    </ErrorBoundary>
+    <QueryErrorResetBoundary>
+      {({ reset }) => (<ErrorBoundary onReset={reset} FallbackComponent={(props) => <FallbackComponent height={height} {...props} />}>
+        <Suspense fallback={<LocalSpinner height={height} />}>
+          {children}
+        </Suspense>
+      </ErrorBoundary>)}
+    </QueryErrorResetBoundary>
   );
 };
 

src/components/common/loading/LocalSpinner.tsx

@@ -0,0 +1,9 @@
+const LocalSpinner = ({ height }: { height: number }) => {
+  return (
+    <div className={`flex items-center justify-center w-full h-[${height}px]`}>
+      <div className='border-4 border-white rounded-full size-10 border-b-cheeseYellow animate-spin' />
+    </div>
+  );
+}
+
+export default LocalSpinner;

src/components/details/queries.ts

@@ -1,13 +1,9 @@
-import { IAuctionDetails, IPreAuctionDetails } from 'AuctionDetails';
-import { API_END_POINT } from '@/constants/api';
+import { UseMutateFunction, useMutation, useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import type { IAuctionDetails, IPreAuctionDetails } from 'AuctionDetails';
+
 import { httpClient } from '@/api/axios';
+import { API_END_POINT } from '@/constants/api';
 import { queryKeys } from '@/constants/queryKeys';
-import {
-  UseMutateFunction,
-  useMutation,
-  useQueryClient,
-  useSuspenseQuery,
-} from '@tanstack/react-query';
 
 export const useConvertToAuction = (): {
   mutate: UseMutateFunction<any, Error, number, unknown>;
@@ -16,10 +12,8 @@ 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) => {
@@ -47,9 +41,8 @@ export const useLikeAuctionItem = (): {
   mutate: UseMutateFunction<any, Error, number, unknown>;
 } => {
   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;
   };
 
@@ -75,9 +68,8 @@ 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;
   };
 
@@ -98,9 +90,8 @@ export const useCancelBid = (): {
 
 export const useGetAuctionDetails = (auctionId: number) => {
   const getAuctionDetails = async (): Promise<IAuctionDetails> => {
-    const response = await httpClient.get(
-      `${API_END_POINT.AUCTIONS}/${auctionId}`
-    );
+    const response = await httpClient.get(`${API_END_POINT.AUCTIONS}/${auctionId}`);
+
 
     return response.data;
   };
@@ -115,13 +106,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<IPreAuctionDetails> => {
+    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<IPreAuctionDetails> => {
-    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;
   };
@@ -142,9 +147,8 @@ 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;
   };
 

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 (
     <li className='flex flex-col items-center w-full h-full gap-3 cursor-pointer' onClick={onClickCategory}>

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(() => {

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 (
     <li className='flex justify-center transition-all items-center w-[11.25rem] h-[3.75rem] relative'>
-      <img onClick={onClick} src={iconSrc} alt={`${name}_${active ? 'on' : 'off'}_icon`} className='cursor-pointer size-6' />
+      <img onClick={() => navigate(path)} src={iconSrc} alt={`${name}_${active ? 'on' : 'off'}_icon`} className='cursor-pointer size-6' />
       {notificationCondition && (
         <div aria-label='읽지 않은 알림을 표시하는 빨간 점' className='absolute top-[25%] right-[42%] rounded-full size-1 bg-cheeseYellow' />
       )}
@@ -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}
         />
       ))}