Skip to content

GitLab

Commit 07a6689c authored by kusang96's avatar kusang96
Browse files

card

parent 5151510f
Hide whitespace changes
Inline Side-by-side
client/src/Components/CartCard.js deleted 100644 → 0
View file @ 5151510f
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 @ 07a6689c
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 (
<Card id={id} className="m-3" style={{ width: "18rem" }}>
<Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
<Card.Text>{price} 원</Card.Text>
</Card.Body>
</Card>
)
if (props.status === 'list') {
return (
<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" }}>{props.name}</Card.Title>
<Card.Text>{props.price} 원</Card.Text>
</Card.Body>
</Card>
)
} else if (props.status === 'recommend') {
return (
<Card id={props.id} style={{ minWidth: "8rem" }}>
<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>
<Row className=''>
<Col sm={4} xs={4} className='p-1'>주문번호 :</Col>
<Col sm={8} xs={8} className='p-1'><strong>{e._id}</strong></Col>
<Col sm={4} xs={4} className='p-1'>결제금액 :</Col>
<Col sm={8} xs={8} className='p-1'><strong>{e.total}원</strong></Col>
<Col sm={4} xs={4} className='p-1'>배송지 :</Col>
<Col sm={8} xs={8} className='p-1'><strong> {e.receiverInfo.address} / </strong><strong><small> {e.receiverInfo.address2}</small></strong></Col>
<Col sm={4} xs={4} className='p-1'>주문날짜 :</Col>
<Col sm={8} xs={8} 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/OrderCard.js deleted 100644 → 0
View file @ 5151510f
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>)}
<Card.Text>
<Col>
<Row className=''>
<Col sm={4} xs={4} className='p-1'>주문번호 :</Col>
<Col sm={8} xs={8} className='p-1'><strong>{e._id}</strong></Col>
<Col sm={4} xs={4} className='p-1'>결제금액 :</Col>
<Col sm={8} xs={8} className='p-1'><strong>{e.total}원</strong></Col>
<Col sm={4} xs={4} className='p-1'>배송지 :</Col>
<Col sm={8} xs={8} className='p-1'><strong> {e.receiverInfo.address} / </strong><strong><small> {e.receiverInfo.address2}</small></strong></Col>
<Col sm={4} xs={4} className='p-1'>주문날짜 :</Col>
<Col sm={8} xs={8} className='p-1'><strong>{e.createdAt.substring(0, 10)}</strong></Col>
</Row>
</Col>
</Card.Text>
</Card.Body>
)
)
}
</Card>
)
}
export default OrderCard
client/src/Components/PaymentCard.js deleted 100644 → 0
View file @ 5151510f
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/Pages/Account.js
View file @ 07a6689c
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import OrderCard from '../Components/OrderCard';
import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
......@@ -179,7 +179,7 @@ function Account() {
</Row>
</Card>
<div className='m-2 mb-5'>
<OrderCard ordered={ordered} />
<ListCard ordered={ordered} status={'order'} />
</div>
</Container >
)
......
client/src/Pages/Home.js
View file @ 07a6689c
......@@ -54,7 +54,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>
......@@ -76,7 +76,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 @ 07a6689c
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';
......@@ -286,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' }}>
......@@ -313,10 +313,6 @@ function Payment({ match, location }) {
<div className="text-center">
<Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button>
</div>
{paymentWay}
</div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={paymentCompleted} block>결제완료</Button>
</div>
</Container>
)
......
client/src/Pages/Product.js
View file @ 07a6689c
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([])
......@@ -19,16 +21,22 @@ function Product({ match, location }) {
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
useEffect(() => {
recommend()
}, [])
useEffect(() => {
if (size && color) {
pushOptions()
}
recommend()
}, [size, color])
async function recommend(){
try {
const response = await axios.post('/api/order/recommend')
console.log("pro=",product.id)
const response = await axios.post('/api/order/recommend', { productId: product.id})
console.log("recommend res=",response.data)
setProductList(response.data)
} catch (error) {
catchErrors(error, setError)
}
......@@ -257,34 +265,30 @@ function Product({ match, location }) {
<a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem", cursor: "pointer" }}>X</a>
</h6>
<Row className="justify-content-evenly mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
<Col as={Card} style={{ minWidth: "8rem" }}>
<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: "8rem" }}>
<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: "8rem" }}>
<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: "8rem" }}>
{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>
))}
{/* <Col as={Card} style={{ minWidth: "8rem" }}>
<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> */}
</Row>
</Col>
</Row>
......
client/src/Pages/ProductsList.js
View file @ 07a6689c
......@@ -218,8 +218,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 @ 07a6689c
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import CartCard from '../Components/CartCard';
import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
......@@ -95,38 +95,36 @@ function ShoppingCart() {
}
return (
<div>
<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} />
: <div className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
<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
? <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' }}>
<li>
<span className="text-secondary">총 상품금액</span>
<span className="text-secondary float-right">{finalPrice}원</span>
</li>
<li>
<span className="text-secondary">배송비</span>
<span className="text-secondary float-right">2500원</span>
</li>
</ul>
<div className="my-1 pt-2 border-top font-weight-bold">
결제금액<span className="float-right">{finalPrice + 2500}원</span>
</div>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
<ul className="pl-0" style={{ listStyle: 'none' }}>
<li>
<span className="text-secondary">총 상품금액</span>
<span className="text-secondary float-right">{finalPrice}원</span>
</li>
<li>
<span className="text-secondary">배송비</span>
<span className="text-secondary float-right">2500원</span>
</li>
</ul>
<div className="my-1 pt-2 border-top font-weight-bold">
결제금액<span className="float-right">{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>
</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>
)
}
......
server/controllers/order.controller.js
View file @ 07a6689c
import mongoose from 'mongoose';
import Order from "../schemas/Order.js";
import User from "../schemas/User.js";
......@@ -49,26 +50,30 @@ const orderById = async (req, res, next, id) => {
}
}
const recommendPro = async (req,res)=>{
const recommendPro = async (req, res) => {
const { productId } = req.body
console.log(productId)
try {
const recommend = await Order.aggregate([
{
$match: {
'products.productId': { $ne : [ "$productId[0]", mongoose.Types.ObjectId(productId)] }
}
},
{ "$unwind": "$products" },
// {
// $match:{'products.productId':'600e2fcc8afbb038487cc8fa'}
// },
{
$group:
{
_id:'$products.productId',
num_total:{$sum:1}
$group: {
productId: "$products.productId",
total: { $sum: 1 }
}
}
])
console.log(recommend)
const sorting = recommend.filter({})
console.log('recommend=', recommend)
res.send('dddkfdskfsa fsk')
} catch (error) {
console.log(error)
res.status(500).send('추천 실패')
console.log('error in order ', error)
}
}
export default { addorder, showorder, orderById , Ordered , recommendPro}
\ No newline at end of file
export default { addorder, showorder, orderById, Ordered, recommendPro }
\ 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