From f6a44bf385043546e12427083231153320d6cb67 Mon Sep 17 00:00:00 2001
From: Jiho Lee <optional.int@kakao.com>
Date: Thu, 17 Nov 2022 01:45:30 +0900
Subject: [PATCH 1/4] refactor: add blank line

---
 src/pages/login.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 1603e79..aff4a81 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -11,6 +11,7 @@ import { snackbarAtom } from '../atoms/snackbar';
 
 const Login: React.FC = () => {
     const [accessToken, setAccessToken] = useAtom(accessTokenWithPersistence);
+
     const usernameRef = useRef<HTMLInputElement>(null);
     const passwordRef = useRef<HTMLInputElement>(null);
 

From 3af6b434bfbb415544d4ba0dd12ff3d3abc7a0bc Mon Sep 17 00:00:00 2001
From: Jiho Lee <optional.int@kakao.com>
Date: Thu, 17 Nov 2022 01:46:02 +0900
Subject: [PATCH 2/4] feat: add redirect on 401

---
 src/App.tsx               |  9 +++------
 src/components/router.tsx | 24 +++++++++++++++---------
 src/hooks/useAuth.ts      | 10 ++++++++++
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4983f26..680ae55 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 import { createTheme, ThemeProvider } from '@mui/material';
 import Router from './components/router';
-import { WithAuth } from './hocs/with-auth';
 import { WithSnackbar } from './hocs/with-snackbar';
 
 const theme = createTheme({
@@ -17,11 +16,9 @@ const theme = createTheme({
 const App = () => {
     return (
         <ThemeProvider theme={theme}>
-            <WithAuth>
-                <WithSnackbar>
-                    <Router />
-                </WithSnackbar>
-            </WithAuth>
+            <WithSnackbar>
+                <Router />
+            </WithSnackbar>
         </ThemeProvider>
     );
 };
diff --git a/src/components/router.tsx b/src/components/router.tsx
index 2811db1..e7269f8 100644
--- a/src/components/router.tsx
+++ b/src/components/router.tsx
@@ -2,6 +2,8 @@ import { useAtom } from 'jotai';
 import { BrowserRouter, Routes as ReactRoutes, Route } from 'react-router-dom';
 import { accessTokenWithPersistence } from '../atoms/token';
 import routes from '../constants/routes';
+import { WithAuth } from '../hocs/with-auth';
+import { WithHeader } from '../hocs/with-header';
 import LoginRedirect from '../pages/login-redirect';
 import Header from './header';
 import Navbar from './navbar';
@@ -18,17 +20,21 @@ const Router: React.FC = () => {
                             ? LoginRedirect
                             : e.page;
                     const Element = (
-                        <div className="w-screen h-screen flex flex-grow overflow-y-hidden">
-                            <div className="flex-1 flex-col flex-grow">
-                                <Header />
-                                <div className="flex h-full flex-row">
-                                    {!e.hidden && <Navbar />}
-                                    <div className="flex flex-col flex-1 h-[95vh] pt-10 overflow-y-scroll">
-                                        <Page />
+                        <WithHeader datum={e}>
+                            <WithAuth>
+                                <div className="w-screen h-screen flex flex-grow overflow-y-hidden">
+                                    <div className="flex-1 flex-col flex-grow">
+                                        <Header />
+                                        <div className="flex h-full flex-row">
+                                            {!e.hidden && <Navbar />}
+                                            <div className="flex flex-col flex-1 h-[95vh] pt-10 overflow-y-scroll">
+                                                <Page />
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        </div>
+                            </WithAuth>
+                        </WithHeader>
                     );
 
                     return <Route path={e.uri} key={e.uri} element={Element} />;
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 9727c6a..1b3fc06 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -1,6 +1,7 @@
 import { useAtom } from 'jotai';
 import axios from 'axios';
 import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { accessTokenWithPersistence } from '../atoms/token';
 import { baseURL } from '../constants';
 
@@ -10,6 +11,15 @@ export const axiosInstanceRef = new Proxy({ current: axiosInstance }, {});
 const useAuth = () => {
     const [accessToken, setAccessToken] = useAtom(accessTokenWithPersistence);
 
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!accessToken && location.pathname !== '/login') {
+            navigate('/login');
+        }
+    }, [accessToken]);
+
     useEffect(() => {
         axiosInstanceRef.current = axios.create({
             baseURL,

From 2707225a590bc9733c5e2351cb1ff09f5a04ac2e Mon Sep 17 00:00:00 2001
From: Jiho Lee <optional.int@kakao.com>
Date: Thu, 17 Nov 2022 01:46:16 +0900
Subject: [PATCH 3/4] feat: header state management using HoC

---
 src/hocs/with-header.tsx | 18 ++++++++++++++++++
 src/types/hocs/index.ts  |  6 ++++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/hocs/with-header.tsx

diff --git a/src/hocs/with-header.tsx b/src/hocs/with-header.tsx
new file mode 100644
index 0000000..fbd89ae
--- /dev/null
+++ b/src/hocs/with-header.tsx
@@ -0,0 +1,18 @@
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import currentPage from '../atoms/current-page';
+import { WithHeaderProps } from '../types/hocs';
+
+export const WithHeader: React.FC<WithHeaderProps> = ({ children, datum }) => {
+    const location = useLocation();
+    const [, setPage] = useAtom(currentPage);
+
+    useEffect(() => {
+        if (location.pathname === datum.uri) {
+            setPage(datum);
+        }
+    }, [datum, location.pathname]);
+
+    return <>{children}</>;
+};
diff --git a/src/types/hocs/index.ts b/src/types/hocs/index.ts
index 8351743..5363e60 100644
--- a/src/types/hocs/index.ts
+++ b/src/types/hocs/index.ts
@@ -1,3 +1,9 @@
+import IRouterDatum from '../../interfaces/router';
+
 export type HoCProps = {
     children?: React.ReactNode;
 };
+
+export type WithHeaderProps = HoCProps & {
+    datum: IRouterDatum;
+};

From 1b336f2377af89d44d35b6ad944dea47ca679203 Mon Sep 17 00:00:00 2001
From: Jiho Lee <optional.int@kakao.com>
Date: Thu, 17 Nov 2022 01:50:17 +0900
Subject: [PATCH 4/4] feat: remove setPage on navbar click

---
 src/components/navbar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index c1d0d00..65dc087 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -19,7 +19,6 @@ const NavBar: React.FC = () => {
                             key={e.name}
                             className="h-20 flex flex-grow cursor-pointer"
                             onClick={() => {
-                                setPage(e);
                                 navigate(e.uri);
                             }}
                         >