Express

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
\ No newline at end of file

+{
+  "name": "do-gether",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.10.1",
+    "@material-ui/icons": "^4.9.1",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

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

@@ -27,7 +27,7 @@ export default function ButtonAppBar() {
 
   return (
     <div className={classes.root}>
-      <AppBar className={classes.bar} position="static">
+      <AppBar className={classes.bar} position="fixed">
         <Toolbar>
           <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
             <MenuIcon />

@@ -2,58 +2,53 @@ import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
+import Icon from "@material-ui/core/Icon";
 
 const useStyles = makeStyles({
-  root: {
+  root: {},
+  date: {
+    fontSize: 14,
+    float: "left",
+  },
+  icon: {
+    marginRight: "1%",
+    float: "right",
+    color: "black",
   },
   title: {
-    fontSize: 14,
+    clear: "both",
   },
   pos: {
     marginBottom: 12,
   },
 });
 
-export default function SimpleCard() {
+export default function TodoCard(props) {
   const classes = useStyles();
 
   return (
     <Card className={classes.root}>
       <CardContent>
-        <Typography
-          className={classes.title}
-          color="textSecondary"
-          gutterBottom
-        >
-          2020-03-26
+        <Typography className={classes.date} color="textSecondary" gutterBottom>
+          {props.data.date}
         </Typography>
-        <Typography variant="h5" component="h2">
-          Todo Main
+        <Icon className={classes.icon} color="primary">
+          settings
+        </Icon>
+        <Typography className={classes.title} variant="h5" component="h2">
+          {props.data.title}
         </Typography>
-        <div>
-          <FormControlLabel
-            control={<Checkbox name="checkedC" />}
-            label="똥싸기"
-          />
-        </div>
-        <div>
-          <FormControlLabel
-            control={<Checkbox name="checkedC" />}
-            label="똥싸기"
-          />
-        </div>
-        <div>
-          <FormControlLabel
-            control={<Checkbox name="checkedC" />}
-            label="똥싸기"
-          />
-        </div>
-        <Button size="small">Learn More</Button>
+        {props.data.todo.map((todo) => {
+          return (
+            <div>
+              <FormControlLabel control={<Checkbox />} label={todo} />
+            </div>
+          );
+        })}
       </CardContent>
-      </Card>
+    </Card>
   );
 }

 {
   "name": "do-gether",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.10.1",
-    "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
-  },
+  "version": "1.0.0",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "client": "cd client && yarn start",
+    "server": "nodemon server.js",
+    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
+  },
+  "dependencies": {
+    "body-parser": "^1.18.3",
+    "express": "^4.16.4"
   },
-  "eslintConfig": {
-    "extends": "react-app"
+  "devDependencies": {
+    "concurrently": "^4.0.1"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "proxy": "http://localhost:5000/"
 }

+const express = require('express');
+const bodyParser = require('body-parser');
+const app = express();
+const port = process.env.PORT || 5000;
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true }));
+
+app.get('/api/hello', (req, res) => {
+res.send({ message: 'Hello Express!' });
+});
+
+app.listen(port, () => console.log(`Listening on port ${port}`));
\ No newline at end of file