🎨 리엑트 스피너 추가

package.json

@@ -17,6 +17,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.1",
     "react-router-dom": "^7.1.0",
+    "react-spinners": "^0.15.0",
     "react-toastify": "^11.0.2",
     "zustand": "^5.0.2"
   },

src/components/Loading.tsx

@@ -0,0 +1,15 @@
+import { FadeLoader } from 'react-spinners';
+
+const Loading = () => {
+  return (
+    <div className="h-screen">
+      <div className="absolute bottom-1/2 left-1/2">
+        <h1>로딩 중..</h1>
+        <br />
+        <FadeLoader color="#4CAF50" />
+      </div>
+    </div>
+  );
+};
+
+export default Loading;

src/main.tsx

@@ -1,16 +1,19 @@
-import { StrictMode } from 'react';
+import { StrictMode, Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './router';
 import './index.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Loading from './components/Loading';
 
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <Suspense fallback={<Loading />}>
+        <RouterProvider router={router} />
+      </Suspense>
     </QueryClientProvider>
   </StrictMode>,
 );

src/pages/detail/detail.tsx

@@ -20,6 +20,7 @@ import Counter from '../../components/Counter';
 import { toast } from 'react-toastify';
 import CheckBuyList from '../../components/CheckOrder/CheckBuyList';
 import { viewPaymentStore } from '../../store/detailStore';
+import Loading from '../../components/Loading';
 
 const Detail = () => {
   const axios = axiosInstance;
@@ -40,7 +41,8 @@ const Detail = () => {
   const postNum: number = Number(_id);
   const { data, refetch } = useQuery({
     queryKey: ['products', _id],
-    queryFn: () => axios.get(`/products/${postNum}`),
+    queryFn: () => setTimeout(() => axios.get(`/products/${postNum}`), 1000),
+    // queryFn: () => axios.get(`/products/${postNum}`),
     select: (res) => {
       if (res.data.item.seller_id == loginId) setIsEditor(true);
       return res.data;
@@ -151,7 +153,7 @@ const Detail = () => {
   };
 
   if (!data) {
-    return <div>로딩중...</div>;
+    return <Loading />;
   }
 
   const productType: string = data.item.extra.type;