[Modify] Migrate scheduleData to DB

@@ -14,10 +14,12 @@
         "axios": "^0.27.2",
         "body-parser": "^1.20.0",
         "cors": "^2.8.5",
+        "crypto-js": "^4.1.1",
         "express": "^4.18.1",
         "fs": "^0.0.1-security",
         "localforage": "^1.10.0",
         "mysql": "^2.18.1",
+        "mysql2": "^2.3.3",
         "puppeteer": "^14.1.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
@@ -5627,6 +5629,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+    },
     "node_modules/crypto-random-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -6154,6 +6161,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/denque": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.0.1.tgz",
+      "integrity": "sha512-tfiWc6BQLXNLpNiR5iGd0Ocu3P3VpxfzFiqubLgMfhfOw9WyvgJBd46CClNn9k3qfbjvT//0cf7AlYRX/OslMQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -7993,6 +8008,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "dependencies": {
+        "is-property": "^1.0.2"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -8847,6 +8870,11 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
     },
+    "node_modules/is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g=="
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -11305,6 +11333,11 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
+    "node_modules/long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -11646,6 +11679,57 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/mysql2": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-2.3.3.tgz",
+      "integrity": "sha512-wxJUev6LgMSgACDkb/InIFxDprRa6T95+VEoR+xPvtngtccNH2dGjEB/fVZ8yg1gWv1510c9CvXuJHi5zUm0ZA==",
+      "dependencies": {
+        "denque": "^2.0.1",
+        "generate-function": "^2.3.1",
+        "iconv-lite": "^0.6.3",
+        "long": "^4.0.0",
+        "lru-cache": "^6.0.0",
+        "named-placeholders": "^1.1.2",
+        "seq-queue": "^0.0.5",
+        "sqlstring": "^2.3.2"
+      },
+      "engines": {
+        "node": ">= 8.0"
+      }
+    },
+    "node_modules/mysql2/node_modules/sqlstring": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
+      "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/named-placeholders": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.2.tgz",
+      "integrity": "sha512-wiFWqxoLL3PGVReSZpjLVxyJ1bRqe+KKJVbr4hGs1KWfTZTQyezHFBbuKj9hsizHyGV2ne7EMjHdxEGAybD5SA==",
+      "dependencies": {
+        "lru-cache": "^4.1.3"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/named-placeholders/node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dependencies": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/named-placeholders/node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -13507,6 +13591,11 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
+    },
     "node_modules/psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -14536,6 +14625,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
+    "node_modules/seq-queue": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
+      "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
+    },
     "node_modules/serialize-javascript": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
@@ -20713,6 +20807,11 @@
         "which": "^2.0.1"
       }
     },
+    "crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+    },
     "crypto-random-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -21072,6 +21171,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "denque": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.0.1.tgz",
+      "integrity": "sha512-tfiWc6BQLXNLpNiR5iGd0Ocu3P3VpxfzFiqubLgMfhfOw9WyvgJBd46CClNn9k3qfbjvT//0cf7AlYRX/OslMQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -22417,6 +22521,14 @@
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
     },
+    "generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "requires": {
+        "is-property": "^1.0.2"
+      }
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -23004,6 +23116,11 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
     },
+    "is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g=="
+    },
     "is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -24807,6 +24924,11 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -25067,6 +25189,52 @@
         }
       }
     },
+    "mysql2": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-2.3.3.tgz",
+      "integrity": "sha512-wxJUev6LgMSgACDkb/InIFxDprRa6T95+VEoR+xPvtngtccNH2dGjEB/fVZ8yg1gWv1510c9CvXuJHi5zUm0ZA==",
+      "requires": {
+        "denque": "^2.0.1",
+        "generate-function": "^2.3.1",
+        "iconv-lite": "^0.6.3",
+        "long": "^4.0.0",
+        "lru-cache": "^6.0.0",
+        "named-placeholders": "^1.1.2",
+        "seq-queue": "^0.0.5",
+        "sqlstring": "^2.3.2"
+      },
+      "dependencies": {
+        "sqlstring": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
+          "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg=="
+        }
+      }
+    },
+    "named-placeholders": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.2.tgz",
+      "integrity": "sha512-wiFWqxoLL3PGVReSZpjLVxyJ1bRqe+KKJVbr4hGs1KWfTZTQyezHFBbuKj9hsizHyGV2ne7EMjHdxEGAybD5SA==",
+      "requires": {
+        "lru-cache": "^4.1.3"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+        }
+      }
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -26271,6 +26439,11 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
+    },
     "psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -27003,6 +27176,11 @@
         }
       }
     },
