From a8ce3488ed85fa4ce1dfde909d3341e705a9bc50 Mon Sep 17 00:00:00 2001
From: milkbottle0305 <bigtog0602@gmail.com>
Date: Mon, 18 Mar 2024 15:01:41 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                             |  2 ++
 src/index.js                           |  6 +++---
 src/pages/Callback/Callback.js         |  2 +-
 src/pages/Notfound/Notfound.js         | 19 +++++++++++++++++
 src/pages/PrivateRoute/PrivateRoute.js | 28 +++++++++++++-------------
 5 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/Notfound/Notfound.js

diff --git a/src/App.js b/src/App.js
index fee03f3..a287db4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,12 +11,14 @@ import CreateMystudy from "./pages/Mystudies/CreateMystudy";
 import EditMystudy from "./pages/Mystudies/EditMystudy";
 import Settings from "./pages/Settings/Settings";
 import DetailMystudy from "./pages/Mystudies/DetailMystudy";
+import Notfound from "./pages/Notfound/Notfound";
 
 function App() {
   return (
     <Routes>
       <Route path="/callback" element={<Callback />} />
       <Route path="/" element={<Splash />} />
+      <Route path="*" element={<Notfound />} />
       <Route element={<PrivateRoute authentication={true} />}>
         <Route path="/home" element={<Home />} />
         <Route path="/calendar" element={<Calendar />} />
diff --git a/src/index.js b/src/index.js
index eced6fc..fe94562 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
-import { HashRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 import { RecoilRoot } from "recoil";
 import reportWebVitals from "./reportWebVitals";
 
@@ -10,9 +10,9 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   //<React.StrictMode>
   <RecoilRoot>
-    <HashRouter>
+    <BrowserRouter>
       <App />
-    </HashRouter>
+    </BrowserRouter>
   </RecoilRoot>,
   //</React.StrictMode>,
 );
diff --git a/src/pages/Callback/Callback.js b/src/pages/Callback/Callback.js
index be6a677..5899044 100644
--- a/src/pages/Callback/Callback.js
+++ b/src/pages/Callback/Callback.js
@@ -23,7 +23,7 @@ function Callback() {
     };
 
     handleOAuthCallback();
-  }, [history]);
+  }, []);
 
   return null;
 }
diff --git a/src/pages/Notfound/Notfound.js b/src/pages/Notfound/Notfound.js
new file mode 100644
index 0000000..2aed0d1
--- /dev/null
+++ b/src/pages/Notfound/Notfound.js
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const StyledNotfound = styled.div`
+  height: 100vh;
+  weight: 100vw;
+  background-color: #000000;
+  color: #ffffff;
+  font-size: 4rem;
+  font-family: roboto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Notfound = () => {
+  return <StyledNotfound>Not Found</StyledNotfound>;
+};
+
+export default Notfound;
diff --git a/src/pages/PrivateRoute/PrivateRoute.js b/src/pages/PrivateRoute/PrivateRoute.js
index 9b9210f..af03a07 100644
--- a/src/pages/PrivateRoute/PrivateRoute.js
+++ b/src/pages/PrivateRoute/PrivateRoute.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Navigate, Outlet } from "react-router-dom";
-// import { validateToken } from "../../services/api";
+import { validateToken } from "../../services/api";
 import Loading from "../../components/Loading";
 
 function PrivateRoute({ authentication }) {
@@ -14,20 +14,20 @@ function PrivateRoute({ authentication }) {
   useEffect(() => {
     setIsAuthenticated(true);
     setLoading(false);
-    // const checkAuthentication = async () => {
-    //   try {
-    //     const isAuthenticated = await validateToken(
-    //       localStorage.getItem("studitAccessToken"),
-    //     );
-    //     setIsAuthenticated(isAuthenticated);
-    //   } catch (error) {
-    //     setIsAuthenticated(false);
-    //   } finally {
-    //     setLoading(false); // 비동기 작업 완료 후 로딩 상태 변경
-    //   }
-    // };
+    const checkAuthentication = async () => {
+      try {
+        const isAuthenticated = await validateToken(
+          localStorage.getItem("studitAccessToken"),
+        );
+        setIsAuthenticated(isAuthenticated);
+      } catch (error) {
+        setIsAuthenticated(false);
+      } finally {
+        setLoading(false); // 비동기 작업 완료 후 로딩 상태 변경
+      }
+    };
 
-    // checkAuthentication();
+    checkAuthentication();
   }, []);
 
   if (loading) {