WePlanPlans · suehub · Jan 6, 2024 · Jan 5, 2024 · Jan 5, 2024 · Jan 6, 2024
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,8 @@ 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';
+import ScrollToTop from '@router/ScrollToTop';
 
 const queryClient = new QueryClient();
 
@@ -14,9 +16,11 @@ const App = () => {
     <QueryClientProvider client={queryClient}>
       <RecoilRoot>
         <BrowserRouter>
+          <ScrollToTop />
           <ThemeProvider theme={theme}>
             <GlobalStyle />
             <MainRouter />
+            <AuthRouter />
           </ThemeProvider>
         </BrowserRouter>
       </RecoilRoot>

diff --git a/src/components/Tours/ToursCategory.tsx b/src/components/Tours/ToursCategory.tsx
@@ -7,6 +7,7 @@ import ToursCategoryItemSkeleton from './ToursCategoryItemSkeleton';
 import { v4 as uuidv4 } from 'uuid';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
+// import { useEffect, useState } from 'react';
 
 const ToursCategory = ({
   selectedRegion,

diff --git a/src/components/Tours/ToursList.tsx b/src/components/Tours/ToursList.tsx
@@ -48,7 +48,7 @@ const ToursList = ({ selectedRegion }: ToursListProps) => {
       loader={
         <div key={uuidv4()} className="flex justify-center">
           <div
-            className="z-[105] mx-auto mt-10 h-8 w-8 animate-spin rounded-full border-[3px] border-solid border-current border-t-transparent text-[blue-600] dark:text-[#28d8ff]"
+            className="z-[100] mx-auto h-8 w-8 animate-spin rounded-full border-[3px] border-solid border-current border-t-transparent pt-10 text-[blue-600] dark:text-[#28d8ff]"
             role="status"
             aria-label="loading">
             <div className="sr-only">Loading...</div>

diff --git a/src/components/Tours/ToursSectionTop.tsx b/src/components/Tours/ToursSectionTop.tsx
@@ -7,7 +7,7 @@ const ToursSectionTop = () => {
 
   return (
     <div className="mt-3">
-      <div className="sticky top-0 z-50 bg-white py-0.5">
+      <div className="sticky top-0 z-[105] bg-white py-0.5">
         <h1 className="title2 pt-3">지금 인기여행지</h1>
         <ToursCategory
           selectedRegion={selectedRegion}

diff --git a/src/components/common/nav/Nav.tsx b/src/components/common/nav/Nav.tsx
@@ -8,37 +8,37 @@ const Nav = () => {
   const isActive = (path: string) => location.pathname === path;
 
   return (
-    <nav className="sticky bottom-0 z-50 flex h-16 items-center justify-center bg-white">
+    <nav className="sticky bottom-0 z-50 mt-auto flex h-16 items-center justify-center bg-white">
       <div className="flex w-[100%] items-center justify-evenly space-x-4 bg-inherit">
         <div
           onClick={() => navigate('/')}
           className="cursor-pointer flex-col items-center justify-center px-2">
           <div className="flex justify-center">
             <HomeIcon fill={isActive('/') ? 'currentColor' : 'none'} />
           </div>
-          <p className="caption1 mt-[3px] text-center">홈</p>
+          <p className="caption1 mt-[3px] pr-[1px] text-center">홈</p>
         </div>
         <div
           onClick={() => navigate('/')}
           className="cursor-pointer flex-col items-center justify-center px-2">
           <CalendarIcon />
-          <p className="caption1 mt-[3px] text-center text-xs/[11px]">일정</p>
+          <p className="caption1 mt-[5px] text-center text-xs/[11px]">일정</p>
         </div>
         <div
           onClick={() => navigate('/')}
           className="cursor-pointer flex-col items-center justify-center px-2">
           <div className="flex justify-center">
             <HeartIcon />
           </div>
-          <p className="caption1 mt-[3px] text-center text-xs/[11px]">찜</p>
+          <p className="caption1 mt-[4px] text-center text-xs/[11px]">찜</p>
         </div>
         <div
           onClick={() => navigate('/signin')}
-          className="cursor-pointer flex-col items-center justify-center px-1">
+          className="cursor-pointer flex-col items-center justify-center px-1 pt-[4.5px]">
           <div className="flex justify-center">
             <UserIcon />
           </div>
-          <p className="caption1 mt-[3px] text-center">내정보</p>
+          <p className="caption1 mt-[3px] text-center ">내정보</p>
         </div>
       </div>
     </nav>

diff --git a/src/router/ScrollToTop.ts b/src/router/ScrollToTop.ts
@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;
diff --git a/src/router/authRouter.tsx b/src/router/authRouter.tsx
@@ -0,0 +1,17 @@
+import { Route, Routes } from 'react-router-dom';
+import Signup from '@pages/signup/signup.page';
+import Signin from '@pages/signin/signin.page';
+import MainLayout from './routerLayout';
+
+const AuthRouter = () => {
+  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,41 +1,12 @@
-import { Outlet, Route, Routes } from 'react-router-dom';
-import { Header } from '@components/common/header';
-import { Nav } from '@components/common/nav';
+import { Route, Routes } 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();
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [location]);
-
   return (
     <>
       <Routes>
@@ -45,8 +16,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;