ProductRegist.js 9.87 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import React, { useState, useEffect, useRef } from 'react';
이재연's avatar
0113    
이재연 committed
2
import { Row, Col, Button, Form, Container } from 'react-bootstrap';
Jiwon Yoon's avatar
Jiwon Yoon committed
3
import axios from 'axios'
4
import catchErrors from '../utils/catchErrors';
이재연's avatar
0113    
이재연 committed
5
import { Redirect } from 'react-router-dom';
Jiwon Yoon's avatar
Jiwon Yoon committed
6

7
let color = {}
Jiwon Yoon's avatar
Jiwon Yoon committed
8
9
let preColors = []
let colorHtml = []
10
let list = []
Kim, Subin's avatar
Kim, Subin committed
11
12

function ProductsRegist() {
13
14
15
16
17
18
    const INIT_PRODUCT = {
        pro_name: '',
        price: 0,
        stock: 0,
        main_category: '',
        sub_category: [],
Jiwon Yoon's avatar
Jiwon Yoon committed
19
20
        sizes: [],
        colors: [],
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
        description: '',
        main_image: [],
        detail_image: []
    }
    const categorys = {
        "DRESS": ["LONG DRESS", "SHORT DRESS", "KNIT DRESS", "SHIRT DRESS", "PATTERN DRESS", "BUSTIER DRESS", "TWO-PIECE DRESS"],
        "OUTER": ["PADDED JACKET", "JACKET", "JUMPER", "COAT", "FLEECE", "CARDIGAN / VEST"],
        "TOP": ["KNIT", "HOODY", "BLOUSE", "SHIRT", "SWEATSHIRT", "LONG SLEEVE SHIRT", "SHORT SLEEVE / SLEEVELESS SHIRT"],
        "PANTS": ["JEANS", "SKINNY JEANS", "BANDING PANTS", "WIDE-FIT PANTS", "BOOT-CUT PANTS", "STRAIGHT-FIT PANTS", "SHORTS", "TROUSERS", "LEGGINGS", "JUMPSUIT / OVERALLS"],
        "SKIRT": ["LONG SKIRT", "MIDI SKIRT", "MINI SKIRT"],
        "TRAINING": [],
        "SHOES": ["SNEAKERS / SLIP-ON", "FLAT / LOAFER", "HEEL / PUMP", "BOOTS", "SANDAL / SLIPPER"]
    }
    const [product, setProduct] = useState(INIT_PRODUCT)
    const [categoryNum, setCategoryNum] = useState(0)
    const [tag, setTag] = useState(0)
kusang96's avatar
dd    
kusang96 committed
37
    const [error, setError] = useState('')
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
    const [success, setSuccess] = useState(false)
    const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": false })

    const mainCategorys = Object.keys(categorys)
    const subCategorys = Object.values(categorys)

    function addCategory() {
        console.log(product)
        list.push(
            <div>
                <span i={tag}>{product["main_category"]} / {product["sub_category"][tag]}</span>
                <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteCategory} />
            </div>)
        setTag(tag + 1)
    }
    function deleteCategory(e) {
        const categ = e.target.parentNode
        categ.remove()
        product["sub_category"].splice(e.target.parentNode.firstElementChild.getAttribute("i"), 1)
        console.log(product)
    }
    function handleCheckBox(e) {
        setChecked({ ...checked, [e.target.value]: !checked[`${e.target.value}`] })
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
62

63
    function addColor() {
Jiwon Yoon's avatar
Jiwon Yoon committed
64
65
66
        preColors.push(color["colors"])
        colorHtml.push(
            <p>{color["colors"]}</p>
67
        )
Jiwon Yoon's avatar
Jiwon Yoon committed
68
69
        setProduct({...product, "colors":preColors})
    }
70

Jiwon Yoon's avatar
Jiwon Yoon committed
71
72
    function colorChange(e){
        color[e.target.name]= e.target.value
73
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
74
75

    function handleChange(event) {
Jiwon Yoon's avatar
0111    
Jiwon Yoon committed
76
        const { name, value, files } = event.target
77
78
        if (event.target.name === "sub_category") {
            product["sub_category"].push(event.target.value)
Jiwon Yoon's avatar
0111    
Jiwon Yoon committed
79
        } else if (files) {
kusang96's avatar
dd    
kusang96 committed
80
            setProduct({ ...product, [name]: files })
Jiwon Yoon's avatar
0111    
Jiwon Yoon committed
81

kusang96's avatar
dd    
kusang96 committed
82
83
84
        } else {
            setProduct({ ...product, [name]: value })
        }
85
86
87
        if (event.target.name === "main_category") {
            setCategoryNum(event.target.selectedIndex - 1)
        }
Jiwon Yoon's avatar
Jiwon Yoon committed
88
89
    }

kusang96's avatar
dd    
kusang96 committed
90
    async function handleSubmit(e) {
Jiwon Yoon's avatar
Jiwon Yoon committed
91
        e.preventDefault()
92
93
94
95
96
97
        const sizes = []
        for (let [key, value] of Object.entries(checked)) {
            if (value === true) {
                sizes.push(key)
            }
        }
Jiwon Yoon's avatar
Jiwon Yoon committed
98
        product["sizes"]=sizes
Jiwon Yoon's avatar
0111    
Jiwon Yoon committed
99
        console.log(product)
kusang96's avatar
kusang96 committed
100
        const formData = new FormData();
이재연's avatar
0113    
이재연 committed
101
102
103
104
        for (let key in product) {
            if (key === "main_imgUrl" ||key === "detail_imgUrl") {
                console.log(product[key][0])
                formData.append(key, product[key][0])
kusang96's avatar
dd    
kusang96 committed
105
106
107
108
109
            } else {
                formData.append(key, product[key])
            }
        }
        try {
이재연's avatar
0113    
이재연 committed
110
111
112
            const response = axios.post('/api/product/regist', formData)
            // setSuccess(true)
            console.log(response)
kusang96's avatar
dd    
kusang96 committed
113
114
        } catch (error) {
            catchErrors(error, setError)
kusang96's avatar
kusang96 committed
115
        }
Jiwon Yoon's avatar
Jiwon Yoon committed
116
117
    }

118
119
    if (success) {
        return <Redirect to='/' />
120
    }
Kim, Subin's avatar
Kim, Subin committed
121
122
    return (
        <div>
Jiwon Yoon's avatar
Jiwon Yoon committed
123
124
            <Container>
                <Row className="justify-content-md-center">
125
                    <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
Jiwon Yoon's avatar
Jiwon Yoon committed
126
                        <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
Jiwon Yoon's avatar
Jiwon Yoon committed
127
                        <Form className="p-5" onSubmit={handleSubmit}>
Jiwon Yoon's avatar
Jiwon Yoon committed
128
129
                            <Form.Group controlId="productNameform">
                                <Form.Label>상품명</Form.Label>
Jiwon Yoon's avatar
Jiwon Yoon committed
130
                                <Form.Control type="text" name="pro_name" placeholder="상품명" onChange={handleChange} />
Jiwon Yoon's avatar
Jiwon Yoon committed
131
132
                            </Form.Group>
                            <Form.Group controlId="productAmountform">
Jiwon Yoon's avatar
Jiwon Yoon committed
133
134
                                <Form.Label>재고</Form.Label>
                                <Form.Control type="text" name="stock" placeholder="숫자만 입력해주세요" onChange={handleChange} />
Jiwon Yoon's avatar
Jiwon Yoon committed
135
136
137
                            </Form.Group>
                            <Form.Group controlId="productPriceform">
                                <Form.Label>가격</Form.Label>
Jiwon Yoon's avatar
Jiwon Yoon committed
138
                                <Form.Control type="text" name="price" placeholder="숫자만 입력해주세요" onChange={handleChange} />
Jiwon Yoon's avatar
Jiwon Yoon committed
139
140
141
142
                            </Form.Group>
                            <Form.Group>
                                <Form.Label>분류</Form.Label>
                                <Row>
143
                                    <Col md={4}>
144
145
146
                                        <Form.Control as="select" name="main_category" onChange={handleChange}>
                                            <option value="" >상위분류</option>
                                            {mainCategorys.map((main) => (
147
                                                <option value={main}>{main}</option>
148
                                            ))}
Jiwon Yoon's avatar
Jiwon Yoon committed
149
150
151
                                        </Form.Control>
                                    </Col>
                                    <Col md={6}>
152
153
154
                                        <Form.Control as="select" name="sub_category" onChange={handleChange}>
                                            <option value="" >하위분류</option>
                                            {subCategorys[categoryNum].map((sub) => (
155
                                                <option value={sub}>{sub}</option>
156
                                            ))}
Jiwon Yoon's avatar
Jiwon Yoon committed
157
158
                                        </Form.Control>
                                    </Col>
159
160
161
                                    <Col >
                                        <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addCategory}>추가</Button>
                                    </Col>
Jiwon Yoon's avatar
Jiwon Yoon committed
162
                                </Row>
163
                                {list.map((element) => element)}
Jiwon Yoon's avatar
Jiwon Yoon committed
164
                            </Form.Group>
165
166
                            <Form.Group>
                                <Form.Label>사이즈</Form.Label>
Jiwon Yoon's avatar
Jiwon Yoon committed
167
168
169
170
171
172
                                <Form.Check type="checkbox" name="sizes" label="Free" value="Free" onChange={handleCheckBox} />
                                <Form.Check type="checkbox" name="sizes" label="XL" value="XL" onChange={handleCheckBox} />
                                <Form.Check type="checkbox" name="sizes" label="L" value="L" onChange={handleCheckBox} />
                                <Form.Check type="checkbox" name="sizes" label="M" value="M" onChange={handleCheckBox} />
                                <Form.Check type="checkbox" name="sizes" label="S" value="S" onChange={handleCheckBox} />
                                <Form.Check type="checkbox" name="sizes" label="XS" value="XS" onChange={handleCheckBox} />
173
174
175
176
177
                            </Form.Group>
                            <Form.Group>
                                <Form.Label>색상</Form.Label>
                                <Row>
                                    <Col md={10}>
Jiwon Yoon's avatar
Jiwon Yoon committed
178
                                        <Form.Control as="textarea" rows={1} name="colors" placeholder="색상" onChange={colorChange} />
179
180
181
182

                                    </Col>
                                    <Col>

Jiwon Yoon's avatar
Jiwon Yoon committed
183
                                        <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
184
                                    </Col>
Jiwon Yoon's avatar
Jiwon Yoon committed
185
                                </Row>
Jiwon Yoon's avatar
Jiwon Yoon committed
186
                                {colorHtml.map((element) => element)}
Jiwon Yoon's avatar
Jiwon Yoon committed
187
                            </Form.Group>
188

Jiwon Yoon's avatar
Jiwon Yoon committed
189
190
                            <Form.Group controlId="productDescriptionform">
                                <Form.Label>상품설명</Form.Label>
Jiwon Yoon's avatar
Jiwon Yoon committed
191
                                <Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} />
Jiwon Yoon's avatar
Jiwon Yoon committed
192
193
194
                            </Form.Group>
                            <Form.Group>
                                <Form.Label>대표이미지</Form.Label>
이재연's avatar
0113    
이재연 committed
195
                                <Form.File id="productImageform" name="main_imgUrl" onChange={handleChange} />
Jiwon Yoon's avatar
Jiwon Yoon committed
196
197
198
                            </Form.Group>
                            <Form.Group>
                                <Form.Label>상세이미지</Form.Label>
이재연's avatar
0113    
이재연 committed
199
                                <Form.File id="productImageform" name="detail_imgUrl" onChange={handleChange} />
Jiwon Yoon's avatar
Jiwon Yoon committed
200
                            </Form.Group>
201
                            <Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
Jiwon Yoon's avatar
Jiwon Yoon committed
202
203
204
205
                        </Form>
                    </Col>
                </Row>
            </Container>
Kim, Subin's avatar
Kim, Subin committed
206
207
208
209
210
        </div>
    )
}

export default ProductsRegist