[Modify] All storages to localForage

@@ -6,7 +6,7 @@
 
 - Front-End : React
 - Back-End : Node.js
-- Storage : LocalStorage, LocalForage
+- Storage : LocalForage
 - Crawl : Puppeteer
 
 <br>

 import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
+
 import { CalendarStateContext } from "../pages/Calendar";
 import "../styles/Header.css";
 import { moveDate, toYMD } from "../utils/Dates";
+import { dataForage } from "../utils/LocalForage";
 
 const Header = () => {
   const { state, setState } = useContext(CalendarStateContext);
@@ -90,8 +92,8 @@ const Header = () => {
         </div>
         <button
           className="hrb_r"
-          onClick={() => {
-            localStorage.setItem("session", "");
+          onClick={async () => {
+            await dataForage.setItem("session", "");
             navigate("/");
           }}
         >

 import React, { useEffect, useReducer, useState } from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { useNavigate, Route, Routes } from "react-router-dom";
+
+import { initTempSubjects } from "../utils/Test";
+import { dataForage, subForage } from "../utils/LocalForage";
 
 import Month from "../components/Month";
 import Header from "../components/Header";
 import Side from "../components/Side";
-import { initTempSubjects } from "../utils/Test";
-import { subForage } from "../utils/LocalForage";
 
 export const CalendarStateContext = React.createContext();
 
@@ -26,32 +27,35 @@ const render = (subsObj, args) => {
 const Calendar = () => {
   console.log("visit Calendar");
 
-  const session = localStorage.getItem("session");
-
   const [state, setState] = useState({
     scope: "month",
     date: new Date(),
   });
   const [subsObj, dispatch] = useReducer(render, {});
 
+  const navigate = useNavigate();
   useEffect(() => {
+    async function checkSession() {
+      if (!(await dataForage.getItem("session"))) navigate("/login");
+    }
+
     async function initSubsObj() {
-      if (!localStorage.getItem("Subjects")) await initTempSubjects();
-      const subCodeLst = JSON.parse(localStorage.getItem("Subjects"));
+      if (!(await dataForage.getItem("Subjects"))) await initTempSubjects();
       let tsubsObj = {};
-      for (const code of subCodeLst) {
+      for (const code of await dataForage.getItem("Subjects")) {
         tsubsObj[code] = await subForage.getItem(code);
       }
       dispatch({ type: "INIT", subsObj: tsubsObj });
     }
+
+    checkSession();
     initSubsObj();
-  }, []);
+  }, [navigate]);
 
   return (
     <CalendarStateContext.Provider
       value={{ state, setState, subsObj, dispatch }}
     >
-      {session ? (
       <div className="Calendar">
         <Header />
         <div className="content">
@@ -63,9 +67,6 @@ const Calendar = () => {
           </Routes>
         </div>
       </div>
-      ) : (
-        <Navigate to="/login" />
-      )}
     </CalendarStateContext.Provider>
   );
 };

 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
+import { dataForage } from "../utils/LocalForage";
+
 const Home = () => {
-  const session = localStorage.getItem("session");
   console.log("visit Home");
 
+  const navigate = useNavigate();
+  useEffect(() => {
+    async function where() {
       let destination;
-  if (session) {
+      if (await dataForage.getItem("session")) {
         destination = "/calendar/month";
       } else {
         destination = "/login";
       }
+      navigate(destination);
+    }
 
-  const navigate = useNavigate();
-  useEffect(() => navigate(destination), [destination, navigate]);
+    where();
+  }, [navigate]);
 };
 
 export default Home;

-import { Navigate, useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { dataForage } from "../utils/LocalForage";
 
 const Login = () => {
   console.log("visit Login");
-  const session = localStorage.getItem("session");
 
   const navigate = useNavigate();
-  const login = () => {
+  const login = async () => {
     if (true) {
       //login success
-      localStorage.setItem("session", true);
+      await dataForage.setItem("session", true);
 
       navigate("/");
     }
   };
 
-  return session ? (
-    <Navigate to="/" />
-  ) : (
+  useEffect(() => {
+    async function render() {
+      if (await dataForage.getItem("session")) navigate("/");
+    }
+    render();
+  }, [navigate]);
+
+  return (
     <div className="Login">
       <button onClick={login}>로그인</button>
     </div>

 import { Navigate, useNavigate } from "react-router-dom";
 
 import "../styles/Settings.css";
+import { dataForage } from "../utils/LocalForage";
 
 const Settings = () => {
   console.log("visit Settings");
 
-  const session = localStorage.getItem("session");
+  const session = dataForage.getItem("session");
 
   const navigate = useNavigate();
 

@@ -10,4 +10,9 @@ const scheForage = localforage.createInstance({
   storeName: "schedules",
 });
 
-export { subForage, scheForage };
+const dataForage = localforage.createInstance({
+  name: "localforage",
+  storeName: "data",
+});
+
+export { subForage, scheForage, dataForage };

-import { subForage, scheForage } from "./LocalForage";
+import { subForage, scheForage, dataForage } from "./LocalForage";
 
 const initTempSubjects = async () => {
   scheForage.setItem("20220503", [
@@ -42,7 +42,7 @@ const initTempSubjects = async () => {
     subCodeLst.push(code);
     await subForage.setItem(code, tsub);
   }
-  localStorage.setItem("Subjects", JSON.stringify(subCodeLst));
+  dataForage.setItem("Subjects", subCodeLst);
 };
 
 export { initTempSubjects };