Connect Error 해결

@@ -45,7 +45,7 @@ Then you can simply:
 Reference from [`YARN`](https://yarnpkg.com/en/docs/install)
 <br>
 
-### Third, add "database.json"
+#### Third, add "database.json"
 you should add `database.json` in the following format.
 ```sh
 {

@@ -67,7 +67,7 @@ export default function BodyLayout() {
   } else {
     return (
       <div className={classes.root}>
-        <Container className={classes.container} maxwidth="md">
+        <Container key="container" className={classes.container} maxwidth="md">
           <Grid className={classes.item} container>
             {data.map((card, idx) => {
               let isVisible = card.isPublic;
@@ -75,7 +75,11 @@ export default function BodyLayout() {
               const isMine = card.name === localStorage["userName"]; //remove item
               if (idx === 0 || card.date !== data[idx - 1].date) {
                 showDate = (
-                  <Typography key={idx} variant="h4" className={classes.date}>
+                  <Typography
+                    key={card.date}
+                    variant="h4"
+                    className={classes.date}
+                  >
                     {card.date}
                   </Typography>
                 );
@@ -89,9 +93,9 @@ export default function BodyLayout() {
                 return (
                   <>
                     {showDate}
-                    <Grid item xs={12} sm={6} md={3} key={idx+1}>
+                    <Grid item xs={12} sm={6} md={3} key={idx}>
                       <TodoCard
-                        key={idx}
+                        key={card.title}
                         data={card}
                         isVisible={isVisible}
                         isMine={isMine}
@@ -104,7 +108,7 @@ export default function BodyLayout() {
               }
             })}
           </Grid>
-          <AddButton key="addBtn"></AddButton>
+          <AddButton></AddButton>
         </Container>
       </div>
     );

@@ -77,7 +77,7 @@ export default function AddButton({ handleClose }) {
   const [isPublic, setIsPublic] = useState(1);
   const [textList, setTextList] = useState([]);
   const [textFieldBody, setTextFieldBody] = useState([
-    <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />,
+    <TextField required key={0} label="To do 1" onChange={(e) => handleText(e, 0)} />,
   ]);
 
   const addApi = (data) => {
@@ -139,6 +139,7 @@ export default function AddButton({ handleClose }) {
         ...textFieldBody,
         <TextField
           required
+          key={idx}
           label={"To do " + (idx + 1)}
           onChange={(e) => handleText(e, idx)}
         />,

@@ -81,6 +81,7 @@ export default function AddButton({ data, handleClose }) {
       return (
         <TextField
           required
+          key={idx}
           fullWidth={true}
           defaultValue={textList[idx]}
           label={"To do " + (idx + 1)}

@@ -92,7 +92,7 @@ export default function LandingPage(props) {
   };
 
   const checkEnter = ()=>{
-    if(window.event.keyCode == 13){
+    if(window.event.keyCode === 13){
       handleLogin();
     }
   }

@@ -105,6 +105,12 @@ export default function LandingPage(props) {
     }
   };
 
+  const checkEnter = ()=>{
+    if(window.event.keyCode === 13){
+      handleSubmit();
+    }
+  }
+
   return (
     <div className={classes.root}>
       <Paper className={classes.paper} elevation={3}>
@@ -119,6 +125,7 @@ export default function LandingPage(props) {
             onChange={(e) => {
               setUserID(e.target.value);
             }}
+            onKeyUp={checkEnter}
           />
           <TextField
             required
@@ -129,6 +136,7 @@ export default function LandingPage(props) {
             onChange={(e) => {
               setNickName(e.target.value);
             }}
+            onKeyUp={checkEnter}
           />
           <TextField
             required
@@ -141,6 +149,7 @@ export default function LandingPage(props) {
             onChange={(e) => {
               setUserPW(e.target.value);
             }}
+            onKeyUp={checkEnter}
           />
           <TextField
             required
@@ -160,6 +169,7 @@ export default function LandingPage(props) {
                 setMatchPW(false);
               }
             }}
+            onKeyUp={checkEnter}
           />
           <Button
             className={classes.submit}

@@ -20,7 +20,26 @@ const connection = mysql.createConnection({
   port: conf.port,
   database: conf.database,
 });
-connection.connect();
+// connection.connect();
+function handleDisconnect() {
+  connection.connect(function (err) {
+    if (err) {
+      console.log("error when connecting to db:", err);
+      setTimeout(handleDisconnect, 4000);
+    }
+  });
+
+  connection.on("error", function (err) {
+    console.log("db error", err);
+    if (err.code === "PROTOCOL_CONNECTION_LOST") {
+      return handleDisconnect();
+    } else {
+      throw err;
+    }
+  });
+}
+
+handleDisconnect();
 
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
@@ -30,8 +49,8 @@ app.use(
     resave: false,
     saveUninitialized: true,
     cookie: {
-      maxAge: 1000 * 60 * 60 // 쿠키 유효기간 24시간
-    }
+      maxAge: 1000 * 60 * 60, // 쿠키 유효기간 24시간
+    },
   })
 );
 
@@ -119,7 +138,7 @@ app.post("/api/signup", async (req, res) => {
       if (err) {
         res.send({
           code: 400,
-          message: "error",
+          message: "Change ID or NickName",
         });
       } else {
         res.send({
@@ -173,28 +192,28 @@ app.post("/auth/login", (req, res) => {
   );
 });
 
-app.get("/auth/logout", async (req,res,next) => {
-  console.log(req.session.userName+ "is logout");
+app.get("/auth/logout", async (req, res, next) => {
+  console.log(req.session.userName + "is logout");
   req.session.destroy();
-  res.clearCookie('sid');
+  res.clearCookie("sid");
   res.redirect("/");
-})
+});
 
-app.get("/auth", (req,res) =>{
-  try{
-    if(req.session.userName){
+app.get("/auth", (req, res) => {
+  try {
+    if (req.session.userName) {
       res.send({
-        message: "Authenticated user"
-      })
-    }else{
-      console.log("Unauthorized access")
+        message: "Authenticated user",
+      });
+    } else {
+      console.log("Unauthorized access");
       res.send({
-        message: "Unauthenticated user"
-      })
+        message: "Unauthenticated user",
+      });
     }
-  }catch(e){
+  } catch (e) {
     console.log(e);
   }
-})
+});
 
 app.listen(port, () => console.log(`Listening on port ${port}`));