[Add] Pages for login, setting

-import "./styles/App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import React from "react";
 
 
+import "./styles/App.css";
 import Calendar from "./pages/Calendar";
 import Calendar from "./pages/Calendar";
 import Home from "./pages/Home";
 import Home from "./pages/Home";
+import Login from "./pages/Login";
+import Settings from "./pages/Settings";
+
+export const AppStateContext = React.createContext();
 
 
 function App() {
 function App() {
   return (
   return (
     <BrowserRouter>
     <BrowserRouter>
-      <div className="App">
-        <Routes>
-          <Route path="/calendar/*" element={<Calendar />} />
-          <Route exact path="/login" element={<></>} />
-          <Route exact path="/setting" element={<></>} />
-          <Route path="*" element={<Home />} />
-        </Routes>
-      </div>
+      <AppStateContext.Provider value={[]}>
+        <div className="App">
+          <Routes>
+            <Route path="*" element={<Home />} />
+            <Route path="/calendar/*" element={<Calendar />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/settings" element={<Settings />} />
+          </Routes>
+        </div>
+      </AppStateContext.Provider>
     </BrowserRouter>
     </BrowserRouter>
   );
   );
 }
 }

@@ -59,6 +59,9 @@ const Header = () => {
         <span className="hcs">{headLabel}</span>
         <span className="hcs">{headLabel}</span>
       </div>
       </div>
       <div className="hr">
       <div className="hr">
+        <button className="hrb_l" onClick={() => navigate("/settings")}>
+          설정
+        </button>
         <div className="hrd">
         <div className="hrd">
           <button
           <button
             disabled={state.scope === "day"}
             disabled={state.scope === "day"}
@@ -85,6 +88,15 @@ const Header = () => {
             월
             월
           </button>
           </button>
         </div>
         </div>
+        <button
+          className="hrb_r"
+          onClick={() => {
+            localStorage.setItem("session", "");
+            navigate("/");
+          }}
+        >
+          로그아웃
+        </button>
       </div>
       </div>
     </header>
     </header>
   );
   );

 import React, { useState } from "react";
 import React, { useState } from "react";
-import { Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 
 
 import Grid from "../components/Grid";
 import Grid from "../components/Grid";
 import Header from "../components/Header";
 import Header from "../components/Header";
@@ -8,7 +8,10 @@ import "../styles/Home.css";
 export const CalendarStateContext = React.createContext();
 export const CalendarStateContext = React.createContext();
 
 
 const Calendar = () => {
 const Calendar = () => {
-  //scope는 day, state는 date
+  console.log("visit Calendar");
+
+  const session = localStorage.getItem("session");
+
   const [state, setState] = useState({
   const [state, setState] = useState({
     scope: "month",
     scope: "month",
     date: new Date(),
     date: new Date(),
@@ -16,14 +19,18 @@ const Calendar = () => {
 
 
   return (
   return (
     <CalendarStateContext.Provider value={[state, setState]}>
     <CalendarStateContext.Provider value={[state, setState]}>
-      <div className="Calendar">
-        <Header />
-        <Routes>
-          <Route path="/month/*" element={<Grid />} />
-          <Route path="/week/*" element={<></>} />
-          <Route path="/day/*" element={<></>} />
-        </Routes>
-      </div>
+      {session ? (
+        <div className="Calendar">
+          <Header />
+          <Routes>
+            <Route path="/month/*" element={<Grid />} />
+            <Route path="/week/*" element={<></>} />
+            <Route path="/day/*" element={<></>} />
+          </Routes>
+        </div>
+      ) : (
+        <Navigate to="/login" />
+      )}
     </CalendarStateContext.Provider>
     </CalendarStateContext.Provider>
   );
   );
 };
 };

@@ -2,8 +2,18 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
 
 const Home = () => {
 const Home = () => {
+  const session = localStorage.getItem("session");
+  console.log("visit Home");
+
+  let destination;
+  if (session) {
+    destination = "/calendar/month";
+  } else {
+    destination = "/login";
+  }
+
   const navigate = useNavigate();
   const navigate = useNavigate();
-  useEffect(() => navigate("/calendar/month"), [navigate]);
+  useEffect(() => navigate(destination), [destination, navigate]);
 };
 };
 
 
 export default Home;
 export default Home;

+import { Navigate, useNavigate } from "react-router-dom";
+
+const Login = () => {
+  console.log("visit Login");
+  const session = localStorage.getItem("session");
+
+  const navigate = useNavigate();
+  const login = () => {
+    if (true) {
+      //login success
+      localStorage.setItem("session", true);
+
+      navigate("/");
+    }
+  };
+
+  return session ? (
+    <Navigate to="/" />
+  ) : (
+    <div className="Login">
+      <button onClick={login}>로그인</button>
+    </div>
+  );
+};
+
+export default Login;

+import { Navigate, useNavigate } from "react-router-dom";
+
+const Settings = () => {
+  const session = localStorage.getItem("session");
+
+  const navigate = useNavigate();
+
+  return session ? (
+    <div className="Settings">
+      <button
+        onClick={() => {
+          navigate(-1);
+        }}
+      >
+        {"<"}
+      </button>
+    </div>
+  ) : (
+    <Navigate to="/login" />
+  );
+};
+
+export default Settings;

@@ -41,7 +41,16 @@ header {
   margin: 10px;
   margin: 10px;
 }
 }
 
 
+.hrd {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
 .hrd > button {
 .hrd > button {
   padding: 8px 14px 8px 14px;
   padding: 8px 14px 8px 14px;
   font-size: medium;
   font-size: medium;
 }
 }
+
+.hr {
+  display: flex;
+}