+    "seq-queue": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
+      "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
+    },
     "serialize-javascript": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",

@@ -9,10 +9,12 @@
     "axios": "^0.27.2",
     "body-parser": "^1.20.0",
     "cors": "^2.8.5",
+    "crypto-js": "^4.1.1",
     "express": "^4.18.1",
     "fs": "^0.0.1-security",
     "localforage": "^1.10.0",
     "mysql": "^2.18.1",
+    "mysql2": "^2.3.3",
     "puppeteer": "^14.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

 const express = require("express");
-const mysql = require("mysql");
+const mysql = require("mysql2/promise");
 const fs = require("fs");
 const router = express.Router();
 
-const [id, pw] = fs
+async function route() {
+  const [id, pw] = fs
     .readFileSync("server/libs/sql.pvdata", "utf8")
     .split("\r\n");
-
-const connection = mysql.createConnection({
+  const connection = await mysql.createConnection({
     host: "localhost",
     user: id,
     password: pw,
-  database: "mydb",
-});
-
-router.get("/", (req, res) => {
-  res.send("DB Root");
-});
-
-router.get("/mytable", (req, res) => {
-  connection.query("SELECT * from mytable", (error, rows) => {
-    if (error) throw error;
-    console.log(rows);
-    res.send(rows);
+    database: "db",
+  });
+
+  // (userID, date) => schedules
+  router.get("/schedules_date", async (req, res) => {
+    console.log("/db/schedules_date");
+    try {
+      const queryString = `
+      SELECT sc.label, sc.type, sc.description, sc.url, sc.detail, sbj.name, us.color
+      FROM schedules_date sc
+      INNER JOIN \`user-subject\` us
+        ON sc.userID = us.userID
+        AND sc.subjectID = us.subjectID
+        AND us.status = 1
+      INNER JOIN subjects sbj
+        ON sc.subjectID = sbj.ID
+      WHERE sc.date = "${req.query.date}"
+        AND sc.userID = ${req.query.userID}
+        AND sc.status = 1`;
+      const [results] = await connection.query(queryString);
+      res.send(results);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  // (ID) => null | name  //unused
+  router.get("/subjects", async (req, res) => {
+    console.log("/db/subjects");
+    try {
+      const queryString = `
+      SELECT name FROM subjects sbj
+        WHERE sbj.ID = ${req.query.ID}`;
+      const [results] = await connection.query(queryString);
+      res.send(results.length && results[0].name);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  // (loginID) => null | ID(str)
+  router.get("/users", async (req, res) => {
+    console.log("/db/users");
+    try {
+      const queryString = `
+      SELECT ID FROM users us
+        WHERE us.loginID = '${req.query.loginID}'`;
+      const [results] = await connection.query(queryString);
+      res.send(results.length ? results[0].ID.toString() : null);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
   });
-});
+
+  // (loginID, loginPW) => null | "correct"
+  router.get("/users/check", async (req, res) => {
+    console.log("/db/users/check");
+    try {
+      const queryString = `
+      SELECT loginPW FROM users us
+        WHERE us.loginID = '${req.query.loginID}'`;
+      const [results] = await connection.query(queryString);
+      res.send(results[0].loginPW === req.query.loginPW ? "correct" : null);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  // (userID) => subjects
+  router.get("/user-subject", 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}`;
+      const [results] = await connection.query(queryString);
+      res.send(results);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  router.get("*", (req, res) => {
+    console.log("/db/*");
+    res.end();
+  });
+}
+
+route();
 
 module.exports = router;

@@ -15,8 +15,10 @@ app.use(
     credentials: true,
   })
 );
-app.use(bodyParser.urlencoded({ extended: false }));
-app.use(bodyParser.json());
+// app.use(bodyParser.urlencoded({ extended: false }));
+// app.use(bodyParser.json());
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
 
 app.post("/", (req, res) => {
   res.send({ body: req.body });

 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";
+import axios from "axios";
 
 const GridItem = ({ targetDate }) => {
   const { state } = useContext(CalendarStateContext);
@@ -14,7 +16,14 @@ const GridItem = ({ targetDate }) => {
 
   useEffect(() => {
     async function loadScheduleItems() {
-      setSchedules(await scheForage.getItem(toYMDStr(targetDate)));
+      const userID = await localforage.getItem("userID");
+      const res = await axios.get("http://localhost:3001/db/schedules_date", {
+        params: {
+          userID,
+          date: toYMDStr(targetDate, "-"),
+        },
+      });
+      setSchedules(res.data);
     }
     loadScheduleItems();
   }, [targetDate]);

+import localforage from "localforage";
 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);
@@ -93,7 +93,7 @@ const Header = () => {
         <button
           className="hrb_r"
           onClick={async () => {
-            await dataForage.setItem("session", "");
+            await localforage.setItem("session", null);
             navigate("/");
           }}
         >

@@ -5,14 +5,17 @@ import zoomSymbol from "../assets/zoom.png";
 import ecampusSymbol from "../assets/e-Campus.png";
 
 const ScheduleItem = ({ 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 {
+    name: subjectName,
+    color: subjectColor,
+    type,
+    label,
+    description,
+    url,
+    detail,
+    startTime = null,
+    endTime = null,
+  } = schedule;
 
   const selectSymbol = () => {
     let symbol;
@@ -20,7 +23,7 @@ const ScheduleItem = ({ schedule }) => {
       case "zoom":
         symbol = zoomSymbol;
         break;
-      case "ecampus":
+      case "assignment":
         symbol = ecampusSymbol;
         break;
       default:
@@ -29,11 +32,15 @@ const ScheduleItem = ({ schedule }) => {
   };
 
   return (
-    <div className="ScheduleItem" style={{ borderColor: subject.color }}>
+    <div className="ScheduleItem" style={{ borderColor: subjectColor }}>
       <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>}
-      <span className="s_category">{category}</span>
+      {startTime && (
+        <span className="s_start">{startTime[0] + ":" + startTime[1]}</span>
+      )}
+      {endTime && (
+        <span className="s_end">{endTime[0] + ":" + endTime[1]}</span>
+      )}
+      {/* <span className="s_category">{subjectName}</span> */}
       <span className="s_slabel">{label}</span>
     </div>
   );

 import React, { useEffect, useReducer, useState } from "react";
 import { useNavigate, Route, Routes } from "react-router-dom";
 
-import { initTempSubjects } from "../utils/Test";
-import { dataForage, subForage } from "../utils/LocalForage";
+import { subForage } from "../utils/LocalForage";
 
 import Month from "../components/Month";
 import Header from "../components/Header";
 import Side from "../components/Side";
+import localforage from "localforage";
+import axios from "axios";
 
 export const CalendarStateContext = React.createContext();
 
@@ -36,12 +37,17 @@ const Calendar = () => {
   const navigate = useNavigate();
   useEffect(() => {
     async function onMount() {
-      if (!(await dataForage.getItem("session"))) return navigate("/login");
-
-      if (!(await dataForage.getItem("Subjects"))) await initTempSubjects();
+      if (!(await localforage.getItem("session"))) return navigate("/login");
+      // get user's subjects
+      const userID = await localforage.getItem("userID");
+      const subjects = await axios.get(
+        "http://localhost:3001/db/user-subject",
+        { params: { userID } }
+      ).data;
+      console.log(subjects);
       let tsubsObj = {};
-      for (const code of await dataForage.getItem("Subjects")) {
-        tsubsObj[code] = await subForage.getItem(code);
+      for (const sub of subjects) {
+        tsubsObj[sub.subjectID] = sub;
       }
       dispatch({ type: "INIT", subsObj: tsubsObj });
     }

+import localforage from "localforage";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { dataForage } from "../utils/LocalForage";
-
 const Home = () => {
   console.log("visit Home");
 
@@ -10,7 +9,7 @@ const Home = () => {
   useEffect(() => {
     async function where() {
       let destination;
-      if (await dataForage.getItem("session")) {
+      if (await localforage.getItem("session")) {
         destination = "/calendar/month";
       } else {
         destination = "/login";

 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import localforage from "localforage";
 
-import { dataForage } from "../utils/LocalForage";
 import "../styles/Login.css";
 import axios from "axios";
+import cryptoJs from "crypto-js";
 
 const Login = () => {
   console.log("visit Login");
   const [state, setState] = useState({
     id: "",
     pw: "",
+    btn: "Login",
   });
 
   const handleChangeState = (e) => {
@@ -21,21 +23,57 @@ const Login = () => {
 
   const navigate = useNavigate();
   const login = async () => {
-    const res = await axios.post("http://localhost:3001/login/", {
-      id: state.id,
-      pw: state.pw,
-    });
+    setState({ ...state, btn: "Login..." });
+    const { data: userDBID } = await axios.get(
+      "http://localhost:3001/db/users",
+      {
+        params: {
+          loginID: state.id,
+        },
+      }
+    );
 
-    if (res.data === "login failed") alert("ID/PW를 확인해주세요");
+    if (userDBID) {
+      //pass crawling
+      const hashpw = cryptoJs.SHA256(state.pw).toString();
+      const { data: isCorrectPW } = await axios.get(
+        "http://localhost:3001/db/users/check",
+        {
+          params: { loginID: state.id, loginPW: hashpw },
+        }
+      );
+      if (isCorrectPW) await localforage.setItem("userID", Number(userDBID));
       else {
-      await dataForage.setItem("session", true);
-      navigate("/");
+        setState({ ...state, btn: "Login" });
+        alert("ID/PW를 확인해주세요");
+        return;
       }
+    } else {
+      //crawling
+      const { data: loginResult } = await axios.post(
+        "http://localhost:3001/login/",
+        {
+          id: state.id,
+          pw: state.pw,
+        }
+      );
+      if (loginResult === "login failed") {
+        setState({ ...state, btn: "Login" });
+        alert("ID/PW를 확인해주세요");
+        return;
+      }
+      // + else (성공시) localforage에 userID추가
+    }
+    // + localforage에 id pw 추가
+    await localforage.setItem("id", state.id);
+    await localforage.setItem("pw", state.pw);
+    await localforage.setItem("session", true);
+    navigate("/");
   };
 
   useEffect(() => {
     async function ifAlreadyLogined() {
-      if (await dataForage.getItem("session")) navigate("/");
+      if (await localforage.getItem("session")) navigate("/");
     }
     ifAlreadyLogined();
   }, [navigate]);
@@ -61,7 +99,7 @@ const Login = () => {
           type="password"
         />
       </div>
-      <button onClick={login}>Login</button>
+      <button onClick={login}>{state.btn}</button>
     </div>
   );
 };

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

@@ -12,7 +12,9 @@
 
 .GridItem {
   border: solid thin lightgray;
-  height: 150px;
+  display: flex;
+  flex-direction: column;
+  /* height: 150px; */
   padding: 5px;
 }
 

@@ -6,12 +6,12 @@ function toYMD(dateObj) {
   return { year, month, date };
 }
 
-function toYMDStr(dateObj) {
+function toYMDStr(dateObj, joint) {
   return [
     dateObj.getFullYear(),
     dateObj.getMonth() + 1,
     dateObj.getDate(),
-  ].join("/");
+  ].join(joint);
 }
 
 function toSunday(dateObj) {

+const CryptoJS = require("crypto-js");
+
+function createHashed(str) {
+  var hash = CryptoJS.SHA256(str);
+  console.log("암호화된 값 : " + hash);
+
+  // base64
+  // var key = CryptoJS.enc.Utf8.parse(str);
+  // var base64 = CryptoJS.enc.Base64.stringify(key); //encoded
+  // var decrypt = CryptoJS.enc.Base64.parse(base64);
+  // var hashData = decrypt.toString(CryptoJS.enc.Utf8); //decoded
+}
+
+createHashed("Happy2468!");
+
+module.exports = createHashed;

@@ -19,9 +19,9 @@ async function initTempSubjects() {
     },
   ];
 
-  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);
+  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",