Api test

@@ -32,5 +32,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:5000/"
 }

-import React from "react";
+import React, { useState, useEffect } from "react";
 import NavBar from "./components/NavBar.js";
 import BodyLayout from "./components/BodyLayout.js";
 

-import React from "react";
+import React, { useState, useEffect } from "react";
+
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import Grid from "@material-ui/core/Grid";
@@ -6,14 +7,6 @@ import Icon from "@material-ui/core/Icon";
 
 import TodoCard from "./TodoCard.js";
 
-const data = {
-  date: "2020-99-99",
-  name: "daehwi",
-  isPublic: true,
-  title: "열글자까지가능합니다.",
-  todo: ["응가하기", "똥싸기", "변누기"],
-};
-
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
@@ -27,19 +20,42 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function CenteredGrid() {
+const callApi = async () => {
+  const response = await fetch("/api/cards");
+  const body = await response.json();
+  return body;
+};
+
+export default function BodyLayout() {
   const classes = useStyles();
+  const [data, setData] = useState([]);
 
-  return (
-    <Container className={classes.root} maxwidth="sm">
-      <Grid className={classes.item} container spacing={3}>
-        <Grid item xs="6" sm="6" md="3">
-          <TodoCard data={data} />
-        </Grid>
-        <Grid item xs="6" sm="6" md="3" alignItems="center">
-          <Icon style={{ fontSize: 60 }}>add_circle</Icon>
+  useEffect(() => {
+    callApi()
+      .then((res) => setData(res))
+      .catch((err) => console.log(err));
+  });
+
+  if (!data) {
+    return <p>ㄱㄷㄱㄷ</p>;
+  } else {
+    console.log(123);
+    console.log(data);
+    return (
+      <Container className={classes.root} maxwidth="sm">
+        <Grid className={classes.item} container spacing={3}>
+          {data.map((data) => {
+            return (
+              <Grid item xs="6" sm="6" md="3">
+                <TodoCard data={data} />
+              </Grid>
+            );
+          })}
+          <Grid item xs="6" sm="6" md="3">
+            <Icon style={{ fontSize: 60 }}>add_circle</Icon>
+          </Grid>
         </Grid>
-      </Grid>
-    </Container>
-  );
+      </Container>
+    );
+  }
 }

@@ -37,6 +37,7 @@ const useStyles = makeStyles({
 export default function TodoCard(props) {
   const classes = useStyles();
   const data = props.data;
+  console.log(data);
   return (
     <Card className={classes.root}>
       <CardContent>

@@ -2,9 +2,4 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+ReactDOM.render(<App />, document.getElementById("root"));

@@ -12,6 +12,5 @@
   },
   "devDependencies": {
     "concurrently": "^4.0.1"
-  },
-  "proxy": "http://localhost:5000/"
+  }
 }

-const express = require('express');
-const bodyParser = require('body-parser');
+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.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: "성훈",
+      isPublic: true,
+      title: "열글자까지가능할걸요.",
+      todo: ["응가하면서폰보기", "똥싸기", "변누기"],
+    },
+  ]);
 });
 
-app.listen(port, () => console.log(`Listening on port ${port}`));
\ No newline at end of file
+app.listen(port, () => console.log(`Listening on port ${port}`));