회원가입 기능 구현

 import React, { useState } from 'react';
 import React, { useState } from 'react';
 import { Card, CardBody, CardTitle, CardText, CardImg, CardFooter, Button } from 'reactstrap';
 import { Card, CardBody, CardTitle, CardText, CardImg, CardFooter, Button } from 'reactstrap';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Container } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import Map from './Map';
 import Map from './Map';
 import './MealCard.css';
 import './MealCard.css';
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons"

@@ -8,7 +8,6 @@ import {
   Nav,
   Nav,
   NavItem,
   NavItem,
   NavLink,
   NavLink,
-  Col
 } from 'reactstrap';
 } from 'reactstrap';
 
 
 const NavBar = (props) => {
 const NavBar = (props) => {

-import React from 'react';
+import React, {useState} from 'react';
 import { Button, Form, FormGroup, Label, Input} from 'reactstrap';
 import { Button, Form, FormGroup, Label, Input} from 'reactstrap';
 
 
-import {FacebookLoginButton} from 'react-social-login-buttons';
 
 
 const SigninPage = (props) => {
 const SigninPage = (props) => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordCheck, setPasswordCheck] = useState('');
+
+    const onSubmit = (e) => {
+        e.preventDefault();
+
+        // 비밀번호가 6자이상인지 검사
+        if(password.length < 6 || passwordCheck.length < 6) {
+            return alert('비밀번호는 6자이상이어야 합니다.')
+        }
+        
+        // 비밀번호와 비밀번호 체크가 다를 경우를 검사
+        if(password !== passwordCheck){
+            return alert('비밀번호가 일치하지 않습니다.');
+        }
+        
+        const signupInfo = {
+            "username": username,
+            "password": password
+          };
+
+          const signup_info = {
+            method: "POST",
+            body: JSON.stringify(signupInfo),
+            headers: {
+              "Content-Type": "application/json"
+            }
+          };
+
+        if( username && password ) {
+            fetch("http://localhost:3000/api/signup", signup_info)
+            .then(response => response.json())
+            .then(json => {
+                if(json.code === 200) {
+                    alert('회원가입에 성공했습니다.');
+                    props.history.push('/signin');
+                }
+                else if(json.code === 400) {
+                    alert('회원가입에 실패했습니다.');
+                }
+            })
+        }
+    };
+
+    const onChangeUsername = (e) => {
+        setUsername(e.target.value);
+    };
+
+    const onChangePassword = (e) => {
+        setPassword(e.target.value);
+    };
+
+    const onChangePasswordCheck = (e) => {
+        setPasswordCheck(e.target.value);
+    };
+
     return (
     return (
         <>
         <>
-            <Form style={{
+            <Form onSubmit={onSubmit} 
+            style={{
                 width:'100%',
                 width:'100%',
                 maxWidth:'330px',
                 maxWidth:'330px',
                 padding:'15px',
                 padding:'15px',
@@ -21,18 +78,18 @@ const SigninPage = (props) => {
                 <h2 className="text-center"><br/>Sign Up</h2>
                 <h2 className="text-center"><br/>Sign Up</h2>
                 <FormGroup>
                 <FormGroup>
                     <Label>Username</Label>
                     <Label>Username</Label>
-                    <Input  required="required" type="name" placeholder="Enter your name"></Input>
+                    <Input  required="required" value={username} onChange={onChangeUsername} name="username" type="name" placeholder="Enter your name"></Input>
                 </FormGroup>
                 </FormGroup>
                 <FormGroup>
                 <FormGroup>
                     <Label>Password</Label>
                     <Label>Password</Label>
-                    <Input required="required" type="password" placeholder="Enter your password"></Input>
+                    <Input required="required" type="password" value={password} onChange={onChangePassword} name="password" placeholder="Enter your password (length >= 6)"></Input>
                 </FormGroup>
                 </FormGroup>
                 <FormGroup>
                 <FormGroup>
                     <Label>Confirm Password</Label>
                     <Label>Confirm Password</Label>
-                    <Input required="required" type="password" placeholder="Enter your password again"></Input>
+                    <Input required="required" type="password" value={passwordCheck} onChange={onChangePasswordCheck} name="confirm_password" placeholder="Enter your password again"></Input>
                 </FormGroup>
                 </FormGroup>
                 <FormGroup>
                 <FormGroup>
-                    <Button className="btn-lg btn-dark btn-block">Sign up</Button>
+                    <Button type="submit" className="btn-lg btn-dark btn-block">Sign up</Button>
                 </FormGroup>
                 </FormGroup>
                 
                 
                 <div className="text-center mt-3">
                 <div className="text-center mt-3">

@@ -31,11 +31,33 @@ app.get('/api/hello', (req, res) => {
     res.send('Hello skrrrr!');
     res.send('Hello skrrrr!');
 });
 });
 
 
-
+// datas 전달
 app.get('/api/datas', (req, res) => {
 app.get('/api/datas', (req, res) => {
     iconv.extendNodeEncodings();
     iconv.extendNodeEncodings();
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Origin", "*");
     res.send(iconv.decode(dataBuffer, 'EUC-KR').toString());
     res.send(iconv.decode(dataBuffer, 'EUC-KR').toString());
 })
 })
 
 
+// signup
+app.post('/api/signup', (req, res) => {
+    let sql = 'INSERT INTO USER (name, pw) VALUES(?, ?)';
+    const params = [req.body.username, req.body.password];
+    connection.query(sql, params, (err, rows, fields) => {
+        if(err){ 
+            console.log(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}`));
\ No newline at end of file