Refator: 라우터구조 리팩토링

WePlanPlans · Jan 5, 2024 · c580e6a · c580e6a
1 parent ba8c5c5
commit c580e6a
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>위플플 | 여정 공유 서비스</title>
+  <title>위플플 | 여정 공유 플랫폼</title>
 </head>
 
 <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { BrowserRouter } from 'react-router-dom';
 import MainRouter from '@router/mainRouter';
+import AuthRouter from '@router/authRouter';
 
 const queryClient = new QueryClient();
 
@@ -17,6 +18,7 @@ const App = () => {
           <ThemeProvider theme={theme}>
             <GlobalStyle />
             <MainRouter />
+            <AuthRouter />
           </ThemeProvider>
         </BrowserRouter>
       </RecoilRoot>

diff --git a/src/router/authRouter.tsx b/src/router/authRouter.tsx
@@ -0,0 +1,25 @@
+import { Route, Routes } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+import Signup from '@pages/signup/signup.page';
+import Signin from '@pages/signin/signin.page';
+import MainLayout from './routerLayout';
+
+const AuthRouter = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
+
+  return (
+    <Routes>
+      <Route path="/" element={<MainLayout />}>
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/signin" element={<Signin />} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default AuthRouter;
diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx
@@ -1,33 +1,11 @@
-import { Outlet, Route, Routes } from 'react-router-dom';
-import { Header } from '@components/common/header';
-import { Nav } from '@components/common/nav';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import Main from '@pages/main/main.page';
 import { Search } from '@pages/search/search.page';
 import Detail from '@pages/detail/detail.page';
 import ReviewPosting from '@pages/reviewPosting/reviewPosting.page';
 import ReviewComment from '@pages/reviewComment/reviewComment.page';
-import { useLocation } from 'react-router-dom';
 import { useEffect } from 'react';
-import Signup from '@pages/signup/signup.page';
-import Signin from '@pages/signin/signin.page';
-
-export function MainLayout() {
-  const location = useLocation();
-  const hideNavPaths = ['/signup', '/signin'];
-  const showNav = !hideNavPaths.some((path) =>
-    location.pathname.includes(path),
-  );
-
-  return (
-    <div className="mx-auto my-0 flex min-h-[100vh] max-w-[412px] flex-col bg-white ">
-      <Header />
-      <div className="px-[20px] py-0">
-        <Outlet />
-      </div>
-      {showNav && <Nav />}
-    </div>
-  );
-}
+import MainLayout from './routerLayout';
 
 const MainRouter = () => {
   const location = useLocation();
@@ -45,8 +23,6 @@ const MainRouter = () => {
           <Route path="/search" element={<Search />} />
           <Route path="/reviewPosting/:id" element={<ReviewPosting />} />
           <Route path="/reviewComment/:id" element={<ReviewComment />} />
-          <Route path="/signup" element={<Signup />} />
-          <Route path="/signin" element={<Signin />} />
         </Route>
       </Routes>
     </>

diff --git a/src/router/routerLayout.tsx b/src/router/routerLayout.tsx
@@ -0,0 +1,24 @@
+import { Outlet } from 'react-router-dom';
+import { Header } from '@components/common/header';
+import { Nav } from '@components/common/nav';
+import { useLocation } from 'react-router-dom';
+
+const MainLayout = () => {
+  const location = useLocation();
+  const hideNavPaths = ['/signup', '/signin'];
+  const showNav = !hideNavPaths.some((path) =>
+    location.pathname.includes(path),
+  );
+
+  return (
+    <div className="mx-auto my-0 flex min-h-[100vh] max-w-[412px] flex-col bg-white ">
+      <Header />
+      <div className="px-[20px] py-0">
+        <Outlet />
+      </div>
+      {showNav && <Nav />}
+    </div>
+  );
+};
+
+export default MainLayout;