Mile-Writings · se0jinYoon · Oct 8, 2024 · Aug 14, 2024 · Aug 14, 2024 · Aug 14, 2024
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
     <title>MILE</title>
   </head>
   <body>
+    <div id="modal"></div>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-quill": "^2.0.0",
-    "react-router-dom": "^6.21.1",
+    "react-router-dom": "^6.26.1",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,11 @@
 import styled from '@emotion/styled';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import Router from './routers/Router';
+import router from './routers/Router';
+
+import { RouterProvider } from 'react-router-dom';
+import { Suspense } from 'react';
+import Loading from './pages/loading/Loading';
 
 const App = () => {
   const queryClient = new QueryClient({
@@ -15,7 +19,9 @@ const App = () => {
     <div style={{ fontSize: '16px' }}>
       <QueryClientProvider client={queryClient}>
         <DesktopWrapper>
-          <Router />
+          <Suspense fallback={<Loading />}>
+            <RouterProvider router={router} />
+          </Suspense>
         </DesktopWrapper>
         <ReactQueryDevtools initialIsOpen />
       </QueryClientProvider>

diff --git a/src/assets/images/alertDelete.png b/src/assets/images/alertDelete.png
diff --git a/src/assets/images/alertModify.png b/src/assets/images/alertModify.png
diff --git a/src/assets/svgs/alertDeletePng.svg b/src/assets/svgs/alertDeletePng.svg
diff --git a/src/assets/svgs/alertModifyPng.svg b/src/assets/svgs/alertModifyPng.svg
diff --git a/src/components/commons/Header.tsx b/src/components/commons/Header.tsx
@@ -127,7 +127,7 @@ export const DefaultHeader = () => {
 const HeaderWrapper = styled.div`
   position: fixed;
   top: 0%;
-  z-index: 4;
+  z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;

diff --git a/src/components/commons/Layout.tsx b/src/components/commons/Layout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom';
+import ScrollToTop from './ScrollToTop';
+
+const Layout = () => {
+  return (
+    <>
+      <ScrollToTop />
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/components/commons/Modal.tsx b/src/components/commons/Modal.tsx