[[Modify] Migrate subjectData to DB

@@ -8,7 +8,7 @@ async function route() {
 
   // (userID, date) => schedules
   schedules_dateRouter.get("/", async (req, res) => {
-    console.log("/db/schedules_date");
+    // console.log("/db/schedules_date");
     try {
       const queryString = `
       SELECT sc.label, sc.type, sc.description, sc.url, sc.detail, sbj.name, us.color

@@ -6,13 +6,16 @@ const userSubjectRouter = express.Router();
 async function route() {
   const connection = await mysql2.createConnection(connectOption);
 
-  // (userID) => subjects
+  // (userID) => [{userID, subjectID, nickname, status, color, name}, ...]
   userSubjectRouter.get("/", async (req, res) => {
     console.log("/db/user-subject");
     try {
       const queryString = `
-        SELECT subjectID, nickname, status, color FROM \`user-subject\` us
-          WHERE us.userID = ${req.query.userID}`;
+      SELECT us.userID, us.subjectID, us.nickname, us.status, us.color, sub.name
+      FROM \`user-subject\` us
+      INNER JOIN subjects sub
+        ON us.subjectID = sub.ID
+      WHERE us.userID = ${req.query.userID}`;
       const [results] = await connection.query(queryString);
       res.send(results);
     } catch (e) {
@@ -20,6 +23,23 @@ async function route() {
       res.end();
     }
   });
+
+  // (userID, subjectID, status)
+  userSubjectRouter.put("/check", async (req, res) => {
+    console.log("/db/user-subject/check");
+    try {
+      const queryString = `
+      UPDATE \`user-subject\`
+      SET status = ${req.body.status}
+      WHERE userID = ${req.body.userID}
+        AND subjectID = ${req.body.subjectID}`;
+      await connection.query(queryString);
+      res.end();
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
 }
 route();
 

@@ -2,7 +2,6 @@ import { useContext, useEffect, useState } from "react";
 import localforage from "localforage";
 
 import { toYMD, toYMDStr } from "../utils/Dates";
-import { scheForage } from "../utils/LocalForage";
 
 import { CalendarStateContext } from "../pages/Calendar";
 import ScheduleItem from "./ScheduleItem";

@@ -11,12 +11,7 @@ const Side = () => {
 
     for (const code in subsObj) {
       sideSubjects.push(
-        <SideSubject
-          key={code}
-          code={code}
-          subject={subsObj[code]}
-          dispatch={dispatch}
-        />
+        <SideSubject key={code} subject={subsObj[code]} dispatch={dispatch} />
       );
     }
 

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

 import React, { useEffect, useReducer, useState } from "react";
 import { useNavigate, Route, Routes } from "react-router-dom";
 
-import { subForage } from "../utils/LocalForage";
-
 import Month from "../components/Month";
 import Header from "../components/Header";
 import Side from "../components/Side";
@@ -14,10 +12,14 @@ export const CalendarStateContext = React.createContext();
 const render = (subsObj, args) => {
   switch (args.type) {
     case "CHECKED":
-      const sub = subsObj[args.code];
-      sub.selected = !sub.selected;
-      subForage.setItem(args.code, sub);
-      return { ...subsObj, [args.code]: sub };
+      const sub = subsObj[args.subjectID];
+      sub.status = !sub.status;
+      axios.put("http://localhost:3001/db/user-subject/check", {
+        userID: sub.userID,
+        subjectID: args.subjectID,
+        status: +sub.status,
+      });
+      return { ...subsObj, [args.subjectID]: sub };
     case "INIT":
       return args.subsObj;
     default:
@@ -40,11 +42,10 @@ const Calendar = () => {
       if (!(await localforage.getItem("session"))) return navigate("/login");
       // get user's subjects
       const userID = await localforage.getItem("userID");
-      const subjects = await axios.get(
+      const { data: subjects } = await axios.get(
         "http://localhost:3001/db/user-subject",
         { params: { userID } }
-      ).data;
-      console.log(subjects);
+      );
       let tsubsObj = {};
       for (const sub of subjects) {
         tsubsObj[sub.subjectID] = sub;