아이콘 버튼 추가

@@ -6,13 +6,14 @@ import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import Typography from "@material-ui/core/Typography";
 
 
 import Icon from "@material-ui/core/Icon";
 import Icon from "@material-ui/core/Icon";
+import IconButton from "@material-ui/core/IconButton";
 // import CircularProgress from "@material-ui/core/CircularProgress";
 // import CircularProgress from "@material-ui/core/CircularProgress";
 
 
 import TodoCard from "./TodoCard.js";
 import TodoCard from "./TodoCard.js";
 
 
 const useStyles = makeStyles((theme) => ({
 const useStyles = makeStyles((theme) => ({
   root: {
   root: {
-    minHeight: "100vh",
+    minHeight: "100%",
     backgroundColor: "rgba(0,0,0,0.5)",
     backgroundColor: "rgba(0,0,0,0.5)",
   },
   },
   container: {
   container: {
@@ -28,6 +29,17 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: "1rem",
     paddingTop: "1rem",
     color: "white",
     color: "white",
   },
   },
+  iconButton: {
+    margin: "0",
+    padding: "0",
+    position: "fixed",
+    bottom: "3rem",
+    right: "3rem",
+  },
+  icon: {
+    fontSize: 70,
+    color: "white",
+  },
 }));
 }));
 
 
 export default function BodyLayout() {
 export default function BodyLayout() {
@@ -64,9 +76,8 @@ export default function BodyLayout() {
               let showDate = null;
               let showDate = null;
               const isMine = card.name === "aa"; ////data.name과 session name 비교 로그인 구현하고 수정
               const isMine = card.name === "aa"; ////data.name과 session name 비교 로그인 구현하고 수정
 
 
-              
               if (idx === 0 || card.date !== data[idx - 1].date) {
               if (idx === 0 || card.date !== data[idx - 1].date) {
-                showDate=(
+                showDate = (
                   <Typography variant="h4" className={classes.date}>
                   <Typography variant="h4" className={classes.date}>
                     {card.date}
                     {card.date}
                   </Typography>
                   </Typography>
@@ -92,7 +103,7 @@ export default function BodyLayout() {
                   </>
                   </>
                 );
                 );
               } else {
               } else {
-                return <>{ showDate }</>;
+                return <>{showDate}</>;
               }
               }
             })}
             })}
 
 
@@ -100,6 +111,10 @@ export default function BodyLayout() {
               <Icon style={{ fontSize: 60 }}>add_circle</Icon>
               <Icon style={{ fontSize: 60 }}>add_circle</Icon>
             </Grid> */}
             </Grid> */}
           </Grid>
           </Grid>
+
+          <IconButton className={classes.iconButton}>
+            <Icon className={classes.icon}>add_circle</Icon>
+          </IconButton>
         </Container>
         </Container>
       </div>
       </div>
     );
     );

@@ -6,6 +6,7 @@ import Typography from "@material-ui/core/Typography";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import Checkbox from "@material-ui/core/Checkbox";
 import Icon from "@material-ui/core/Icon";
 import Icon from "@material-ui/core/Icon";
+import IconButton from "@material-ui/core/IconButton";
 
 
 const useStyles = makeStyles({
 const useStyles = makeStyles({
   root: {
   root: {
@@ -15,9 +16,13 @@ const useStyles = makeStyles({
     fontSize: 14,
     fontSize: 14,
     float: "left",
     float: "left",
   },
   },
-  icon: {
-    fontSize: 18,
+  iconButton: {
     float: "right",
     float: "right",
+    margin: "0",
+    padding: "0",
+  },
+  icon: {
+    fontSize: 16,
     color: "black",
     color: "black",
   },
   },
   title: {
   title: {
@@ -46,9 +51,11 @@ export default function TodoCard({ data, isMine, isVisible }) {
 
 
   if (isMine) {
   if (isMine) {
     settingButton = (
     settingButton = (
-      <Icon className={classes.icon} color="primary">
+      <IconButton className={classes.iconButton}>
+        <Icon className={classes.icon} color="primary" on>
           settings
           settings
         </Icon>
         </Icon>
+      </IconButton>
     );
     );
   }
   }
   return (
   return (