[Add] Schedule popup, Timed schedules

@@ -11,7 +11,7 @@ async function route() {
     // console.log("/db/schedules_date");
     try {
       const queryString = `
-      SELECT sc.label, sc.type, sc.description, sc.url, sc.detail, sbj.name, us.color
+      SELECT sc.label, sc.type, sc.description, sc.url, sc.detail, sbj.name, us.nickname, us.color, sc.uid
       FROM schedules_date sc
       INNER JOIN \`user-subject\` us
         ON sc.userID = us.userID

+const express = require("express");
+const mysql2 = require("mysql2/promise");
+const { connectOption } = require("../libs/MySQL");
+const schedules_timeRouter = express.Router();
+
+async function route() {
+  const connection = await mysql2.createConnection(connectOption);
+
+  // (userID, date) => schedules
+  schedules_timeRouter.get("/", async (req, res) => {
+    // console.log("/db/schedules_time");
+    try {
+      const queryString = `
+      SELECT sc.label, sc.type, sc.description, sc.url, sc.detail, sbj.name, us.nickname, us.color, sc.uid, sc.startTime, sc.endTime
+      FROM schedules_time 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
+      ORDER BY sc.endTime`;
+      const [results] = await connection.query(queryString);
+      res.send(results);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+}
+route();
+
+module.exports = schedules_timeRouter;

@@ -16,13 +16,20 @@ const GridItem = ({ targetDate }) => {
   useEffect(() => {
     async function loadScheduleItems() {
       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);
+      const params = { userID, date: toYMDStr(targetDate, "-") };
+      const { data: scdate } = await axios.get(
+        "http://localhost:3001/db/schedules_date",
+        {
+          params,
+        }
+      );
+      const { data: sctime } = await axios.get(
+        "http://localhost:3001/db/schedules_time",
+        {
+          params,
+        }
+      );
+      setSchedules(scdate.concat(sctime));
     }
     loadScheduleItems();
   }, [targetDate]);

@@ -4,13 +4,15 @@ import ecampusSymbol from "../assets/e-Campus.png";
 const ScheduleItem = ({ schedule }) => {
   const {
     name: subjectName,
+    nickname: subjectNickname,
+    uid: scheID,
     color: subjectColor,
+    url,
     type,
     label,
     description,
-    url,
     detail,
-    startTime = null,
+    startTime = null, //HHMMSS문자열
     endTime = null,
   } = schedule;
 
@@ -28,17 +30,47 @@ const ScheduleItem = ({ schedule }) => {
     return symbol;
   };
 
+  const click = (e) => {
+    let target;
+    if (e.target.className === "ScheduleItem") target = e.target;
+    else if (e.target.classList.contains("ss")) target = e.target.offsetParent;
+    else {
+      if (e.target.className === "spc")
+        e.target.offsetParent.style.display = "none";
+      return;
+    }
+
+    target.lastChild.style.display = "grid";
+  };
+
   return (
-    <div className="ScheduleItem" style={{ borderColor: "#" + subjectColor }}>
-      <img className="s_symbol" src={selectSymbol()} alt="404" />
+    <div
+      className="ScheduleItem"
+      style={{ borderColor: "#" + subjectColor }}
+      onClick={click}
+    >
+      <img className="s_symbol ss" src={selectSymbol()} alt="404" />
       {startTime && (
-        <span className="s_start">{startTime[0] + ":" + startTime[1]}</span>
+        <span className="s_start ss">{startTime.substring(0, 5)}</span>
       )}
-      {endTime && (
-        <span className="s_end">{endTime[0] + ":" + endTime[1]}</span>
-      )}
-      {/* <span className="s_category">{subjectName}</span> */}
-      <span className="s_slabel">{label}</span>
+      {endTime && <span className="s_end ss">{endTime.substring(0, 5)}</span>}
+      <span className="s_slabel ss">{label}</span>
+
+      <div className="s_popup">
+        <div className="spl">
+          <span>{subjectName}</span>
+          {url ? (
+            <a href={url} target="_blank">
+              {label}
+            </a>
+          ) : (
+            <span>{label}</span>
+          )}
+          {description && <span>{description}</span>}
+          {detail && <div dangerouslySetInnerHTML={{ __html: detail }}></div>}
+        </div>
+        <button className="spc">닫기</button>
+      </div>
     </div>
   );
 };

@@ -52,6 +52,8 @@ button:disabled {
   margin: 1px 0 1px 0;
   border: solid 3px bisque;
   border-radius: 3px;
+  cursor: pointer;
+  position: relative;
 }
 
 .ScheduleItem > span {
@@ -77,3 +79,38 @@ button:disabled {
   border-radius: 3px;
   padding: 0;
 }
+
+.s_popup {
+  position: absolute;
+  z-index: 1000;
+  top: calc(100% + 5px);
+  left: 20px;
+  background: rgb(246, 246, 246);
+  border: solid thin black;
+  display: none;
+  padding: 10px;
+  cursor: auto;
+  width: 300px;
+}
+
+.spl {
+  display: flex;
+  flex-direction: column;
+}
+
+.spl > * {
+  margin-bottom: 5px;
+}
+
+.spl > div {
+  background-color: white;
+  border: solid 1px rgb(235, 235, 235);
+}
+
+.spc {
+  margin-top: 2px;
+  margin-left: calc(100% - 50px);
+  width: 50px;
+  height: 35px;
+  cursor: pointer;
+}

@@ -35,7 +35,7 @@ aside {
   /* height: 150px;
   width: 250px; */
   /* transform: translate(-50%, -50%); */
-  background: rgb(241, 241, 241);
+  background: rgb(246, 246, 246);
   display: none;
   border: solid thin black;
   padding: 5px;