ShoppingCart.js 4.03 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import React, { useState, useEffect, useRef } from 'react';
Kim, Subin's avatar
Kim, Subin committed
2
import { Redirect } from 'react-router-dom';
3
import { Card, Button, Container, Row, Col } from 'react-bootstrap';
4
import axios from 'axios';
Kim, Subin's avatar
Kim, Subin committed
5
6

function ShoppingCart() {
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    const [num, setNum] = useState(0)

    function plusNum() {
        setNum(num + 1)
    }
    function minusNum() {
        if (num === 0) {
            setNum(0)
        }
        else {
            setNum(num - 1)

        }
    }
    function deleteCart() {
        //장바구니 DB에서 해당 항목 삭제 
        console.log('카트에 담긴 항목을 삭제했습니다.')
    }

26
27
28
29
    // async function getCart(){
    //     const response = await axios.get('/')
    // }

Kim, Subin's avatar
Kim, Subin committed
30
31
    return (
        <div>
32
            {/* {getCart} */}
33
            <Container className="justify-content-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
34
                <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
35
                <div>
Jiwon Yoon's avatar
Jiwon Yoon committed
36
                    <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
37
                    <Card>
38
39
40
41
42
                        <Row className="mx-1">
                            <Col xs={2} sm={2} className="text-center my-auto">
                                <input className="" type="checkbox" id="exampleCheck1" />
                            </Col>
                            <Col className="text-center">
kusang96's avatar
dd    
kusang96 committed
43
                                <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" style={{ width: '20rem' }} />
44
                            </Col>
45
                            <Col md={6} className="p-2">
46
                                <Card.Body>
Jiwon Yoon's avatar
22    
Jiwon Yoon committed
47
                                    <input type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
48
49
50
51
                                    <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
                                    <Card.Text>가격</Card.Text>
                                    <Card.Text>옵션</Card.Text>
                                    <Card.Text>수량</Card.Text>
52
                                    <div>
Jiwon Yoon's avatar
22    
Jiwon Yoon committed
53
                                        <input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
54
                                        <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
Jiwon Yoon's avatar
22    
Jiwon Yoon committed
55
                                        <input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
56
57
58
59
60
61
                                    </div>
                                </Card.Body>
                            </Col>
                        </Row>
                    </Card>
                </div>
62
                <div className="p-5 m-5" style={{ background: '#F7F3F3' }}>
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
                    <ul className="pl-0" style={{ listStyle: 'none' }}>
                        <li>
                            <span className="text-secondary"> 상품금액</span>
                            <span className="text-secondary float-right">12,000</span>
                        </li>
                        <li>
                            <span className="text-secondary">배송비</span>
                            <span className="text-secondary float-right">2,500</span>
                        </li>
                    </ul>
                    <div className="my-1 pt-2 border-top font-weight-bold">
                        결제금액<span className="float-right">14,500</span>
                    </div>
                </div>
                <div className="text-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
78
                    <Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/payment" block>결제하기</Button>
79
80
81
                </div>
            </Container>

Kim, Subin's avatar
Kim, Subin committed
82
83
84
85
86
        </div>
    )
}

export default ShoppingCart