Merge remote-tracking branch 'origin/jaeyeon' into who

client/src/Components/MainNav.js

-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
 import logo from '../footprint.svg';
 import cart from '../cart.svg';
 import option from '../option.svg';
+import { handleLogout, isAuthenticated } from '../utils/auth'
 
 function MainNav() {
-    function handleClick() {
-        alert('로그아웃이 완료되었습니다.')
-        window.location.href="/home"
-    }
+    const user = isAuthenticated()
 
     return (
         <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
@@ -16,13 +14,17 @@ function MainNav() {
                 <img alt="로고" src={logo} width="24" height="24" />
                 {' '}KU#
             </Navbar.Brand>
-            <Nav className="float-right">
-                <Nav.Link className="text-light" href="/login">Login</Nav.Link>
-                <Nav.Link className="text-light" href="/signup">Signup</Nav.Link>
+            <Nav>
+                {user ? <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
+                    : (
+                        <>
+                            <Nav.Link className="text-light" href='/login'>Login</Nav.Link>
+                            <Nav.Link className="text-light" href='/signup'>Sign Up</Nav.Link>
+                        </>
+                    )}
                 <Nav.Link href="/shoppingcart">
                     <img alt="카트" src={cart} width="30" height="30" />
                 </Nav.Link>
-                <Nav.Link className="text-light" onClick={() => handleClick()}>Logout</Nav.Link>
                 <Nav.Link href="/admin">
                     <img alt="관리자" src={option} width="30" height="30" />
                 </Nav.Link>

client/src/Pages/Login.js

 import React, { useState } from 'react';
 import { Link, Redirect } from 'react-router-dom';
-import { Form, Col, Container, Button, Row } from 'react-bootstrap';
+import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap';
+import axios from 'axios'
+import catchErrors from '../utils/catchErrors'
+import { handleLogin } from '../utils/auth'
+
+
+const INIT_USER = {
+    id: '',
+    password: ''
+}
 
 function Login() {
 
     const [validated, setValidated] = useState(false);
 
-    const handleSubmit = (e) => {
-        const form = e.currentTarget;
-        console.log(form)
-        if (form.checkValidity() === false) { //checkValidity 는 입력 요소에 유효한 데이터가 포함되어 있는지 확인
-            e.preventDefault();
-            e.stopPropagation();
+    function handleChange(event) {
+        const { name, value } = event.target
+        setUser({ ...user, [name]: value })
+
+    }
+
+    async function handleSubmit(event) {
+        event.preventDefault()
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
         }
         setValidated(true);
+        try {
+            setError('')
+            await axios.post('/api/auth/login', user)
+            handleLogin()
+            setSuccess(true)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
     }
 
+    if (success) {
+        alert('로그인 되었습니다.')
+        window.location.href='/'
+    }
 
-    return (
-        <div>
 
+
+    return (
         <Container className="my-5">
             <Row className="justify-content-center">
                 <Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>
                     <h3 className="text-center mt-5">Login</h3>
-                        <Form noValidate validated={validated} onSubmit={handleSubmit} className="p-5">
+                    {error && <Alert variant='danger'>
+                        {error}
+                    </Alert>}
+                    <Form noValidate validated={validated}
+                        onSubmit={handleSubmit}
+                        className="p-5">
                         <Form.Group controlId="formBasicId">
                             <Form.Row>
                                 <Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col>
                                 <Col sm={8} xs={12} as={Form.Control}
                                     required
                                     type="text"
-                                        id="id"
+                                    name="id"
                                     placeholder="ID"
+                                    value={user.id}
+                                    onChange={handleChange}
                                     style={{ width: '160px' }}>
                                 </Col>
                                 <Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
@@ -44,8 +78,10 @@ function Login() {
                                 <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
                                 <Col sm={8} xs={12} as={Form.Control}
                                     type="password"
-                                        id="password"
+                                    name="password"
+                                    value={user.password}
                                     placeholder="Password"
+                                    onChange={handleChange}
                                     style={{ width: '160px' }}
                                     required />
                                 <Form.Control.Feedback className="text-center" type="invalid">
@@ -61,7 +97,6 @@ function Login() {
                 </Col>
             </Row>
         </Container>
-            </div>
     )
 
 }

client/src/Pages/Logout.js

-// import { Button } from 'bootstrap'
-// import React from 'react'
-// import { handleLogout } from '../utils/auth'
-
-// function logout() {
-//     return (
-//         <div>
-//             <Button onClick={()=>handleLogout()}>Logout</Button>
-//         </div>
-//     )
-// }
-
-// export default logout

client/src/Pages/ProductsList.js

@@ -26,17 +26,18 @@ function ProductsList() {
                 `}
             </style>
             <Container>
-                <Row className="justify-content-center mx-0 my-4">
-                    <Col sm={10}>
-                        <h1 style={{ fontSize: "3rem" }}>OUTER</h1>
+                <Row >
+                    <Col sm={10} xs={12}>
+                        <h1 style={{ fontSize: "3rem" }} className="text-center">OUTER</h1>
                         <div>{sub.map((ele) => (
-                            <Button className="m-1">{ele}</Button>
+                            <Button className="justify-content-center m-1">{ele}</Button>
                         ))}</div>
                     </Col>
                 </Row>
                 <Row className="justify-content-between mx-0 my-5">
+                    <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
                         <Dropdown>
-                        <Dropdown.Toggle>정렬</Dropdown.Toggle>
+                        <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
                         <Dropdown.Menu>
                             <Dropdown.Item>인기상품</Dropdown.Item>
                             <Dropdown.Item>신상품</Dropdown.Item>
@@ -44,15 +45,13 @@ function ProductsList() {
                             <Dropdown.Item>높은가격</Dropdown.Item>
                         </Dropdown.Menu>
                     </Dropdown>
-                    <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
                     <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
-                        <Button type="submit" className="search px-2">
+                        <Button type="submit" className="search px-2 mb-1 ">
                             <img src={search} width="20" height="20" />
                         </Button>
-                        <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
                     </Form>
                 </Row>
-                <Row className="justify-content-start m-5">
+                <Row md={8} sm={12} className="justify-content-start m-2">
                     <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
                         <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
                         <Card.Body>

client/src/Pages/Signup.js

 import React, { useState } from 'react';
 import axios from 'axios'
-import Nav1 from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
 import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
 import catchErrors from '../utils/catchErrors'
 

client/src/utils/Auth.js

@@ -7,4 +7,14 @@ export function handleLogin(){
 export async function handleLogout(){
     localStorage.removeItem('loginStatus')
     await axios.get('/api/auth/logout')
+    window.location.href='/'
+}
+
+export function isAuthenticated(){
+    const userId= localStorage.getItem('loginStatus')
+    if(userId){
+        return userId
+    } else{
+        return false
+    }
 }
\ No newline at end of file

client/src/utils/catchErrors.js

-<<<<<<< HEAD
-// import React from 'react'
-
-function catchErrors(error, displayError) {
-    let errorMsg
-    if (error.response){
-        errorMsg = error.response.data
-        console.log(errorMsg)
-    }
-    else if (error.request){
-        errorMsg = error.request
-        console.log(errorMsg)
-    }
-    else {
-        errorMsg = error.message
-        console.log(errorMsg)
-    }
-    displayError(errorMsg)
-
-}
-
-export default catchErrors
-=======
 function catchErrors(error,displayError){ 
     let errorMsg
 
@@ -38,4 +15,3 @@ function catchErrors(error,displayError){
 }
 
 export default catchErrors
\ No newline at end of file
->>>>>>> origin/jaeyeon

server/controllers/auth.controller.js

@@ -33,9 +33,9 @@ const login = async(req,res)=>{
     }
 }
 
-// const logout =(req,res)=>{
-//     res.clearCookie('token')
-//     res.send('로그아웃 되었습니다.')
-// }
+ const logout =(req,res)=>{
+     res.clearCookie('token')
+     res.send('로그아웃 되었습니다.')
+ }
 
-export default {login}
+export default {login, logout}
\ No newline at end of file

server/routes/auth.routes.js

@@ -6,7 +6,7 @@ const router = express.Router()
 router.route('/login')
     .post(authCtrl.login)
 
-// router.route('/logout')
-//     .get(authCtrl.logout)
+ router.route('/logout')
+     .get(authCtrl.logout)
 
 export default router
\ No newline at end of file