From 8ab61c3be6a70957dc4bfd26f9ab31bfa2be0d90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=8B=A0=20=EC=9A=B0=ED=98=84?= <woo_hyun_1@naver.com>
Date: Tue, 5 Sep 2023 22:38:23 +0900
Subject: [PATCH] [feat] Automatically route to login page when token value is
 missing

---
 src/Router.tsx                         |  5 ++---
 src/components/container/Container.tsx |  4 ++--
 src/pages/account/login/Login.tsx      |  8 +++++++-
 src/pages/main/Main.tsx                | 14 ++++++++++++--
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/Router.tsx b/src/Router.tsx
index f1b02f52..499a1268 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -53,7 +53,6 @@ export default Router;
 
 const TopContainer = styled.div`
   display: flex;
-  width: 1440px;
-  height: 900px;
-  border: 1px solid black;
+  width: 100%;
+  height: 100%;
 `;
diff --git a/src/components/container/Container.tsx b/src/components/container/Container.tsx
index c266da0f..911c8b86 100644
--- a/src/components/container/Container.tsx
+++ b/src/components/container/Container.tsx
@@ -4,6 +4,6 @@ import styled from "styled-components";
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  width: 1440px;
-  height: 809px;
+  width: 100%;
+  height: 100%;
 `;
diff --git a/src/pages/account/login/Login.tsx b/src/pages/account/login/Login.tsx
index 3206f9e8..afd9bf5e 100644
--- a/src/pages/account/login/Login.tsx
+++ b/src/pages/account/login/Login.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import styled from "styled-components";
@@ -17,6 +17,12 @@ const Login = () => {
   const [circleList, setCircleList] = useRecoilState(studentCircleListAtom);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (sessionStorage.getItem("token") === undefined) {
+      navigate("/login");
+    }
+  }, []);
+
   const loginPost = async (id: string, password: string, studentId: string) => {
     const response = await axios.post(
       "/login",
diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
index 997b7fbe..126bf3e9 100644
--- a/src/pages/main/Main.tsx
+++ b/src/pages/main/Main.tsx
@@ -1,9 +1,19 @@
-import React from "react";
-import { Outlet } from "react-router-dom";
+import React, { useEffect } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
 import { Container } from "../../components/container/Container";
 import Header from "../../components/header/Header";
 
 const Main = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (sessionStorage.getItem("token") === undefined) {
+      navigate("/login");
+    } else {
+      navigate("/member-club");
+    }
+  }, []);
+
   return (
     <>
       {/* <MenuBar /> */}