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

card

parent 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
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) {
if (props.status === 'list') {
return ( return (
<Card id={id} className="m-3" style={{ width: "18rem" }}> <Card id={props.id} className="m-3" style={{ width: "18rem" }}>
<Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src={props.main_img && `/images/${props.main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
<Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title> <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{props.name}</Card.Title>
<Card.Text>{price} </Card.Text> <Card.Text>{props.price} </Card.Text>
</Card.Body> </Card.Body>
</Card> </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 export default ListCard
\ No newline at end of file
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
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
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import OrderCard from '../Components/OrderCard'; 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';
...@@ -179,7 +179,7 @@ function Account() { ...@@ -179,7 +179,7 @@ function Account() {
</Row> </Row>
</Card> </Card>
<div className='m-2 mb-5'> <div className='m-2 mb-5'>
<OrderCard ordered={ordered} /> <ListCard ordered={ordered} status={'order'} />
</div> </div>
</Container > </Container >
) )
......
...@@ -54,7 +54,7 @@ function Home() { ...@@ -54,7 +54,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>
...@@ -76,7 +76,7 @@ function Home() { ...@@ -76,7 +76,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>
......
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';
...@@ -286,7 +286,7 @@ function Payment({ match, location }) { ...@@ -286,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' }}>
...@@ -313,10 +313,6 @@ function Payment({ match, location }) { ...@@ -313,10 +313,6 @@ function Payment({ match, location }) {
<div className="text-center"> <div className="text-center">
<Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button> <Button type="button" onClick={paymentCompleted} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} block>결제완료</Button>
</div> </div>
{paymentWay}
</div>
<div className="text-center">
<Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={paymentCompleted} block>결제완료</Button>
</div> </div>
</Container> </Container>
) )
......
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([])
...@@ -19,16 +21,22 @@ function Product({ match, location }) { ...@@ -19,16 +21,22 @@ function Product({ match, location }) {
const handleClose = () => setShow(false); const handleClose = () => setShow(false);
const handleShow = () => setShow(true); const handleShow = () => setShow(true);
useEffect(() => {
recommend()
}, [])
useEffect(() => { useEffect(() => {
if (size && color) { if (size && color) {
pushOptions() pushOptions()
} }
recommend()
}, [size, color]) }, [size, color])
async function recommend(){ async function recommend(){
try { 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) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
...@@ -257,34 +265,30 @@ function Product({ match, location }) { ...@@ -257,34 +265,30 @@ function Product({ match, location }) {
<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-evenly mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}> <Row className="justify-content-evenly mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
<Col as={Card} style={{ minWidth: "8rem" }}> {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: "8rem" }}> 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: "8rem" }}> <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> {/* <Col as={Card} style={{ minWidth: "8rem" }}>
<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.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0"> <Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title> <Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text> <Card.Text>구매자 수: 30</Card.Text>
</Card.Body> </Card.Body>
</Col> </Col> */}
</Row> </Row>
</Col> </Col>
</Row> </Row>
......
...@@ -218,8 +218,7 @@ function ProductsList({ match }) { ...@@ -218,8 +218,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>
)) ))
: ( : (
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import CartCard from '../Components/CartCard'; 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';
...@@ -95,13 +95,12 @@ function ShoppingCart() { ...@@ -95,13 +95,12 @@ function ShoppingCart() {
} }
return ( return (
<div>
<Container className="justify-content-center"> <Container className="justify-content-center">
<h1 className="my-5 font-weight-bold text-center">장바구니</h1> <h1 className="my-5 font-weight-bold text-center">장바구니</h1>
<div> <div>
<h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4> <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
{cart.length > 0 {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 className="text-center my-5">장바구니에 담긴 상품이 없습니다.</div>}
</div> </div>
<div className="p-5 m-3" style={{ background: '#F7F3F3' }}> <div className="p-5 m-3" style={{ background: '#F7F3F3' }}>
...@@ -126,7 +125,6 @@ function ShoppingCart() { ...@@ -126,7 +125,6 @@ function ShoppingCart() {
}} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button> }} className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={putCheckedCart} block>결제하기</Button>
</div> </div>
</Container> </Container>
</div>
) )
} }
......
import mongoose from 'mongoose';
import Order from "../schemas/Order.js"; import Order from "../schemas/Order.js";
import User from "../schemas/User.js"; import User from "../schemas/User.js";
...@@ -49,26 +50,30 @@ const orderById = async (req, res, next, id) => { ...@@ -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 { try {
const recommend = await Order.aggregate([ const recommend = await Order.aggregate([
{ "$unwind": "$products" },
// {
// $match:{'products.productId':'600e2fcc8afbb038487cc8fa'}
// },
{ {
$group: $match: {
'products.productId': { $ne : [ "$productId[0]", mongoose.Types.ObjectId(productId)] }
}
},
{ "$unwind": "$products" },
{ {
_id:'$products.productId', $group: {
num_total:{$sum:1} productId: "$products.productId",
total: { $sum: 1 }
} }
} }
]) ])
console.log(recommend) const sorting = recommend.filter({})
console.log('recommend=', recommend)
res.send('dddkfdskfsa fsk')
} catch (error) { } catch (error) {
console.log(error) console.log('error in order ', error)
res.status(500).send('추천 실패')
} }
} }
export default { addorder, showorder, orderById , Ordered , recommendPro} export default { addorder, showorder, orderById, Ordered, recommendPro }
\ No newline at end of file \ 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