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 SigninPage = (props) => {
+    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 [userName, setUserName] = useState('');
-//     const [userPw, setuserPw] = useState('');
+        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,29 +77,27 @@ 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}';`;
+  let sql_usercheck = `SELECT * FROM USER WHERE name='${req.body.username}';`;
  
-  connection.query(sql, (err, rows, fields) => {
-    
-        if (!rows) {
-        res.send({
+  connection.query(sql_usercheck, (err, rows, fields) => {
+    if(rows.length === 0) {
+      flag = false;
+      // console.log(flag);
+      return res.send({
         code: 400,
-            message: "failed",
+        message: "user does not exist",
       });
-        return ;
-        }
-        
-        else{
+    } 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) {
                 
                 try {
-                        // jwt.sign() ???: ?? ??
                     const token = jwt.sign(
                       {
                         name,
@@ -107,14 +105,14 @@ app.post("/api/signin", (req, res) => {
                       },
                       jwt_secret_key.value,
                       {
-                            expiresIn: "60m", // 60?
+                        expiresIn: "60m",
                         issuer: "admin",
                       }
                     );
             
                     return res.json({
                         code: 200,
-                            message: '??? ???????.',
+                        message: 'Token issue',
                         token,
                       });
 
@@ -122,40 +120,23 @@ app.post("/api/signin", (req, res) => {
                     console.error(error);
                     return res.status(500).json({
                         code: 500,
-                            message: '?? ??',
+                        message: 'server error',
                       });
+
                   }
 
             } else {
-                    res.send({
+                return res.json({
                     code: 400,
-                        message: "failed",
+                    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}`));