Skip to content

GitLab

Commit 25a9bb54 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'ourMaster' into jiwon

parents 8d8a98af 221883bb
Hide whitespace changes
Inline Side-by-side
client/src/Components/CartCard.js deleted 100644 → 0
View file @ 8d8a98af
import React from 'react'
import { Card, Row, Col } from 'react-bootstrap';
function CartCard(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" 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._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 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" 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>
</Row>
</Card>
))
}
</>
)
}
export default CartCard
client/src/Components/ListCard.js
View file @ 25a9bb54
import React from 'react'; import React from 'react';
import { Card } from 'react-bootstrap'; import { Row, Col, Card } from 'react-bootstrap';
function ListCard({ id, name, price, main_img }) { function ListCard(props) {
return ( if (props.status === 'list') {
<Card id={id} className="m-3" style={{ width: "18rem" }}> return (
<Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} /> <Card id={props.id} className="m-3" style={{ width: "18rem" }}>
<Card.Body> <Card.Img variant="top" src={props.main_img && `/images/${props.main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title> <Card.Body>
<Card.Text>{price} 원</Card.Text> <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{props.name}</Card.Title>
</Card.Body> <Card.Text>{props.price} 원</Card.Text>
</Card> </Card.Body>
) </Card>
)
} else if (props.status === 'recommend') {
return (
<Card id={props.id} className="mx-1" style={{ width: "10rem" }}>
<Card.Img variant="top" src={props.main_img && `/images/${props.main_img}`} style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{props.name}</Card.Title>
<Card.Text>{props.price} 원</Card.Text>
</Card.Body>
</Card>
)
} else if (props.status === 'order') {
return (
<Card >
<Card.Title className="font-weight-bold mt-4 text-center"> 주문 현황</Card.Title>
{
props.ordered.map((e) => (
<Card.Body className='m-1'>
{e.products.length > 1 ?
<Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}>
{e.products[0].productId.pro_name} 외 {e.products.length - 1}개
</Card.Header>
: (
<Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}>
{e.products[0].productId.pro_name}
</Card.Header>)}
<Card.Text>
<Col className='justify-content-center'>
<Row className='justify-content-center' >
<>
<Col sm={3} xs={5} className='p-1'><li>주문번호 :</li></Col>
<Col sm={8} xs={6} className='p-1'><strong>{e._id}</strong></Col>
</>
<Col sm={3} xs={5} className='p-1'><li>결제금액 :</li></Col>
<Col sm={8} xs={6} className='p-1'><strong>{e.total}원</strong></Col>
<Col sm={3} xs={5} className='p-1'><li>배송지 :</li></Col>
<Col sm={8} xs={6} className='p-1'><strong> {e.receiverInfo.address}</strong> <br />( {e.receiverInfo.address2} )</Col>
<Col sm={3} xs={5} className='p-1'><li>주문날짜 :</li></Col>
<Col sm={8} xs={6} className='p-1'><strong>{e.createdAt.substring(0, 10)}</strong></Col>
</Row>
</Col>
</Card.Text>
</Card.Body>
)
)
}
</Card>
)
} else if (props.status === 'cart') {
return (
<>
{props.cart.map((e) => (
<Card>
<Row className="mx-1">
<Col xs={2} sm={2} className="text-center my-auto">
<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._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 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" 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>
</Row>
</Card>
))
}
</>
)
} else if (props.status === 'payment') {
return (
<>
{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>
))
}
</>
)
}
} }
export default ListCard export default ListCard
\ No newline at end of file
client/src/Components/MainNav.js
View file @ 25a9bb54
...@@ -16,10 +16,17 @@ function MainNav() { ...@@ -16,10 +16,17 @@ function MainNav() {
{user ? {user ?
<> <>
<Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link> <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
<Nav.Link className="text-light" href="/account"> Mypage </Nav.Link> {admin ?
<Nav.Link href="/shoppingcart"> ''
<img alt="카트" src="/icon/cart.svg" width="30" height="30" /> : (
</Nav.Link> <>
<Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>
<Nav.Link href="/shoppingcart">
<img alt="카트" src="/icon/cart.svg" width="30" height="30" />
</Nav.Link>
</>
)}
</> </>
: ( : (
<> <>
......
client/src/Components/OrderCard.js deleted 100644 → 0
View file @ 8d8a98af
import React from 'react'
import { Card, Col, Row } from 'react-bootstrap'
function OrderCard(props) {
return (
<Card >
<Card.Title className="font-weight-bold mt-4 text-center"> 주문 현황</Card.Title>
{
props.ordered.map((e) => (
<Card.Body className='m-1'>
{e.products.length > 1 ?
<Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}>
{e.products[0].productId.pro_name} 외 {e.products.length - 1}개
</Card.Header>
: (
<Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}>
{e.products[0].productId.pro_name}
</Card.Header>)}
<Col>
<Row>
<Card.Text> 주문번호 : <strong>{e._id}</strong> </Card.Text>
</Row>
<Row>
<Card.Text> 결제금액 : <strong>{e.total}원</strong> </Card.Text>
</Row>
<Row>
<Card.Text> 배송지 : <strong> {e.receiverInfo.address} - {e.receiverInfo.address2}</strong> </Card.Text>
</Row>
<Row>
<Card.Text> 주문날짜 : <strong> {e.createdAt.substring(0, 10)}</strong> </Card.Text>
</Row>
</Col>
</Card.Body>
)
)
}
</Card>
)
}
export default OrderCard
client/src/Components/Pagination.js
View file @ 25a9bb54
...@@ -7,6 +7,14 @@ function Paginations({ index, totalPages, handlePage }) { ...@@ -7,6 +7,14 @@ function Paginations({ index, totalPages, handlePage }) {
<Pagination className="d-flex justify-content-center"> <Pagination className="d-flex justify-content-center">
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.page-link, .page-link:hover { .page-link, .page-link:hover {
color: #91877F; color: #91877F;
margin: 0; margin: 0;
...@@ -25,7 +33,7 @@ function Paginations({ index, totalPages, handlePage }) { ...@@ -25,7 +33,7 @@ function Paginations({ index, totalPages, handlePage }) {
`} `}
</style> </style>
<Pagination.First onClick={() => handlePage(1)} /> <Pagination.First onClick={() => handlePage(1)} />
{index === 1 ? <Pagination.Prev onClick={()=>handlePage(index)} /> : <Pagination.Prev onClick={()=>handlePage(index - 1)} />} {index === 1 ? <Pagination.Prev disabled /> : <Pagination.Prev onClick={()=>handlePage(index - 1)} />}
{index === totalPages && index > 4 ? <Pagination.Item onClick={()=>handlePage(index - 4)}>{index - 4}</Pagination.Item> : ""} {index === totalPages && index > 4 ? <Pagination.Item onClick={()=>handlePage(index - 4)}>{index - 4}</Pagination.Item> : ""}
{index > 3 && index >= totalPages-1 ? <Pagination.Item onClick={()=>handlePage(index - 3)}>{index - 3}</Pagination.Item> : ""} {index > 3 && index >= totalPages-1 ? <Pagination.Item onClick={()=>handlePage(index - 3)}>{index - 3}</Pagination.Item> : ""}
{index < 3 ? "" : <Pagination.Item onClick={()=>handlePage(index - 2)}>{index - 2}</Pagination.Item>} {index < 3 ? "" : <Pagination.Item onClick={()=>handlePage(index - 2)}>{index - 2}</Pagination.Item>}
...@@ -35,9 +43,9 @@ function Paginations({ index, totalPages, handlePage }) { ...@@ -35,9 +43,9 @@ function Paginations({ index, totalPages, handlePage }) {
{index === totalPages ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>} {index === totalPages ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>}
{index > totalPages-2 ? "" : <Pagination.Item onClick={()=>handlePage(index + 2)}>{index + 2}</Pagination.Item>} {index > totalPages-2 ? "" : <Pagination.Item onClick={()=>handlePage(index + 2)}>{index + 2}</Pagination.Item>}
{index < totalPages-3 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""} {index <= totalPages-3 && index < 3 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
{index < totalPages-4 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 4)}>{index + 4}</Pagination.Item> : ""} {index <= totalPages-4 && index < 2 ? <Pagination.Item onClick={()=>handlePage(index + 4)}>{index + 4}</Pagination.Item> : ""}
{index === totalPages ? <Pagination.Next onClick={()=>handlePage(index)} /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />} {index === totalPages ? <Pagination.Next disabled /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
<Pagination.Last onClick={() =>handlePage(totalPages)} /> <Pagination.Last onClick={() =>handlePage(totalPages)} />
</Pagination> </Pagination>
......
client/src/Components/PaymentCard.js deleted 100644 → 0
View file @ 8d8a98af
import React from 'react'
import { Card, Row, Col } from 'react-bootstrap';
function PaymentCard(props) {
return (
<>
{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>
))
}
</>
)
}
export default PaymentCard
client/src/Components/SubNav.js
View file @ 25a9bb54
...@@ -28,6 +28,14 @@ function SubNav() { ...@@ -28,6 +28,14 @@ function SubNav() {
<Navbar sticky="top" className="flex-nowrap" style={{ top: "56px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}> <Navbar sticky="top" className="flex-nowrap" style={{ top: "56px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.nav-link, .nav-link:hover, .nav-link:active { .nav-link, .nav-link:hover, .nav-link:active {
color: #91877F; color: #91877F;
} }
......
client/src/Pages/Account.js
View file @ 25a9bb54
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Card, Image, Container, Row, Col, Button, Form, Modal } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import axios from 'axios'; import axios from 'axios';
import catchError from '../utils/catchErrors'; import catchError from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
import OrderCard from '../Components/OrderCard'; import { Card, Image, Container, Row, Col, Button, Form, Modal } from 'react-bootstrap';
const INIT_ACCOUNT = { const INIT_ACCOUNT = {
name: "", name: "",
...@@ -21,6 +21,7 @@ function Account() { ...@@ -21,6 +21,7 @@ function Account() {
async function getUsername(user) { async function getUsername(user) {
try { try {
setError('')
const response = await axios.get(`/api/users/account/${user}`) const response = await axios.get(`/api/users/account/${user}`)
setAccount(response.data) setAccount(response.data)
} catch (error) { } catch (error) {
...@@ -63,6 +64,7 @@ function Account() { ...@@ -63,6 +64,7 @@ function Account() {
const formData = new FormData() const formData = new FormData()
formData.append('avatar', account.avatar[0]) formData.append('avatar', account.avatar[0])
try { try {
setError('')
if (userId) { if (userId) {
const response = await axios.put(`/api/users/account/${userId}`, formData) const response = await axios.put(`/api/users/account/${userId}`, formData)
window.location.reload() window.location.reload()
...@@ -77,22 +79,26 @@ function Account() { ...@@ -77,22 +79,26 @@ function Account() {
async function getOrdered() { async function getOrdered() {
try { try {
const response = await axios.post(`/api/users/addorder`, { setError('')
userId: userId const response = await axios.post(`/api/users/addorder`, { userId: userId })
}) const res = response.data
const a = response.data setOrdered(res)
setOrdered(a)
console.log("what=", response.data)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
} }
return ( return (
<Container className="px-3"> <Container className="px-3">
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active { a, a:hover, a:active {
color: #91877F; color: #91877F;
text-decoration-color: #91877F; text-decoration-color: #91877F;
...@@ -122,8 +128,7 @@ function Account() { ...@@ -122,8 +128,7 @@ function Account() {
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Col className="px-0"> <Col className="px-0">
<Button variant="outline-secondary" onClick={handleBasic} <Button variant="outline-secondary" onClick={handleBasic} className="d-flex justify-content-start"><small>기본이미지로</small></Button>
className="d-flex justify-content-start"><small>기본이미지로</small></Button>
</Col> </Col>
<Button variant="secondary" onClick={() => setShow(false)}>취소</Button> <Button variant="secondary" onClick={() => setShow(false)}>취소</Button>
<Button variant="primary" type="submit" onClick={() => setShow(false)}>저장</Button> <Button variant="primary" type="submit" onClick={() => setShow(false)}>저장</Button>
...@@ -180,9 +185,9 @@ function Account() { ...@@ -180,9 +185,9 @@ function Account() {
</Col> </Col>
</Row> </Row>
</Card> </Card>
<Card> <div className='m-2 mb-5'>
<OrderCard ordered={ordered} /> <ListCard ordered={ordered} status={'order'} />
</Card> </div>
</Container > </Container >
) )
} }
......
client/src/Pages/Admin.js
View file @ 25a9bb54
...@@ -68,6 +68,14 @@ function Admin() { ...@@ -68,6 +68,14 @@ function Admin() {
<Container> <Container>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.btn { .btn {
background-color: #CDC5C2; background-color: #CDC5C2;
border-color: #CDC5C2; border-color: #CDC5C2;
...@@ -81,7 +89,7 @@ function Admin() { ...@@ -81,7 +89,7 @@ function Admin() {
border-color: #91877F; border-color: #91877F;
box-shadow: 0 0 0 0; box-shadow: 0 0 0 0;
} }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F; background-color: #91877F;
border-color: #91877F; border-color: #91877F;
} }
......
client/src/Pages/Home.js
View file @ 25a9bb54
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard'; import ListCard from '../Components/ListCard';
import axios from 'axios'; import axios from 'axios';
...@@ -20,6 +20,7 @@ function Home() { ...@@ -20,6 +20,7 @@ function Home() {
async function getProductlist() { async function getProductlist() {
try { try {
setError('')
const response = await axios.get(`/api/product/getproduct`) const response = await axios.get(`/api/product/getproduct`)
setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct }) setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct })
} catch (error) { } catch (error) {
...@@ -31,9 +32,20 @@ function Home() { ...@@ -31,9 +32,20 @@ function Home() {
<Container> <Container>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active { a, a:hover, a:active {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
}
`} `}
</style> </style>
<div className="my-4"> <div className="my-4">
...@@ -53,7 +65,7 @@ function Home() { ...@@ -53,7 +65,7 @@ function Home() {
detail_imgs: pro.detail_imgUrls detail_imgs: pro.detail_imgUrls
} }
}}> }}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} /> <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} status={'list'} />
</Link> </Link>
))} ))}
</Row> </Row>
...@@ -75,7 +87,7 @@ function Home() { ...@@ -75,7 +87,7 @@ function Home() {
detail_imgs: pro.detail_imgUrls detail_imgs: pro.detail_imgUrls
} }
}}> }}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} /> <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} status={'list'} />
</Link> </Link>
))} ))}
</Row> </Row>
......
client/src/Pages/Payment.js
View file @ 25a9bb54
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Redirect, Link, useHistory } from 'react-router-dom'; import { Redirect, Link, useHistory } from 'react-router-dom';
import DaumPostcode from "react-daum-postcode"; import DaumPostcode from "react-daum-postcode";
import PaymentCard from '../Components/PaymentCard'; import ListCard from '../Components/ListCard';
import axios from 'axios'; import axios from 'axios';
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
...@@ -124,7 +124,7 @@ function Payment({ match, location }) { ...@@ -124,7 +124,7 @@ function Payment({ match, location }) {
setCompleteState(false) setCompleteState(false)
setPaymentWay([]) setPaymentWay([])
} else { } else {
const a = ( const bankList = (
<Row className="justify-content-md-center"> <Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-5"> <Col md={6} className="border m-5 p-5">
<Form> <Form>
...@@ -146,14 +146,12 @@ function Payment({ match, location }) { ...@@ -146,14 +146,12 @@ function Payment({ match, location }) {
</Form.Group> </Form.Group>
</Form> </Form>
</Col> </Col>
</Row>) </Row>)
setPaymentWay(a) setPaymentWay(bankList)
} }
} }
async function kakaopay() { async function kakaopay() {
setCompleteState("kakaopay") setCompleteState("kakaopay")
setPaymentWay( setPaymentWay(
<div className="text-center"> <div className="text-center">
...@@ -192,6 +190,7 @@ function Payment({ match, location }) { ...@@ -192,6 +190,7 @@ function Payment({ match, location }) {
} else { } else {
itemNames = cart[0].productId.pro_name itemNames = cart[0].productId.pro_name
} }
setError('')
const response = await fetch('/api/kakaopay/test/single', { const response = await fetch('/api/kakaopay/test/single', {
method: "POST", method: "POST",
headers: { headers: {
...@@ -287,7 +286,7 @@ function Payment({ match, location }) { ...@@ -287,7 +286,7 @@ function Payment({ match, location }) {
</div> </div>
<div> <div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
<PaymentCard cart={cart} deleteOrder={deleteOrder} /> <ListCard cart={cart} deleteOrder={deleteOrder} status={'payment'} />
</div> </div>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}> <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}> <ul className="pl-0" style={{ listStyle: 'none' }}>
...@@ -304,17 +303,17 @@ function Payment({ match, location }) { ...@@ -304,17 +303,17 @@ function Payment({ match, location }) {
결제금액<span className="float-right">{finalPrice + 2500}원</span> 결제금액<span className="float-right">{finalPrice + 2500}원</span>
</div> </div>
</div> </div>
<div> <div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
<div className="text-center m-3"> <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" 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> <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 type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button>
</div> </div>
{paymentWay}
</div>
<div className="text-center">
<Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button>
</div>
</Container> </Container>
) )
} }
......
client/src/Pages/PaymentCompleted.js
View file @ 25a9bb54
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import { isAuthenticated } from '../utils/auth' import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { Card, Row, Col, Button, Alert } from 'react-bootstrap'; import { Card, Row, Col, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
function PaymentCompleted() { function PaymentCompleted() {
const user = isAuthenticated() const user = isAuthenticated()
const [error, setError] = useState() const [error, setError] = useState()
const [order, setOrder] = useState([]) const [order, setOrder] = useState([])
...@@ -22,7 +20,6 @@ function PaymentCompleted() { ...@@ -22,7 +20,6 @@ function PaymentCompleted() {
try { try {
setError('') setError('')
const response = await axios.get(`/api/order/showorder/${user}`) const response = await axios.get(`/api/order/showorder/${user}`)
console.log(response.data)
setNum(response.data._id) setNum(response.data._id)
setOrder(response.data.products) setOrder(response.data.products)
setTotal(response.data.total) setTotal(response.data.total)
...@@ -31,6 +28,7 @@ function PaymentCompleted() { ...@@ -31,6 +28,7 @@ function PaymentCompleted() {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
return ( return (
<div> <div>
<div className="mx-3 my-5 text-center px-3 py-4 border"> <div className="mx-3 my-5 text-center px-3 py-4 border">
...@@ -46,7 +44,6 @@ function PaymentCompleted() { ...@@ -46,7 +44,6 @@ function PaymentCompleted() {
<h3 className="text-center font-weight-bold my-3">주문내역</h3> <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> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>받는사람 정보</h5>
<div className="m-3"> <div className="m-3">
<Row> <Row>
<Col xs={4} className="text-right">이름</Col> <Col xs={4} className="text-right">이름</Col>
<Col>{receiverInfo.name}</Col> <Col>{receiverInfo.name}</Col>
...@@ -61,7 +58,6 @@ function PaymentCompleted() { ...@@ -61,7 +58,6 @@ function PaymentCompleted() {
</Row> </Row>
</div> </div>
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문 상품 정보</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문 상품 정보</h5>
{order.map((e) => ( {order.map((e) => (
<Card className="mx-2"> <Card className="mx-2">
<Row className="mx-1"> <Row className="mx-1">
...@@ -92,4 +88,4 @@ function PaymentCompleted() { ...@@ -92,4 +88,4 @@ function PaymentCompleted() {
) )
} }
export default PaymentCompleted export default PaymentCompleted
\ No newline at end of file
client/src/Pages/Product.js
View file @ 25a9bb54
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect } from 'react';
import { Redirect, useHistory } from 'react-router-dom'; import { Redirect, Link, useHistory } from 'react-router-dom';
import ListCard from "../Components/ListCard";
import axios from 'axios'; import axios from 'axios';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap'; import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap';
...@@ -7,6 +8,7 @@ import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap'; ...@@ -7,6 +8,7 @@ import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap';
function Product({ match, location }) { function Product({ match, location }) {
const [product, setProduct] = useState(location.state) const [product, setProduct] = useState(location.state)
const [productList, setProductList] = useState([])
const [color, setColor] = useState("") const [color, setColor] = useState("")
const [size, setSize] = useState("") const [size, setSize] = useState("")
const [cart, setCart] = useState([]) const [cart, setCart] = useState([])
...@@ -18,23 +20,25 @@ function Product({ match, location }) { ...@@ -18,23 +20,25 @@ function Product({ match, location }) {
let history = useHistory(); let history = useHistory();
const handleClose = () => setShow(false); const handleClose = () => setShow(false);
const handleShow = () => setShow(true); const handleShow = () => setShow(true);
const replace = product.description.replaceAll('{\n\n}', '<br />')
useEffect(() => {
getRecommend()
}, [product])
useEffect(() => {
setProduct(location.state)
}, [location.state])
useEffect(() => { useEffect(() => {
if (size && color) { if (size && color) {
pushOptions() pushOptions()
// console.log(cart)
} }
getRecommend()
}, [size, color]) }, [size, color])
async function getRecommend(){ async function getRecommend(){
try { try {
const response = await axios.get(`/api/order/recommend?products=${product.id}`) const response = await axios.get(`/api/order/recommend?products=${product.id}`)
// const response = await axios.post(`/api/order/recommend`,{ setProductList(response.data)
// productId: product.id
// })
console.log(response.data)
} catch (error) { } catch (error) {
catchErrors(error,setError) catchErrors(error,setError)
} }
...@@ -46,14 +50,13 @@ function Product({ match, location }) { ...@@ -46,14 +50,13 @@ function Product({ match, location }) {
} }
function pushOptions() { function pushOptions() {
// console.log(cart) const cartSet = cart.map(el => {
const a = cart.map(el => { const newObj = {}
const rObj = {} newObj["color"] = el.color;
rObj["color"] = el.color; newObj["size"] = el.size;
rObj["size"] = el.size; return newObj
return rObj
}) })
const isDuplicated = a.some(el => el.color === color && el.size === size) const isDuplicated = cartSet.some(el => el.color === color && el.size === size)
if (isDuplicated) { if (isDuplicated) {
selected.sizes = false selected.sizes = false
selected.colors = false selected.colors = false
...@@ -68,7 +71,6 @@ function Product({ match, location }) { ...@@ -68,7 +71,6 @@ function Product({ match, location }) {
setSize("") setSize("")
setPrice(product.price + price) setPrice(product.price + price)
} }
} }
function handleChange(e) { function handleChange(e) {
...@@ -85,11 +87,11 @@ function Product({ match, location }) { ...@@ -85,11 +87,11 @@ function Product({ match, location }) {
function deleteOption(e) { function deleteOption(e) {
e.preventDefault() e.preventDefault()
let preprice = 0 let preprice = 0
const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name) const list = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
asd.map((el) => { list.map((el) => {
preprice = preprice + el.count * product.price preprice = preprice + el.count * product.price
}) })
setCart(asd) setCart(list)
setPrice(Number(preprice)) setPrice(Number(preprice))
} }
...@@ -139,7 +141,6 @@ function Product({ match, location }) { ...@@ -139,7 +141,6 @@ function Product({ match, location }) {
userId: localStorage.getItem('id'), userId: localStorage.getItem('id'),
products: cart products: cart
}) })
console.log(response.data)
history.push("/payment") history.push("/payment")
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -152,18 +153,35 @@ function Product({ match, location }) { ...@@ -152,18 +153,35 @@ function Product({ match, location }) {
} }
} }
return ( return (
<div> <div>
{console.log(product)}
<style type="text/css"> <style type="text/css">
{` {`
a, a:hover, a:active {
color: #000;
text-decoration: none;
}
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.btn { .btn {
background-color: #CDC5C2; background-color: #CDC5C2;
border-color: #CDC5C2; border-color: #CDC5C2;
} }
.btn:hover {
.btn:hover, .btn:active, .btn:focus { background-color: #91877F;
border-color: #91877F;
}
.btn-primary:focus {
background-color: #91877F;
border-color: #91877F;
box-shadow: 0 0 0 0;
}
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F; background-color: #91877F;
border-color: #91877F; border-color: #91877F;
} }
...@@ -181,7 +199,7 @@ function Product({ match, location }) { ...@@ -181,7 +199,7 @@ function Product({ match, location }) {
</Modal> </Modal>
<Row className="justify-content-center mt-5 mx-0"> <Row className="justify-content-center mt-5 mx-0">
<Col sm={11} md={4}> <Col sm={11} md={4}>
<img src={`/images/${product.main_img}`} style={{ objectFit: "contain", width: "100%" }} /> <img src={`/images/${product.main_img}`} style={{ objectFit: "contain", maxWidth: "100%", height: 'auto' }} />
</Col> </Col>
<Col sm={11} md={4} className="align-middle mt-4"> <Col sm={11} md={4} className="align-middle mt-4">
<h3 className="mb-4">{product.name}</h3> <h3 className="mb-4">{product.name}</h3>
...@@ -220,7 +238,7 @@ function Product({ match, location }) { ...@@ -220,7 +238,7 @@ function Product({ match, location }) {
<Col className="text-right">{price}원</Col> <Col className="text-right">{price}원</Col>
</Row> </Row>
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}> <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }}>장바구니</Button> <Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }} variant="primary" >장바구니</Button>
<Button type='button' name="payment" onClick={addCart} style={{ width: "49%" }}>구매하기</Button> <Button type='button' name="payment" onClick={addCart} style={{ width: "49%" }}>구매하기</Button>
</Row> </Row>
</Form> </Form>
...@@ -231,24 +249,22 @@ function Product({ match, location }) { ...@@ -231,24 +249,22 @@ function Product({ match, location }) {
<h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3"> <h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3">
설명 설명
</h3> </h3>
<Col className='text-center' style={{ fontSize: '1px' }}> <Col className='text-center'>
<div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '50%', margin: 'auto', fontSize: '3.5vmin' }} > <div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '60%', margin: 'auto', fontSize: '3.5vmin' }} >
{product.name} {product.name}
</div> </div>
<Image src={`/images/${product.main_img}`} className='d-flex justify-content-center p-4' style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} /> <Image src={`/images/${product.main_img}`} className='d-flex justify-content-center p-4' style={{ objectFit: "contain", maxWidth: "100%", height: 'auto', margin: 'auto' }} />
<Card style={{ width: '80%', margin: 'auto' }} className='my-4' >
<Card style={{ width: '70%', margin: 'auto' }} className='my-4' >
<Card.Header className='text-center' style={{ background: '#CDC5C2' }}> <Card.Header className='text-center' style={{ background: '#CDC5C2' }}>
<h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5> <h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5>
</Card.Header> </Card.Header>
<Card.Body className='text-center m-4' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1vw' }}> <Card.Body className='text-center m-2' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1.2vw' }}>
<small>{replace}</small> {product.description}
</Card.Body> </Card.Body>
</Card> </Card>
<Col className='p-5'> <Col className='p-5'>
<div className='border p-2' style={{ width: '60%', margin: 'auto', fontSize: '3.5vmin' }}>[ Detail Images ]</div> <div className='border p-2' style={{ maxWidth: "100%", height: 'auto', margin: 'auto', fontSize: '3.5vmin' }}>[ Detail Images ]</div>
<Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} className='p-4 d-flex justify-content-center' /> <Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%", height: 'auto', margin: 'auto' }} className='p-4 d-flex justify-content-center' />
</Col> </Col>
</Col> </Col>
</Col> </Col>
...@@ -258,35 +274,24 @@ function Product({ match, location }) { ...@@ -258,35 +274,24 @@ function Product({ match, location }) {
<h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천 <h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천
<a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem", cursor: "pointer" }}>X</a> <a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem", cursor: "pointer" }}>X</a>
</h6> </h6>
<Row className="justify-content-space mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}> <Row className="justify-content-center mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}> {productList.map(pro => (
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} /> <Link to={{
<Card.Body className="px-0"> pathname: `/product/${pro._id}`,
<Card.Title>클로타탄원피스</Card.Title> state: {
<Card.Text>구매자 수: 30</Card.Text> id: pro._id,
</Card.Body> name: pro.pro_name,
</Col> price: pro.price,
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}> colors: pro.colors,
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} /> sizes: pro.sizes,
<Card.Body className="px-0"> description: pro.description,
<Card.Title>클로타탄원피스</Card.Title> main_img: pro.main_imgUrl,
<Card.Text>구매자 수: 30</Card.Text> detail_imgs: pro.detail_imgUrls
</Card.Body> }
</Col> }}>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}> <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} status={'recommend'} />
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} /> </Link>
<Card.Body className="px-0"> ))}
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
......
client/src/Pages/ProductRegist.js
View file @ 25a9bb54
...@@ -4,7 +4,6 @@ import { Row, Col, Button, Form, Container, Alert, Spinner } from 'react-bootstr ...@@ -4,7 +4,6 @@ import { Row, Col, Button, Form, Container, Alert, Spinner } from 'react-bootstr
import axios from 'axios'; import axios from 'axios';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
function ProductsRegist() { function ProductsRegist() {
const INIT_PRODUCT = { const INIT_PRODUCT = {
pro_name: '', pro_name: '',
...@@ -29,13 +28,13 @@ function ProductsRegist() { ...@@ -29,13 +28,13 @@ function ProductsRegist() {
const [error, setError] = useState('') const [error, setError] = useState('')
const [success, setSuccess] = useState(false) const [success, setSuccess] = useState(false)
const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": 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 [loading, setLoading] = useState(false)
const selectRef = useRef(null) const selectRef = useRef(null)
const colorRef = useRef(null) const colorRef = useRef(null)
useEffect(async () => { useEffect(async () => {
try { try {
setError('')
const response = await axios.get('/api/categories/main') const response = await axios.get('/api/categories/main')
const data = response.data[0] const data = response.data[0]
setCategories([Object.keys(data), Object.values(data)]) setCategories([Object.keys(data), Object.values(data)])
...@@ -44,11 +43,6 @@ function ProductsRegist() { ...@@ -44,11 +43,6 @@ function ProductsRegist() {
} }
}, []) }, [])
useEffect(() => {
const isProduct = Object.values(product).every(el => { console.log("el=", el); Boolean(el) })
isProduct ? setDisabled(false) : setDisabled(true)
}, [product])
function deleteCategory(e) { function deleteCategory(e) {
const pdcate = product.sub_category.filter((el) => el !== e.target.name) const pdcate = product.sub_category.filter((el) => el !== e.target.name)
setProduct({ ...product, "sub_category": pdcate }) setProduct({ ...product, "sub_category": pdcate })
...@@ -78,8 +72,6 @@ function ProductsRegist() { ...@@ -78,8 +72,6 @@ function ProductsRegist() {
} }
function deleteColor(e) { function deleteColor(e) {
console.log(product.colors)
console.log(e.target.name)
const pdcolors = product.colors.filter((el) => el !== e.target.name) const pdcolors = product.colors.filter((el) => el !== e.target.name)
setProduct({ ...product, "colors": pdcolors }) setProduct({ ...product, "colors": pdcolors })
} }
...@@ -106,7 +98,6 @@ function ProductsRegist() { ...@@ -106,7 +98,6 @@ function ProductsRegist() {
} }
} }
product["sizes"] = sizes product["sizes"] = sizes
console.log(product)
const formData = new FormData(); const formData = new FormData();
for (let key in product) { for (let key in product) {
if (key === "main_image") { if (key === "main_image") {
...@@ -124,7 +115,6 @@ function ProductsRegist() { ...@@ -124,7 +115,6 @@ function ProductsRegist() {
setLoading(true) setLoading(true)
setError('') setError('')
const response = await axios.post('/api/product/regist', formData) const response = await axios.post('/api/product/regist', formData)
console.log(response)
setSuccess(true) setSuccess(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -140,7 +130,6 @@ function ProductsRegist() { ...@@ -140,7 +130,6 @@ function ProductsRegist() {
return ( return (
<Container> <Container>
{console.log(product)}
<Row className="justify-content-md-center"> <Row className="justify-content-md-center">
<Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}> <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
{error && <Alert variant="danger" className="text-center">{error}</Alert>} {error && <Alert variant="danger" className="text-center">{error}</Alert>}
......
client/src/Pages/ProductsList.js
View file @ 25a9bb54
...@@ -79,9 +79,7 @@ function ProductsList({ match }) { ...@@ -79,9 +79,7 @@ function ProductsList({ match }) {
} }
async function handleSort(method) { async function handleSort(method) {
console.log(method)
if (method === "purchase") { if (method === "purchase") {
console.log("thisispurchase")
productlist.sort(function (a, b) { productlist.sort(function (a, b) {
if (a.purchase > b.purchase) { if (a.purchase > b.purchase) {
return -1; return -1;
...@@ -89,12 +87,10 @@ function ProductsList({ match }) { ...@@ -89,12 +87,10 @@ function ProductsList({ match }) {
if (a.purchase < b.purchase) { if (a.purchase < b.purchase) {
return 1; return 1;
} }
// a must be equal to b
return 0; return 0;
}); });
setSortingName("인기상품") setSortingName("인기상품")
} else if (method === "newest") { } else if (method === "newest") {
console.log("thisisnewest")
productlist.sort(function (a, b) { productlist.sort(function (a, b) {
if (a.createdAt > b.createdAt) { if (a.createdAt > b.createdAt) {
return -1; return -1;
...@@ -102,13 +98,10 @@ function ProductsList({ match }) { ...@@ -102,13 +98,10 @@ function ProductsList({ match }) {
if (a.createdAt < b.createdAt) { if (a.createdAt < b.createdAt) {
return 1; return 1;
} }
// a must be equal to b
return 0; return 0;
}); });
setSortingName("신상품") setSortingName("신상품")
} else if (method === "lowest") { } else if (method === "lowest") {
console.log("thisislowest")
productlist.sort(function (a, b) { productlist.sort(function (a, b) {
if (a.price > b.price) { if (a.price > b.price) {
return 1; return 1;
...@@ -116,12 +109,10 @@ function ProductsList({ match }) { ...@@ -116,12 +109,10 @@ function ProductsList({ match }) {
if (a.price < b.price) { if (a.price < b.price) {
return -1; return -1;
} }
// a must be equal to b
return 0; return 0;
}); });
setSortingName("낮은가격") setSortingName("낮은가격")
} else { } else {
console.log("thisispurchase")
productlist.sort(function (a, b) { productlist.sort(function (a, b) {
if (a.price > b.price) { if (a.price > b.price) {
return -1; return -1;
...@@ -129,14 +120,12 @@ function ProductsList({ match }) { ...@@ -129,14 +120,12 @@ function ProductsList({ match }) {
if (a.price < b.price) { if (a.price < b.price) {
return 1; return 1;
} }
// a must be equal to b
return 0; return 0;
}); });
setSortingName("높은가격") setSortingName("높은가격")
} }
} }
async function handleSubname(e) { async function handleSubname(e) {
const subname = e.target.name const subname = e.target.name
try { try {
...@@ -159,6 +148,14 @@ function ProductsList({ match }) { ...@@ -159,6 +148,14 @@ function ProductsList({ match }) {
<Container> <Container>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active { a, a:hover, a:active {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
...@@ -168,18 +165,15 @@ function ProductsList({ match }) { ...@@ -168,18 +165,15 @@ function ProductsList({ match }) {
border-color: #CDC5C2; border-color: #CDC5C2;
border-radius: 0; border-radius: 0;
} }
.btn:hover, .btn:focus { .btn:hover, .btn-primary:focus {
background-color: #91877F; background-color: #91877F;
border-color: #91877F; border-color: #91877F;
box-shadow: 0 0 0 0; box-shadow: 0 0 0 0;
} }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F; background-color: #91877F;
border-color: #91877F; border-color: #91877F;
} }
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0;
}
.dropdown-item { .dropdown-item {
color: #91877F; color: #91877F;
} }
...@@ -194,20 +188,20 @@ function ProductsList({ match }) { ...@@ -194,20 +188,20 @@ function ProductsList({ match }) {
<div className="text-center"> <div className="text-center">
<h1 style={{ fontSize: "5.5vmax" }} className="text-center m-1 py-3">{mainCategory}</h1> <h1 style={{ fontSize: "5.5vmax" }} className="text-center m-1 py-3">{mainCategory}</h1>
<ButtonGroup className="mb-3" style={{ display: "inline" }}> <ButtonGroup className="mb-3" style={{ display: "inline" }}>
{subCategory.map(el =>(<Button className="m-1" style={{ fontSize: "0.8vw" }} name={el} onClick={handleSubname}>{el}</Button>))} {subCategory.map(el => (<Button className="m-1" style={{ fontSize: "1.5vw" }} name={el} onClick={handleSubname}>{el}</Button>))}
</ButtonGroup> </ButtonGroup>
</div> </div>
</Col> </Col>
</Row> </Row>
<Row className="justify-content-end mx-0 mt-5 mb-3"> <Row className="justify-content-end mx-0 mt-5 mb-3">
<Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2"> <Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2">
<FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} /> <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "12rem" }} />
<Button type="submit" className="px-2 mr-2"> <Button type="submit" className="px-2 m1-1">
<img src="/icon/search.svg" width="20" height="20" /> <img src="/icon/search.svg" width="20" height="20" />
</Button> </Button>
</Form> </Form>
<Dropdown className="my-2"> <Dropdown className="my-2">
<Dropdown.Toggle className="mx-2">{sortingName}</Dropdown.Toggle> <Dropdown.Toggle className="mx-1">{sortingName}</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item> <Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item> <Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
...@@ -232,8 +226,7 @@ function ProductsList({ match }) { ...@@ -232,8 +226,7 @@ function ProductsList({ match }) {
detail_imgs: pro.detail_imgUrls detail_imgs: pro.detail_imgUrls
} }
}}> }}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} status={'list'}/>
/>
</Link> </Link>
)) ))
: ( : (
......
client/src/Pages/ShoppingCart.js
View file @ 25a9bb54
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect } from 'react';
import { Link, Redirect } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Button, Container, Row, Col } from 'react-bootstrap'; import ListCard from '../Components/ListCard';
import axios from 'axios'; import axios from 'axios';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
import CartCard from '../Components/CartCard'; import { Button, Container } from 'react-bootstrap';
function ShoppingCart() { function ShoppingCart() {
const [error, setError] = useState('') const [error, setError] = useState('')
...@@ -15,13 +15,12 @@ function ShoppingCart() { ...@@ -15,13 +15,12 @@ function ShoppingCart() {
useEffect(() => { useEffect(() => {
getCart() getCart()
// console.log(cart)
}, [user]) }, [user])
function plusNum(e) { function plusNum(e) {
const addCount = cart.map((el) => { const addCount = cart.map((el) => {
if (el._id === e.target.name) { if (el._id === e.target.name) {
return { ...el, count: el.count+1} return { ...el, count: el.count + 1 }
} else { } else {
return { ...el } return { ...el }
} }
...@@ -31,7 +30,7 @@ function ShoppingCart() { ...@@ -31,7 +30,7 @@ function ShoppingCart() {
function minusNum(e) { function minusNum(e) {
const addCount = cart.map((el) => { const addCount = cart.map((el) => {
if (el._id === e.target.name) { if (el._id === e.target.name) {
return { ...el, count: el.count-1 } return { ...el, count: el.count - 1 }
} else { } else {
return { ...el } return { ...el }
} }
...@@ -48,29 +47,26 @@ function ShoppingCart() { ...@@ -48,29 +47,26 @@ function ShoppingCart() {
return { ...el } return { ...el }
} }
}) })
const asd = cartCheck.filter((el) => el.checked === true) const list = cartCheck.filter((el) => el.checked === true)
asd.map((el)=>{ list.map((el) => {
price = el.count*el.productId.price + price price = el.count * el.productId.price + price
}) })
setFinalPrice(price) setFinalPrice(price)
setCart(cartCheck) setCart(cartCheck)
setFinalCart(asd) setFinalCart(list)
} }
async function deleteCart(e) { async function deleteCart(e) {
//장바구니 DB에서 해당 항목 삭제
// console.log(e.target.name)
try { try {
setError('')
const response = await axios.post('/api/cart/deletecart', { const response = await axios.post('/api/cart/deletecart', {
userId: user, userId: user,
cartId: e.target.name cartId: e.target.name
}) })
console.log(response.data)
setCart(response.data.products) setCart(response.data.products)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
// console.log('카트에 담긴 항목을 삭제했습니다.')
} }
async function getCart() { async function getCart() {
...@@ -78,63 +74,57 @@ function ShoppingCart() { ...@@ -78,63 +74,57 @@ function ShoppingCart() {
setError('') setError('')
const response = await axios.get(`/api/cart/showcart/${user}`) const response = await axios.get(`/api/cart/showcart/${user}`)
const addChecked = response.data.map((el) => { const addChecked = response.data.map((el) => {
return { ...el, checked: false } return { ...el, checked: false }
}) })
console.log("addchecked=",addChecked)
setCart(addChecked) setCart(addChecked)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
function putCheckedCart(){ function putCheckedCart() {
try { try {
setError('') setError('')
const response = axios.post(`/api/cart/changecart`, { const response = axios.post(`/api/cart/changecart`, {
userId:user, userId: user,
products: cart products: cart
}) })
console.log(response.data)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
return ( return (
<div> <Container className="justify-content-center">
{/* {console.log(cart)} */} <h1 className="my-5 font-weight-bold text-center">장바구니</h1>
<Container className="justify-content-center"> <div>
<h1 className="my-5 font-weight-bold text-center">장바구니</h1> <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
<div> {cart.length > 0
<h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4> ? <ListCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} checkedCart={checkedCart} status={'cart'} />
{cart.length > 0 : <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
? <CartCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} checkedCart={checkedCart} /> </div>
: <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>} <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}>
</div> <li>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}> <span className="text-secondary">총 상품금액</span>
<ul className="pl-0" style={{ listStyle: 'none' }}> <span className="text-secondary float-right">{finalPrice}원</span>
<li> </li>
<span className="text-secondary">총 상품금액</span> <li>
<span className="text-secondary float-right">{finalPrice}원</span> <span className="text-secondary">배송비</span>
</li> <span className="text-secondary float-right">2500원</span>
<li> </li>
<span className="text-secondary">배송비</span> </ul>
<span className="text-secondary float-right">2500원</span> <div className="my-1 pt-2 border-top font-weight-bold">
</li> 결제금액<span className="float-right">{finalPrice + 2500}원</span>
</ul>
<div className="my-1 pt-2 border-top font-weight-bold">
결제금액<span className="float-right">{finalPrice + 2500}원</span>
</div>
</div>
<div className="text-center">
<Button as={Link} to={{
pathname: `/payment`,
state: finalCart
}} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button>
</div> </div>
</Container> </div>
</div> <div className="text-center">
<Button as={Link} to={{
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 @ 25a9bb54
import React, { useState } from 'react'; import React, { useState } from 'react';
import axios from 'axios'
import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
import catchErrors from '../utils/catchErrors'
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap';
const INIT_USER = { const INIT_USER = {
name: '', name: '',
...@@ -33,7 +33,6 @@ function Signup() { ...@@ -33,7 +33,6 @@ function Signup() {
event.stopPropagation(); event.stopPropagation();
} }
setValidated(true); setValidated(true);
try { try {
setError('') setError('')
const response = await axios.post('/api/users/signup', user) const response = await axios.post('/api/users/signup', user)
...@@ -46,13 +45,11 @@ function Signup() { ...@@ -46,13 +45,11 @@ function Signup() {
function checkPassword(event) { function checkPassword(event) {
const p1 = user.password const p1 = user.password
const p2 = user.password2 const p2 = user.password2
if (p1 !== p2) { if (p1 !== p2) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
alert('비밀번호가 일치하지 않습니다.') alert('비밀번호가 일치하지 않습니다.')
return false return false
} else { } else {
return true return true
} }
...@@ -68,14 +65,11 @@ function Signup() { ...@@ -68,14 +65,11 @@ function Signup() {
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}> <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center pt-3 m-4">Sign Up</h2> <h2 className="text-center pt-3 m-4">Sign Up</h2>
{error && <Alert variant='danger'> {error && <Alert variant='danger'>{error}</Alert>}
{error}
</Alert>}
<Form <Form
noValidate validated={validated} noValidate validated={validated}
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="p-4"> className="p-4">
<Form.Group as={Row} controlId="formBasicName"> <Form.Group as={Row} controlId="formBasicName">
<Form.Label column sm="4" for='name'> <Form.Label column sm="4" for='name'>
이 름 </Form.Label> 이 름 </Form.Label>
...@@ -89,32 +83,33 @@ function Signup() { ...@@ -89,32 +83,33 @@ function Signup() {
<Form.Control.Feedback type="invalid" >이름을 입력하세요. </Form.Control.Feedback> <Form.Control.Feedback type="invalid" >이름을 입력하세요. </Form.Control.Feedback>
</Col> </Col>
</Form.Group> </Form.Group>
<Form.Group as={Row} controlId="formBasicNumber"> <Form.Group as={Row} controlId="formBasicNumber">
<Form.Label column sm="4" for='number'> <Form.Label column sm="4" for='number'>
주민등록번호 </Form.Label> 주민등록번호 </Form.Label>
<Col sm="4" xs='5'> <Row style={{ width: '300px'}} className='px-3'>
<Form.Control <Col sm="6" xs='5' className='pr-1'>
className='pr-0' <Form.Control
required type="text" className='pl-2 pr-0'
name="number1" required type="text"
maxlength="6" name="number1"
placeholder="생년월일" maxlength="6"
value={user.number1} placeholder="생년월일"
onChange={handleChange} /> value={user.number1}
<Form.Control.Feedback type="invalid" >주민등록번호 입력하세요. </Form.Control.Feedback> onChange={handleChange} />
</Col> <Form.Control.Feedback type="invalid" >주민등록번호 입력하세요. </Form.Control.Feedback>
<strong className='pt-2 d-flex align-items-flex-start'>-</strong> </Col>
<Col md="2" xs='3'> <strong className='pt-2 d-flex align-items-flex-start'>-</strong>
<Form.Control <Col md="2" xs='3' className='px-2'>
className='pr-0' <Form.Control
required type="text" className='pl-2 pr-0'
name="number2" required type="text"
maxlength="1" name="number2"
value={user.number2} maxlength="1"
onChange={handleChange} /> value={user.number2}
</Col> onChange={handleChange} />
<strong className='pt-2 d-flex align-items-flex-start'>* * * * * *</strong> </Col>
<strong className='pt-2 d-flex align-items-flex-start'>* * * * * *</strong>
</Row>
</Form.Group> </Form.Group>
<Form.Group as={Row} controlId="formBasicId"> <Form.Group as={Row} controlId="formBasicId">
<Form.Label column sm="4" for='id'> <Form.Label column sm="4" for='id'>
......
server/app.js
View file @ 25a9bb54
...@@ -24,10 +24,8 @@ const app = express(); ...@@ -24,10 +24,8 @@ const app = express();
app.use(express.json()) app.use(express.json())
app.use(cors()) app.use(cors())
app.use(express.static(path.join(process.cwd(), 'dist'))) app.use(express.static(path.join(process.cwd(), 'dist')))
// app.use(bodyParser.urlencoded({ extended: true }))
app.use('/images', express.static('uploads/')) app.use('/images', express.static('uploads/'))
// app.use('/', indexRouter);
app.use('/', kakaopayRoutes) app.use('/', kakaopayRoutes)
app.use('/api/categories',categoryRouter) app.use('/api/categories',categoryRouter)
app.use('/api/users',userRouter) app.use('/api/users',userRouter)
......
server/controllers/category.controller.js
View file @ 25a9bb54
...@@ -50,4 +50,4 @@ const getsubId = async (req, res, next, ele) => { ...@@ -50,4 +50,4 @@ const getsubId = async (req, res, next, ele) => {
next() next()
} }
export default { getCategory, getsubId, getSubCategory, getToHome } export default { getCategory, getsubId, getSubCategory, getToHome }
\ No newline at end of file
server/controllers/kakaopay.controller.js
View file @ 25a9bb54
// import { RequestHandler } from "express";
import fetch from 'node-fetch' import fetch from 'node-fetch'
import config from "../config.js"; import config from "../config.js";
...@@ -30,7 +29,6 @@ const singleTest = async (req, res) => { ...@@ -30,7 +29,6 @@ const singleTest = async (req, res) => {
console.log("asdaf") console.log("asdaf")
console.log(req.body) console.log(req.body)
const item = req.body const item = req.body
// set data
const data = [] const data = []
for (let property in item) { for (let property in item) {
let encodedKey = encodeURIComponent(property); let encodedKey = encodeURIComponent(property);
...@@ -38,7 +36,6 @@ const singleTest = async (req, res) => { ...@@ -38,7 +36,6 @@ const singleTest = async (req, res) => {
data.push(encodedKey + "=" + encodedValue); data.push(encodedKey + "=" + encodedValue);
} }
const bodyData = data.join('&') // encode data (application/x-www-form-urlencoded) const bodyData = data.join('&') // encode data (application/x-www-form-urlencoded)
const response = await fetch('https://kapi.kakao.com/v1/payment/ready', { const response = await fetch('https://kapi.kakao.com/v1/payment/ready', {
method: 'POST', method: 'POST',
headers: { headers: {
...@@ -47,16 +44,9 @@ const singleTest = async (req, res) => { ...@@ -47,16 +44,9 @@ const singleTest = async (req, res) => {
}, },
body: bodyData, body: bodyData,
}) })
// console.log(response)
const resp = await response.json() const resp = await response.json()
console.log(resp) console.log(resp)
res.json({redirect_url: resp.next_redirect_pc_url}) res.json({redirect_url: resp.next_redirect_pc_url})
} }
export default { export default { success, fail, cancel, singleTest }
success, \ No newline at end of file
fail,
cancel,
singleTest,
}
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