조건부 카드 렌더링 구현

@@ -22,6 +22,12 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: "auto",
     marginLeft: "auto",
     marginRight: "auto",
     marginRight: "auto",
   },
   },
+  date: {
+    width: "100%",
+    paddingLeft: "1rem",
+    paddingTop: "1rem",
+    color: "white",
+  },
 }));
 }));
 
 
 export default function BodyLayout() {
 export default function BodyLayout() {
@@ -40,6 +46,7 @@ export default function BodyLayout() {
     callApi()
     callApi()
       .then((res) => {
       .then((res) => {
         setData(res);
         setData(res);
+        console.log(res);
         setIsLoading(0);
         setIsLoading(0);
       })
       })
       .catch((err) => console.log(err));
       .catch((err) => console.log(err));
@@ -53,28 +60,45 @@ export default function BodyLayout() {
         <Container className={classes.container} maxwidth="md">
         <Container className={classes.container} maxwidth="md">
           <Grid className={classes.item} container>
           <Grid className={classes.item} container>
             {data.map((card, idx) => {
             {data.map((card, idx) => {
-              if (idx===0 || card.date !== data[idx - 1].date) {
+              let isVisible = card.isPublic;
+              let showDate = null;
+              const isMine = card.name === "aa"; ////data.name과 session name 비교 로그인 구현하고 수정
+
+              
+              if (idx === 0 || card.date !== data[idx - 1].date) {
+                showDate=(
+                  <Typography variant="h4" className={classes.date}>
+                    {card.date}
+                  </Typography>
+                );
+              }
+              
+              if (isMine) {
+                isVisible = 1;
+              }
+
+              if (isVisible === 1) {
                 return (
                 return (
                   <>
                   <>
-                  <Typography variant="h4" style={{width:"100%", color:"white"}}>{card.date}</Typography>
+                    {showDate}
                     <Grid item xs={6} sm={6} md={3}>
                     <Grid item xs={6} sm={6} md={3}>
-                      <TodoCard key={card.id} data={card} />
+                      <TodoCard
+                        key={card.id}
+                        data={card}
+                        isVisible={isVisible}
+                        isMine={isMine}
+                      />
                     </Grid>
                     </Grid>
                   </>
                   </>
                 );
                 );
               } else {
               } else {
-                return (
-                  <Grid item xs={6} sm={6} md={3}>
-                    <TodoCard key={card.id} data={card} />
-                  </Grid>
-                );
+                return <>{ showDate }</>;
               }
               }
             })}
             })}
 
 
             {/* <Grid item xs={6} sm={6} md={3}>
             {/* <Grid item xs={6} sm={6} md={3}>
               <Icon style={{ fontSize: 60 }}>add_circle</Icon>
               <Icon style={{ fontSize: 60 }}>add_circle</Icon>
             </Grid> */}
             </Grid> */}
-
           </Grid>
           </Grid>
         </Container>
         </Container>
       </div>
       </div>

@@ -35,15 +35,22 @@ const useStyles = makeStyles({
   },
   },
 });
 });
 
 
-export default function TodoCard(props) {
+export default function TodoCard({ data, isMine, isVisible }) {
   const classes = useStyles();
   const classes = useStyles();
-  const data = props.data;
   const todo = data.todo.split(",");
   const todo = data.todo.split(",");
-  const isTrue = "1";
   const check = data.ck.split(",").map((ck) => {
   const check = data.ck.split(",").map((ck) => {
-    return isTrue === ck;
+    return parseInt(ck);
   });
   });
 
 
+  let settingButton = null;
+
+  if (isMine) {
+    settingButton = (
+      <Icon className={classes.icon} color="primary">
+        settings
+      </Icon>
+    );
+  }
   return (
   return (
     <Card className={classes.root}>
     <Card className={classes.root}>
       <CardContent>
       <CardContent>
@@ -51,18 +58,14 @@ export default function TodoCard(props) {
           {data.date} &middot; {data.name}
           {data.date} &middot; {data.name}
         </Typography>
         </Typography>
 
 
-        <Icon className={classes.icon} color="primary">
-          settings
-        </Icon>
+        {settingButton}
 
 
         <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> */}
-
         {todo.map((item, idx) => {
         {todo.map((item, idx) => {
           return (
           return (
             <FormControlLabel
             <FormControlLabel