[feat] Automatically route to login page when token value is missing

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%;
 `;

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%;
 `;

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",

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 /> */}