[Add] Repeated schedules

@@ -2,6 +2,7 @@ const express = require("express");
 const dbRouter = express.Router();
 
 const schedules_dateRouter = require("./schedules_date");
+const schedules_repeatRouter = require("./Schedules_repeat");
 const schedules_timeRouter = require("./Schedules_time");
 const subjectsRouter = require("./Subjects");
 const userSubjectRouter = require("./user-subject");
@@ -13,6 +14,7 @@ async function route() {
   dbRouter.use("/subjects", subjectsRouter);
   dbRouter.use("/schedules_date", schedules_dateRouter);
   dbRouter.use("/schedules_time", schedules_timeRouter);
+  dbRouter.use("/schedules_repeat", schedules_repeatRouter);
 }
 
 route();

+const express = require("express");
+const mysql2 = require("mysql2/promise");
+const { connectOption } = require("../libs/MySQL");
+const schedules_repeatRouter = express.Router();
+
+async function route() {
+  const connection = await mysql2.createConnection(connectOption);
+
+  // (userID, day) => schedules
+  schedules_repeatRouter.get("/", async (req, res) => {
+    // console.log("/db/schedules_repeat");
+    try {
+      const queryString = `
+      SELECT sc.label, sc.type, sc.description, sc.uid, sc.url, sc.detail, sbj.name, us.nickname, us.color, sc.startTime, sc.endTime
+      FROM schedules_repeat 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.day = "${req.query.day}"
+        AND sc.userID = ${req.query.userID}
+        AND sc.status = 1
+      ORDER BY sc.startTime`;
+      const [results] = await connection.query(queryString);
+      res.send(results);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  // (userID, label, subjectID, type, desciption, url, status, day, startTime, endTime)
+  schedules_repeatRouter.post("/", async (req, res) => {
+    console.log("/db/schedules_repeat");
+    try {
+      const queryString = `
+      INSERT INTO schedules_repeat (userID, label, subjectID, type, status, day, startTime, endTime)
+      VALUE (${req.body.userID}, ${req.body.label}, ${req.body.subjectID}, ${req.body.type},
+         ${req.body.status},  ${req.body.day}, ${req.body.startTime}, ${req.body.endTime});
+      UPDATE schedules_repeat
+      SET uid = -id;`;
+      await connection.query(queryString);
+      res.end();
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+}
+route();
+
+module.exports = schedules_repeatRouter;

@@ -15,21 +15,24 @@ const GridItem = ({ targetDate }) => {
 
   useEffect(() => {
     async function loadScheduleItems() {
-      const userID = await localforage.getItem("userID");
-      const params = { userID, date: toYMDStr(targetDate, "-") };
+      const params = {
+        userID: await localforage.getItem("userID"),
+        date: toYMDStr(targetDate, "-"),
+        day: targetDate.getDay(),
+      };
       const { data: scdate } = await axios.get(
         "http://localhost:3001/db/schedules_date",
-        {
-          params,
-        }
+        { params }
       );
       const { data: sctime } = await axios.get(
         "http://localhost:3001/db/schedules_time",
-        {
-          params,
-        }
+        { params }
       );
-      setSchedules(scdate.concat(sctime));
+      const { data: scrpeat } = await axios.get(
+        "http://localhost:3001/db/schedules_repeat",
+        { params }
+      );
+      setSchedules(scrpeat.concat(scdate, sctime));
     }
     loadScheduleItems();
   }, [targetDate]);

 import zoomSymbol from "../assets/zoom.png";
 import ecampusSymbol from "../assets/e-Campus.png";
+import { useRef } from "react";
 
 const ScheduleItem = ({ schedule }) => {
   const {
     name: subjectName,
     nickname: subjectNickname,
-    uid: scheID,
+    uid: scheUID,
     color: subjectColor,
     url,
     type,
     label,
-    description,
-    detail,
+    description = null,
+    detail = null,
     startTime = null, //HHMMSS문자열
     endTime = null,
   } = schedule;
+  let sTime = startTime ? startTime.substring(0, 5) : ""; //HHMM
+  let eTime = endTime ? endTime.substring(0, 5) : "";
 
   const selectSymbol = () => {
     let symbol;
@@ -30,33 +33,28 @@ const ScheduleItem = ({ schedule }) => {
     return symbol;
   };
 
+  const popupRef = useRef();
+
   const click = (e) => {
-    let target;
-    if (e.target.className === "ScheduleItem") target = e.target;
-    else if (e.target.classList.contains("ss")) target = e.target.offsetParent;
+    if (e.target.classList.contains("ss"))
+      popupRef.current.style.display = "grid";
     else {
-      if (e.target.className === "spc")
-        e.target.offsetParent.style.display = "none";
-      return;
+      if (e.target.className === "spc") popupRef.current.style.display = "none";
     }
-
-    target.lastChild.style.display = "grid";
   };
 
   return (
     <div
-      className="ScheduleItem"
+      className="ScheduleItem ss"
       style={{ borderColor: "#" + subjectColor }}
       onClick={click}
     >
       <img className="s_symbol ss" src={selectSymbol()} alt="404" />
-      {startTime && (
-        <span className="s_start ss">{startTime.substring(0, 5)}</span>
-      )}
-      {endTime && <span className="s_end ss">{endTime.substring(0, 5)}</span>}
+      {startTime && <span className="s_start ss">{sTime}</span>}
+      {endTime && <span className="s_end ss">{eTime}</span>}
       <span className="s_slabel ss">{label}</span>
 
-      <div className="s_popup">
+      <div className="s_popup" ref={popupRef}>
         <div className="spl">
           <span>{subjectName}</span>
           {url ? (
@@ -66,6 +64,7 @@ const ScheduleItem = ({ schedule }) => {
           ) : (
             <span>{label}</span>
           )}
+          {(startTime || endTime) && <span>{sTime + " ~ " + eTime}</span>}
           {description && <span>{description}</span>}
           {detail && <div dangerouslySetInnerHTML={{ __html: detail }}></div>}
         </div>

-import { useState } from "react";
+import { useRef, useState } from "react";
 
 const SideSubject = ({ subject, dispatch }) => {
   const defaultColor = "#EFEFEF";
@@ -20,8 +20,10 @@ const SideSubject = ({ subject, dispatch }) => {
     else e.target.style["background-color"] = subject.color;
   };
 
+  const popupRef = useRef();
+
   const labelClick = (e) => {
-    e.target.nextSibling.style.display = "flex";
+    popupRef.current.style.display = "flex";
   };
 
   const popupClose = (e) => {
@@ -29,7 +31,7 @@ const SideSubject = ({ subject, dispatch }) => {
       nickname: subject.nickname || subject.name,
       color: subject.color,
     });
-    e.target.offsetParent.style.display = "none";
+    popupRef.current.style.display = "none";
   };
 
   const popupApply = (e) => {
@@ -63,7 +65,7 @@ const SideSubject = ({ subject, dispatch }) => {
       <span className="ssl" onClick={labelClick}>
         {subject.nickname || subject.name}
       </span>
-      <div className="ss_popup">
+      <div className="ss_popup" ref={popupRef}>
         <div className="sspd">
           <div className="sspd_1">
             <span>이름</span>