DB 재연결 및 구조수정

@@ -10,6 +10,7 @@ import TodoCard from "./TodoCard.js";
 
 
 const useStyles = makeStyles((theme) => ({
 const useStyles = makeStyles((theme) => ({
   root: {
   root: {
+    minHeight:"100vh",
     backgroundColor: "rgba(1,0,0,0.5)"
     backgroundColor: "rgba(1,0,0,0.5)"
   },
   },
   container: {
   container: {
@@ -18,12 +19,12 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: "1rem",
     paddingBottom: "1rem",
     marginLeft: "auto",
     marginLeft: "auto",
     marginRight: "auto",
     marginRight: "auto",
-  },
-  item: {},
+  }
 }));
 }));
 
 
 export default function BodyLayout() {
 export default function BodyLayout() {
   const classes = useStyles();
   const classes = useStyles();
+
   const [data, setData] = useState([]);
   const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState(1);
   const [isLoading, setIsLoading] = useState(1);
 
 
@@ -56,7 +57,7 @@ export default function BodyLayout() {
             {data.map((data) => {
             {data.map((data) => {
               return (
               return (
                 <Grid item xs={6} sm={6} md={3}>
                 <Grid item xs={6} sm={6} md={3}>
-                  <TodoCard data={data} id={data.date}/>
+                  <TodoCard id={data.id} data={data} />
                 </Grid>
                 </Grid>
               );
               );
             })}
             })}

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+
+function rand() {
+  return Math.round(Math.random() * 20) - 10;
+}
+
+function getModalStyle() {
+  const top = 50 + rand();
+  const left = 50 + rand();
+
+  return {
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`,
+  };
+}
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    position: 'absolute',
+    width: 400,
+    backgroundColor: theme.palette.background.paper,
+    border: '2px solid #000',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+}));
+
+export default function SimpleModal() {
+  const classes = useStyles();
+  // getModalStyle is not a pure function, we roll the style only on the first render
+  const [modalStyle] = React.useState(getModalStyle);
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const body = (
+    <div style={modalStyle} className={classes.paper}>
+      <h2 id="simple-modal-title">Text in a modal</h2>
+      <p id="simple-modal-description">
+        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+      </p>
+      <SimpleModal />
+    </div>
+  );
+
+  return (
+    <div>
+      <button type="button" onClick={handleOpen}>
+        Open Modal
+      </button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+      >
+        {body}
+      </Modal>
+    </div>
+  );
+}

@@ -9,7 +9,7 @@ import Icon from "@material-ui/core/Icon";
 
 
 const useStyles = makeStyles({
 const useStyles = makeStyles({
   root: {
   root: {
-    margin:10
+    margin: 10,
   },
   },
   date: {
   date: {
     fontSize: 14,
     fontSize: 14,
@@ -38,6 +38,12 @@ const useStyles = makeStyles({
 export default function TodoCard(props) {
 export default function TodoCard(props) {
   const classes = useStyles();
   const classes = useStyles();
   const data = props.data;
   const data = props.data;
+  const todo = data.todo.split(",");
+  const isTrue = "1";
+  const check = data.ck.split(",").map((ck) => {
+    return isTrue == ck;
+  });
+
   return (
   return (
     <Card className={classes.root}>
     <Card className={classes.root}>
       <CardContent>
       <CardContent>
@@ -52,16 +58,18 @@ export default function TodoCard(props) {
         <Typography className={classes.title} variant="h6">
         <Typography className={classes.title} variant="h6">
           {data.title}
           {data.title}
         </Typography>
         </Typography>
-        <Typography className={classes.percent} variant="h6">
+
+        {/* <Typography className={classes.percent} variant="h6">
           99%
           99%
-        </Typography>
+        </Typography> */}
 
 
-        {data.todo.map((todo) => {
+        {todo.map((item, idx) => {
           return (
           return (
             <FormControlLabel
             <FormControlLabel
               className={classes.checkBox}
               className={classes.checkBox}
               control={<Checkbox />}
               control={<Checkbox />}
-              label={todo}
+              checked={check[idx]}
+              label={item}
             />
             />
           );
           );
         })}
         })}

 import React from "react";
 import React from "react";
-import NavBar from "../components/NavBar.js";
-import BodyLayout from "../components/BodyLayout.js";
 
 
 function App() {
 function App() {
   return (
   return (

+const fs = require("fs");
 const express = require("express");
 const express = require("express");
 const bodyParser = require("body-parser");
 const bodyParser = require("body-parser");
 const app = express();
 const app = express();
-//const mysql = require('mysql');
 
 
 const port = process.env.PORT || 5000;
 const port = process.env.PORT || 5000;
 
 
-/*
 const data = fs.readFileSync('./database.json');
 const data = fs.readFileSync('./database.json');
 const conf = JSON.parse(data);
 const conf = JSON.parse(data);
+const mysql = require('mysql');
 
 
 const connection = mysql.createConnection({
 const connection = mysql.createConnection({
     host: conf.host,
     host: conf.host,
@@ -18,42 +18,17 @@ const connection = mysql.createConnection({
 });
 });
 
 
 connection.connect();
 connection.connect();
-*/
 
 
 app.use(bodyParser.json());
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.urlencoded({ extended: true }));
 
 
 app.get("/api/cards", (req, res) => {
 app.get("/api/cards", (req, res) => {
-  res.send([
-    {
-      date: "2020-99-99",
-      name: "daehwi",
-      isPublic: true,
-      title: "열글자까지가능합니다.",
-      todo: ["휴대폰하기", "리액트하기", "옾소과제"],
-    },
-    {
-      date: "2020-99-99",
-      name: "fuck",
-      isPublic: true,
-      title: "열글자까지가능합니다.",
-      todo: ["헬스", "낮잠", "확랜과제"],
-    },
-    {
-      date: "2020-99-99",
-      name: "talk",
-      isPublic: true,
-      title: "열글자까지가능할걸요.",
-      todo: ["카톡", "라인", "페메","DM"],
-    },
-    {
-      date: "2020-99-99",
-      name: "성훈정",
-      isPublic: true,
-      title: "하나둘셋넷다섯여섯일.",
-      todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
+  connection.query(
+    'SELECT * FROM CARDINFO',
+    (err,rows,fields)=>{
+      res.send(rows);
     }
     }
-  ]);
+  )
 });
 });
 
 
 app.listen(port, () => console.log(`Listening on port ${port}`));
 app.listen(port, () => console.log(`Listening on port ${port}`));