Skip to content

GitLab

Commit 486fd7e2 authored by 박상호's avatar 박상호 🎼
Browse files

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

parents beb4a801 f53b58dc
Hide whitespace changes
Inline Side-by-side
client/src/Components/MainNav.js
View file @ 486fd7e2
import React, { useState, useEffect, useRef } from 'react'; import React from 'react';
import { Navbar, Nav } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import logo from '../footprint.svg'; import logo from '../footprint.svg';
import cart from '../cart.svg'; import cart from '../cart.svg';
import option from '../option.svg'; import option from '../option.svg';
import { handleLogout, isAuthenticated } from '../utils/auth'
function MainNav() { function MainNav() {
function handleClick() { const user = isAuthenticated()
alert('로그아웃이 완료되었습니다.')
window.location.href="/home"
}
return ( return (
<Navbar sticky="top" style={{ background: "#CDC5C2" }}> <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
...@@ -16,13 +14,17 @@ function MainNav() { ...@@ -16,13 +14,17 @@ function MainNav() {
<img alt="로고" src={logo} width="24" height="24" /> <img alt="로고" src={logo} width="24" height="24" />
{' '}KU# {' '}KU#
</Navbar.Brand> </Navbar.Brand>
<Nav className="float-right"> <Nav>
<Nav.Link className="text-light" href="/login">Login</Nav.Link> {user ? <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
<Nav.Link className="text-light" href="/signup">Signup</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"> <Nav.Link href="/shoppingcart">
<img alt="카트" src={cart} width="30" height="30" /> <img alt="카트" src={cart} width="30" height="30" />
</Nav.Link> </Nav.Link>
<Nav.Link className="text-light" onClick={() => handleClick()}>Logout</Nav.Link>
<Nav.Link href="/admin"> <Nav.Link href="/admin">
<img alt="관리자" src={option} width="30" height="30" /> <img alt="관리자" src={option} width="30" height="30" />
</Nav.Link> </Nav.Link>
......
client/src/Pages/Login.js
View file @ 486fd7e2
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, Redirect } from 'react-router-dom'; 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() { function Login() {
const [validated, setValidated] = useState(false); const [validated, setValidated] = useState(false);
const handleSubmit = (e) => { function handleChange(event) {
const form = e.currentTarget; const { name, value } = event.target
console.log(form) setUser({ ...user, [name]: value })
if (form.checkValidity() === false) { //checkValidity 는 입력 요소에 유효한 데이터가 포함되어 있는지 확인
e.preventDefault(); }
e.stopPropagation();
async function handleSubmit(event) {
event.preventDefault()
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} }
setValidated(true); 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>
<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">
<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"
placeholder="ID"
style={{ width: '160px' }}>
</Col>
<Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword"> return (
<Form.Row> <Container className="my-5">
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col> <Row className="justify-content-center">
<Col sm={8} xs={12} as={Form.Control} <Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>
type="password" <h3 className="text-center mt-5">Login</h3>
id="password" {error && <Alert variant='danger'>
placeholder="Password" {error}
style={{ width: '160px' }} </Alert>}
required /> <Form noValidate validated={validated}
<Form.Control.Feedback className="text-center" type="invalid"> 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"
name="id"
placeholder="ID"
value={user.id}
onChange={handleChange}
style={{ width: '160px' }}>
</Col>
<Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
<Col sm={8} xs={12} as={Form.Control}
type="password"
name="password"
value={user.password}
placeholder="Password"
onChange={handleChange}
style={{ width: '160px' }}
required />
<Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button> <Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button>
<div className="loginLine"> <div className="loginLine">
<Link to="/signup" style={{ color: '#91877F' }}>회원이 아니십니까?</Link> <Link to="/signup" style={{ color: '#91877F' }}>회원이 아니십니까?</Link>
</div> </div>
</Form> </Form>
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div> )
)
} }
export default Login export default Login
\ No newline at end of file
client/src/Pages/Logout.js deleted 100644 → 0
View file @ beb4a801
// 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
View file @ 486fd7e2
...@@ -26,17 +26,18 @@ function ProductsList() { ...@@ -26,17 +26,18 @@ function ProductsList() {
`} `}
</style> </style>
<Container> <Container>
<Row className="justify-content-center mx-0 my-4"> <Row >
<Col sm={10}> <Col sm={10} xs={12}>
<h1 style={{ fontSize: "3rem" }}>OUTER</h1> <h1 style={{ fontSize: "3rem" }} className="text-center">OUTER</h1>
<div>{sub.map((ele) => ( <div>{sub.map((ele) => (
<Button className="m-1">{ele}</Button> <Button className="justify-content-center m-1">{ele}</Button>
))}</div> ))}</div>
</Col> </Col>
</Row> </Row>
<Row className="justify-content-between mx-0 my-5"> <Row className="justify-content-between mx-0 my-5">
<Dropdown> <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
<Dropdown.Toggle>정렬</Dropdown.Toggle> <Dropdown>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item>인기상품</Dropdown.Item> <Dropdown.Item>인기상품</Dropdown.Item>
<Dropdown.Item>신상품</Dropdown.Item> <Dropdown.Item>신상품</Dropdown.Item>
...@@ -44,15 +45,13 @@ function ProductsList() { ...@@ -44,15 +45,13 @@ function ProductsList() {
<Dropdown.Item>높은가격</Dropdown.Item> <Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
<Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0"> <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <Button type="submit" className="search px-2 mb-1 ">
<Button type="submit" className="search px-2">
<img src={search} width="20" height="20" /> <img src={search} width="20" height="20" />
</Button> </Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Form> </Form>
</Row> </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 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.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
......
client/src/Pages/Signup.js
View file @ 486fd7e2
import React, { useState } from 'react'; import React, { useState } from 'react';
import axios from 'axios' 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 { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
import catchErrors from '../utils/catchErrors' import catchErrors from '../utils/catchErrors'
......
client/src/utils/Auth.js
View file @ 486fd7e2
...@@ -7,4 +7,14 @@ export function handleLogin(){ ...@@ -7,4 +7,14 @@ export function handleLogin(){
export async function handleLogout(){ export async function handleLogout(){
localStorage.removeItem('loginStatus') localStorage.removeItem('loginStatus')
await axios.get('/api/auth/logout') 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
View file @ 486fd7e2
<<<<<<< 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){ function catchErrors(error,displayError){
let errorMsg let errorMsg
...@@ -37,5 +14,4 @@ function catchErrors(error,displayError){ ...@@ -37,5 +14,4 @@ function catchErrors(error,displayError){
displayError(errorMsg) displayError(errorMsg)
} }
export default catchErrors export default catchErrors
>>>>>>> origin/jaeyeon \ No newline at end of file
server/controllers/auth.controller.js
View file @ 486fd7e2
...@@ -33,9 +33,9 @@ const login = async(req,res)=>{ ...@@ -33,9 +33,9 @@ const login = async(req,res)=>{
} }
} }
// const logout =(req,res)=>{ const logout =(req,res)=>{
// res.clearCookie('token') res.clearCookie('token')
// res.send('로그아웃 되었습니다.') res.send('로그아웃 되었습니다.')
// } }
export default {login} export default {login, logout}
\ No newline at end of file \ No newline at end of file
server/routes/auth.routes.js
View file @ 486fd7e2
...@@ -6,7 +6,7 @@ const router = express.Router() ...@@ -6,7 +6,7 @@ const router = express.Router()
router.route('/login') router.route('/login')
.post(authCtrl.login) .post(authCtrl.login)
// router.route('/logout') router.route('/logout')
// .get(authCtrl.logout) .get(authCtrl.logout)
export default router export default router
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment