DELETE 구현

+# Do-gether
+----------
+Sharing your TODO-LIST with others!
+
+## HOW TO USE
+----------------
+You can come here and use DO-GETHER.
+[`http://wwww.dogether.tk:3000`](http://wwww.dogether.tk:3000)
+![main](/uploads/0b44105f829a49b4211d4e6adc9d2c33/main.png)
+
+## HOW TO INSTALL
+-------------
+First, clone this project
+
+`git clone http://khuhub.khu.ac.kr/2019102153/Do-gether.git`
+
+and execute this command.
+```sh
+npm install
+cd client
+npm install
+```
+
+Second, install yarn.
+
+On Debian or Ubuntu Linux, you can install Yarn via our Debian package repository. 
+You will first need to configure the repository:
+```sh
+curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+```
+
+On Ubuntu 16.04 or below and Debian Stable,
+you will also need to configure the NodeSource repository to get a new enough version of Node.js.
+
+Then you can simply:
+`sudo apt update && sudo apt install yarn`
+
+Reference : [`https://yarnpkg.com/en/docs/install`](https://yarnpkg.com/en/docs/install)
+
+## LISENCE
+---------
+Do-gether is free software, and may be redistributed under the terms specified in the [MIT LICENSE](http://khuhub.khu.ac.kr/2019102153/Do-gether/blob/master/LICENSE.txt) file.
\ No newline at end of file

+PORT=80
\ No newline at end of file

@@ -14,7 +14,7 @@
     "react-scripts": "^3.4.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=80 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

@@ -90,13 +90,16 @@ export default function AddButton({ handleClose }) {
     }).then((response) => response.json());
   };
 
-  const checkAndClose = () => {
+  const handleAdd = () => {
     if (title === "") {
       alert("Please enter a title!");
     } else if (checkEemptyList(textList)) {
       alert("Please fill in the blank!");
     } else {
-      const initCK = Array.apply(null, Array(textList.length)).map(Number.prototype.valueOf,0);
+      const initCK = Array.apply(null, Array(textList.length)).map(
+        Number.prototype.valueOf,
+        0
+      );
       addApi({
         isPublic: isPublic,
         name: localStorage["userName"],
@@ -107,6 +110,7 @@ export default function AddButton({ handleClose }) {
         ck: initCK.join(","),
       });
       handleClose();
+      window.location.reload(false);
     }
   };
 
@@ -122,21 +126,13 @@ export default function AddButton({ handleClose }) {
     return 0;
   };
 
-  const handleTitle = (e) => {
-    setTitle(e.target.value);
-  };
-
-  const handlePublic = () => {
-    setIsPublic(isPublic ? 0 : 1);
-  };
-
   const handleText = (e, idx) => {
     let tempArr = textList;
     tempArr[idx] = e.target.value;
     setTextList(tempArr);
   };
 
-  const handleAdd = () => {
+  const handleAddTODO = () => {
     if (textFieldBody.length < 5) {
       const idx = textFieldBody.length;
       setTextFieldBody([
@@ -161,21 +157,33 @@ export default function AddButton({ handleClose }) {
           </Typography>
           <FormControlLabel
             className={classes.isPublic}
-            control={<Checkbox onClick={handlePublic} />}
+            control={
+              <Checkbox
+                onClick={() => {
+                  setIsPublic(isPublic ? 0 : 1);
+                }}
+              />
+            }
             checked={isPublic}
             label="Public"
           />
 
           <form className={classes.input} noValidate autoComplete="off">
-            <TextField required label="Title" onChange={handleTitle} />
+            <TextField
+              required
+              label="Title"
+              onChange={(e) => {
+                setTitle(e.target.value);
+              }}
+            />
             {textFieldBody.map((field) => field)}
           </form>
-          <IconButton className={classes.addButton} onClick={handleAdd}>
+          <IconButton className={classes.addButton} onClick={handleAddTODO}>
             <AddIcon />
           </IconButton>
 
           <form className={classes.buttonGroup}>
-            <Button variant="contained" color="primary" onClick={checkAndClose}>
+            <Button variant="contained" color="primary" onClick={handleAdd}>
               확인
             </Button>
             <Button variant="contained" color="secondary" onClick={handleClose}>

@@ -100,16 +100,22 @@ export default function AddButton({ data, handleClose }) {
     }).then((response) => response.json());
   };
 
-  const checkAndClose = () => {
+  const deleteApi = (data) => {
+    return fetch("/api/deletecard", {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    }).then((response) => response.json());
+  };
+
+  const handleModify = () => {
     if (title === "") {
       alert("Please enter a title!");
     } else if (checkEemptyList(textList)) {
       alert("Please fill in the blank!");
     } else {
-      const initCK = Array.apply(null, Array(textList.length)).map(
-        Number.prototype.valueOf,
-        0
-      );
       modifyApi({
         isPublic: isPublic,
         name: localStorage["userName"],
@@ -117,13 +123,25 @@ export default function AddButton({ data, handleClose }) {
         time: data.time,
         title: title,
         todo: textList.join(","),
-        ck: initCK.join(","),
+        ck: data.ck,
       });
       handleClose();
       window.location.reload(false);
     }
   };
 
+  const handleDelete = () => {
+    deleteApi({
+      name: localStorage["userName"],
+      date: data.date,
+      time: data.time,
+    });
+    handleClose();
+    alert("Deleted Successfully!");
+    window.location.reload(false);
+  };
+
+  
   const checkEemptyList = (arr) => {
     if (arr.length === 0) {
       return 1;
@@ -136,21 +154,13 @@ export default function AddButton({ data, handleClose }) {
     return 0;
   };
 
-  const handleTitle = (e) => {
-    setTitle(e.target.value);
-  };
-
-  const handlePublic = () => {
-    setIsPublic(isPublic ? 0 : 1);
-  };
-
   const handleText = (e, idx) => {
     let tempArr = textList;
     tempArr[idx] = e.target.value;
     setTextList(tempArr);
   };
 
-  const handleAdd = () => {
+  const handleAddTODO = () => {
     if (textFieldBody.length < 5) {
       const idx = textFieldBody.length;
       setTextFieldBody([
@@ -175,24 +185,41 @@ export default function AddButton({ data, handleClose }) {
           </Typography>
           <FormControlLabel
             className={classes.isPublic}
-            control={<Checkbox onClick={handlePublic} />}
+            control={
+              <Checkbox
+                onClick={() => {
+                  setIsPublic(isPublic ? 0 : 1);
+                }}
+              />
+            }
             checked={isPublic}
             label="Public"
           />
 
           <form className={classes.input} noValidate autoComplete="off">
-            <TextField required label="Title" onChange={handleTitle} defaultValue={data.title}/>
+            <TextField
+              required
+              label="Title"
+              onChange={(e) => {
+                setTitle(e.target.value);
+              }}
+              defaultValue={data.title}
+            />
             {textFieldBody.map((field) => field)}
           </form>
-          <IconButton className={classes.addButton} onClick={handleAdd}>
+          <IconButton className={classes.addButton} onClick={handleAddTODO}>
             <AddIcon />
           </IconButton>
 
           <form className={classes.buttonGroup}>
-            <Button variant="contained" color="primary" onClick={checkAndClose}>
+            <Button variant="contained" color="primary" onClick={handleModify}>
               수정
             </Button>
-            <Button variant="contained" color="secondary" onClick={handleClose}>
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={handleDelete}
+            >
               삭제
             </Button>
           </form>

@@ -23,6 +23,7 @@ export default function SettingButton({data, isMine }) {
 
   const handleOpen = () => {
     setOpen(true);
+    console.log(data);
   };
 
   const handleClose = () => {

@@ -45,27 +45,25 @@ export default function TodoCard({ data, isMine }) {
   );
 
   const handleCheck = (idx) => {
-    if(localStorage["userName"]===data.name)
-    {
+    if (localStorage["userName"] === data.name) {
       let tempArr = checkState;
-    tempArr[idx] = tempArr[idx] ? 0 : 1;
-    setCheckState(tempArr);
-    setRender([]);
-    modifyApi({
-      isPublic: data.isPublic,
-      name: localStorage["userName"],
-      date: data.date,
-      time: data.time,
-      title: data.title,
-      todo: data.todo,
-      ck: tempArr.join(",")
-    });
-    
-    }else{
+      tempArr[idx] = tempArr[idx] ? 0 : 1;
+      setCheckState(tempArr);
+      data.ck=tempArr.join(",");
+      console.log(data);
+      setRender([]);
+      modifyApi({
+        isPublic: data.isPublic,
+        name: localStorage["userName"],
+        date: data.date,
+        time: data.time,
+        title: data.title,
+        todo: data.todo,
+        ck: tempArr.join(","),
+      });
+    } else {
       alert("You can't modify other people's list.");
     }
-    
-    
   };
 
   const modifyApi = (data) => {

@@ -72,15 +72,6 @@ app.put("/api/updatecard", (req, res) => {
   const sql =
     `UPDATE CARDINFO SET title="${data.title}",todo="${data.todo}",ck="${data.ck}" WHERE name="${data.name}" AND date="${data.date}" AND time="${data.time}";`;
   console.log(sql);
-  // const params = [
-  //   data.isPublic,
-  //   data.name,
-  //   data.date,
-  //   data.time,
-  //   data.title,
-  //   data.todo,
-  //   data.ck,
-  // ];
   connection.query(sql, (err, rows, fields) => {
     if (err) {
       res.send({
@@ -98,19 +89,9 @@ app.put("/api/updatecard", (req, res) => {
 
 app.delete("/api/deletecard", (req, res) => {
   const data = req.body;
-  const sql =
-    "INSERT INTO CARDINFO(isPublic,name,date,time,title,todo,ck) VALUES(?,?,?,?,?,?,?);";
+  const sql = `DELETE FROM CARDINFO WHERE name="${data.name}" AND date="${data.date}" AND time="${data.time}";`;
 
-  const params = [
-    data.isPublic,
-    data.name,
-    data.date,
-    data.time,
-    data.title,
-    data.todo,
-    data.ck,
-  ];
-  connection.query(sql, params, (err, rows, fields) => {
+  connection.query(sql, (err, rows, fields) => {
     if (err) {
       res.send({
         code: 400,