Skip to content

GitLab

Commit 9e604666 authored by 이재연's avatar 이재연
Browse files

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

parents d8de2d3f 506fb316
Hide whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 9e604666
......@@ -9,6 +9,7 @@ import Admin from './Pages/Admin';
import ProductRegist from './Pages/ProductRegist';
import ShoppingCart from './Pages/ShoppingCart';
import Payment from './Pages/Payment';
import PaymentCompleted from './Pages/PaymentCompleted';
import Account from './Pages/Account';
import MainNav from './Components/MainNav';
import SubNav from './Components/SubNav';
......@@ -24,11 +25,13 @@ function App() {
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/product/:productId" component={Product} />
<Route path="/categories/:main/:sub" component={ProductsList} />
<Route path="/categories/:main" component={ProductsList} />
<Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductRegist} />
<Route path="/shoppingcart" component={ShoppingCart} />
<Route path="/payment" component={Payment} />
<Route path="/paymentcompleted" component={PaymentCompleted} />
<Route path="/account" component={Account} />
<Route path='/kakao' component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} />
<Redirect path="/" to="/" />
......
client/src/Components/CartCard.js
View file @ 9e604666
import React from 'react'
import { Card, Button, Container, Row, Col } from 'react-bootstrap';
import { Card, Row, Col } from 'react-bootstrap';
function CartCard(props) {
console.log(props)
return (
<>
{props.cart.map((e) => (
<Card>
<Row className="mx-1">
<Col xs={2} sm={2} className="text-center my-auto">
<input className="" type="checkbox" id="exampleCheck1" />
<input className="" type="checkbox" name={String(e._id)} onChange={props.checkedCart} />
</Col>
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<input type="image" name={String(e.productId._id)} alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={props.deleteCart} />
<input type="image" name={String(e._id)} alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={props.deleteCart} />
<Card.Title className="font-weight-bold mt-3">{e.productId.pro_name}</Card.Title>
<Card.Text>가격: {e.productId.price}</Card.Text>
<Card.Text>옵션: {e.sizes}/{e.colors}</Card.Text>
<Card.Text>수량</Card.Text>
<Card.Text className="mb-0">가격: {e.productId.price}원</Card.Text>
<Card.Text className="mb-0">옵션: {e.size}/{e.color}</Card.Text>
<Card.Text >수량</Card.Text>
<div>
<input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={props.minusNum} />
<input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder={e.count} value={e.count} readOnly></input>
<input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={props.plusNum} />
<input type="image" name={String(e._id)} alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={props.minusNum} />
<input type="number" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder={e.count} value={e.count} readOnly></input>
<input type="image" name={String(e._id)} alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={props.plusNum} />
</div>
</Card.Body>
</Col>
......
client/src/Components/ListCard.js
View file @ 9e604666
import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'react-bootstrap';
import { Card, Button } from 'react-bootstrap';
function ListCard({ id, name, price, main_img }) {
function handleDelete(e) {
const card = e.target.parentNode.parentNode
alert('해당 상품을 성공적으로 삭제하였습니다.')
card.remove()
}
return (
<Card id={id} className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card id={id} className="m-3" style={{ width: "18rem" }}>
<Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
<Card.Text>{price} 원</Card.Text>
{/* <Button className="float-right" onClick={handleDelete}>삭제</Button> */}
</Card.Body>
</Card>
)
}
}
export default ListCard
\ No newline at end of file
client/src/Components/MainNav.js
View file @ 9e604666
......@@ -13,8 +13,8 @@ function MainNav() {
<img alt="로고" src="/icon/footprint.svg" width="24" height="24" />
{' '}KU#
</Navbar.Brand>
<Nav>
{user,admin ? <> <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
<Nav className="ml-auto">
{user ? <> <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
<Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>
</>
: (
......
client/src/Components/PaymentCard.js
View file @ 9e604666
import React from 'react'
import { Card, Row, Col } from 'react-bootstrap';
function PaymentCard() {
function PaymentCard(props) {
return (
<Card >
<Row className="mx-1">
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<input type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text>
<div>
<input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div>
</Card.Body>
</Col>
</Row>
</Card>
<>
{props.cart.map((e) => (
<Card>
<Row className="mx-1">
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<input type="image" name={String(e._id)} alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={props.deleteOrder} />
<Card.Title className="font-weight-bold mt-3">{e.productId.pro_name}</Card.Title>
<Card.Text>가격: {e.productId.price}원</Card.Text>
<Card.Text>옵션: {e.size}/{e.color}</Card.Text>
<Card.Text>수량: {e.count}</Card.Text>
</Card.Body>
</Col>
</Row>
</Card>
))
}
</>
)
}
......
client/src/Components/SubNav.js
View file @ 9e604666
......@@ -8,7 +8,6 @@ function SubNav() {
const [categoriesDiv, setCategoriesDiv] = useState([])
const [error, setError] = useState('')
useEffect(async () => {
try {
const response = await axios.get('/api/categories/main')
......@@ -17,6 +16,7 @@ function SubNav() {
const url = ele.toLowerCase()
list.push(
<Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
//categories/${SubNav.url}/&{url}
)
})
setCategoriesDiv(list)
......@@ -34,7 +34,7 @@ function SubNav() {
}
`}
</style>
<Nav style={{overflowX: "auto"}}>
<Nav style={{ overflowX: "auto" }}>
{categoriesDiv.map(item => item)}
</Nav>
</Navbar>
......
client/src/Pages/Account.js
View file @ 9e604666
import React, { useEffect, useState } from 'react'
import { Card, Image, Container, Row, Col, Table, Accordion, Button, Form, Modal, Alert } from 'react-bootstrap'
import { Link } from 'react-router-dom';
import axios from 'axios'
import catchErrors from '../utils/catchErrors';
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
const INIT_ACCOUNT = {
......@@ -10,21 +10,21 @@ const INIT_ACCOUNT = {
avatarUrl: ''
}
function Account() {
const [account, setAccount] = useState(INIT_ACCOUNT)
const [show, setShow] = useState(false);
const [proshow, setProshow] = useState(false)
const [error, setError] = useState("")
const userId = isAuthenticated()
async function getUsername(user) {
// console.log("tlg")
try {
const response = await axios.get(`/api/users/account/${user}`)
setAccount(response.data)
// console.log('555555555', response.data);
console.log('555555555', response.data);
} catch (error) {
catchErrors(error, setError)
catchError(error, setError)
// console.log('error2222', error)
}
}
......@@ -33,13 +33,6 @@ function Account() {
getUsername(userId)
}, [userId])
const [show, setShow] = useState(false);
const handleClose = () => setShow(false)
const handleShow = () => setShow(true)
const handleChange = (event) => {
const { name, value, files } = event.target
if (files) {
......@@ -63,7 +56,7 @@ function Account() {
window.location.reload()
}
} catch (error) {
catchErrors(error, setError)
catchError(error, setError)
}
setShow(false)
}
......@@ -81,21 +74,28 @@ function Account() {
window.location.reload()
}
} catch (error) {
catchErrors(error, setError)
catchError(error, setError)
}
} else {
alert("파일을 선택해주세요.")
}
}
}
return (
<Container className="px-3">
<style type="text/css">
{`
a, a:hover, a:active {
color: #91877F;
text-decoration-color: #91877F;
}
`}
</style>
<h3 className="my-4 mx-3 font-weight-bold">My Page</h3>
<Card md={3} className="p-1 mb-4" style={{ background: '#F7F3F3' }}>
<Row className="p-2">
<Col md={5} className="d-flex align-content-center justify-content-center">
<Button variant="outline-light" onClick={handleShow}>
<Button variant="outline-light" onClick={() => setShow(true)}>
{account.avatarUrl ? (
<Image src={account.avatarUrl && `/images/${account.avatarUrl}`} className="img-thumbnail"
roundedCircle style={{ objectFit: "cover", width: "10rem", height: "10rem" }} />
......@@ -104,9 +104,9 @@ function Account() {
roundedCircle style={{ objectFit: "cover", width: "10rem", height: "10rem" }} />
)}
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>이미지를 변경하시겠습니까?</Modal.Title>
<Modal show={show} onHide={() => setShow(false)}>
<Modal.Header closeButton style={{background:"#F7F3F3"}}>
<Modal.Title >이미지를 변경하시겠습니까?</Modal.Title>
</Modal.Header>
<Form onSubmit={handleSubmit}>
<Modal.Body>
......@@ -118,8 +118,8 @@ function Account() {
className="d-flex justify-content-start"><small>기본이미지로</small></Button>
{/* 기본이미지로 보내기 */}
</Col>
<Button variant="secondary" onClick={handleClose}>취소</Button>
<Button variant="primary" type="submit" onClick={handleClose}>저장</Button>
<Button variant="secondary" onClick={() => setShow(false)}>취소</Button>
<Button variant="primary" type="submit" onClick={() => setShow(false)}>저장</Button>
</Modal.Footer>
</Form>
</Modal>
......@@ -128,21 +128,42 @@ function Account() {
<Row className="mt-4 text-center">
<Col>
<h2>
<strong>{account.name}</strong> <small>({account.id}){" "}님</small>
<strong title='회원정보' style={{ cursor: "pointer", textDecoration: 'underline' }} onClick={() => setProshow(true)}>
{account.name}
</strong>
<Modal
size="sm"
show={proshow}
onHide={() => setProshow(false)}>
<Modal.Header closeButton style={{background:"#F7F3F3"}}>
<Modal.Title>회원정보</Modal.Title>
</Modal.Header>
<Modal.Body>
<Col className="p-1">
<li><strong>Role :</strong> {account.role}</li>
<li><strong>ID :</strong> {account.id}</li>
<li><strong>Username :</strong> {account.name}</li>
<li><strong>Email :</strong> {account.email}</li>
<li><strong>Tel :</strong> {account.tel}</li>
</Col>
</Modal.Body>
</Modal>
<small>{' '}({account.id}){" "}님</small>
</h2>
</Col>
</Row>
<Row className="px-3">
<Card.Body className="p-2 text-center">
<h4><Link to="/" class="link-warning">
<h4><Link to="/">
<strong title="홈으로">
<Image src="/icon/mypagetiger.svg" width={"30rem"} roundedCircle className="img-thumbnail" >
</Image>KU#
</strong>
</strong>
</Link>
{/* 홈페이지로 돌아가기 */}
를 방문해주신 <em>{account.name}</em> 님,<br></br>
진심으로 환영합니다! 즐거운 쇼핑 되세요.</h4>
를 방문해주신 <em>{account.name}</em> 님,<br />
진심으로 환영합니다! 즐거운 쇼핑 되세요.
</h4>
</Card.Body>
</Row>
<Row className="mr-1 text-muted d-flex justify-content-end">
......
client/src/Pages/Admin.js
View file @ 9e604666
import React from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import Pagination from '../Components/Pagination';
import axios from 'axios';
import { isAdmin } from "../utils/auth";
import catchError from '../utils/catchErrors';
import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
function Admin() {
function handleClick(e) {
const card = e.target.parentNode.parentNode
alert('해당 상품을 성공적으로 삭제하였습니다.')
card.remove()
const [productlist, setProductlist] = useState([])
const [error, setError] = useState('')
const role = isAdmin()
useEffect(() => {
getProductlist()
}, [])
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct/all`)
console.log("response.data=", response.data)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
}
function handleSearch() {
}
function handleSubmit(e) {
e.preventDefault()
}
if(!role) {
alert('죄송합니다.접근 권한이 없습니다.')
return <Redirect to="/" />
}
return (
<div>
<Container>
<style type="text/css">
{`
.btn {
......@@ -28,97 +54,20 @@ function Admin() {
}
`}
</style>
<Container>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2">
<img src="icon/search.svg" width="20" height="20" />
</Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Row>
<Row className="justify-content-start m-5">
<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>
<Card.Title>케이시앵글부츠(SH)</Card.Title>
<Card.Text>
재고: 8<br />
구매자 수: 10
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>메리제인플랫(SH)</Card.Title>
<Card.Text>
재고: 20<br />
구매자 수: 60
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>솔티드스니커즈(SH)</Card.Title>
<Card.Text>
재고: 34<br />
구매자 수: 5
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>버켄슬리퍼(SH)</Card.Title>
<Card.Text>
재고: 50<br />
구매자 수: 18
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>크레센도 하이힐펌프스</Card.Title>
<Card.Text>
재고: 35<br />
구매자 수: 70
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title>
<Card.Text>
재고: 40<br />
구매자 수: 30
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>포웰3.5cm 스니커즈</Card.Title>
<Card.Text>
재고: 15<br />
구매자 수: 50
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
</Row>
<Pagination />
</Container>
</div>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2">
<img src="icon/search.svg" width="20" height="20" />
</Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Row>
<Row className="justify-content-center m-5">
{productlist.map(pro => (
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
))}
</Row>
<Pagination />
</Container>
)
}
......
client/src/Pages/Home.js
View file @ 9e604666
import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { Card, Container, Row } from 'react-bootstrap';
import { Container, Row } from 'react-bootstrap';
function Home() {
const [productlist, setProductlist] = useState([])
const INIT_PRODUCT = {
bestProduct: [],
newProduct: [],
}
const [productlist, setProductlist] = useState(INIT_PRODUCT)
const [error, setError] = useState('')
useEffect(() => {
......@@ -16,78 +21,67 @@ function Home() {
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct`)
console.log(response.data)
setProductlist(response.data)
console.log("res=", response.data)
setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct })
} catch (error) {
catchError(error, setError)
}
}
return (
<div>
<Container className="my-5">
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0">
<ListCard productlist={productlist} />
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
</Row>
</div>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center mx-0">
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
</Row>
</div>
</Container>
</div>
<Container>
<style type="text/css">
{`
a, a:hover, a:active {
color: #000;
text-decoration: none;
`}
</style>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0">
{productlist.bestProduct.map(pro => (
<Link to={{
pathname: `/product/${pro._id}`,
state: {
id: pro._id,
name: pro.pro_name,
price: pro.price,
colors: pro.colors,
sizes: pro.sizes,
description: pro.description,
main_img: pro.main_imgUrl,
detail_imgs: pro.detail_imgUrls
}
}}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link>
))}
</Row>
</div>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center mx-0">
{productlist.newProduct.map(pro => (
<Link to={{
pathname: `/product/${pro._id}`,
state: {
id: pro._id,
name: pro.pro_name,
price: pro.price,
colors: pro.colors,
sizes: pro.sizes,
description: pro.description,
main_img: pro.main_imgUrl,
detail_imgs: pro.detail_imgUrls
}
}}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link>
))}
</Row>
</div>
</Container>
)
}
......
client/src/Pages/Login.js
View file @ 9e604666
......@@ -27,8 +27,6 @@ function Login() {
function handleChange(event) {
const { name, value } = event.target
setUser({ ...user, [name]: value })
setAdmin({ ...admin, [name]: value })
}
async function handleSubmit(event) {
......@@ -58,8 +56,6 @@ function Login() {
window.location.href = '/'
}
return (
<Container className="my-5">
<Row className="justify-content-center">
......@@ -103,8 +99,8 @@ function Login() {
</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button>
<div className="loginLine">
<Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block >Login</Button>
<div className="loginLine m-1">
<Link to="/signup" style={{ color: '#91877F' }}>회원이 아니십니까?</Link>
</div>
</Form>
......
client/src/Pages/Payment.js
View file @ 9e604666
import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react';
import DaumPostcode from "react-daum-postcode";
import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap';
import { Redirect } from 'react-router-dom';
import { Redirect, Link, useHistory } from 'react-router-dom';
import PaymentCard from '../Components/PaymentCard';
import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors';
function Payment() {
function Payment({ match, location }) {
const [paymentWay, setPaymentWay] = useState([])
const [isAddress, setIsAddress] = useState("");
const [isZoneCode, setIsZoneCode] = useState();
const [isPostOpen, setIsPostOpen] = useState();
const [cart, setCart] = useState([])
const [order, setOrder] = useState({ products: [] })
const [userData, setUserData] = useState({})
const [error, setError] = useState()
const [post, setPost] = useState([])
const [redirect, setRedirect] = useState(null)
const [address, setAddress] = useState("")
const [num, setNum] = useState(0)
const [finalPrice, setFinalPrice] = useState(0)
const [paymentWay, setPaymentWay] = useState([])
const [completeState, setCompleteState] = useState(false)
const user = isAuthenticated()
let history = useHistory();
const preCart = []
useEffect(() => {
getUser()
getCart()
}, [user])
useEffect(() => {
let price = 0
cart.map((el) => {
price = Number(el.count) * Number(el.productId.price) + price
})
setFinalPrice(price)
}, [cart])
async function getUser() {
const name = localStorage.getItem('name')
const tel = localStorage.getItem('tel')
const email = localStorage.getItem('email')
setUserData({ name: name, tel: tel, email: email })
}
async function getCart() {
try {
setError('')
const response = await axios.get(`/api/cart/showcart/${user}`)
console.log(response.data)
const preCart = response.data.filter((el) => el.checked === true)
if (preCart.length) {
setCart(preCart)
setOrder({ products: preCart })
} else {
alert("주문하실 상품이 없습니다.")
history.push("/home")
}
} catch (error) {
catchErrors(error, setError)
}
}
async function deleteOrder(e) {
try {
setError('')
const response = await axios.post('/api/cart/deletecart', {
userId: user,
cartId: e.target.name
})
console.log(response.data)
const preCart = response.data.products.filter((el) => el.checked === true)
setCart(preCart)
setOrder({ products: preCart })
} catch (error) {
catchErrors(error, setError)
}
}
function handleReceiverInfo(e) {
const { name, value } = e.target
console.log(name, value)
setOrder({ ...order, receiverInfo: { ...order.receiverInfo, [name]: value } })
}
function postClick() {
if (post.length !== 0) {
......@@ -42,8 +111,8 @@ function Payment() {
}
fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
}
setAddress({ full: fullAddress, zone: data.zonecode });
setAddress({ full: fullAddress, code: data.zonecode });
setOrder({ ...order, receiverInfo: { ...order.receiverInfo, address: fullAddress, postalCode: data.zonecode } })
console.log(fullAddress);
}
......@@ -58,9 +127,9 @@ function Payment() {
function handleClick() {
if (paymentWay.length !== 0) {
setCompleteState(false)
setPaymentWay([])
}
else {
} else {
const a = (
<Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-5">
......@@ -89,62 +158,83 @@ function Payment() {
}
}
function handleClick2() {
if (paymentWay.length !== 0) {
setPaymentWay([])
}
}
async function kakaopay() {
const response = await fetch('/api/kakaopay/test/single', {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify({
cid: 'TC0ONETIME',
partner_order_id: 'partner_order_id',
partner_user_id: 'partner_user_id',
item_name: '앙고라 반목 폴라 베이직 모헤어 니트 (T)',
quantity: 1,
total_amount: 22000,
vat_amount: 200,
tax_free_amount: 0,
approval_url: 'http://localhost:3000/account',
fail_url: 'http://localhost:3000/shoppingcart',
cancel_url: 'http://localhost:3000/kakaopay/payment',
})
})
const data = await response.json()
console.log(data)
window.location.href = data.redirect_url
setCompleteState("kakaopay")
setPaymentWay(
<div className="text-center">
<p className=" font-weight-bold" style={{ display: 'inline' }}>'카카오페이'</p><p style={{ display: 'inline' }}>를 선택하셨습니다. </p>
<p>주문하기를 눌러 결제를 이어가주세요.</p>
</div>
)
// window.location.href = data.redirect_url
// setRedirect(data.redirect_url)
}
function plusNum() {
setNum(num + 1)
}
function minusNum() {
if (num === 0) {
setNum(0)
}
else {
setNum(num - 1)
async function paymentCompleted() {
console.log(order)
const cartIds = []
order.products.map((el) => {
cartIds.push(el._id)
})
try {
setError('')
const response = await axios.post(`/api/order/addorder`, {
userId: user,
...order,
total: finalPrice + 2500
})
const response2 = await axios.post(`/api/cart/deletecart2`, {
userId: user,
cartId: cartIds
})
const response3 = await axios.post(`/api/product/pluspurchase`, {
products: order.products
})
if (completeState === "kakaopay") {
let itemNames = ""
if (cart.length > 1) {
itemNames = cart[0].productId.pro_name + ' 외 ' + String(cart.length - 1) + '개'
} else {
itemNames = cart[0].productId.pro_name
}
const response = await fetch('/api/kakaopay/test/single', {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify({
cid: 'TC0ONETIME',
partner_order_id: 'partner_order_id',
partner_user_id: user,
item_name: itemNames,
quantity: cart.length,
total_amount: finalPrice + 2500,
vat_amount: 200,
tax_free_amount: 0,
approval_url: 'http://localhost:3000/paymentcompleted',
fail_url: 'http://localhost:3000/shoppingcart',
cancel_url: 'http://localhost:3000/shoppingcart',
})
})
const data = await response.json()
window.location.href = data.redirect_url
} else {
console.log(response.data)
console.log(response2.data)
console.log(response3.data)
alert("주문이 완료되었습니다.")
history.push('/paymentcompleted')
}
} catch (error) {
catchErrors(error, setError)
alert("주문에 실패하셨습니다. 다시 확인해주세요.")
}
}
function deleteCart() {
//장바구니 DB에서 해당 항목 삭제
console.log('카트에 담긴 항목을 삭제했습니다.')
}
if (redirect) {
console.log(redirect)
return <Redirect to={'/kakao'} />
}
return (
<div>
{/* {console.log(completeState)} */}
<Container>
<h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
<div>
......@@ -154,15 +244,15 @@ function Payment() {
<Form>
<Form.Group controlId="formBasicName">
<Form.Label>이름</Form.Label>
<Form.Control type="text" placeholder="윤지원" />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>이메일</Form.Label>
<Form.Control type="email" placeholder="jiwon5393@naver.com" />
<Form.Control type="text" value={userData.name} readOnly />
</Form.Group>
<Form.Group controlId="formBasicTel">
<Form.Label>휴대전화</Form.Label>
<Form.Control type="tel" placeholder="010-0000-0000" />
<Form.Control type="tel" value={userData.tel} readOnly />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>이메일</Form.Label>
<Form.Control type="email" value={userData.email} readOnly />
</Form.Group>
</Form>
</Col>
......@@ -176,13 +266,17 @@ function Payment() {
<Form>
<Form.Group>
<Form.Label>이름</Form.Label>
<Form.Control></Form.Control>
<Form.Control type="text" name="name" onChange={handleReceiverInfo}></Form.Control>
</Form.Group>
<Form.Group>
<Form.Label>휴대전화</Form.Label>
<Form.Control type="text" name="tel" onChange={handleReceiverInfo}></Form.Control>
</Form.Group>
<Form.Group controlId="formBasicAdd">
<Form.Label>주소</Form.Label>
<Form.Row>
<Col xs={4} sm={4}>
<Form.Control type="text" id="add" value={address.zone} disabled={(address.zone == null) ? false : true} placeholder="우편번호" required ></Form.Control>
<Form.Control type="text" name="postalCode" id="add" onChange={handleReceiverInfo} value={address.code} disabled={(address.code == null) ? false : true} placeholder="우편번호" required ></Form.Control>
</Col>
<Col >
<Button style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-1" onClick={postClick}>우편번호</Button>
......@@ -191,72 +285,46 @@ function Payment() {
</Form.Row>
<Form.Row>
<Col>
<Form.Control type="text" id="add1" value={address.full} disabled={(address.zone == null) ? false : true} placeholder="주소" required></Form.Control>
<Form.Control type="text" id="add2" placeholder="상세주소" required></Form.Control>
<Form.Control type="text" name="address" id="add1" onChange={handleReceiverInfo} value={address.full} disabled={(address.code == null) ? false : true} placeholder="주소" required></Form.Control>
<Form.Control type="text" name="address2" id="add2" onChange={handleReceiverInfo} placeholder="상세주소" required></Form.Control>
<Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback>
</Col>
</Form.Row>
</Form.Group>
<Form.Group>
<Form.Label>휴대전화</Form.Label>
<Form.Control></Form.Control>
</Form.Group>
</Form>
</Col>
</Row>
</div>
<div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
<Card >
<Row className="mx-1">
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<input type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text>
<div>
<input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div>
</Card.Body>
</Col>
</Row>
</Card>
<PaymentCard cart={cart} deleteOrder={deleteOrder} />
</div>
<div className="p-5 m-5" style={{ background: '#F7F3F3' }}>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}>
<li>
<span className="text-secondary">총 상품금액</span>
<span className="text-secondary float-right">12,000원</span>
<span className="text-secondary float-right">{finalPrice}원</span>
</li>
<li>
<span className="text-secondary">배송비</span>
<span className="text-secondary float-right">2,500원</span>
<span className="text-secondary float-right">2500원</span>
</li>
</ul>
<div className="my-1 pt-2 border-top font-weight-bold">
결제금액<span className="float-right">14,500원</span>
결제금액<span className="float-right">{finalPrice + 2500}원</span>
</div>
</div>
<div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
<div className="text-center mt-5">
<Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
<input type="image" alt="카카오페이결제" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} />
<div className="text-center m-3">
<Button className="align-top m-1" variant="success" onClick={handleClick} style={{ height: '42px' }}>무통장입금</Button>
<Button className="align-top m-1 p-0" style={{ borderColor: "#ffeb00" }} type="button" onClick={kakaopay} alt="카카오페이"><img src="icon/payment_icon_yellow_small2.png" /></Button>
</div>
{paymentWay}
</div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/account" block>결제완료</Button>
<Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button>
</div>
</Container>
</div>
......
client/src/Pages/PaymentCompleted.js 0 → 100644
View file @ 9e604666
import React, { useState, useEffect } from 'react'
import axios from 'axios';
import { isAuthenticated } from '../utils/auth'
import catchErrors from '../utils/catchErrors';
import { Card, Row, Col, Button, Alert } from 'react-bootstrap';
import { Link } from 'react-router-dom';
function PaymentCompleted() {
const user = isAuthenticated()
const [error, setError] = useState()
const [order, setOrder] = useState([])
const [total, setTotal] = useState(0)
const [receiverInfo, setReceiverInfo] = useState({})
useEffect(() => {
getOrder()
}, [user])
async function getOrder() {
try {
setError('')
const response = await axios.get(`/api/order/showorder/${user}`)
console.log(response.data)
setOrder(response.data.products)
setTotal(response.data.total)
setReceiverInfo(response.data.receiverInfo)
} catch (error) {
catchErrors(error, setError)
}
}
return (
<div>
<div className="mx-3 my-5 text-center px-3 py-4 border">
<div className="mb-1">
<h5 className=" font-weight-bold" style={{ display: 'inline' }}>고객님의 </h5>
<h5 className=" font-weight-bold text-danger" style={{ display: 'inline' }}>주문이 완료</h5>
<h5 className=" font-weight-bold " style={{ display: 'inline' }}>되었습니다!</h5>
</div>
<div className="mb-0">주문내역 확인은 마이페이지의 </div>
<div> "주문/배송조회"에서 하실 수 있습니다.</div>
</div>
<h3 className="text-center font-weight-bold my-3">주문내역</h3>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>받는사람 정보</h5>
<div className="m-3">
<Row>
<Col xs={4} className="text-right">이름</Col>
<Col>{receiverInfo.name}</Col>
</Row>
<Row>
<Col xs={4} className="text-right">전화번호</Col>
<Col>{receiverInfo.tel}</Col>
</Row>
<Row>
<Col xs={4} className="text-right">주소</Col>
<Col>{receiverInfo.address}{receiverInfo.address2}</Col>
</Row>
</div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문 상품 정보</h5>
{order.map((e) => (
<Card className="mx-2">
<Row className="mx-1">
<Col className="text-center">
<Card.Img className="img-fluid" variant="top" src={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} />
</Col>
<Col md={6} className="p-2">
<Card.Body>
<Card.Title className="font-weight-bold mt-3">{e.productId.pro_name}</Card.Title>
<Card.Text className="mb-0">가격: {e.productId.price}원</Card.Text>
<Card.Text className="mb-0">옵션: {e.size}/{e.color}</Card.Text>
<Card.Text>수량: {e.count}</Card.Text>
</Card.Body>
</Col>
</Row>
</Card>
))
}
<Row className="m-3 font-weight-bold py-3" style={{ background: '#F7F3F3' }}>
<Col xs={6} className="text-right">총 결제금액:</Col>
<Col>{total}원</Col>
</Row>
<div className="text-center my-3">
<Button href="/" className="mx-1" style={{ background: "#91877F", borderColor: '#91877F', width: "7rem" }}>홈으로</Button>
<Button href="/account" className="mx-1" style={{ background: "#91877F", borderColor: '#91877F', width: "7rem" }}>마이페이지</Button>
</div>
</div>
)
}
export default PaymentCompleted
client/src/Pages/Product.js
View file @ 9e604666
import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Card, Button } from 'react-bootstrap';
import { Row, Col, Form, Card, Button, Modal } from 'react-bootstrap';
import { Redirect, useHistory } from 'react-router-dom';
import catchErrors from '../utils/catchErrors';
const preCart = []
function Product({ match, location }) {
const [product, setProduct] = useState(location.state)
const [cart, setCart] = useState(location.state)
const [color, setColor] = useState("")
const [size, setSize] = useState("")
const [cart, setCart] = useState([])
const [error, setError] = useState('')
const [selected, setSelected] = useState({ sizes: false, colors: false })
const [count, setCount] = useState(1)
const [price, setPrice] = useState(0)
const [show, setShow] = useState(false);
let history = useHistory();
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
useEffect(() => {
if (selected.sizes === true && selected.colors === true) {
if (size && color) {
pushOptions()
console.log(preCart)
// console.log(cart)
}
}, [cart])
}, [size, color])
function handleClick(e) {
const box = e.target.parentNode.parentNode
......@@ -26,79 +33,126 @@ function Product({ match, location }) {
}
function pushOptions() {
preCart.push(cart)
selected.sizes = false
selected.colors = false
setPrice(product.price+price)
// console.log(cart)
const a = cart.map(el => {
const rObj = {}
rObj["color"] = el.color;
rObj["size"] = el.size;
return rObj
})
const isDuplicated = a.some(el => el.color === color && el.size === size)
if (isDuplicated) {
selected.sizes = false
selected.colors = false
setColor("")
setSize("")
alert("이미 선택한 옵션입니다.")
} else {
selected.sizes = false
selected.colors = false
setCart([...cart, { color, size, productId: product.id, count: 1 , checked:false}])
setColor("")
setSize("")
setPrice(product.price + price)
}
}
function handleChange(e) {
const { name, value } = e.target
if (e.target.name === "sizes") {
setCart({ ...cart, [name]: value })
if (name === "sizes") {
setSize(value)
selected.sizes = true
} else if (e.target.name === "colors") {
setCart({ ...cart, [name]: value })
} else if (name === "colors") {
setColor(value)
selected.colors = true
}
// setCart({ ...cart, [name]: value })
// handleCreate()
}
function listDelete(e) {
function deleteOption(e) {
e.preventDefault()
const parent = e.target.parentNode
parent.remove()
let preprice = 0
const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
asd.map((el) => {
preprice = preprice + el.count * product.price
})
setCart(asd)
setPrice(Number(preprice))
}
function handleCreate() {
// if (product !== undefined) {
// if (product.colors !== "" && product.sizes !== "") {
// cart.push(
// <div className="d-flex justify-content-between my-2" >
// <p>{product.color} {product.size} </p>
// <input name="count" type="number" min="0" max="10" style="width: 40px" onChange={handleChange} />
// <p style="margin-bottom: 0px">{product.price}</p>
// </div>
// )
// const list = document.getElementById('list')
// list.style.borderBottom = "1px solid"
// const shopping = document.createElement('div')
// shopping.className = "d-flex justify-content-between my-2"
// shopping.innerHTML = `${product.color} / ${product.size}
// <input type="number" min="0" max="10" value="1" style="width: 40px" />
// <p style="margin-bottom: 0px">14,000원</p>`
// const deleteA = document.createElement('a')
// deleteA.innerText = 'X'
// deleteA.addEventListener('click', listDelete)
// shopping.appendChild(deleteA)
// list.appendChild(shopping)
// }
// }
function handleCount(e) {
const addCount = cart.map((el) => {
if (el.color !== e.target.id || el.size !== e.target.name) {
return { ...el }
} else {
return { ...el, count: e.target.value }
}
})
let preprice = 0
addCount.map((el) => {
preprice = preprice + el.count * product.price
})
setPrice(Number(preprice))
setCart(addCount)
setCount(e.value)
}
async function addCart() {
// preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
try {
setError('')
const response = await axios.put('/api/cart/addcart', {
userId: localStorage.getItem('loginStatus'),
productId: "a8f4d63ead77717f940a2b27deb707a6",
products: preCart
})
console.log(response)
} catch (error) {
catchErrors(error, setError)
async function addCart(event) {
console.log(cart)
if (cart.length < 1) {
alert("옵션을 선택해주세요")
}
else if (localStorage.getItem('id')) {
if (event.target.name === "shoppingcart") {
// preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
try {
setError('')
const response = await axios.put('/api/cart/addcart', {
userId: localStorage.getItem('id'),
products: cart
})
console.log(response.data)
setShow(true)
} catch (error) {
catchErrors(error, setError)
}
} else {
try {
setError('')
cart.map((el)=>{
el.checked = true
})
const response = await axios.put('/api/cart/addcart', {
userId: localStorage.getItem('id'),
products: cart
})
console.log(response.data)
history.push("/payment")
} catch (error) {
catchErrors(error, setError)
}
}
} else {
alert("로그인을 해주세요.")
return <Redirect to='/login' />
}
}
// useEffect(() => {
// handleCreate()
// }, [product])
return (
<div>
{console.log("match=",match.params, "location=",location.state, "product=",product)}
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>장바구니에 상품담기</Modal.Title>
</Modal.Header>
<Modal.Body>정상적으로 장바구니에 상품을 담았습니다.</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>쇼핑계속하기</Button>
<Button variant="primary" href='/shoppingcart'>장바구니로 이동</Button>
</Modal.Footer>
</Modal>
{/* {console.log(cart)} */}
<style type="text/css">
{`
.btn {
......@@ -122,30 +176,39 @@ function Product({ match, location }) {
<Form style={{ borderBottom: "1px solid" }}>
<Form.Group style={{ borderBottom: "1px solid", paddingBottom: "2rem" }}>
<Form.Label>색상</Form.Label>
<Form.Control as="select" className="mb-2" name="colors" defaultValue="옵션 선택" onChange={handleChange}>
<Form.Control as="select" className="mb-2" name="colors" value={color} defaultValue="옵션 선택" onChange={handleChange}>
<option>옵션선택</option>
{product.colors.map((e) => (
<option>{e}</option>
))}
</Form.Control>
<Form.Label>사이즈</Form.Label>
<Form.Control as="select" className="mb-2" name="sizes" defaultValue="옵션 선택" onChange={handleChange}>
<Form.Control as="select" className="mb-2" name="sizes" value={size} defaultValue="옵션 선택" onChange={handleChange}>
<option>옵션선택</option>
{product.sizes.map((e) => (
<option>{e}</option>
))}
</Form.Control>
</Form.Group>
{preCart.map((e) => (
<div>{e.colors}/{e.sizes}</div>
{cart.map((e) => (
<Row className="mx-1">
<Col xs={6}>{e.color}/{e.size}</Col>
<Col xs={4} className="text-right" >
<input type='number' id={e.color} name={e.size} onChange={handleCount} value={count} style={{ width: '3rem' }} className="text-center" />
</Col>
<Col xs={2} className="text-right">
<input onClick={deleteOption} id={e.color} name={e.size} type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="align-middle" />
</Col>
</Row>
))}
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Col>총 금액</Col>
<Col className="text-right">{price}원</Col>
</Row>
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Button onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
<Button style={{ width: "49%" }}>구매하기</Button>
<Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
<Button type='button' name="payment" onClick={addCart} style={{ width: "49%" }}>구매하기</Button>
</Row>
</Form>
</Col>
......@@ -159,7 +222,7 @@ function Product({ match, location }) {
<Row className="justify-content-center mx-0 pt-3 px-2" style={{ position: "fixed", bottom: "0", width: "100%", backgroundColor: "#fff" }}>
<Col sm={12} md={9}>
<h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천
<a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem" }}>X</a>
<a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem", cursor: "pointer" }}>X</a>
</h6>
<Row className="justify-content-space mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
......
client/src/Pages/ProductRegist.js
View file @ 9e604666
import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
import { Row, Col, Button, Form, Container, Alert, Spinner } from 'react-bootstrap';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
......@@ -23,13 +23,17 @@ function ProductsRegist() {
}
const [categories, setCategories] = useState({ 0: [], 1: [[]] })
const [product, setProduct] = useState(INIT_PRODUCT)
const [categoryNum, setCategoryNum] = useState(0)
const [categoryNum, setCategoryNum] = useState('')
const [tag, setTag] = useState(0)
const [subCate, setSubCate] = useState('')
const [color, setColor] = useState({})
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": false })
const [disabled, setDisabled] = useState(true)
const [loading, setLoading] = useState(false)
const selectRef = useRef(null)
const colorRef = useRef(null)
useEffect(async () => {
try {
......@@ -41,28 +45,37 @@ function ProductsRegist() {
}
}, [])
function addCategory() {
list.push(
<div>
<span name={subCate} >{product["main_category"]} / {subCate} </span>
<input name={subCate} type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteCategory} />
</div>)
setTag(tag + 1)
console.log(list)
useEffect(() => {
const isProduct = Object.values(product).every(el => { console.log("el=", el); Boolean(el) })
isProduct ? setDisabled(false) : setDisabled(true)
}, [product])
function addCategory(e) {
if (selectRef.current.value === '') {
alert('하위 분류를 반드시 선택해 주세요.')
} else {
list.push(
<div>
<span name={subCate} >{product["main_category"]} / {subCate} </span>
<input name={subCate} type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteCategory} />
</div>)
setTag(tag + 1)
selectRef.current.selectedIndex = 0
}
}
function deleteCategory(e) {
e.target.parentNode.remove()
const index = product["sub_category"].findIndex((item)=>{return item === e.target.name})
const index = product["sub_category"].findIndex((item) => { return item === e.target.name })
product["sub_category"].splice(index, 1)
setSubCate('')
console.log(product["sub_category"].length)
}
function handleCategory(e) {
const { name, value } = e.target
if (e.target.name === "main_category") {
setCategoryNum(e.target.selectedIndex - 1)
const { name, value, selectedIndex } = e.target
if (name === "main_category") {
setCategoryNum(selectedIndex - 1)
}
if (name === "sub_category") {
product[name].push(value)
......@@ -70,7 +83,6 @@ function ProductsRegist() {
} else {
setProduct({ ...product, [name]: value })
}
console.log(value)
}
function handleCheckBox(e) {
......@@ -85,15 +97,16 @@ function ProductsRegist() {
<input name={subCate} type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteColor} />
</div>
)
setColor({})
colorRef.current.value = ''
setProduct({ ...product, "colors": preColors })
}
function deleteColor(e) {
// console.log("e.name=",e.target.name)
e.target.parentNode.remove()
product["colors"].splice(e.name, 1)
setColor({})
console.log(product)
// setColor({})
// console.log(product)
}
function handleColor(e) {
......@@ -102,13 +115,11 @@ function ProductsRegist() {
function handleChange(event) {
const { name, value, files } = event.target
console.log("event.target.name=", name, "event.target.value=", value)
if (files) {
setProduct({ ...product, [name]: files })
} else {
setProduct({ ...product, [name]: value })
}
}
async function handleSubmit(e) {
......@@ -120,25 +131,35 @@ function ProductsRegist() {
}
}
product["sizes"] = sizes
console.log(product)
const formData = new FormData();
for (let key in product) {
if (key === "main_image" ||key === "detail_image") {
console.log(product[key][0])
if (key === "main_image" || key === "detail_image") {
formData.append(key, product[key][0])
} else {
} else if (key === "sizes" || key === "colors" || key === "sub_category") {
for (let i = 0; i < product[key].length; i++) {
formData.append([key], product[key][i])
}
}
else {
formData.append(key, product[key])
}
}
try {
setLoading(true)
setError('')
const response = await axios.post('/api/product/regist', formData)
console.log(response)
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
} finally {
setLoading(false)
}
}
if (success) {
alert('상품 등록을 완료하였습니다.')
return <Redirect to='/admin' />
}
......@@ -173,11 +194,11 @@ function ProductsRegist() {
</Form.Control>
</Col>
<Col md={6}>
<Form.Control as="select" name="sub_category" onChange={handleCategory} disabled={product["main_category"] === "TRAINING"}>
<Form.Control as="select" ref={selectRef} name="sub_category" onChange={handleCategory}>
<option value="" >하위분류</option>
{categories[1][categoryNum].map((sub) => (
{(categoryNum === '') ? '' : (categories[1][categoryNum].map((sub) => (
<option value={sub}>{sub}</option>
))}
)))}
</Form.Control>
</Col>
<Col >
......@@ -188,18 +209,37 @@ function ProductsRegist() {
</Form.Group>
<Form.Group>
<Form.Label>사이즈</Form.Label>
<Form.Check type="checkbox" name="sizes" label="Free" value="Free" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="XL" value="XL" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="L" value="L" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="M" value="M" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="S" value="S" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="XS" value="XS" onChange={handleCheckBox} />
<Row>
<Col>
<Form.Check type="checkbox" name="sizes" label="210" value="210" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="215" value="215" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="220" value="220" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="225" value="225" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="230" value="230" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="235" value="235" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="240" value="240" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="245" value="245" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="250" value="250" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="255" value="255" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="260" value="260" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="265" value="265" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="270" value="270" onChange={handleCheckBox} />
</Col>
<Col>
<Form.Check type="checkbox" name="sizes" label="FREE" value="FREE" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="XL" value="XL" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="L" value="L" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="M" value="M" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="S" value="S" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="XS" value="XS" onChange={handleCheckBox} />
</Col>
</Row>
</Form.Group>
<Form.Group>
<Form.Label>색상</Form.Label>
<Row>
<Col md={10}>
<Form.Control as="textarea" rows={1} name="colors" value={color["colors"]} placeholder="색상" onChange={handleColor} />
<Form.Control as="input" ref={colorRef} name="colors" placeholder="색상" onChange={handleColor} />
</Col>
<Col>
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
......@@ -207,7 +247,6 @@ function ProductsRegist() {
</Row>
{colorHtml.map((element) => element)}
</Form.Group>
<Form.Group controlId="productDescriptionform">
<Form.Label>상품설명</Form.Label>
<Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} />
......@@ -220,7 +259,9 @@ function ProductsRegist() {
<Form.Label>상세이미지</Form.Label>
<Form.File id="productImageform" name="detail_image" onChange={handleChange} />
</Form.Group>
<Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
<Button type="submit" style={{ background: '#91877F', borderColor: '#91877F' }} block>
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />}{' '}등록
</Button>
</Form>
</Col>
</Row>
......
client/src/Pages/ProductsList.js
View file @ 9e604666
import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import Pagination from '../Components/Pagination';
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors';
import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup } from 'react-bootstrap';
function ProductsList({ match }) {
const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
const [subcategory, setSubcategory] = useState([])
const [productlist, setProductlist] = useState([])
const [bestlist, setBestlist] = useState([])
const [newlist, setNewlist] = useState([])
const [sub, setSub] = useState([])
const [error, setError] = useState('')
// const user=isAuthenticated()
useEffect(() => {
setMainCategory(match.params.main.toUpperCase())
}, [match.params.main])
useEffect(() => {
// getSubsCategories()
getSubsCategories([])
getProductlist()
}, [mainCategory])
useEffect(() => {
setMainCategory(match.params.main.toUpperCase())
}, [match.params.main])
function handleSearch() {
}
// async function handleClick(subCategory) {
// try {
// const response = await axios.get(`/api/product/getproduct/${subCategory}`)
// console.log("response.data=", response.data)
// setProductlist(response.data)
// } catch (error) {
// catchErrors(error, setError)
// }
// }
// function handleSubmit(e) {
// e.preventDefault()
// }
// async function getSubsCategories() {
// try {
// const response = await axios.get(`/api/categories/sub/${mainCategory}`)
// console.log("sub", response.data)
// setSubcategory(response.data)
// } catch (error) {
// catchError(error, setError)
// }
// }
async function getProductlist() {
async function getSubsCategories([]) {
try {
const response = await axios.get(`/api/product/getproduct/${mainCategory}`)
console.log("response.data=", response.data)
setProductlist(response.data)
const response = await axios.get(`/api/categories/sub/${mainCategory}`)
setSubcategory(Object.values(response.data)[0])
console.log("response data=", response.data)
console.log("object value=", Object.values(response.data));
} catch (error) {
catchError(error, setError)
}
}
function handleClick(e){
e.preventDefault()
return getsubproductlist()
}
async function getsubproductlist(){
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct/${subcategory}`)
console.log("response.data sub=",response.data)
const response = await axios.get(`/api/product/getproduct/${mainCategory}`)
console.log("response.data=", response.data)
setProductlist(response.data)
} catch (error) {
catchErrors(error,setError)
catchError(error, setError)
}
}
return (
<div>
{console.log("main=",mainCategory)}
<style type="text/css">
{`
a, a:hover, a:active {
......@@ -104,35 +71,48 @@ function ProductsList({ match }) {
`}
</style>
<Container>
<Row className="justify-content-center" >
<Row className="justify-content-center">
<Col sm={10} xs={12} >
<h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
<div className="text-center">{subcategory.map((ele) => (
<Button className="m-1" onClick={(ele) => handleClick(ele)}>{ele}</Button>
))}</div>
<div className="text-center">
<ButtonGroup className="m-3" variant="outline-light secondary" style={{ display: "inline-block" }}>
{subcategory.map(el => (<Button className="m-1" variant="secondary">{el}</Button>))}
</ButtonGroup>
</div>
</Col>
</Row>
<Row className="justify-content-end mx-0 my-5">
{/* <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0"> */}
<Dropdown>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >인기상품</Dropdown.Item>
<Dropdown.Item >신상품</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
{/* </Form> */}
<Dropdown>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>인기상품</Dropdown.Item>
<Dropdown.Item>신상품</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
</Row>
<Row md={8} sm={12} className="justify-content-start m-2">
<Row md={8} sm={12} className="justify-content-center m-2">
{productlist.map(pro => (
// <ListCard as={Link} id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} to={{
// pathname: `/product/${pro._id}`,
// state: {
// id: pro._id,
// name: pro.pro_name,
// price: pro.price,
// colors: pro.colors,
// sizes: pro.sizes,
// description: pro.description,
// main_img: pro.main_imgUrl,
// detail_imgs: pro.detail_imgUrls
// }
// }} />
<Link to={{
pathname: `/product/${pro._id}`,
state: {
......@@ -151,7 +131,6 @@ function ProductsList({ match }) {
))}
</Row>
</Container>
{/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */}
</div>
)
}
......
client/src/Pages/ShoppingCart.js
View file @ 9e604666
......@@ -7,50 +7,94 @@ import { isAuthenticated } from '../utils/auth'
import CartCard from '../Components/CartCard';
function ShoppingCart() {
const [num, setNum] = useState()
const [error, setError] = useState('')
const [cart, setCart] = useState([])
const [finalCart, setFinalCart] = useState([])
const [finalPrice, setFinalPrice] = useState(0)
const user = isAuthenticated()
useEffect(() => {
getCart()
// console.log(cart)
}, [user])
function plusNum() {
num = num + 1
setNum(num + 1)
function plusNum(e) {
const addCount = cart.map((el) => {
if (el._id === e.target.name) {
return { ...el, count: el.count+1}
} else {
return { ...el }
}
})
setCart(addCount)
}
function minusNum() {
if (num === 0) {
setNum(0)
}
else {
setNum(num - 1)
}
function minusNum(e) {
const addCount = cart.map((el) => {
if (el._id === e.target.name) {
return { ...el, count: el.count-1 }
} else {
return { ...el }
}
})
setCart(addCount)
}
function checkedCart(e) {
let price = 0
const cartCheck = cart.map((el) => {
if (el._id === e.target.name) {
return { ...el, checked: !el.checked }
} else {
return { ...el }
}
})
const asd = cartCheck.filter((el) => el.checked === true)
asd.map((el)=>{
price = el.count*el.productId.price + price
})
setFinalPrice(price)
setCart(cartCheck)
setFinalCart(asd)
}
async function deleteCart(e) {
//장바구니 DB에서 해당 항목 삭제
console.log(e.target.name)
// console.log(e.target.name)
try {
const response = await axios.post('/api/cart/deletecart', { cartId: e.target.name })
const response = await axios.post('/api/cart/deletecart', {
userId: user,
cartId: e.target.name
})
console.log(response.data)
setCart(response.data.products)
} catch (error) {
catchErrors(error, setError)
}
console.log('카트에 담긴 항목을 삭제했습니다.')
// console.log('카트에 담긴 항목을 삭제했습니다.')
}
async function getCart() {
try {
setError('')
const response = await axios.get(`/api/cart/showcart/${user}`)
console.log(response.data)
setCart(response.data)
const finalPrices = response.data.map((e) => {
return e.count * e.productId.price
const addChecked = response.data.map((el) => {
return { ...el, checked: false }
})
setFinalPrice(finalPrices.reduce((a, b) => (a + b)))
console.log("addchecked=",addChecked)
setCart(addChecked)
} catch (error) {
catchErrors(error, setError)
}
}
function putCheckedCart(){
try {
setError('')
const response = axios.post(`/api/cart/changecart`, {
userId:user,
products: cart
})
console.log(response.data)
} catch (error) {
catchErrors(error, setError)
}
......@@ -58,12 +102,13 @@ function ShoppingCart() {
return (
<div>
{/* {console.log(cart)} */}
<Container className="justify-content-center">
<h1 className="my-5 font-weight-bold text-center">장바구니</h1>
<div>
<h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
{cart.length >0
? <CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} num={num} />
{cart.length > 0
? <CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} checkedCart={checkedCart} />
: <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
</div>
......@@ -84,9 +129,9 @@ function ShoppingCart() {
</div>
<div className="text-center">
<Button as={Link} to={{
pathname: `/payment`,
state: { cart }
}} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제하기</Button>
pathname: `/payment`,
state: finalCart
}} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button>
</div>
</Container>
......
client/src/Pages/Signup.js
View file @ 9e604666
......@@ -10,7 +10,8 @@ const INIT_USER = {
id: '',
password: '',
password2: '',
tel: ''
tel: '',
email: ''
}
function Signup() {
......@@ -61,134 +62,157 @@ function Signup() {
if (success) {
alert('회원가입 되었습니다.')
return <Redirect to='/login'/>
return <Redirect to='/login' />
}
return (
<div>
<Container className="my-5">
return (
<div>
<Container className="my-5">
<Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center mt-5">Sign Up</h2>
{error && <Alert variant='danger'>
{error}
</Alert>}
<Form
noValidate validated={validated}
onSubmit={handleSubmit}
className="p-5">
<Form.Group controlId="formBasicName">
<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="name"
placeholder="Name"
style={{ width: '160px' }}
value={user.name}
onChange={handleChange} />
<Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicNumber">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col>
<Col as={Row} sm={8} xs={10} >
<Form.Control
<Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center mt-5">Sign Up</h2>
{error && <Alert variant='danger'>
{error}
</Alert>}
<Form
noValidate validated={validated}
onSubmit={handleSubmit}
className="p-5">
<Form.Group controlId="formBasicName">
<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="number1"
maxlength="6"
className="mx-2" style={{ width: '17 0px' }}
value={user.number1}
onChange={handleChange}>
</Form.Control>
-
<Form.Control
required type="text"
name="number2"
maxlength="1" className="mx-3"
style={{ width: '50px' }}
value={user.number2}
onChange={handleChange}>
</Form.Control>
******
<Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
</Col>
</Form.Row>
</Form.Group>
<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"
style={{ width: '160px' }}
value={user.id}
onChange={handleChange} />
<Form.Control.Feedback 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"
placeholder="Password"
style={{ width: '160px' }}
value={user.password}
required
onChange={handleChange}
/>
<Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요.
name="name"
placeholder="Name"
style={{ width: '160px' }}
value={user.name}
onChange={handleChange} />
<Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicNumber">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col>
<Row>
<Form.Control
required type="text"
name="number1"
maxlength="6"
className="mx-3 p-1" style={{ width: '80px' }}
value={user.number1}
onChange={handleChange}>
</Form.Control>
<div className='font-weight-bold d-flex align-items-center' style={{ text: 'center' }}>
-
</div>
<Form.Control
required type="text"
name="number2"
maxlength="1" className="mx-3 p-1"
style={{ width: '30px' }}
value={user.number2}
onChange={handleChange}>
</Form.Control>
<div className='font-weight-bold d-flex align-items-center'>
* * * * * *
</div>
<Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
</Row>
</Form.Row>
</Form.Group>
<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"
style={{ width: '160px' }}
value={user.id}
onChange={handleChange} />
<Form.Control.Feedback 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"
placeholder="Password"
style={{ width: '160px' }}
value={user.password}
required
onChange={handleChange}
/>
<Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword2">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col>
<Col sm={8} xs={12} as={Form.Control}
type="password"
name="password2"
placeholder="Password"
style={{ width: '160px' }}
value={user.password2}
required
onChange={handleChange}
/>
<Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword2">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col>
<Col sm={8} xs={12} as={Form.Control}
type="password"
name="password2"
placeholder="Password"
style={{ width: '160px' }}
value={user.password2}
required
onChange={handleChange}
/>
<Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicTel">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col>
<Col sm={8} xs={12} as={Form.Control}
required
type="text"
name="tel"
size="sm" style={{ width: '160px' }}
value={user.tel}
onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Button
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block
onClick={checkPassword}
>
Sign Up
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="email">이메일</Col>
<Col sm={8} xs={12} as={Form.Control}
required type="email"
name="email"
placeholder="E-mail"
style={{ width: '160px' }}
value={user.email}
onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 이메일 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicTel">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col>
<Col sm={8} xs={12} style={{ width: '160px' }} className='p-0'>
<Col
as={Form.Control}
required type="text"
name="tel"
placeholder="Telephone"
className='p-1'
value={user.tel}
onChange={handleChange}>
</Col>
<div className='d-flex justify-content-end mt-1'><small >' - ' 를 함께 입력해주세요^^</small></div>
</Col>
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Button
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block
onClick={checkPassword}
>
Sign Up
</Button>
</Form>
</Col>
</Row>
</Container>
</div>
)
</Form>
</Col>
</Row>
</Container>
</div>
)
}
export default Signup
\ No newline at end of file
client/src/utils/auth.js
View file @ 9e604666
import axios from "axios"
import axios from "axios";
export function handleLogin({userId,adminId,role,name}){
localStorage.setItem('id',userId)
localStorage.setItem('role',role)
localStorage.setItem('name',name)
localStorage.setItem('adminId',adminId)
export function handleLogin({ userId, role, name, tel, email }) {
localStorage.setItem('id', userId)
localStorage.setItem('role', role)
localStorage.setItem('name', name)
localStorage.setItem('tel', tel)
localStorage.setItem('email', email)
}
export async function handleLogout(){
localStorage.removeItem('id')
localStorage.removeItem('role')
localStorage.removeItem('name')
localStorage.removeItem('adminId')
localStorage.removeItem('adminrole')
localStorage.removeItem('adminname')
await axios.get('/api/auth/logout')
export async function handleLogout() {
localStorage.clear()
await axios.get('/api/auth/logout')
window.location.href = '/'
}
export function isAuthenticatedAdmin(){
const adminId= localStorage.getItem('adminId')
if(adminId){
return adminId
export function isAuthenticated() {
const userId = localStorage.getItem('id')
if (userId) {
return userId
} else {
return false
return false
}
}
export function isAuthenticated(){
const userId= localStorage.getItem('id')
if(userId){
return userId
export function isAdmin() {
const role = localStorage.getItem('role')
if (role === 'admin') {
return true
} else {
return false
return false
}
}
\ No newline at end of file
server/app.js
View file @ 9e604666
......@@ -9,6 +9,7 @@ import path from 'path'
import kakaopayRoutes from './routes/kakaopay.routes.js'
import config from './config.js'
import authRouter from './routes/auth.routes.js'
import orderRouter from './routes/order.routes.js'
import cors from 'cors'
fs.readdir('uploads', (error) => {
......@@ -33,6 +34,7 @@ app.use('/api/users',userRouter)
app.use('/api/auth',authRouter)
app.use('/api/product', productRouter)
app.use('/api/cart', cartRouter)
app.use('/api/order', orderRouter)
app.listen(config.port, () => {
console.info('Server started on port %s.', config.port)
......
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