Product.js 9.17 KB
Newer Older
1
import axios from 'axios';
kusang96's avatar
kusang96 committed
2
3
import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Card, Button } from 'react-bootstrap';
4
import catchErrors from '../utils/catchErrors';
kusang96's avatar
kusang96 committed
5

6
const preCart = []
kusang96's avatar
kusang96 committed
7

8
function Product({ match, location }) {
kusang96's avatar
0115    
kusang96 committed
9
10
    const [product, setProduct] = useState(location.state)
    const [cart, setCart] = useState(location.state)
11
    const [error, setError] = useState('')
12
    const [selected, setSelected] = useState({ sizes: false, colors: false })
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
13
    const [price, setPrice] = useState(0)
Jiwon Yoon's avatar
Jiwon Yoon committed
14

15
16
17
18
    useEffect(() => {
        if (selected.sizes === true && selected.colors === true) {
            pushOptions()
            console.log(preCart)
Jiwon Yoon's avatar
Jiwon Yoon committed
19
        }
20
    }, [cart])
kusang96's avatar
kusang96 committed
21

Jiwon Yoon's avatar
Jiwon Yoon committed
22

kusang96's avatar
kusang96 committed
23
24
25
26
27
    function handleClick(e) {
        const box = e.target.parentNode.parentNode
        box.style.display = "none"
    }

28
29
30
31
    function pushOptions() {
        preCart.push(cart)
        selected.sizes = false
        selected.colors = false
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
32
        setPrice(product.price+price)
33
    }
kusang96's avatar
kusang96 committed
34
35
    function handleChange(e) {
        const { name, value } = e.target
36
37
38
39
40
41
42
43
44
        if (e.target.name === "sizes") {
            setCart({ ...cart, [name]: value })
            selected.sizes = true
        } else if (e.target.name === "colors") {
            setCart({ ...cart, [name]: value })
            selected.colors = true
        }
        // setCart({ ...cart, [name]: value })

Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
45
        // handleCreate()
kusang96's avatar
kusang96 committed
46
47
48
49
50
51
52
53
54
    }

    function listDelete(e) {
        e.preventDefault()
        const parent = e.target.parentNode
        parent.remove()
    }

    function handleCreate() {
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
        // if (product !== undefined) {
        //     if (product.colors !== "" && product.sizes !== "") {
        //         cart.push(
        //             <div className="d-flex justify-content-between my-2" >
        //                 <p>{product.color}  {product.size} </p>
        //                 <input name="count" type="number" min="0" max="10" style="width: 40px" onChange={handleChange} />
        //                 <p style="margin-bottom: 0px">{product.price}</p>
        //             </div>
        //         )
        // const list = document.getElementById('list')
        // list.style.borderBottom = "1px solid"
        // const shopping = document.createElement('div')
        // shopping.className = "d-flex justify-content-between my-2"
        // shopping.innerHTML = `${product.color} / ${product.size}
        // <input type="number" min="0" max="10" value="1" style="width: 40px" />
        // <p style="margin-bottom: 0px">14,000원</p>`
        // const deleteA = document.createElement('a')
        // deleteA.innerText = 'X'
        // deleteA.addEventListener('click', listDelete)
        // shopping.appendChild(deleteA)
        // list.appendChild(shopping)
        // }
        // }
kusang96's avatar
kusang96 committed
78
79
    }

80
    async function addCart() {
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
81
        // preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌
82
        try {
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
83
            setError('')
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
84
            const response = await axios.put('/api/cart/addcart', {
85
86
87
                userId: localStorage.getItem('loginStatus'),
                productId: "a8f4d63ead77717f940a2b27deb707a6",
                products: preCart
88
89
            })
            console.log(response)
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
90
91
        } catch (error) {
            catchErrors(error, setError)
92
93
94
        }
    }

Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
95
96
97
    // useEffect(() => {
    //     handleCreate()
    // }, [product])
kusang96's avatar
kusang96 committed
98
99
100

    return (
        <div>
kusang96's avatar
0115    
kusang96 committed
101
            {console.log("match=",match.params, "location=",location.state, "product=",product)}
kusang96's avatar
kusang96 committed
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
            <style type="text/css">
                {`
                .btn {
                    background-color: #CDC5C2;
                    border-color: #CDC5C2;
                }

                .btn:hover, .btn:active, .btn:focus {
                    background-color: #91877F;
                    border-color: #91877F;
                }
                `}
            </style>
            <Row className="justify-content-center mt-5 mx-0">
                <Col sm={11} md={4}>
kusang96's avatar
0115    
kusang96 committed
117
                    <img src={product.main_img} style={{ objectFit: "contain", width: "100%" }} />
kusang96's avatar
kusang96 committed
118
119
                </Col>
                <Col sm={11} md={4} className="align-middle mt-4">
kusang96's avatar
0115    
kusang96 committed
120
121
                    <h3 className="mb-4">{product.name}</h3>
                    <h5 className="mb-4">가격 : {product.price}</h5>
kusang96's avatar
kusang96 committed
122
123
124
                    <Form style={{ borderBottom: "1px solid" }}>
                        <Form.Group style={{ borderBottom: "1px solid", paddingBottom: "2rem" }}>
                            <Form.Label>색상</Form.Label>
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
125
                            <Form.Control as="select" className="mb-2" name="colors" defaultValue="옵션 선택" onChange={handleChange}>
kusang96's avatar
kusang96 committed
126
                                <option>옵션선택</option>
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
127
128
129
                                {product.colors.map((e) => (
                                    <option>{e}</option>
                                ))}
kusang96's avatar
kusang96 committed
130
131
                            </Form.Control>
                            <Form.Label>사이즈</Form.Label>
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
132
                            <Form.Control as="select" className="mb-2" name="sizes" defaultValue="옵션 선택" onChange={handleChange}>
kusang96's avatar
kusang96 committed
133
                                <option>옵션선택</option>
Jiwon Yoon's avatar
qwr    
Jiwon Yoon committed
134
135
136
                                {product.sizes.map((e) => (
                                    <option>{e}</option>
                                ))}
kusang96's avatar
kusang96 committed
137
138
                            </Form.Control>
                        </Form.Group>
139
140
141
                        {preCart.map((e) => (
                            <div>{e.colors}/{e.sizes}</div>
                        ))}
kusang96's avatar
kusang96 committed
142
143
                        <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
                            <Col> 금액</Col>
Jiwon Yoon's avatar
0113    
Jiwon Yoon committed
144
                            <Col className="text-right">{price}</Col>
kusang96's avatar
kusang96 committed
145
146
                        </Row>
                        <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
147
                            <Button onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
kusang96's avatar
kusang96 committed
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
                            <Button style={{ width: "49%" }}>구매하기</Button>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <Row className="justify-content-center mt-5 mx-0">
                <Col sm={11} md={8}>
                    <h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }}>설명</h3>
                    <div></div>
                </Col>
            </Row>
            <Row className="justify-content-center mx-0 pt-3 px-2" style={{ position: "fixed", bottom: "0", width: "100%", backgroundColor: "#fff" }}>
                <Col sm={12} md={9}>
                    <h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천
                        <a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem" }}>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>
                </Col>
            </Row>
        </div>
    )
}

export default Product