Adjusted the Card

 import React from "react";
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
 import Container from "@material-ui/core/Container";
 import Container from "@material-ui/core/Container";
-import Icon from '@material-ui/core/Icon';
+import Grid from "@material-ui/core/Grid";
+import Icon from "@material-ui/core/Icon";
 
 
 import TodoCard from "./TodoCard.js";
 import TodoCard from "./TodoCard.js";
 
 
-const data={
-  date:"2020-99-99",
-  title:"머휘의 TODO LSIT",
-  todo:["응가하기","똥싸기","변누기"]
-}
+const data = {
+  date: "2020-99-99",
+  name: "daehwi",
+  isPublic: true,
+  title: "열글자까지가능합니다.",
+  todo: ["응가하기", "똥싸기", "변누기"],
+};
 
 
 const useStyles = makeStyles((theme) => ({
 const useStyles = makeStyles((theme) => ({
   root: {
   root: {
     flexGrow: 1,
     flexGrow: 1,
-    backgroundColor:"#e9e9e9",
-    paddingTop:"4rem",
-    marginTop:"0"
+    backgroundColor: "#e9e9e9",
+    paddingTop: "4rem",
+    marginTop: "0",
   },
   },
   item: {
   item: {
     marginLeft: "auto",
     marginLeft: "auto",
@@ -32,7 +34,7 @@ export default function CenteredGrid() {
     <Container className={classes.root} maxwidth="sm">
     <Container className={classes.root} maxwidth="sm">
       <Grid className={classes.item} container spacing={3}>
       <Grid className={classes.item} container spacing={3}>
         <Grid item xs="6" sm="6" md="3">
         <Grid item xs="6" sm="6" md="3">
-          <TodoCard data={data}/>
+          <TodoCard data={data} />
         </Grid>
         </Grid>
         <Grid item xs="6" sm="6" md="3" alignItems="center">
         <Grid item xs="6" sm="6" md="3" alignItems="center">
           <Icon style={{ fontSize: 60 }}>add_circle</Icon>
           <Icon style={{ fontSize: 60 }}>add_circle</Icon>

@@ -14,38 +14,54 @@ const useStyles = makeStyles({
     float: "left",
     float: "left",
   },
   },
   icon: {
   icon: {
-    marginRight: "1%",
+    fontSize: 18,
+    marginTop: "auto",
     float: "right",
     float: "right",
     color: "black",
     color: "black",
   },
   },
   title: {
   title: {
     clear: "both",
     clear: "both",
+    float: "left",
+  },
+  checkBox: {
+    clear: "both",
+    float: "left",
   },
   },
-  pos: {
-    marginBottom: 12,
+
+  percent: {
+    color: "#00BB00",
+    float: "right",
   },
   },
 });
 });
 
 
 export default function TodoCard(props) {
 export default function TodoCard(props) {
   const classes = useStyles();
   const classes = useStyles();
-
+  const data = props.data;
   return (
   return (
     <Card className={classes.root}>
     <Card className={classes.root}>
       <CardContent>
       <CardContent>
         <Typography className={classes.date} color="textSecondary" gutterBottom>
         <Typography className={classes.date} color="textSecondary" gutterBottom>
-          {props.data.date}
+          {data.date} &middot; {data.name} &middot; {data.isPublic}
         </Typography>
         </Typography>
+
         <Icon className={classes.icon} color="primary">
         <Icon className={classes.icon} color="primary">
           settings
           settings
         </Icon>
         </Icon>
-        <Typography className={classes.title} variant="h5" component="h2">
-          {props.data.title}
+
+        <Typography className={classes.title} variant="h6">
+          {data.title}
         </Typography>
         </Typography>
-        {props.data.todo.map((todo) => {
+        <Typography className={classes.percent} variant="h6">
+          99%
+        </Typography>
+
+        {data.todo.map((todo) => {
           return (
           return (
-            <div>
-              <FormControlLabel control={<Checkbox />} label={todo} />
-            </div>
+            <FormControlLabel
+              className={classes.checkBox}
+              control={<Checkbox />}
+              label={todo}
+            />
           );
           );
         })}
         })}
       </CardContent>
       </CardContent>

 import React from "react";
 import React from "react";
 import ReactDOM from "react-dom";
 import ReactDOM from "react-dom";
-import "./index.css";
 import App from "./App";
 import App from "./App";
 
 
 ReactDOM.render(
 ReactDOM.render(