import React, { useState, useEffect, useRef } from 'react'; import { Row, Col, Button, Form, Container } from 'react-bootstrap'; import axios from 'axios' import catchErrors from '../utils/catchErrors'; import { Redirect } from 'react-router-dom'; let color = {} let preColors = [] let colorHtml = [] let list = [] function ProductsRegist() { const INIT_PRODUCT = { pro_name: '', price: 0, stock: 0, main_category: '', sub_category: [], sizes: [], colors: [], 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) const [error, setError] = useState('') 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(
{product["main_category"]} / {product["sub_category"][tag]}
) 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}`] }) } function addColor() { preColors.push(color["colors"]) colorHtml.push(

{color["colors"]}

) setProduct({...product, "colors":preColors}) } function colorChange(e){ color[e.target.name]= e.target.value } function handleChange(event) { const { name, value, files } = event.target if (event.target.name === "sub_category") { product["sub_category"].push(event.target.value) } else if (files) { setProduct({ ...product, [name]: files }) } else { setProduct({ ...product, [name]: value }) } if (event.target.name === "main_category") { setCategoryNum(event.target.selectedIndex - 1) } } async function handleSubmit(e) { e.preventDefault() const sizes = [] for (let [key, value] of Object.entries(checked)) { if (value === true) { sizes.push(key) } } product["sizes"]=sizes console.log(product) const formData = new FormData(); for (let key in product) { if (key === "main_imgUrl" ||key === "detail_imgUrl") { console.log(product[key][0]) formData.append(key, product[key][0]) } else { formData.append(key, product[key]) } } try { const response = axios.post('/api/product/regist', formData) // setSuccess(true) console.log(response) } catch (error) { catchErrors(error, setError) } } if (success) { return } return (

상품등록

상품명 재고 가격 분류 {mainCategorys.map((main) => ( ))} {subCategorys[categoryNum].map((sub) => ( ))} {list.map((element) => element)} 사이즈 색상 {colorHtml.map((element) => element)} 상품설명 대표이미지 상세이미지
) } export default ProductsRegist