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

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

function ProductsRegist() {
12
13
14
15
16
17
    const INIT_PRODUCT = {
        pro_name: '',
        price: 0,
        stock: 0,
        main_category: '',
        sub_category: [],
Jiwon Yoon's avatar
Jiwon Yoon committed
18
19
        sizes: [],
        colors: [],
20
21
22
23
        description: '',
        main_image: [],
        detail_image: []
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
24
    const [categories, setCategories] = useState({ 0: [], 1: [[]] })
25
    const [product, setProduct] = useState(INIT_PRODUCT)
kusang96's avatar
kusang96 committed
26
    const [categoryNum, setCategoryNum] = useState('')
27
    const [tag, setTag] = useState(0)
Jiwon Yoon's avatar
Jiwon Yoon committed
28
29
    const [subCate, setSubCate] = useState('')
    const [color, setColor] = useState({})
kusang96's avatar
dd    
kusang96 committed
30
    const [error, setError] = useState('')
31
32
    const [success, setSuccess] = useState(false)
    const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": false })
kusang96's avatar
kusang96 committed
33
34
35
36
    const [disabled, setDisabled] = useState(true)
    const [loading, setLoading] = useState(false)
    const selectRef = useRef(null)
    const colorRef = useRef(null)
37

kusang96's avatar
kusang96 committed
38
39
    useEffect(async () => {
        try {
이재연's avatar
이재연 committed
40
            const response = await axios.get('/api/categories/main')
kusang96's avatar
kusang96 committed
41
            const data = response.data[0]
Jiwon Yoon's avatar
Jiwon Yoon committed
42
            setCategories([Object.keys(data), Object.values(data)])
kusang96's avatar
kusang96 committed
43
44
45
46
        } catch (error) {
            catchErrors(error, setError)
        }
    }, [])
47

kusang96's avatar
kusang96 committed
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
    useEffect(() => {
        const isProduct = Object.values(product).every(el => { console.log("el=", el); Boolean(el) })
        isProduct ? setDisabled(false) : setDisabled(true)
    }, [product])

    function addCategory(e) {
        if (selectRef.current.value === '') {
            alert('하위 분류를 반드시 선택해 주세요.')
        } else {
            list.push(
                <div>
                    <span name={subCate} >{product["main_category"]} / {subCate} </span>
                    <input name={subCate} 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)
            selectRef.current.selectedIndex = 0
        }
65
    }
kusang96's avatar
kusang96 committed
66

67
    function deleteCategory(e) {
Jiwon Yoon's avatar
Jiwon Yoon committed
68
        e.target.parentNode.remove()
kusang96's avatar
kusang96 committed
69
        const index = product["sub_category"].findIndex((item) => { return item === e.target.name })
Jiwon Yoon's avatar
Jiwon Yoon committed
70
71
72
73
        product["sub_category"].splice(index, 1)
        setSubCate('')
        console.log(product["sub_category"].length)
    }
74

Jiwon Yoon's avatar
Jiwon Yoon committed
75
    function handleCategory(e) {
kusang96's avatar
kusang96 committed
76
77
78
        const { name, value, selectedIndex } = e.target
        if (name === "main_category") {
            setCategoryNum(selectedIndex - 1)
Jiwon Yoon's avatar
Jiwon Yoon committed
79
80
81
82
83
84
85
        }
        if (name === "sub_category") {
            product[name].push(value)
            setSubCate(value)
        } else {
            setProduct({ ...product, [name]: value })
        }
86
    }
kusang96's avatar
kusang96 committed
87

88
89
90
    function handleCheckBox(e) {
        setChecked({ ...checked, [e.target.value]: !checked[`${e.target.value}`] })
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
91

92
    function addColor() {
Jiwon Yoon's avatar
Jiwon Yoon committed
93
94
        preColors.push(color["colors"])
        colorHtml.push(
Jiwon Yoon's avatar
Jiwon Yoon committed
95
96
97
98
            <div>
                <span>{color["colors"]}</span>
                <input name={subCate} type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteColor} />
            </div>
99
        )
kusang96's avatar
kusang96 committed
100
        colorRef.current.value = ''
kusang96's avatar
kusang96 committed
101
        setProduct({ ...product, "colors": preColors })
Jiwon Yoon's avatar
Jiwon Yoon committed
102
    }
103

Jiwon Yoon's avatar
Jiwon Yoon committed
104
    function deleteColor(e) {
kusang96's avatar
kusang96 committed
105
        // console.log("e.name=",e.target.name)
Jiwon Yoon's avatar
Jiwon Yoon committed
106
107
        e.target.parentNode.remove()
        product["colors"].splice(e.name, 1)
kusang96's avatar
kusang96 committed
108
109
        // setColor({})
        // console.log(product)
Jiwon Yoon's avatar
Jiwon Yoon committed
110
    }
111

Jiwon Yoon's avatar
Jiwon Yoon committed
112
    function handleColor(e) {
kusang96's avatar
kusang96 committed
113
        color[e.target.name] = e.target.value
114
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
115
116

    function handleChange(event) {
Jiwon Yoon's avatar
0111    
Jiwon Yoon committed
117
        const { name, value, files } = event.target
Jiwon Yoon's avatar
Jiwon Yoon committed
118
        if (files) {
kusang96's avatar
dd    
kusang96 committed
119
120
121
122
            setProduct({ ...product, [name]: files })
        } else {
            setProduct({ ...product, [name]: value })
        }
Jiwon Yoon's avatar
Jiwon Yoon committed
123
124
    }

kusang96's avatar
dd    
kusang96 committed
125
    async function handleSubmit(e) {
Jiwon Yoon's avatar
Jiwon Yoon committed
126
        e.preventDefault()
127
128
129
130
131
132
        const sizes = []
        for (let [key, value] of Object.entries(checked)) {
            if (value === true) {
                sizes.push(key)
            }
        }
kusang96's avatar
kusang96 committed
133
        product["sizes"] = sizes
Jiwon Yoon's avatar
Jiwon Yoon committed
134
        console.log(product)
kusang96's avatar
kusang96 committed
135
        const formData = new FormData();
이재연's avatar
0113    
이재연 committed
136
        for (let key in product) {
kusang96's avatar
kusang96 committed
137
            if (key === "main_image" || key === "detail_image") {
이재연's avatar
0113    
이재연 committed
138
                formData.append(key, product[key][0])
Jiwon Yoon's avatar
Jiwon Yoon committed
139
140
            } else if (key === "sizes" || key === "colors" || key === "sub_category") {
                for (let i = 0; i < product[key].length; i++) {
Jiwon Yoon's avatar
Jiwon Yoon committed
141
142
                    formData.append([key], product[key][i])
                }
Jiwon Yoon's avatar
Jiwon Yoon committed
143
            }
Jiwon Yoon's avatar
Jiwon Yoon committed
144
            else {
kusang96's avatar
dd    
kusang96 committed
145
146
147
148
                formData.append(key, product[key])
            }
        }
        try {
kusang96's avatar
kusang96 committed
149
150
            setLoading(true)
            setError('')
kusang96's avatar
0115    
kusang96 committed
151
            const response = await axios.post('/api/product/regist', formData)
이재연's avatar
0113    
이재연 committed
152
            console.log(response)
kusang96's avatar
0115    
kusang96 committed
153
            setSuccess(true)
kusang96's avatar
dd    
kusang96 committed
154
155
        } catch (error) {
            catchErrors(error, setError)
kusang96's avatar
kusang96 committed
156
157
        } finally {
            setLoading(false)
kusang96's avatar
kusang96 committed
158
        }
Jiwon Yoon's avatar
Jiwon Yoon committed
159
160
    }

161
    if (success) {
kusang96's avatar
kusang96 committed
162
        alert('상품 등록을 완료하였습니다.')
kusang96's avatar
0115    
kusang96 committed
163
        return <Redirect to='/admin' />
164
    }
kusang96's avatar
kusang96 committed
165

Kim, Subin's avatar
Kim, Subin committed
166
    return (
167
        <Container>
kusang96's avatar
kusang96 committed
168
169
            <Row className="justify-content-md-center">
                <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
170
                    {error && <Alert variant="danger" className="text-center">{error}</Alert>}
kusang96's avatar
kusang96 committed
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
                    <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
                    <Form className="p-5" onSubmit={handleSubmit}>
                        <Form.Group controlId="productNameform">
                            <Form.Label>상품명</Form.Label>
                            <Form.Control type="text" name="pro_name" placeholder="상품명" onChange={handleChange} />
                        </Form.Group>
                        <Form.Group controlId="productAmountform">
                            <Form.Label>재고</Form.Label>
                            <Form.Control type="text" name="stock" placeholder="숫자만 입력해주세요" onChange={handleChange} />
                        </Form.Group>
                        <Form.Group controlId="productPriceform">
                            <Form.Label>가격</Form.Label>
                            <Form.Control type="text" name="price" placeholder="숫자만 입력해주세요" onChange={handleChange} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>분류</Form.Label>
                            <Row>
                                <Col md={4}>
Jiwon Yoon's avatar
Jiwon Yoon committed
189
                                    <Form.Control as="select" name="main_category" onChange={handleCategory} disabled={product["sub_category"].length > 0}>
kusang96's avatar
kusang96 committed
190
                                        <option value="" >상위분류</option>
Jiwon Yoon's avatar
Jiwon Yoon committed
191
                                        {categories[0].map((main) => (
kusang96's avatar
kusang96 committed
192
193
194
195
196
                                            <option value={main}>{main}</option>
                                        ))}
                                    </Form.Control>
                                </Col>
                                <Col md={6}>
kusang96's avatar
kusang96 committed
197
                                    <Form.Control as="select" ref={selectRef} name="sub_category" onChange={handleCategory}>
kusang96's avatar
kusang96 committed
198
                                        <option value="" >하위분류</option>
kusang96's avatar
kusang96 committed
199
                                        {(categoryNum === '') ? '' : (categories[1][categoryNum].map((sub) => (
kusang96's avatar
kusang96 committed
200
                                            <option value={sub}>{sub}</option>
kusang96's avatar
kusang96 committed
201
                                        )))}
kusang96's avatar
kusang96 committed
202
203
204
205
206
207
208
209
210
211
                                    </Form.Control>
                                </Col>
                                <Col >
                                    <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addCategory}>추가</Button>
                                </Col>
                            </Row>
                            {list.map((element) => element)}
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>사이즈</Form.Label>
kusang96's avatar
kusang96 committed
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
                            <Row>
                                <Col>
                                    <Form.Check type="checkbox" name="sizes" label="210" value="210" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="215" value="215" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="220" value="220" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="225" value="225" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="230" value="230" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="235" value="235" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="240" value="240" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="245" value="245" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="250" value="250" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="255" value="255" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="260" value="260" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="265" value="265" onChange={handleCheckBox} />
                                    <Form.Check type="checkbox" name="sizes" label="270" value="270" onChange={handleCheckBox} />
                                </Col>
                                <Col>
                                    <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} />
                                </Col>
                            </Row>
kusang96's avatar
kusang96 committed
237
238
239
240
241
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>색상</Form.Label>
                            <Row>
                                <Col md={10}>
242
                                    <Form.Control as="input" ref={colorRef} name="colors" placeholder="색상" onChange={handleColor} />
kusang96's avatar
kusang96 committed
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
                                </Col>
                                <Col>
                                    <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
                                </Col>
                            </Row>
                            {colorHtml.map((element) => element)}
                        </Form.Group>
                        <Form.Group controlId="productDescriptionform">
                            <Form.Label>상품설명</Form.Label>
                            <Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>대표이미지</Form.Label>
                            <Form.File id="productImageform" name="main_image" onChange={handleChange} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>상세이미지</Form.Label>
                            <Form.File id="productImageform" name="detail_image" onChange={handleChange} />
                        </Form.Group>
kusang96's avatar
kusang96 committed
262
263
264
                        <Button type="submit" style={{ background: '#91877F', borderColor: '#91877F' }} block>
                            {loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />}{' '}등록
                        </Button>
kusang96's avatar
kusang96 committed
265
266
267
268
                    </Form>
                </Col>
            </Row>
        </Container>
Kim, Subin's avatar
Kim, Subin committed
269
270
271
272
    )
}

export default ProductsRegist