CartCard.js 2.36 KB
Newer Older
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
1
import React from 'react'
Jiwon Yoon's avatar
Jiwon Yoon committed
2
import { Card, Row, Col } from 'react-bootstrap';
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
3
4

function CartCard(props) {
Jiwon Yoon's avatar
Jiwon Yoon committed
5
    console.log(props)
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
6
7
8
9
10
11
    return (
        <>
            {props.cart.map((e) => (
                    <Card>
                        <Row className="mx-1">
                            <Col xs={2} sm={2} className="text-center my-auto">
Jiwon Yoon's avatar
Jiwon Yoon committed
12
                                <input className="" type="checkbox" name={String(e._id)} onChange={props.checkedCart} />
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
13
14
                            </Col>
                            <Col className="text-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
15
                                <Card.Img className="img-fluid" variant="top" src={e.productId.main_imgUrl && `/images/${e.productId.main_imgUrl}`} style={{ width: '20rem' }} />
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
16
17
18
                            </Col>
                            <Col md={6} className="p-2">
                                <Card.Body>
Jiwon Yoon's avatar
Jiwon Yoon committed
19
                                    <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} />
20
                                    <Card.Title className="font-weight-bold mt-3">{e.productId.pro_name}</Card.Title>
21
22
23
                                    <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>
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
24
                                    <div>
Jiwon Yoon's avatar
Jiwon Yoon committed
25
26
27
                                        <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} />
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
28
29
30
31
32
33
34
35
36
37
38
39
40
                                    </div>
                                </Card.Body>
                            </Col>
                        </Row>
                    </Card>
                ))
            }
        </>

    )
}

export default CartCard