[Implement] Calendar sync with DB

-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
+
+import { toYMD, toYMDStr } from "../utils/Dates";
+import { scheForage } from "../utils/LocalForage";
+
 import { CalendarStateContext } from "../pages/Calendar";
-import { toYMD } from "../utils/Dates";
 import ScheduleItem from "./ScheduleItem";
 
 const GridItem = ({ targetDate }) => {
   const { state } = useContext(CalendarStateContext);
-  const { month } = toYMD(state.date);
-  const { month: tmonth, date: tdate } = toYMD(targetDate);
+  const { month: calMonth } = toYMD(state.date);
+  const { month, date } = toYMD(targetDate);
+  const [schedules, setSchedules] = useState();
 
-  const tempSchedules = [
-    { type: "zoom", category: "오픈소스", label: "", start: [9, 30] },
-    { type: "ecampus", category: "논리회로", label: "요약", end: [23, 59] },
-  ];
-  const renderScheduleItems = () => {
-    if (targetDate.getDay() === 5)
-      return (
-        <>
-          <ScheduleItem schedule={tempSchedules[0]}></ScheduleItem>
-          <ScheduleItem schedule={tempSchedules[1]}></ScheduleItem>
-        </>
-      );
-  };
+  useEffect(() => {
+    async function loadScheduleItems() {
+      setSchedules(await scheForage.getItem(toYMDStr(targetDate)));
+    }
+    loadScheduleItems();
+  }, [targetDate]);
 
   return (
-    <div className="GridItem" relative={tmonth - month || null}>
+    <div className="GridItem" relative={month - calMonth || null}>
       <span className="date">
-        {month !== tmonth ? tmonth + "/" + tdate : tdate}
+        {calMonth !== month ? month + "/" + date : date}
       </span>
-      {renderScheduleItems()}
+      {schedules &&
+        schedules.map((sche, index) => (
+          <ScheduleItem key={index} schedule={sche} />
+        ))}
     </div>
   );
 };

+import { useContext } from "react";
+
+import { CalendarStateContext } from "../pages/Calendar";
 import zoomSymbol from "../assets/zoom.png";
 import ecampusSymbol from "../assets/e-Campus.png";
 
 const ScheduleItem = ({ schedule }) => {
-  const { type, category, label, start, end } = schedule;
+  const { subCode, type, category, label, start, end } = schedule;
+  const { subsObj } = useContext(CalendarStateContext);
+  const subject = subsObj[subCode];
+  if (!subject) {
+    console.log("can't find " + subCode);
+    return;
+  }
+  if (!subject.selected) return;
+
   const selectSymbol = () => {
     let symbol;
     switch (type) {
@@ -18,7 +29,7 @@ const ScheduleItem = ({ schedule }) => {
   };
 
   return (
-    <div className="ScheduleItem">
+    <div className="ScheduleItem" style={{ borderColor: subject.color }}>
       <img className="s_symbol" src={selectSymbol()} alt="404" />
       {start && <span className="s_start">{start[0] + ":" + start[1]}</span>}
       {end && <span className="s_end">{end[0] + ":" + end[1]}</span>}

@@ -35,11 +35,9 @@ const Calendar = () => {
 
   const navigate = useNavigate();
   useEffect(() => {
-    async function checkSession() {
-      if (!(await dataForage.getItem("session"))) navigate("/login");
-    }
+    async function onMount() {
+      if (!(await dataForage.getItem("session"))) return navigate("/login");
 
-    async function initSubsObj() {
       if (!(await dataForage.getItem("Subjects"))) await initTempSubjects();
       let tsubsObj = {};
       for (const code of await dataForage.getItem("Subjects")) {
@@ -47,9 +45,7 @@ const Calendar = () => {
       }
       dispatch({ type: "INIT", subsObj: tsubsObj });
     }
-
-    checkSession();
-    initSubsObj();
+    onMount();
   }, [navigate]);
 
   return (

@@ -6,6 +6,14 @@ function toYMD(dateObj) {
   return { year, month, date };
 }
 
+function toYMDStr(dateObj) {
+  return [
+    dateObj.getFullYear(),
+    dateObj.getMonth() + 1,
+    dateObj.getDate(),
+  ].join("/");
+}
+
 function toSunday(dateObj) {
   const day = dateObj.getDay();
   moveDate(dateObj, "day", -day);
@@ -26,4 +34,4 @@ function moveDate(dateObj, scope, distance) {
   }
 }
 
-export { toYMD, toSunday, moveDate };
+export { toYMD, toYMDStr, toSunday, moveDate };

 import { subForage, scheForage, dataForage } from "./LocalForage";
+import { toYMDStr } from "./Dates";
 
-const initTempSubjects = async () => {
-  scheForage.setItem("20220503", [
-    { type: "zoom", category: "과목A", label: "", start: [9, 30] },
-    { type: "ecampus", category: "과목B", label: "과제", end: [23, 59] },
-  ]);
+async function initTempSubjects() {
+  const tempsch = [
+    {
+      subCode: "1",
+      type: "zoom",
+      category: "과목A",
+      label: "",
+      start: [9, 30],
+    },
+    {
+      subCode: "2",
+      type: "ecampus",
+      category: "과목B",
+      label: "과제",
+      end: [23, 59],
+    },
+  ];
+
+  await scheForage.setItem(toYMDStr(new Date("2022-5-20")), tempsch);
+  await scheForage.setItem(toYMDStr(new Date("2022-5-27")), tempsch);
+  await scheForage.setItem(toYMDStr(new Date("2022-6-3")), tempsch);
 
   let tcolors = [
     "red",
@@ -43,6 +60,6 @@ const initTempSubjects = async () => {
     await subForage.setItem(code, tsub);
   }
   dataForage.setItem("Subjects", subCodeLst);
-};
+}
 
 export { initTempSubjects };