Skip to content

GitLab

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

Merge branch 'ourMaster' into jiwon

parents 8d8a98af 221883bb
Show 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 { Card } from 'react-bootstrap';
import { Row, Col, Card } from 'react-bootstrap';
function ListCard({ id, name, price, main_img }) {
function ListCard(props) {
if (props.status === 'list') {
return (
<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 id={props.id} className="m-3" style={{ width: "18rem" }}>
<Card.Img variant="top" src={props.main_img && `/images/${props.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>
<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 === '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
\ No newline at end of file
client/src/Components/MainNav.js
View file @ 25a9bb54
......@@ -16,11 +16,18 @@ function MainNav() {
{user ?
<>
<Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
{admin ?
''
: (
<>
<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>
</>
)}
</>
: (
<>
<Nav.Link className="text-light" href='/login'>Login</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 }) {
<Pagination className="d-flex justify-content-center">
<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 {
color: #91877F;
margin: 0;
......@@ -25,7 +33,7 @@ function Paginations({ index, totalPages, handlePage }) {
`}
</style>
<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 > 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>}
......@@ -35,9 +43,9 @@ function Paginations({ index, totalPages, handlePage }) {
{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-3 && index >= 1 ? <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 ? <Pagination.Next onClick={()=>handlePage(index)} /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
{index <= totalPages-3 && index < 3 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
{index <= totalPages-4 && index < 2 ? <Pagination.Item onClick={()=>handlePage(index + 4)}>{index + 4}</Pagination.Item> : ""}
{index === totalPages ? <Pagination.Next disabled /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
<Pagination.Last onClick={() =>handlePage(totalPages)} />
</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() {
<Navbar sticky="top" className="flex-nowrap" style={{ top: "56px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
<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 {
color: #91877F;
}
......
client/src/Pages/Account.js
View file @ 25a9bb54
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 ListCard from '../Components/ListCard';
import axios from 'axios';
import catchError from '../utils/catchErrors';
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 = {
name: "",
......@@ -21,6 +21,7 @@ function Account() {
async function getUsername(user) {
try {
setError('')
const response = await axios.get(`/api/users/account/${user}`)
setAccount(response.data)
} catch (error) {
......@@ -63,6 +64,7 @@ function Account() {
const formData = new FormData()
formData.append('avatar', account.avatar[0])
try {
setError('')
if (userId) {
const response = await axios.put(`/api/users/account/${userId}`, formData)
window.location.reload()
......@@ -77,22 +79,26 @@ function Account() {
async function getOrdered() {
try {
const response = await axios.post(`/api/users/addorder`, {
userId: userId
})
const a = response.data
setOrdered(a)
console.log("what=", response.data)
setError('')
const response = await axios.post(`/api/users/addorder`, { userId: userId })
const res = response.data
setOrdered(res)
} catch (error) {
catchError(error, setError)
}
}
return (
<Container className="px-3">
<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 {
color: #91877F;
text-decoration-color: #91877F;
......@@ -122,8 +128,7 @@ function Account() {
</Modal.Body>
<Modal.Footer>
<Col className="px-0">
<Button variant="outline-secondary" onClick={handleBasic}
className="d-flex justify-content-start"><small>기본이미지로</small></Button>
<Button variant="outline-secondary" onClick={handleBasic} className="d-flex justify-content-start"><small>기본이미지로</small></Button>
</Col>
<Button variant="secondary" onClick={() => setShow(false)}>취소</Button>
<Button variant="primary" type="submit" onClick={() => setShow(false)}>저장</Button>
......@@ -180,9 +185,9 @@ function Account() {
</Col>
</Row>
</Card>
<Card>
<OrderCard ordered={ordered} />
</Card>
<div className='m-2 mb-5'>
<ListCard ordered={ordered} status={'order'} />
</div>
</Container >
)
}
......
client/src/Pages/Admin.js
View file @ 25a9bb54
......@@ -68,6 +68,14 @@ function Admin() {
<Container>
<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 {
background-color: #CDC5C2;
border-color: #CDC5C2;
......@@ -81,7 +89,7 @@ function Admin() {
border-color: #91877F;
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;
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 ListCard from '../Components/ListCard';
import axios from 'axios';
......@@ -20,6 +20,7 @@ function Home() {
async function getProductlist() {
try {
setError('')
const response = await axios.get(`/api/product/getproduct`)
setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct })
} catch (error) {
......@@ -31,9 +32,20 @@ function Home() {
<Container>
<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 {
color: #000;
text-decoration: none;
}
`}
</style>
<div className="my-4">
......@@ -53,7 +65,7 @@ function Home() {
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>
))}
</Row>
......@@ -75,7 +87,7 @@ function Home() {
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>
))}
</Row>
......
client/src/Pages/Payment.js
View file @ 25a9bb54
import React, { useState, useEffect, useRef } from 'react';
import { Redirect, Link, useHistory } from 'react-router-dom';
import DaumPostcode from "react-daum-postcode";
import PaymentCard from '../Components/PaymentCard';
import ListCard from '../Components/ListCard';
import axios from 'axios';
import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors';
......@@ -124,7 +124,7 @@ function Payment({ match, location }) {
setCompleteState(false)
setPaymentWay([])
} else {
const a = (
const bankList = (
<Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-5">
<Form>
......@@ -146,14 +146,12 @@ function Payment({ match, location }) {
</Form.Group>
</Form>
</Col>
</Row>)
setPaymentWay(a)
setPaymentWay(bankList)
}
}
async function kakaopay() {
setCompleteState("kakaopay")
setPaymentWay(
<div className="text-center">
......@@ -192,6 +190,7 @@ function Payment({ match, location }) {
} else {
itemNames = cart[0].productId.pro_name
}
setError('')
const response = await fetch('/api/kakaopay/test/single', {
method: "POST",
headers: {
......@@ -287,7 +286,7 @@ function Payment({ match, location }) {
</div>
<div>
<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 className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}>
......
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 { isAuthenticated } from '../utils/auth'
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';
import { Card, Row, Col, Button } from 'react-bootstrap';
function PaymentCompleted() {
const user = isAuthenticated()
const [error, setError] = useState()
const [order, setOrder] = useState([])
......@@ -22,7 +20,6 @@ function PaymentCompleted() {
try {
setError('')
const response = await axios.get(`/api/order/showorder/${user}`)
console.log(response.data)
setNum(response.data._id)
setOrder(response.data.products)
setTotal(response.data.total)
......@@ -31,6 +28,7 @@ function PaymentCompleted() {
catchErrors(error, setError)
}
}
return (
<div>
<div className="mx-3 my-5 text-center px-3 py-4 border">
......@@ -46,7 +44,6 @@ function PaymentCompleted() {
<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>
......@@ -61,7 +58,6 @@ function PaymentCompleted() {
</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">
......
client/src/Pages/Product.js
View file @ 25a9bb54
import React, { useState, useEffect, useRef } from 'react';
import { Redirect, useHistory } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import { Redirect, Link, useHistory } from 'react-router-dom';
import ListCard from "../Components/ListCard";
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
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 }) {
const [product, setProduct] = useState(location.state)
const [productList, setProductList] = useState([])
const [color, setColor] = useState("")
const [size, setSize] = useState("")
const [cart, setCart] = useState([])
......@@ -18,23 +20,25 @@ function Product({ match, location }) {
let history = useHistory();
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const replace = product.description.replaceAll('{\n\n}', '<br />')
useEffect(() => {
getRecommend()
}, [product])
useEffect(() => {
setProduct(location.state)
}, [location.state])
useEffect(() => {
if (size && color) {
pushOptions()
// console.log(cart)
}
getRecommend()
}, [size, color])
async function getRecommend(){
try {
const response = await axios.get(`/api/order/recommend?products=${product.id}`)
// const response = await axios.post(`/api/order/recommend`,{
// productId: product.id
// })
console.log(response.data)
setProductList(response.data)
} catch (error) {
catchErrors(error,setError)
}
......@@ -46,14 +50,13 @@ function Product({ match, location }) {
}
function pushOptions() {
// console.log(cart)
const a = cart.map(el => {
const rObj = {}
rObj["color"] = el.color;
rObj["size"] = el.size;
return rObj
const cartSet = cart.map(el => {
const newObj = {}
newObj["color"] = el.color;
newObj["size"] = el.size;
return newObj
})
const isDuplicated = a.some(el => el.color === color && el.size === size)
const isDuplicated = cartSet.some(el => el.color === color && el.size === size)
if (isDuplicated) {
selected.sizes = false
selected.colors = false
......@@ -68,7 +71,6 @@ function Product({ match, location }) {
setSize("")
setPrice(product.price + price)
}
}
function handleChange(e) {
......@@ -85,11 +87,11 @@ function Product({ match, location }) {
function deleteOption(e) {
e.preventDefault()
let preprice = 0
const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
asd.map((el) => {
const list = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
list.map((el) => {
preprice = preprice + el.count * product.price
})
setCart(asd)
setCart(list)
setPrice(Number(preprice))
}
......@@ -139,7 +141,6 @@ function Product({ match, location }) {
userId: localStorage.getItem('id'),
products: cart
})
console.log(response.data)
history.push("/payment")
} catch (error) {
catchErrors(error, setError)
......@@ -152,18 +153,35 @@ function Product({ match, location }) {
}
}
return (
<div>
{console.log(product)}
<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 {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
.btn:hover {
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;
border-color: #91877F;
}
......@@ -181,7 +199,7 @@ function Product({ match, location }) {
</Modal>
<Row className="justify-content-center mt-5 mx-0">
<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 sm={11} md={4} className="align-middle mt-4">
<h3 className="mb-4">{product.name}</h3>
......@@ -220,7 +238,7 @@ function Product({ match, location }) {
<Col className="text-right">{price}원</Col>
</Row>
<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>
</Row>
</Form>
......@@ -231,24 +249,22 @@ function Product({ match, location }) {
<h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3">
설명
</h3>
<Col className='text-center' style={{ fontSize: '1px' }}>
<div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '50%', margin: 'auto', fontSize: '3.5vmin' }} >
<Col className='text-center'>
<div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '60%', margin: 'auto', fontSize: '3.5vmin' }} >
{product.name}
</div>
<Image src={`/images/${product.main_img}`} className='d-flex justify-content-center p-4' style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} />
<Card style={{ width: '70%', margin: 'auto' }} className='my-4' >
<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.Header className='text-center' style={{ background: '#CDC5C2' }}>
<h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5>
</Card.Header>
<Card.Body className='text-center m-4' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1vw' }}>
<small>{replace}</small>
<Card.Body className='text-center m-2' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1.2vw' }}>
{product.description}
</Card.Body>
</Card>
<Col className='p-5'>
<div className='border p-2' style={{ width: '60%', 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' />
<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%", height: 'auto', margin: 'auto' }} className='p-4 d-flex justify-content-center' />
</Col>
</Col>
</Col>
......@@ -258,35 +274,24 @@ function Product({ match, location }) {
<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>
</h6>
<Row className="justify-content-space mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
<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>
<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>
<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>
<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 className="justify-content-center mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
{productList.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} status={'recommend'} />
</Link>
))}
</Row>
</Col>
</Row>
......
client/src/Pages/ProductRegist.js
View file @ 25a9bb54
......@@ -4,7 +4,6 @@ import { Row, Col, Button, Form, Container, Alert, Spinner } from 'react-bootstr
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
function ProductsRegist() {
const INIT_PRODUCT = {
pro_name: '',
......@@ -29,13 +28,13 @@ function ProductsRegist() {
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 {
setError('')
const response = await axios.get('/api/categories/main')
const data = response.data[0]
setCategories([Object.keys(data), Object.values(data)])
......@@ -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) {
const pdcate = product.sub_category.filter((el) => el !== e.target.name)
setProduct({ ...product, "sub_category": pdcate })
......@@ -78,8 +72,6 @@ function ProductsRegist() {
}
function deleteColor(e) {
console.log(product.colors)
console.log(e.target.name)
const pdcolors = product.colors.filter((el) => el !== e.target.name)
setProduct({ ...product, "colors": pdcolors })
}
......@@ -106,7 +98,6 @@ function ProductsRegist() {
}
}
product["sizes"] = sizes
console.log(product)
const formData = new FormData();
for (let key in product) {
if (key === "main_image") {
......@@ -124,7 +115,6 @@ function ProductsRegist() {
setLoading(true)
setError('')
const response = await axios.post('/api/product/regist', formData)
console.log(response)
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
......@@ -140,7 +130,6 @@ function ProductsRegist() {
return (
<Container>
{console.log(product)}
<Row className="justify-content-md-center">
<Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
{error && <Alert variant="danger" className="text-center">{error}</Alert>}
......
client/src/Pages/ProductsList.js
View file @ 25a9bb54
......@@ -79,9 +79,7 @@ function ProductsList({ match }) {
}
async function handleSort(method) {
console.log(method)
if (method === "purchase") {
console.log("thisispurchase")
productlist.sort(function (a, b) {
if (a.purchase > b.purchase) {
return -1;
......@@ -89,12 +87,10 @@ function ProductsList({ match }) {
if (a.purchase < b.purchase) {
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("인기상품")
} else if (method === "newest") {
console.log("thisisnewest")
productlist.sort(function (a, b) {
if (a.createdAt > b.createdAt) {
return -1;
......@@ -102,13 +98,10 @@ function ProductsList({ match }) {
if (a.createdAt < b.createdAt) {
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("신상품")
} else if (method === "lowest") {
console.log("thisislowest")
productlist.sort(function (a, b) {
if (a.price > b.price) {
return 1;
......@@ -116,12 +109,10 @@ function ProductsList({ match }) {
if (a.price < b.price) {
return -1;
}
// a must be equal to b
return 0;
});
setSortingName("낮은가격")
} else {
console.log("thisispurchase")
productlist.sort(function (a, b) {
if (a.price > b.price) {
return -1;
......@@ -129,14 +120,12 @@ function ProductsList({ match }) {
if (a.price < b.price) {
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("높은가격")
}
}
async function handleSubname(e) {
const subname = e.target.name
try {
......@@ -159,6 +148,14 @@ function ProductsList({ match }) {
<Container>
<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 {
color: #000;
text-decoration: none;
......@@ -168,18 +165,15 @@ function ProductsList({ match }) {
border-color: #CDC5C2;
border-radius: 0;
}
.btn:hover, .btn:focus {
.btn:hover, .btn-primary:focus {
background-color: #91877F;
border-color: #91877F;
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;
border-color: #91877F;
}
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0;
}
.dropdown-item {
color: #91877F;
}
......@@ -194,20 +188,20 @@ function ProductsList({ match }) {
<div className="text-center">
<h1 style={{ fontSize: "5.5vmax" }} className="text-center m-1 py-3">{mainCategory}</h1>
<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>
</div>
</Col>
</Row>
<Row className="justify-content-end mx-0 mt-5 mb-3">
<Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2">
<FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2 mr-2">
<FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "12rem" }} />
<Button type="submit" className="px-2 m1-1">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
<Dropdown className="my-2">
<Dropdown.Toggle className="mx-2">{sortingName}</Dropdown.Toggle>
<Dropdown.Toggle className="mx-1">{sortingName}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
......@@ -232,8 +226,7 @@ function ProductsList({ match }) {
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>
))
: (
......
client/src/Pages/ShoppingCart.js
View file @ 25a9bb54
import React, { useState, useEffect, useRef } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { Button, Container, Row, Col } from 'react-bootstrap';
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
import CartCard from '../Components/CartCard';
import { Button, Container } from 'react-bootstrap';
function ShoppingCart() {
const [error, setError] = useState('')
......@@ -15,13 +15,12 @@ function ShoppingCart() {
useEffect(() => {
getCart()
// console.log(cart)
}, [user])
function plusNum(e) {
const addCount = cart.map((el) => {
if (el._id === e.target.name) {
return { ...el, count: el.count+1}
return { ...el, count: el.count + 1 }
} else {
return { ...el }
}
......@@ -31,7 +30,7 @@ function ShoppingCart() {
function minusNum(e) {
const addCount = cart.map((el) => {
if (el._id === e.target.name) {
return { ...el, count: el.count-1 }
return { ...el, count: el.count - 1 }
} else {
return { ...el }
}
......@@ -48,29 +47,26 @@ function ShoppingCart() {
return { ...el }
}
})
const asd = cartCheck.filter((el) => el.checked === true)
asd.map((el)=>{
price = el.count*el.productId.price + price
const list = cartCheck.filter((el) => el.checked === true)
list.map((el) => {
price = el.count * el.productId.price + price
})
setFinalPrice(price)
setCart(cartCheck)
setFinalCart(asd)
setFinalCart(list)
}
async function deleteCart(e) {
//장바구니 DB에서 해당 항목 삭제
// console.log(e.target.name)
try {
setError('')
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('카트에 담긴 항목을 삭제했습니다.')
}
async function getCart() {
......@@ -80,37 +76,32 @@ function ShoppingCart() {
const addChecked = response.data.map((el) => {
return { ...el, checked: false }
})
console.log("addchecked=",addChecked)
setCart(addChecked)
} catch (error) {
catchErrors(error, setError)
}
}
function putCheckedCart(){
function putCheckedCart() {
try {
setError('')
const response = axios.post(`/api/cart/changecart`, {
userId:user,
userId: user,
products: cart
})
console.log(response.data)
} catch (error) {
catchErrors(error, setError)
}
}
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} checkedCart={checkedCart} />
? <ListCard cart={cart} deleteCart={deleteCart} minusNum={minusNum} plusNum={plusNum} checkedCart={checkedCart} status={'cart'} />
: <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
</div>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}>
......@@ -134,7 +125,6 @@ function ShoppingCart() {
}} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button>
</div>
</Container>
</div>
)
}
......
client/src/Pages/Signup.js
View file @ 25a9bb54
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 axios from 'axios';
import catchErrors from '../utils/catchErrors';
import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap';
const INIT_USER = {
name: '',
......@@ -33,7 +33,6 @@ function Signup() {
event.stopPropagation();
}
setValidated(true);
try {
setError('')
const response = await axios.post('/api/users/signup', user)
......@@ -46,13 +45,11 @@ function Signup() {
function checkPassword(event) {
const p1 = user.password
const p2 = user.password2
if (p1 !== p2) {
event.preventDefault();
event.stopPropagation();
alert('비밀번호가 일치하지 않습니다.')
return false
} else {
return true
}
......@@ -68,14 +65,11 @@ function Signup() {
<Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center pt-3 m-4">Sign Up</h2>
{error && <Alert variant='danger'>
{error}
</Alert>}
{error && <Alert variant='danger'>{error}</Alert>}
<Form
noValidate validated={validated}
onSubmit={handleSubmit}
className="p-4">
<Form.Group as={Row} controlId="formBasicName">
<Form.Label column sm="4" for='name'>
이 름 </Form.Label>
......@@ -89,13 +83,13 @@ function Signup() {
<Form.Control.Feedback type="invalid" >이름을 입력하세요. </Form.Control.Feedback>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formBasicNumber">
<Form.Label column sm="4" for='number'>
주민등록번호 </Form.Label>
<Col sm="4" xs='5'>
<Row style={{ width: '300px'}} className='px-3'>
<Col sm="6" xs='5' className='pr-1'>
<Form.Control
className='pr-0'
className='pl-2 pr-0'
required type="text"
name="number1"
maxlength="6"
......@@ -105,9 +99,9 @@ function Signup() {
<Form.Control.Feedback type="invalid" >주민등록번호 입력하세요. </Form.Control.Feedback>
</Col>
<strong className='pt-2 d-flex align-items-flex-start'>-</strong>
<Col md="2" xs='3'>
<Col md="2" xs='3' className='px-2'>
<Form.Control
className='pr-0'
className='pl-2 pr-0'
required type="text"
name="number2"
maxlength="1"
......@@ -115,6 +109,7 @@ function Signup() {
onChange={handleChange} />
</Col>
<strong className='pt-2 d-flex align-items-flex-start'>* * * * * *</strong>
</Row>
</Form.Group>
<Form.Group as={Row} controlId="formBasicId">
<Form.Label column sm="4" for='id'>
......
server/app.js
View file @ 25a9bb54
......@@ -24,10 +24,8 @@ const app = express();
app.use(express.json())
app.use(cors())
app.use(express.static(path.join(process.cwd(), 'dist')))
// app.use(bodyParser.urlencoded({ extended: true }))
app.use('/images', express.static('uploads/'))
// app.use('/', indexRouter);
app.use('/', kakaopayRoutes)
app.use('/api/categories',categoryRouter)
app.use('/api/users',userRouter)
......
server/controllers/kakaopay.controller.js
View file @ 25a9bb54
// import { RequestHandler } from "express";
import fetch from 'node-fetch'
import config from "../config.js";
......@@ -30,7 +29,6 @@ const singleTest = async (req, res) => {
console.log("asdaf")
console.log(req.body)
const item = req.body
// set data
const data = []
for (let property in item) {
let encodedKey = encodeURIComponent(property);
......@@ -38,7 +36,6 @@ const singleTest = async (req, res) => {
data.push(encodedKey + "=" + encodedValue);
}
const bodyData = data.join('&') // encode data (application/x-www-form-urlencoded)
const response = await fetch('https://kapi.kakao.com/v1/payment/ready', {
method: 'POST',
headers: {
......@@ -47,16 +44,9 @@ const singleTest = async (req, res) => {
},
body: bodyData,
})
// console.log(response)
const resp = await response.json()
console.log(resp)
res.json({redirect_url: resp.next_redirect_pc_url})
}
export default {
success,
fail,
cancel,
singleTest,
}
export default { success, fail, cancel, singleTest }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment