0111

client/src/App.js

@@ -6,7 +6,8 @@ import Signup from './Pages/Signup';
 import Product from "./Pages/Product";
 import ProductsList from "./Pages/ProductsList";
 import Admin from './Pages/Admin';
-import ProductRegist from './Pages/ProductRegist';
+// import ProductRegist from './Pages/ProductRegist';
+import ProductRegist2 from './Pages/ProductRegist2';
 import ShoppingCart from './Pages/ShoppingCart';
 import Payment from './Pages/Payment';
 import Account from './Pages/Account';
@@ -33,7 +34,8 @@ function App() {
           <Route path="/product" component={Product} />
           <Route path="/productslist" component={ProductsList} />
           <Route path="/admin" component={Admin} />
-          <Route path="/regist" component={ProductRegist} />
+          {/* <Route path="/regist" component={ProductRegist} /> */}
+          <Route path="/regist" component={ProductRegist2} />
           <Route path="/shoppingcart" component={ShoppingCart} />
           <Route path="/payment" component={Payment} />
           <Route path="/account" component={Account} />

client/src/Pages/ProductRegist.js

@@ -62,24 +62,26 @@ function ProductsRegist() {
 
     function addColor() {
         addedcolors.push(
-            <div>{color["color"]}</div>
+            <div>{colors["color"]}</div>
         )
-        if (product.color) {
-            setProduct({ ...product, [color]: colors })
+        if (product[color]) {
+            setProduct({ ...product, [color]:Object.values(colors) })
         } else {
-            setProduct({ ...product, "color": colors })
+            setProduct({ ...product, "color": Object.values(colors) })
 
         }
-
     }
 
     function handleChange(event) {
-        const { name, value } = event.target
+        const { name, value, files } = event.target
         if (event.target.name === "sub_category") {
             product["sub_category"].push(event.target.value)
-        } else if (event.target.name === "color") {
-            color[event.target.name] = event.target.value
-            // console.log(color)
+        // } else if (event.target.name === "color") {
+        //     colors[event.target.name] = event.target.value
+        //     // console.log(color)
+        } else if (files) {
+            setProduct({ ...product, [name]: files })
+
         } else {
             setProduct({ ...product, [name]: value })
         }
@@ -97,15 +99,20 @@ function ProductsRegist() {
             }
         }
         product["size"].push(sizes)
+        console.log(product)
+
         const formData = new FormData();
         for (let key in product) {
+            if (key === "main_image" || "detail_image") {
+                formData.append(`${key}`, product[key][0])
+                console.log(product[key][0])
+            } else {
                 formData.append(key, product[key])
             }
-        console.log("formData=", formData)
-        console.log(product)
+        }
         try {
-            const response = axios.post('/api/product/regist', { data: formData })
-            setSuccess(true)
+            const response = axios.post('/api/product/regist', formData)
+            // setSuccess(true)
             console.log(response)
         } catch (error) {
             catchErrors(error, setError)
@@ -178,10 +185,10 @@ function ProductsRegist() {
                                     </Col>
                                     <Col>
 
-                                        <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
+                                        {/* <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button> */}
                                     </Col>
                                 </Row>
-                                {addedcolors.map((element) => element)}
+                                {/* {addedcolors.map((element) => element)} */}
                             </Form.Group>
 
                             <Form.Group controlId="productDescriptionform">

client/src/Pages/ProductRegist2.js

+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 colors = []
+let addedcolors = []
+let list = []
+
+function ProductsRegist() {
+    const INIT_PRODUCT = {
+        pro_name: '',
+        price: 0,
+        stock: 0,
+        main_category: '',
+        sub_category: [],
+        size: [],
+        color: [],
+        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(
+            <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}`] })
+    }
+
+    function addColor() {
+        addedcolors.push(
+            <div>{colors["color"]}</div>
+        )
+        if (product[color]) {
+            setProduct({ ...product, [color]:Object.values(colors) })
+        } else {
+            setProduct({ ...product, "color": Object.values(colors) })
+        }
+    }
+
+    function handleChange(event) {
+        const { name, value, files } = event.target
+        if (event.target.name === "sub_category") {
+            product["sub_category"].push(event.target.value)
+        } else if (event.target.name === "color") {
+            colors[event.target.name] = event.target.value
+            // console.log(color)
+        } 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["size"].push(sizes)
+        console.log(product)
+
+        const formData = new FormData();
+        for (let key in product) {
+            if (key === "main_image" ||key === "detail_image") {
+                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 <Redirect to='/' />
+    }
+    return (
+        <div>
+            <Container>
+                <Row className="justify-content-md-center">
+                    <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
+                        <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}>
+                                        <Form.Control as="select" name="main_category" onChange={handleChange}>
+                                            <option value="" >상위분류</option>
+                                            {mainCategorys.map((main) => (
+                                                <option value={main}>{main}</option>
+                                            ))}
+                                        </Form.Control>
+                                    </Col>
+                                    <Col md={6}>
+                                        <Form.Control as="select" name="sub_category" onChange={handleChange}>
+                                            <option value="" >하위분류</option>
+                                            {subCategorys[categoryNum].map((sub) => (
+                                                <option value={sub}>{sub}</option>
+                                            ))}
+                                        </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>
+                                {/* {console.log(checked)} */}
+                                <Form.Check type="checkbox" name="size" label="Free" value="Free" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="XL" value="XL" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="L" value="L" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="M" value="M" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="S" value="S" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="size" label="XS" value="XS" onChange={handleCheckBox} />
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>색상</Form.Label>
+                                <Row>
+                                    <Col md={10}>
+                                        <Form.Control as="textarea" rows={1} name="color" placeholder="색상" onChange={handleChange} />
+
+                                    </Col>
+                                    <Col>
+
+                                        <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
+                                    </Col>
+                                </Row>
+                                {addedcolors.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>
+                            <Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
+                        </Form>
+                    </Col>
+                </Row>
+            </Container>
+        </div>
+    )
+}
+
+export default ProductsRegist
\ No newline at end of file

client/src/Pages/ProductsList.js

@@ -6,6 +6,20 @@ import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from '
 function ProductsList() {
     const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
 
+    // useEffect(() => {
+    //     getProfile(user)
+    // }, [user])
+
+    // async function getProfile(user){
+    //     console.log(user)
+    //     try {
+    //         const response = await axios.get(`/api/users/profile/${user}`)
+    //         setProfile(response.data)
+    //     } catch (error) {
+    //         catchErrors(error, setError)
+    //     }
+    // }
+
     function handleSubmit(e) {
         e.preventDefault()
     }

server/.gitignore

 node_modules
 package-lock.json
+uploads/
\ No newline at end of file

server/controllers/product.controller.js

 import Product from "../schemas/Product.js";
+import multer from 'multer';
+
+
+const upload = multer({ dest: 'uploads/'});
+
+const fileUpload = upload.fields([
+    { name: 'main_image', maxCount: 1 },
+    { name: 'detail_image', maxCount: 1 }
+])
 
 const regist = async (req, res) => {
     console.log('req.body=', req.body)
-    const { pro_name, price, stock, main_category, sub_category, description, main_image, detail_image } = req.body
+    const { pro_name, price, stock, main_category, sub_category, description } = req.body
+    console.log(req.files)
+    const main_image = req.files['main_image'][0].filename
+    console.log(main_image)
+    const detail_image = req.files['detail_image'][0].filename
+    // const { main_image, detail_image} = req.files
     try {
         const newProduct = await new Product ({
             pro_name, price, stock, main_category, sub_category, description, main_image, detail_image
@@ -14,4 +28,4 @@ const regist = async (req, res) => {
     }
 }
 
-export default { regist }
+export default { regist, fileUpload }
\ No newline at end of file

server/routes/product.routes.js

 import express from "express";
-import path from 'path';
-import multer from 'multer';
+// import path from 'path';
+// import multer from 'multer';
 import productCtrl from '../controllers/product.controller.js';
-import fs from 'fs'
+// import fs from 'fs'
 
 // process.cwd() + '/client/public/image'
 
 const router = express.Router()
 
-fs.readdir('uploads', (error, data) => {
-    if (error) {
-        fs.mkdirSync('uploads');
-        if (data == undefined) {
-          fs.mkdirSync('/main')
-          fs.mkdirSync('/detail')
-        }
-    } else console.log("else data",data)
-  })
-
-const upload = multer({
-    storage: multer.diskStorage({
-        destination(req, file, cb) {
-            cb(null, 'uploads/');
-        }, // 저장 경로 변경
-        filename(req, file, cb) {
-            cb(null, new Date().valueOf() + path.extname(file.originalname));
-        }, // 파일명 변경
-     }),
-});
-
 router.route('/regist')
-    .post(productCtrl.regist)
-// upload.array('main_image'), 
+    .post(productCtrl.fileUpload, productCtrl.regist)
+
 export default router
\ No newline at end of file

server/schemas/Product.js

@@ -22,11 +22,11 @@ const ProductSchema = new mongoose.Schema({
     },
     size: {
         type: Array,
-        required: true
+        // required: true
     },
     color: {
         type: Array,
-        required: true
+        // required: true
     },
     main_category: {
         type: String,
@@ -41,11 +41,11 @@ const ProductSchema = new mongoose.Schema({
         required: true,
     },
     main_image: {
-        type: String,
+        type: Array,
         required: true,
     },
     detail_image: {
-        type: String,
+        type: Array,
         required: true,
     }
 }, {