로그인 기능 구현중...

client/src/App.js

 import logo from './logo.svg';
 import './App.css';
 import { Button } from 'react-bootstrap';
+import { Router } from 'react-router-dom';
+import Login from './Login'
+import LogoutButton from './LogoutButton'
+import {signIn} from './auth'
+
 
 function App() {
-  function btnfunc(){
-    alert("hi")
-    console.log("아")
-  }
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  const [user,setUser]=useState(null);
+
+  const authenticated =user !=null;
+
+  const login =({id, password}) => setUser(signIn({id,password}));
+
+  const logout=()=>setUser(null);
+
+
 }
 
 export default App;

client/src/Auth.js

+const users=[
+    { id:'wodus', password:'123'},
+    {id:'kim', password:'456'},
+]
+
+export function signIn({id,password}){
+    const user=users.find(user=>user.id===id && user.password===password);
+    if (user===undefined) throw new Error();
+    return user;
+
+}
\ No newline at end of file

client/src/AuthRoute.js

+import React from 'react'
+import {Route, Redirect} from "react-router-dom"
+
+function AuthRoute({})
\ No newline at end of file

client/src/Pages/Login.js

@@ -5,8 +5,19 @@ import { Form, Col, Container, Button, Row } from 'react-bootstrap'
 import { Link , Redirect} from 'react-router-dom'
 
 
-function Login() {
+function Login(authenticated,login,location) {
+    const [id, setId] = useState("");
+    const [password,setPassword]= useState("");
 
+    const handleClick =() => {
+        try {
+            Login({id,password})
+        } catch(e) {
+            alert("Failed to login")
+            setId("")
+            setPassword("")
+        }
+    }
 
     return (
         <div>
@@ -24,7 +35,12 @@ function Login() {
                                 <Form.Row>
                                     <Form.Label for="id">User Name</Form.Label>
                                     <Col>
-                                        <Form.Control type="text" id="id" className="mx-sm-3" size="sm" placeholder="User Name"></Form.Control>
+                                        <Form.Control 
+                                        type="text" 
+                                        value={id} 
+                                        onChange={({target:{value}})=>setId(value)} 
+                                        className="mx-sm-3" size="sm" placeholder="User Name">
+                                        </Form.Control>
                                     </Col>
                                 </Form.Row>
                             </Form.Group>
@@ -33,11 +49,15 @@ function Login() {
                                 <Form.Row>
                                     <Form.Label for="password">Password</Form.Label>
                                     <Col>
-                                        <Form.Control type="password" id="password" className="mx-sm-3" size="sm" placeholder="Password"></Form.Control>
+                                        <Form.Control 
+                                        type="password" 
+                                        value={password}
+                                        onChange={({target:{value}})=>setPassword(value)} 
+                                        className="mx-sm-3" size="sm" placeholder="Password"></Form.Control>
                                     </Col>
                                 </Form.Row>
                             </Form.Group>
-                            <Button variant="outline-dark" type="submit" block>Login</Button>
+                            <Button variant="outline-dark" type="submit" onClick={handleClick} block>Login</Button>
                             <div className="loginLine">
                                 <Link to="/signup">SignUp?</Link>
                             </div>

client/src/Pages/LogoutButton.js

+import React from 'react'
+import {withRouter} from 'react-router-dom'
+
+function LogoutButton({logout,history}){
+    const handleClick = () =>{
+        logout()
+        history.push("/")
+    }
+    return <button onClick={handleClick}>Logout</button>
+}
+
+export default withRouter(LogoutButton)
\ No newline at end of file

client/src/Pages/Signup.js

@@ -3,12 +3,14 @@ import { Redirect } from 'react-router-dom';
 import Nav1 from '../Components/MainNav';
 import Nav2 from '../Components/SubNav';
 import { Form, Col, Container, Button, Row } from 'react-bootstrap'
+import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
 
 function Signup() {
 
 
     return (
         <div>
+
             <Nav1 />
             <Nav2 />
             <Container className="my-5">
@@ -45,7 +47,7 @@ function Signup() {
                                     <Col as={Row}>
                                     <Form.Control type="text" id="number1" size="sm" maxlength="6" className="mx-sm-3" style={{width:'120px'}}></Form.Control>
                                     -
-                                    <Form.Control type="text" id="number1" size="sm" maxlength="1" className="mx-sm-3" style={{width:'25px'}}></Form.Control>
+                                    <Form.Control type="text" id="number2" size="sm" maxlength="1" className="mx-sm-3" style={{width:'25px'}}></Form.Control>
                                     ******
                                     </Col>