회원가입 구현

@@ -75,7 +75,7 @@ export default function AddButton({ handleClose }) {
   const [title, setTitle] = useState("");
   const [title, setTitle] = useState("");
   const [date, setDate] = useState(new Date());
   const [date, setDate] = useState(new Date());
   const [isPublic, setIsPublic] = useState(1);
   const [isPublic, setIsPublic] = useState(1);
-  const [textList, setTextList] = useState(new Array());
+  const [textList, setTextList] = useState([]);
   const [textFieldBody, setTextFieldBody] = useState([
   const [textFieldBody, setTextFieldBody] = useState([
     <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />,
     <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />,
   ]);
   ]);

@@ -49,8 +49,8 @@ const useStyles = makeStyles((theme) => ({
     width: "70%",
     width: "70%",
   },
   },
   signup: {
   signup: {
-    fontSize: 13,
     top: "7.9rem",
     top: "7.9rem",
+    fontSize: 13,
   },
   },
 }));
 }));
 
 

@@ -32,54 +32,96 @@ const useStyles = makeStyles((theme) => ({
   },
   },
   title: {
   title: {
     width: "100%",
     width: "100%",
-    marginTop: "5rem",
+    marginTop: "3.5rem",
     fontSize: 40,
     fontSize: 40,
     textAlign: "center",
     textAlign: "center",
   },
   },
   idInput: {
   idInput: {
-    top: "3.5rem",
+    top: "2rem",
+    width: "70%",
+  },
+  nameItput: {
+    top: "3rem",
     width: "70%",
     width: "70%",
   },
   },
   pwInput: {
   pwInput: {
-    top: "5.5rem",
+    top: "4rem",
+    width: "70%",
+  },
+  pwCheck: {
+    top: "5rem",
     width: "70%",
     width: "70%",
   },
   },
-  signin: {
-    top: "7.4rem",
+  submit: {
+    top: "6.5rem",
     width: "70%",
     width: "70%",
   },
   },
-  signup: {
+  login: {
+    top: "7rem",
     fontSize: 13,
     fontSize: 13,
-    top: "7.9rem",
   },
   },
 }));
 }));
 
 
-export default function LandingPage() {
+export default function LandingPage(props) {
   const classes = useStyles();
   const classes = useStyles();
 
 
   const [userID, setUserID] = useState();
   const [userID, setUserID] = useState();
-  const [NickName, setNickName] = useState();
+  const [nickName, setNickName] = useState();
   const [userPW, setUserPW] = useState();
   const [userPW, setUserPW] = useState();
   const [checkPW, setCheckPW] = useState();
   const [checkPW, setCheckPW] = useState();
+  const [matchPW, setMatchPW] = useState(false);
+
+  const signUpApi = (data) => {
+    return fetch("/api/signup", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    }).then((response) => response.json());
+  };
+
+  const handleSubmit = () => {
+    if (!userID || !nickName || !userPW || !checkPW) {
+      alert("All blanks must be filled. Try agian.");
+    }else if (matchPW === true){
+        alert("Passwords do not match.");
+    } 
+    else {
+        signUpApi({
+            userID: userID,
+            userPW: userPW,
+            userName: nickName,
+          });
+      alert("Successfully registered!");
+      props.history.push("/login");
+    }
+  };
 
 
   return (
   return (
     <div className={classes.root}>
     <div className={classes.root}>
       <Paper className={classes.paper} elevation={3}>
       <Paper className={classes.paper} elevation={3}>
         <Grid container className={classes.grid}>
         <Grid container className={classes.grid}>
-          <div className={classes.title}>SIGN IN</div>
+          <div className={classes.title}>SIGN UP</div>
           <TextField
           <TextField
             required
             required
             className={classes.idInput}
             className={classes.idInput}
             label="ID"
             label="ID"
             variant="outlined"
             variant="outlined"
             size="small"
             size="small"
+            onChange={(e) => {
+              setUserID(e.target.value);
+            }}
           />
           />
           <TextField
           <TextField
             required
             required
-            className={classes.idInput}
-            label="ID"
+            className={classes.nameItput}
+            label="NickName"
             variant="outlined"
             variant="outlined"
             size="small"
             size="small"
+            onChange={(e) => {
+              setNickName(e.target.value);
+            }}
           />
           />
           <TextField
           <TextField
             required
             required
@@ -89,20 +131,42 @@ export default function LandingPage() {
             autoComplete="current-password"
             autoComplete="current-password"
             variant="outlined"
             variant="outlined"
             size="small"
             size="small"
+            onChange={(e) => {
+              setUserPW(e.target.value);
+            }}
           />
           />
           <TextField
           <TextField
             required
             required
-            className={classes.pwInput}
-            label="Password"
+            error={matchPW}
+            className={classes.pwCheck}
+            label="Re-enter Password"
             type="password"
             type="password"
             autoComplete="current-password"
             autoComplete="current-password"
             variant="outlined"
             variant="outlined"
             size="small"
             size="small"
+            onChange={(e) => {
+              const value = e.target.value;
+              setCheckPW(value);
+              if (value !== userPW) {
+                setMatchPW(true);
+              } else {
+                setMatchPW(false);
+              }
+            }}
           />
           />
-          <Button className={classes.signin} variant="outlined" size="small">
-            Login
+          <Button
+            className={classes.submit}
+            variant="outlined"
+            size="small"
+            onClick={handleSubmit}
+          >
+            Submit
           </Button>
           </Button>
-          <div className={classes.signup}>Click here to SIGN UP</div>
+          <div className={classes.login}>
+            <Link to="/login" style={{ color: "gray", textDecoration: "none" }}>
+              Click here to return to the login page
+            </Link>
+          </div>
         </Grid>
         </Grid>
       </Paper>
       </Paper>
     </div>
     </div>

@@ -7,6 +7,7 @@
     "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
     "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
   },
   },
   "dependencies": {
   "dependencies": {
+    "bcrypt": "^5.0.0",
     "body-parser": "^1.18.3",
     "body-parser": "^1.18.3",
     "express": "^4.16.4",
     "express": "^4.16.4",
     "mysql": "^2.18.1"
     "mysql": "^2.18.1"

@@ -5,6 +5,9 @@ const app = express();
 
 
 const port = process.env.PORT || 5000;
 const port = process.env.PORT || 5000;
 
 
+const bcrypt = require('bcrypt');
+const saltRounds = 10;
+
 const data = fs.readFileSync("./database.json");
 const data = fs.readFileSync("./database.json");
 const conf = JSON.parse(data);
 const conf = JSON.parse(data);
 const mysql = require("mysql");
 const mysql = require("mysql");
@@ -47,4 +50,25 @@ app.post("/api/addcard", (req, res) => {
   });
   });
 });
 });
 
 
+app.post("/api/signup", (req, res) => {
+  const data = req.body;
+  
+  console.log(data);
+  const sql = "INSERT INTO USERINFO(userID,userPW,userName) VALUES(?,?,?);";
+  const params =[data.userID,data.userPW,data.userName];
+  connection.query(sql, params, (err, rows, fields) => {
+    if (err) {
+      res.send({
+        code: 400,
+        message: "error",
+      });
+    } else {
+      res.send({
+        code: 200,
+        message: "success",
+      });
+    }
+  });
+});
+
 app.listen(port, () => console.log(`Listening on port ${port}`));
 app.listen(port, () => console.log(`Listening on port ${port}`));