jwt 기반 로그인 기능 완성

 import React, { useState } from 'react';
 import { Button, Form, FormGroup, Label, Input} from 'reactstrap';
-import {FacebookLoginButton} from 'react-social-login-buttons';
-
-
+import { FacebookLoginButton } from 'react-social-login-buttons';
 
 const SigninPage = (props) => {
     
-//     const [userName, setUserName] = useState('');
-//     const [userPw, setuserPw] = useState('');
+    const [userName, setUserName] = useState('');
+    const [userPw, setUserPw] = useState('');
+    
+    const signinApi = (user) => {
+        return fetch('/api/signin', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(user)
+        }).then(response => response.json())
+    }
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!userName || !userPw) {
+        return;
+        }
+        try {
+            const response = await signinApi({
+                username: userName,
+                password: userPw
+            });
+
+            if (response.message === "Token issue") {
+                localStorage.setItem("user_token", JSON.stringify(response.token));
+                alert('Login success');
+                props.history.push('/');
+            } else if(response.message === "user does not exist"){
+                alert('User does not exist');
+                props.history.push('/signin');
+                setUserName('');
+                setUserPw('');
+            } else if(response.message === "invalid password")  {
+                alert('Invalid Password');
+                props.history.push('/signin');
+                setUserName('');
+                setUserPw('');
+            } else if(response.message === "server error") {
+                alert('Server Error');
+                props.history.push('/signin');
+                setUserName('');
+                setUserPw('');
+            }
+        } catch (err) {
+                alert('Signin Failed');
+                setUserName('');
+                setUserPw('');
+                props.history.push('/signin');
+            }
+        };
+
+        const onChangeUsername = (e) => {
+            setUserName(e.target.value);
+        };
+        
+        const onChangePassword = (e) => {
+            setUserPw(e.target.value);
+        };
     
-//     const signinApi = (user) => {
-//         return fetch('/api/signin', {
-//             method: 'POST',
-//             headers: {
-//                 'Content-Type': 'application/json'
-//             },
-//             body: JSON.stringify(user)
-//         }).then(response => response.json())
-//     }
 
-//     const handleSubmit = async (e) => {
-//         e.preventDefault();
-//         if (!userId || !userPw) {
-//         return;
-//         }
-//     try {
-//         const response = await loginApi({
-//             user_id: userId,
-//             user_pw: userPw
-//         });
 
-//         if (response.result === 'ok') {
-//             setToken();
-//         } else {
-//             throw new Error(response.error);
-//         }
-//     } catch (err) {
-//             alert('로그인에 실패했습니다.');
-//             setUserId('');
-//             setUserPw('');
-//             console.error('login error', err);
-//     }
-//     };
-// };
     return (
         <>
             <Form style={{
@@ -60,14 +83,14 @@ const SigninPage = (props) => {
                 <h2 className="text-center"><br/>Sign In</h2>
                 <FormGroup>
                     <Label>Username</Label>
-                    <Input required="required" type="name" placeholder="Enter your name"></Input>
+                    <Input required="required" value={userName} onChange={onChangeUsername} type="name" placeholder="Enter your name" ></Input>
                 </FormGroup>
                 <FormGroup>
                     <Label>Password</Label>
-                    <Input required="required" type="password" placeholder="Enter your password"></Input>
+                    <Input required="required" type="password" value={userPw} onChange={onChangePassword} placeholder="Enter your password"></Input>
                 </FormGroup>
                 <FormGroup>
-                    <Button className="btn-lg btn-dark btn-block">Sign in</Button>
+                    <Button type="submit" onClick={handleSubmit} className="btn-lg btn-dark btn-block">Sign in</Button>
                 </FormGroup>
                 <div className="text-center pt-3">
                 Or continue with your social account
@@ -80,6 +103,6 @@ const SigninPage = (props) => {
             
         </>
     );
-}
 
+};
 export default SigninPage;
\ No newline at end of file

@@ -77,85 +77,66 @@ app.post("/api/signup", (req, res) => {
 // jwt_secret_key.value
 // signin
 app.post("/api/signin", (req, res) => {
-  // ????
-//   res.send('aa');
+  
   const name = req.body.username;
   let sql = `SELECT name, pw FROM USER WHERE name='${req.body.username}';`;
-  
-  connection.query(sql, (err, rows, fields) => {
-    
-        if (!rows) {
-        res.send({
-            code: 400,
-            message: "failed",
-        });
-        return ;
-        }
-        
-        else{
-            
-            bcrypt.compare(req.body.password, rows[0].pw, function (err, result){
-                const pw = rows[0].pw;
-                if(result) {
-                   
-                    try {
-                        // jwt.sign() ???: ?? ??
-                        const token = jwt.sign(
-                          {
-                            name,
-                            pw,
-                          },
-                          jwt_secret_key.value,
-                          {
-                            expiresIn: "60m", // 60?
-                            issuer: "admin",
-                          }
-                        );
+  let sql_usercheck = `SELECT * FROM USER WHERE name='${req.body.username}';`;
+ 
+  connection.query(sql_usercheck, (err, rows, fields) => {
+    if(rows.length === 0) {
+      flag = false;
+      // console.log(flag);
+      return res.send({
+        code: 400,
+        message: "user does not exist",
+      });
+    } else {
+
+      connection.query(sql, (err, rows, fields) => {
+        bcrypt.compare(req.body.password, rows[0].pw, function (err, result){
+            const pw = rows[0].pw;
+            if(result) {
                 
-                        return res.json({
-                            code: 200,
-                            message: '??? ???????.',
-                            token,
-                          });
-                        
-                      } catch (error) {
-                        console.error(error);
-                        return res.status(500).json({
-                            code: 500,
-                            message: '?? ??',
-                          });
+                try {
+                    const token = jwt.sign(
+                      {
+                        name,
+                        pw,
+                      },
+                      jwt_secret_key.value,
+                      {
+                        expiresIn: "60m",
+                        issuer: "admin",
                       }
-
-                } else {
-                    res.send({
-                        code: 400,
-                        message: "failed",
-                    });
-                }
-            })
-        }
+                    );
+            
+                    return res.json({
+                        code: 200,
+                        message: 'Token issue',
+                        token,
+                      });
+
+                  } catch (error) {
+                    console.error(error);
+                    return res.status(500).json({
+                        code: 500,
+                        message: 'server error',
+                      });
+
+                  }
+
+            } else {
+                return res.json({
+                    code: 400,
+                    message: "invalid password",
+                });
+            }
+        })
+    
     })
+    }
+  })
 });
-//     else {
-//     bcrypt.compare(req.body.password, rows[0].pw, function (err, res) {
-//       console.log(res);
-//       if(!res) {
-//         res.send({
-//             code: 400,
-//             message: "failed",
-//           });
-//       }
-//       else {
-//     //   ???? ??? ?
-//       const pw = rows[0].pw;
-      
-//       }
-//     });
-
-//     }
-
-//   });
-    
 
 
 app.listen(port, () => console.log(`Listening on port ${port}`));