[Add] Schedule finish button

 const express = require("express");
+const mysql2 = require("mysql2/promise");
+const { connectOption } = require("../libs/MySQL");
 const dbRouter = express.Router();
 
 const schedules_dateRouter = require("./schedules_date");
@@ -9,6 +11,25 @@ const userSubjectRouter = require("./user-subject");
 const usersRouter = require("./Users");
 
 async function route() {
+  const connection = await mysql2.createConnection(connectOption);
+
+  // (userID, uid)
+  dbRouter.delete("/schedule", async (req, res) => {
+    console.log("delete /db/schedule");
+    try {
+      const queryString = `
+      DELETE FROM \`${req.body.table}\` sc
+      WHERE sc.userID = ${req.body.userID}
+        AND sc.uid = ${req.body.uid}`;
+      const [result] = await connection.query(queryString);
+      console.log(req.body);
+      res.end();
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
   dbRouter.use("/user-subject", userSubjectRouter);
   dbRouter.use("/users", usersRouter);
   dbRouter.use("/subjects", subjectsRouter);

@@ -11,7 +11,8 @@ 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.nickname, us.color, sc.uid
+      SELECT sc.label, sc.type, sc.description, sc.url, sc.detail,
+        sbj.name, us.nickname, us.color, sc.uid, "schedules_date" \`table\`
       FROM schedules_date sc
       INNER JOIN \`user-subject\` us
         ON sc.userID = us.userID

@@ -11,7 +11,8 @@ async function route() {
     // 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
+      SELECT sc.label, sc.type, sc.description, sc.uid, sc.url, sc.detail, sbj.name, 
+        us.nickname, us.color, sc.startTime, sc.endTime, "schedules_repeat" \`table\`
       FROM schedules_repeat sc
       INNER JOIN \`user-subject\` us
         ON sc.userID = us.userID

@@ -11,7 +11,8 @@ async function route() {
     // 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
+      SELECT sc.label, sc.type, sc.description, sc.url, sc.detail, sbj.name, us.nickname,
+        us.color, sc.uid, sc.startTime, sc.endTime, "schedules_time" \`table\`
       FROM schedules_time sc
       INNER JOIN \`user-subject\` us
         ON sc.userID = us.userID

@@ -37,6 +37,21 @@ const GridItem = ({ targetDate }) => {
     loadScheduleItems();
   }, [targetDate]);
 
+  const finishSchedule = async (table, uid) => {
+    for (const i in schedules)
+      if (schedules[i].uid === uid) {
+        await axios.delete("http://localhost:3001/db/schedule", {
+          data: {
+            table,
+            uid,
+            userID: await localforage.getItem("userID"),
+          },
+        });
+        schedules.splice(i, 1);
+        setSchedules(schedules);
+      }
+  };
+
   return (
     <div className="GridItem" relative={month - calMonth || null}>
       <span className="date">
@@ -44,7 +59,7 @@ const GridItem = ({ targetDate }) => {
       </span>
       {schedules &&
         schedules.map((sche, index) => (
-          <ScheduleItem key={index} schedule={sche} />
+          <ScheduleItem key={index} schedule={sche} finish={finishSchedule} />
         ))}
     </div>
   );

+import { useRef } from "react";
 import zoomSymbol from "../assets/zoom.png";
 import ecampusSymbol from "../assets/e-Campus.png";
-import { useRef } from "react";
 
-const ScheduleItem = ({ schedule }) => {
+const ScheduleItem = ({ schedule, finish }) => {
   const {
     name: subjectName,
     nickname: subjectNickname,
@@ -15,6 +15,7 @@ const ScheduleItem = ({ schedule }) => {
     detail = null,
     startTime = null, //HHMMSS문자열
     endTime = null,
+    table,
   } = schedule;
   let sTime = startTime ? startTime.substring(0, 5) : ""; //HHMM
   let eTime = endTime ? endTime.substring(0, 5) : "";
@@ -34,12 +35,18 @@ const ScheduleItem = ({ schedule }) => {
   };
 
   const popupRef = useRef();
+  const thisRef = useRef();
 
   const click = (e) => {
+    //Item
     if (e.target.classList.contains("ss"))
       popupRef.current.style.display = "grid";
     else {
-      if (e.target.className === "spc") popupRef.current.style.display = "none";
+      if (e.target.className === "spc") popupRef.current.style.display = "none"; //popup close
+      if (e.target.className === "spd") {
+        finish(table, scheUID);
+        thisRef.current.style.display = "none";
+      }
     }
   };
 
@@ -48,6 +55,7 @@ const ScheduleItem = ({ schedule }) => {
       className="ScheduleItem ss"
       style={{ borderColor: "#" + subjectColor }}
       onClick={click}
+      ref={thisRef}
     >
       <img className="s_symbol ss" src={selectSymbol()} alt="404" />
       {startTime && <span className="s_start ss">{sTime}</span>}
@@ -68,9 +76,12 @@ const ScheduleItem = ({ schedule }) => {
           {description && <span>{description}</span>}
           {detail && <div dangerouslySetInnerHTML={{ __html: detail }}></div>}
         </div>
+        <div className="sp_btn">
+          <button className="spd">완료</button>
           <button className="spc">닫기</button>
         </div>
       </div>
+    </div>
   );
 };
 

@@ -122,9 +122,14 @@ button:disabled {
   width: calc(100% - 2px);
 }
 
-.spc {
+.sp_btn {
+  display: flex;
+  margin-left: calc(100% - 100px);
+}
+
+.sp_btn > button {
+  margin-left: 2px;
   margin-top: 2px;
-  margin-left: calc(100% - 50px);
   width: 50px;
   height: 35px;
   cursor: pointer;