Modal 분리

 import React, { useState } from "react";
-
 import { makeStyles } from "@material-ui/core/styles";
+import ModalControl from "./ModalControl.js";
 
 import Modal from "@material-ui/core/Modal";
 import Icon from "@material-ui/core/Icon";
@@ -8,6 +8,9 @@ import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
+import AddIcon from "@material-ui/icons/Add";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
 
 const useStyles = makeStyles((theme) => ({
   iconButton: {
@@ -21,21 +24,15 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 70,
     color: "black",
   },
-
-  paper: {
-    position: "absolute",
-    width: 300,
-    backgroundColor: "white",
-    boxShadow: theme.shadows[5],
-    padding: theme.spacing(2, 4, 3),
-  },
-  input: {
-    "& > *": {
-      margin: theme.spacing(1),
-      width: "30ch",
-    },
+  addButton: {
+    fontSize: 11,
+    float: "right",
+    margin: 0,
+    marginTop: "1rem",
+    marginRight: "1rem",
   },
-  button: {
+  buttonGroup: {
+    clear: "both",
     "& > *": {
       margin: theme.spacing(1),
       float: "right",
@@ -43,17 +40,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function getModalStyle() {
-  return {
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-  };
-}
-
 export default function AddButton() {
   const classes = useStyles();
-  const [modalStyle] = useState(getModalStyle);
   const [open, setOpen] = useState(false);
 
   const handleOpen = () => {
@@ -61,38 +49,56 @@ export default function AddButton() {
   };
 
   const handleClose = () => {
+    console.log(1);
     setOpen(false);
   };
 
+  if (!open) {
     return (
       <>
         <IconButton className={classes.iconButton} onClick={handleOpen}>
           <Icon className={classes.icon}>add_circle</Icon>
         </IconButton>
-      <Modal
+      </>
+    );
+  } else {
+    return (
+      <>
+        <ModalControl state={open} handleClose={handleClose} />
+      </>
+    );
+  }
+}
+
+/* <Modal
         open={open}
-        aria-labelledby="simple-modal-title"
-        aria-describedby="simple-modal-description"
       >
-        <div style={modalStyle} className={classes.paper}>
-          <Typography variant="h5">ADD TODO LIST</Typography>
+        <div className={classes.paper}>
+          <Typography className={classes.title} variant="h5">
+            ADD TODO LIST
+          </Typography>
+          <FormControlLabel
+            className={classes.isPublic}
+            control={<Checkbox onClick={handlePublic} />}
+            checked={isPublic}
+            label="Public"
+          />
 
           <form className={classes.input} noValidate autoComplete="off">
-            <TextField id="standard-basic" label="Title" />
-            <TextField id="standard-basic" label="Todo 1" />
-            <TextField id="standard-basic" label="Todo 1" />
+            <TextField required label="Title" onChange={handleTitle} />
+            {textFieldBody.map((field) => field)}
           </form>
+          <IconButton className={classes.addButton} onClick={handleAdd}>
+            <AddIcon />
+          </IconButton>
 
-          <form className={classes.button}>
-            <Button variant="outlined" color="primary" onClick={handleClose}>
+          <form className={classes.buttonGroup}>
+            <Button variant="contained" color="primary" onClick={handleClose}>
               확인
             </Button>
-            <Button variant="outlined" color="secondary" onClick={handleClose}>
+            <Button variant="contained" color="secondary" onClick={handleClose}>
               취소
             </Button>
           </form>
         </div>
-      </Modal>
-    </>
-  );
-}
+      </Modal> */

+import React, { useState } from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+
+import Modal from "@material-ui/core/Modal";
+import IconButton from "@material-ui/core/IconButton";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+import AddIcon from "@material-ui/icons/Add";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+
+const useStyles = makeStyles((theme) => ({
+  iconButton: {
+    margin: "0",
+    padding: "0",
+    position: "fixed",
+    bottom: "3rem",
+    right: "3rem",
+  },
+  icon: {
+    fontSize: 70,
+    color: "black",
+  },
+  addButton: {
+    fontSize: 11,
+    float: "right",
+    margin: 0,
+    marginTop: "1rem",
+    marginRight: "1rem",
+  },
+  buttonGroup: {
+    clear: "both",
+    "& > *": {
+      margin: theme.spacing(1),
+      float: "right",
+    },
+  },
+  title: {
+    float: "left",
+    width: "13rem",
+    marginLeft: "0.5rem",
+    marginTop: "0.3rem",
+    padding: 0,
+  },
+  isPublic: {
+    float: "left",
+  },
+  paper: {
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    position: "absolute",
+    width: "90%",
+    maxWidth: 320,
+    maxHeight: 500,
+    msOverflowStyle: "none",
+    backgroundColor: "white",
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 2),
+  },
+  input: {
+    "& > *": {
+      float: "left",
+      margin: theme.spacing(1),
+      marginRight: 0,
+      width: "14.5rem",
+    },
+  },
+}));
+
+export default function AddButton({ state, handleClose }) {
+  const classes = useStyles();
+  const [title, setTitle] = useState("");
+  const [isPublic, setIsPublic] = useState(1);
+  const [textList, setTextList] = useState(new Array());
+  const [textFieldBody, setTextFieldBody] = useState([
+    <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />,
+  ]);
+
+  const addApi = (data) => {
+    return fetch("/api/addcard", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    }).then((response) => response.json());
+  };
+
+  //   const initData = () => {
+  //     const initArr = new Array("","","","","");
+  //     setTitle("");
+  //     setIsPublic(1);
+  //     setTextList(initArr);
+  //     console.log(textList,1);
+  //     setTextFieldBody([
+  //       <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />,
+  //     ]);
+  //   };
+
+  const checkEemptyList = (arr) => {
+    if (arr.length === 0) {
+      return 1;
+    }
+    for (let idx = 0; idx < arr.length; idx++) {
+      if (arr[idx] === undefined || arr[idx] === "") {
+        return 1;
+      }
+    }
+    return 0;
+  };
+
+  const checkAndClose = () => {
+    if (title === "") {
+      alert("Please enter a title!");
+    } else if (checkEemptyList(textList)) {
+      alert("Please fill in the blank!");
+    } else {
+      //initData();
+      console.log(textList);
+      handleClose();
+    }
+  };
+
+  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 = () => {
+    if (textFieldBody.length < 5) {
+      const idx = textFieldBody.length;
+      setTextFieldBody([
+        ...textFieldBody,
+        <TextField
+          required
+          label={"To do " + (idx + 1)}
+          onChange={(e) => handleText(e, idx)}
+        />,
+      ]);
+    } else {
+      alert("You can register up to five.");
+    }
+  };
+
+  return (
+    <>
+      <Modal open={true}>
+        <div className={classes.paper}>
+          <Typography className={classes.title} variant="h5">
+            ADD TODO LIST
+          </Typography>
+          <FormControlLabel
+            className={classes.isPublic}
+            control={<Checkbox onClick={handlePublic} />}
+            checked={isPublic}
+            label="Public"
+          />
+
+          <form className={classes.input} noValidate autoComplete="off">
+            <TextField required label="Title" onChange={handleTitle} />
+            {textFieldBody.map((field) => field)}
+          </form>
+          <IconButton className={classes.addButton} onClick={handleAdd}>
+            <AddIcon />
+          </IconButton>
+
+          <form className={classes.buttonGroup}>
+            <Button variant="contained" color="primary" onClick={checkAndClose}>
+              확인
+            </Button>
+            <Button variant="contained" color="secondary" onClick={handleClose}>
+              취소
+            </Button>
+          </form>
+        </div>
+      </Modal>
+    </>
+  );
+}

@@ -34,8 +34,11 @@ const useStyles = makeStyles({
 export default function TodoCard({ data, isMine, isVisible }) {
   const classes = useStyles();
   const [render, setRender] = useState(0);
-  const todo = data.todo.split(",");
-  const [checkState, setCheckState] = useState(data.ck.split(",").map((ck) => {
+  const todo = data.todo.split(",").slice(0,-1).map((text)=>{
+      return text;
+  });
+  console.log(todo);
+  const [checkState, setCheckState] = useState(data.ck.split(",").slice(0,-1).map((ck) => {
       return parseInt(ck);
   }))
   let settingButton = null;