From c580e6a5c57c55f59d7c085c7a3a5da24c212f5a Mon Sep 17 00:00:00 2001 From: Hojin Date: Fri, 5 Jan 2024 17:49:44 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Refator:=20=EB=9D=BC=EC=9A=B0=ED=84=B0?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/App.tsx | 2 ++ src/router/authRouter.tsx | 25 +++++++++++++++++++++++++ src/router/mainRouter.tsx | 28 ++-------------------------- src/router/routerLayout.tsx | 24 ++++++++++++++++++++++++ 5 files changed, 54 insertions(+), 27 deletions(-) create mode 100644 src/router/authRouter.tsx create mode 100644 src/router/routerLayout.tsx diff --git a/index.html b/index.html index ebf673eb..a13e0b4f 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - 위플플 | 여정 공유 서비스 + 위플플 | 여정 공유 플랫폼 diff --git a/src/App.tsx b/src/App.tsx index bfa01682..d69b84b5 100644 --- 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 = () => { + diff --git a/src/router/authRouter.tsx b/src/router/authRouter.tsx new file mode 100644 index 00000000..ba252952 --- /dev/null +++ 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 ( + + }> + } /> + } /> + + + ); +}; + +export default AuthRouter; diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx index a1f594eb..9a636293 100644 --- 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 ( -
-
-
- -
- {showNav &&
- ); -} +import MainLayout from './routerLayout'; const MainRouter = () => { const location = useLocation(); @@ -45,8 +23,6 @@ const MainRouter = () => { } /> } /> } /> - } /> - } /> diff --git a/src/router/routerLayout.tsx b/src/router/routerLayout.tsx new file mode 100644 index 00000000..5825698b --- /dev/null +++ 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 ( +
+
+
+ +
+ {showNav &&
+ ); +}; + +export default MainLayout; From fc356df9085118d8cc615aebf83ad1aaa93d8e55 Mon Sep 17 00:00:00 2001 From: sue Date: Sat, 6 Jan 2024 23:24:02 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20ScrollToTop=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 ++ src/router/ScrollToTop.ts | 14 ++++++++++++++ src/router/authRouter.tsx | 8 -------- src/router/mainRouter.tsx | 7 ------- 4 files changed, 16 insertions(+), 15 deletions(-) create mode 100644 src/router/ScrollToTop.ts diff --git a/src/App.tsx b/src/App.tsx index d69b84b5..8c38d96c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ 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(); @@ -15,6 +16,7 @@ const App = () => { + diff --git a/src/router/ScrollToTop.ts b/src/router/ScrollToTop.ts new file mode 100644 index 00000000..4637ead2 --- /dev/null +++ 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 index ba252952..0b59279b 100644 --- a/src/router/authRouter.tsx +++ b/src/router/authRouter.tsx @@ -1,17 +1,9 @@ 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 ( }> diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx index 9a636293..0bd81f40 100644 --- a/src/router/mainRouter.tsx +++ b/src/router/mainRouter.tsx @@ -4,16 +4,9 @@ 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 { useEffect } from 'react'; import MainLayout from './routerLayout'; const MainRouter = () => { - const location = useLocation(); - - useEffect(() => { - window.scrollTo(0, 0); - }, [location]); - return ( <> From e6814a89286fb57d674a04d902d6470e042f77d5 Mon Sep 17 00:00:00 2001 From: sue Date: Sat, 6 Jan 2024 23:34:30 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Refactor:=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tours/ToursCategory.tsx | 1 + src/components/Tours/ToursList.tsx | 2 +- src/components/Tours/ToursSectionTop.tsx | 2 +- src/components/common/nav/Nav.tsx | 12 ++++++------ 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/Tours/ToursCategory.tsx b/src/components/Tours/ToursCategory.tsx index c3507ad5..d4e3a3fd 100644 --- 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 index 700c343f..c3634df7 100644 --- a/src/components/Tours/ToursList.tsx +++ b/src/components/Tours/ToursList.tsx @@ -48,7 +48,7 @@ const ToursList = ({ selectedRegion }: ToursListProps) => { loader={
Loading...
diff --git a/src/components/Tours/ToursSectionTop.tsx b/src/components/Tours/ToursSectionTop.tsx index 73aa68d7..f1f708e2 100644 --- a/src/components/Tours/ToursSectionTop.tsx +++ b/src/components/Tours/ToursSectionTop.tsx @@ -7,7 +7,7 @@ const ToursSectionTop = () => { return (
-
+

지금 인기여행지

{ const isActive = (path: string) => location.pathname === path; return ( -