[Modify] Save subjects in localForage

-import React, { useReducer, useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { Navigate, Route, Routes } from "react-router-dom";
+import localforage from "localforage";
 
 
 import Month from "../components/Month";
 import Month from "../components/Month";
 import Header from "../components/Header";
 import Header from "../components/Header";
 import Side from "../components/Side";
 import Side from "../components/Side";
+import { initTempSubjects } from "../utils/Test";
 
 
 export const CalendarStateContext = React.createContext();
 export const CalendarStateContext = React.createContext();
 
 
@@ -12,8 +14,10 @@ const render = (subsObj, args) => {
     case "CHECKED":
     case "CHECKED":
       const sub = subsObj[args.code];
       const sub = subsObj[args.code];
       sub.selected = !sub.selected;
       sub.selected = !sub.selected;
-      localStorage.setItem("S" + args.code, JSON.stringify(sub));
+      localforage.setItem(args.code, sub);
       return { ...subsObj, [args.code]: sub };
       return { ...subsObj, [args.code]: sub };
+    case "INIT":
+      return args.subsObj;
     default:
     default:
       return subsObj;
       return subsObj;
   }
   }
@@ -28,35 +32,20 @@ const Calendar = () => {
     scope: "month",
     scope: "month",
     date: new Date(),
     date: new Date(),
   });
   });
+  const [subsObj, dispatch] = useReducer(render, {});
 
 
-  let subLst;
-  if (!localStorage.getItem("Subjects")) {
-    subLst = [];
-    let tcolors = [
-      "red",
-      "green",
-      "blue",
-      "orange",
-      "gold",
-      "aqua",
-      "chartreuse",
-    ];
-    for (let i = 0; i < 7; i++) {
-      let code = i + 1;
-      let tsub = { name: "과목" + code, color: tcolors[i], selected: true };
-      subLst.push(code);
-      localStorage.setItem("S" + code, JSON.stringify(tsub));
+  useEffect(() => {
+    async function initSubsObj() {
+      if (!localStorage.getItem("Subjects")) await initTempSubjects();
+      const subCodeLst = JSON.parse(localStorage.getItem("Subjects"));
+      let tsubsObj = {};
+      for (const code of subCodeLst) {
+        tsubsObj[code] = await localforage.getItem(code);
+      }
+      dispatch({ type: "INIT", subsObj: tsubsObj });
     }
     }
-    localStorage.setItem("Subjects", JSON.stringify(subLst));
-  }
-
-  subLst = JSON.parse(localStorage.getItem("Subjects"));
-  let tsubsObj = {};
-  for (const code of subLst) {
-    tsubsObj[code] = JSON.parse(localStorage.getItem("S" + code));
-  }
-
-  const [subsObj, dispatch] = useReducer(render, tsubsObj);
+    initSubsObj();
+  }, []);
 
 
   return (
   return (
     <CalendarStateContext.Provider
     <CalendarStateContext.Provider

 import { useState } from "react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
-import localforage from "localforage";
+import { initTempSubjects } from "../utils/Test";
 
 
 const Debug = () => {
 const Debug = () => {
   const [state, setState] = useState({ input: "", output: "" });
   const [state, setState] = useState({ input: "", output: "" });
@@ -13,8 +13,10 @@ const Debug = () => {
   };
   };
 
 
   const handleSubmit = async (e) => {
   const handleSubmit = async (e) => {
-    await localforage.setItem("test", state.input);
-    const result = await localforage.getItem("test");
+    if (state.input === "init") await initTempSubjects();
+
+    const result = state.input;
+
     setState({ ...state, output: result });
     setState({ ...state, output: result });
   };
   };
 
 

+import localforage from "localforage";
+
+const initTempSubjects = async () => {
+  let tcolors = [
+    "red",
+    "green",
+    "blue",
+    "orange",
+    "gold",
+    "aqua",
+    "chartreuse",
+  ];
+  const subCodeLst = ["1", "2"];
+  const subObj = {
+    1: {
+      name: "과목A",
+      color: tcolors[0],
+      selected: true,
+      schedule: [
+        { type: "zoom", category: "과목A", label: "", start: [9, 30] },
+      ],
+    },
+    2: {
+      name: "과목B",
+      color: tcolors[1],
+      selected: true,
+      schedule: [
+        {
+          date: new Date(2022, 5, 3),
+          type: "ecampus",
+          category: "과목B",
+          label: "과제",
+          end: [23, 59],
+        },
+      ],
+    },
+  };
+
+  await localforage.setItem("1", subObj["1"]);
+  await localforage.setItem("2", subObj["2"]);
+
+  for (let i = 2; i < 7; i++) {
+    let code = (i + 1).toString();
+    let tsub = {
+      date: new Date(2022, 5, 3),
+      name: "과목" + code,
+      color: tcolors[i],
+      selected: true,
+      schedule: [],
+    };
+    subCodeLst.push(code);
+    await localforage.setItem(code, tsub);
+  }
+  localStorage.setItem("Subjects", JSON.stringify(subCodeLst));
+};
+
+export { initTempSubjects };