[Modify] Save subjects in localStorage

@@ -4,14 +4,19 @@ import "../styles/Side.css";
 import SideSubject from "./SideSubject";
 
 const Side = () => {
-  const { subs, setSubs } = useContext(CalendarStateContext);
+  const { subsObj, dispatch } = useContext(CalendarStateContext);
 
   const renderSubs = () => {
     const sideSubjects = [];
 
-    for (let i = 0; i < subs.length; i++) {
+    for (const code in subsObj) {
       sideSubjects.push(
-        <SideSubject key={i} subject={subs[i]} setSubs={setSubs} />
+        <SideSubject
+          key={code}
+          code={code}
+          subject={subsObj[code]}
+          dispatch={dispatch}
+        />
       );
     }
 

-const SideSubject = ({ subject }) => {
-  let isChecked = false;
+const SideSubject = ({ code, subject, dispatch }) => {
   const defaultColor = "#EFEFEF";
-  const bgc = "background-color";
 
   const check = (e) => {
-    if (isChecked) e.target.style["background-color"] = defaultColor;
+    dispatch({ type: "CHECKED", code });
+    if (subject.selected) e.target.style["background-color"] = defaultColor;
     else e.target.style["background-color"] = subject.color;
-    isChecked = !isChecked;
   };
 
   return (
@@ -15,7 +13,7 @@ const SideSubject = ({ subject }) => {
         className="ssc"
         onClick={check}
         style={{
-          [bgc]: isChecked ? subject.color : defaultColor,
+          backgroundColor: subject.selected ? subject.color : defaultColor,
         }}
       ></div>
 

@@ -5,7 +5,7 @@ import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );

-import React, { useState } from "react";
+import React, { useReducer, useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import Month from "../components/Month";
 import Header from "../components/Header";
 import Side from "../components/Side";
-import Subject from "../utils/Subject";
 
 export const CalendarStateContext = React.createContext();
 
+const render = (subsObj, args) => {
+  switch (args.type) {
+    case "CHECKED":
+      const sub = subsObj[args.code];
+      sub.selected = !sub.selected;
+      localStorage.setItem("S" + args.code, JSON.stringify(sub));
+      return { ...subsObj, [args.code]: sub };
+    default:
+      return subsObj;
+  }
+};
+
 const Calendar = () => {
   console.log("visit Calendar");
 
@@ -18,8 +29,9 @@ const Calendar = () => {
     date: new Date(),
   });
 
+  let subLst;
   if (!localStorage.getItem("Subjects")) {
-    let tsubs = [];
+    subLst = [];
     let tcolors = [
       "red",
       "green",
@@ -30,16 +42,26 @@ const Calendar = () => {
       "chartreuse",
     ];
     for (let i = 0; i < 7; i++) {
-      tsubs.push(new Subject("과목" + (i + 1), tcolors[i], true));
+      let code = i + 1;
+      let tsub = { name: "과목" + code, color: tcolors[i], selected: true };
+      subLst.push(code);
+      localStorage.setItem("S" + code, JSON.stringify(tsub));
     }
-    localStorage.setItem("Subjects", JSON.stringify(tsubs));
+    localStorage.setItem("Subjects", JSON.stringify(subLst));
   }
-  const [subs, setSubs] = useState(
-    JSON.parse(localStorage.getItem("Subjects"))
-  );
+
+  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);
 
   return (
-    <CalendarStateContext.Provider value={{ state, setState, subs, setSubs }}>
+    <CalendarStateContext.Provider
+      value={{ state, setState, subsObj, dispatch }}
+    >
       {session ? (
         <div className="Calendar">
           <Header />