Merge 및 Nav, 라우터 app.js로 이동

client/src/Pages/Home.js

@@ -11,7 +11,7 @@ function Home() {
             <SubNav />
             <Container className="my-5">
                 <div className="my-4">
-                    <h2 style={{ marginRight: "5rem", marginLeft: "5rem", marginBottom: "2rem" }}><u>Best</u></h2>
+                    <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
                     <Row className="justify-content-center mx-0">
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
                             <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
@@ -58,7 +58,7 @@ function Home() {
                     </Row>
                 </div>
                 <div className="my-4">
-                    <h2 style={{ marginRight: "5rem", marginLeft: "5rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
+                    <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
                     <Row className="justify-content-center mx-0">
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
                             <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />

client/src/Pages/ProductsRegist.js → client/src/Pages/ProductRegist.js

 import React, { useState, useEffect, useRef } from 'react';
-import Nav1 from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import MainNav from '../Components/MainNav';
+import SubNav from '../Components/SubNav';
 import { Row, Col, Button, Form, Container } from 'react-bootstrap';
 import axios from 'axios'
 
 let list = []
 
 function ProductsRegist() {
-
-    const INIT_PRODUCT = {
-        pro_name: '',
-        price: 0,
-        stock: 0,
-        main_category: '',
-        sub_category: [],
-        description: '',
-        main_image: [],
-        detail_image: []
-    }
-    const [product, setProduct] = useState(INIT_PRODUCT)
-    const [categoryNum, setCategoryNum] = useState(0)
-    const [tag, setTag] = useState(0)
-
-    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 mainCategorys = Object.keys(categorys)
-    const subCategorys = Object.values(categorys)
-    const 
-
-    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)
-    }
+    const [product, setProduct] = useState()
 
     function handleChange(event) {
         const { name, value } = event.target
-        if (event.target.name === "sub_category") {
-            product["sub_category"].push(event.target.value)
-        } else {
+        console.log("file=",event.target.files)
+        console.log("name=",name,"value=",value)
         setProduct({ ...product, [name]: value })
     }
 
-        if (event.target.name === "main_category") {
-            setCategoryNum(event.target.selectedIndex)
-        }
-    }
-
     async function handleSubmit(e) {
         e.preventDefault()
-        try{
-            setError('')
-            await axios.post('/api/products/regist', {
-                product
-            }).then(function (res) {
+        const formData = new FormData();
+        for (let key of Object.keys(product)) {
+            formData.append(key, product[key])
+        }
+        console.log("formData=",formData)
+        axios.post('/api/product/regist',{data: formData}).then(function(res) {
             console.log("client의 res=", res)
         })
-            alert("상품등록이 완료되었습니다.")
-            setSuccess(true)
-
-        }catch(error) {
-            catchErrors(error, setError)
-
     }
+    //     }catch(error) {
+    //         catchErrors(error, setError)
 
-    }
+    //     }
+        
+    // }
     if (success) {
         return <Redirect to='/' />
     }
     return (
         <div>
-            <Nav1 />
-            <Nav2 />
-            <Container className="vh-100">
+            <MainNav />
+            <SubNav />
+            <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>

client/src/Pages/ProductsList.js

 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
 import Pagination from '../Components/Pagination';
 import search from '../search.svg';
-import { Container, Row, Form, FormControl, Button, Card } from 'react-bootstrap';
+import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
 
 function ProductsList() {
     const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
+
     function handleSubmit(e) {
         e.preventDefault()
     }
@@ -20,29 +19,38 @@ function ProductsList() {
                     border-color: #CDC5C2;
                 }
 
-                .btn:hover, .btn:active, .btn:focus {
+                .btn:hover, .btn:active, .btn:focus, .show>.btn-primary.dropdown-toggle {
                     background-color: #91877F;
                     border-color: #91877F;
                 }
                 `}
             </style>
-            <MainNav />
-            <SubNav />
             <Container>
-                <Row className="mx-0 my-4" style={{ flexDirection: "column", alignItems: "center" }}>
-                    <h1 style={{fontSize: "3rem"}}>OUTER</h1>
-                    <Row>
-                        {sub.map((ele) => (
-                            <Button>ele</Button>
-                        ))}
-                    </Row>
+                <Row className="justify-content-center mx-0 my-4">
+                    <Col sm={10}>
+                        <h1 style={{ fontSize: "3rem" }}>OUTER</h1>
+                        <div>{sub.map((ele) => (
+                            <Button className="m-1">{ele}</Button>
+                        ))}</div>
+                    </Col>
                 </Row>
-                <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
+                <Row className="justify-content-between mx-0 my-5">
+                    <Dropdown>
+                        <Dropdown.Toggle>정렬</Dropdown.Toggle>
+                        <Dropdown.Menu>
+                            <Dropdown.Item>인기상품</Dropdown.Item>
+                            <Dropdown.Item>신상품</Dropdown.Item>
+                            <Dropdown.Item>낮은가격</Dropdown.Item>
+                            <Dropdown.Item>높은가격</Dropdown.Item>
+                        </Dropdown.Menu>
+                    </Dropdown>
+                    <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
                         <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
                         <Button type="submit" className="search px-2">
                             <img src={search} width="20" height="20" />
                         </Button>
                         <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
+                    </Form>
                 </Row>
                 <Row className="justify-content-start m-5">
                     <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>

client/src/Pages/Signup.js

@@ -4,6 +4,7 @@ import Nav1 from '../Components/MainNav';
 import Nav2 from '../Components/SubNav';
 import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
 import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
+import axios from 'axios';
 
 const INIT_USER = {
     name: '',
@@ -44,6 +45,7 @@ function Signup() {
         
         try {
             setError('')
+            // const response = await axios.post('/api/user/signup', user)
             const response = await fetch('/api/users/signup', {
                 method: 'POST',
                 headers: {

client/src/index.js

@@ -7,7 +7,7 @@ import Signup from './Pages/Signup';
 import Product from "./Pages/Product";
 import ProductsList from "./Pages/ProductsList";
 import Admin from './Pages/Admin';
-import ProductsRegist from './Pages/ProductsRegist';
+import ProductRegist from './Pages/ProductRegist';
 import ShoppingCart from './Pages/ShoppingCart';
 import Payment from './Pages/Payment';
 import reportWebVitals from './reportWebVitals';
@@ -24,7 +24,7 @@ ReactDOM.render(
         <Route path="/product"component={Product} />
         <Route path="/productslist"component={ProductsList} />
         <Route path="/admin" component={Admin} />
-        <Route path="/regist" component={ProductsRegist} />
+        <Route path="/regist" component={ProductRegist} />
         <Route path="/shoppingcart" component={ShoppingCart} />
         <Route path="/payment" component={Payment} />
         <Route path="/account" component={Account}/>

server/app.js

@@ -22,7 +22,7 @@ app.use(express.static(path.join(process.cwd(), 'dist')))
 // app.use('/', indexRouter);
 app.use('/', kakaopayRoutes)
 app.use('/api/users',userRouter)
-app.use('/api/products', productRouter)
+app.use('/api/product', productRouter)
 
 app.listen(config.port, () => {
   console.info('Server started on port %s.', config.port)

server/controllers/product.controller.js

@@ -2,7 +2,9 @@ import Product from "../schemas/Product.js";
 
 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.product
+    console.log('req.data=', req.data)
+    console.log('req.body.data=', req.body.data)
+    const { pro_name, price, stock, main_category, sub_category, description, main_image, detail_image } = req.body
     try {
         const newProduct = await new Product ({
             pro_name, price, stock, main_category, sub_category, description, main_image, detail_image

server/controllers/user.controller.js

 import User from "../models/User.js";
-import isLength from 'validator/lib/isLength.js'
+import isLength from 'validator/lib/isLength.js';
+import bcrypt from 'bcryptjs';
 
 const signup = async (req, res) => {
     console.log(req.body)
     console.log('req.body.name=', req.body.name)
     const { name, number1, number2, id, password, password2, tel } = req.body
     try {
-        if(!isLength(password,{min:8, max:15})){
-            return res.status(422).json({message: '비밀번호는 8-15자리로 입력해주세요.'})
+        if (!isLength(password, { min: 8, max: 15 })) {
+            return res.status(422).json({ message: '비밀번호는 8-15자리로 입력해주세요.' })
         }
-        const newUser = await new User ({
+        // if (!isLength(name, { min: 3, max: 10 })) {
+        //     return res.status(422).send('이름은 3-10자로 입력해주세요.')
+        // } else if (!isLength(password, { min: 8, max: 15 })){
+        //     return res.status(422).json({message: '비밀번호는 8-15자리로 입력해주세요.'})
+        // }
+        // const user = await User.findOne({id})
+        // if (user) {
+        //     return res.status(422).send(`${id}가 이미 사용중입니다.`)
+        // }
+        const hash = await bcrypt.hash(password, 10)
+        const newUser = await new User({
             name,
             number1,
             number2,
             id,
-            password,
+            password: hash,
             password2,
             tel
         }).save()
@@ -23,7 +34,7 @@ const signup = async (req, res) => {
 
     } catch (error) {
         console.log(error)
-        res.status(500).json({message:'죄송합니다. 다시 입력해 주십시오.'})
+        res.status(500).json({ message: '죄송합니다. 다시 입력해 주십시오.' })
     }
 }
 

server/package.json

@@ -12,12 +12,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "mongoose": "^5.11.9",
+    "multer": "^1.4.2",
     "node-fetch": "^2.6.1",
     "nodemon": "^2.0.6",
-    "validator": "^13.5.2",
-    "multer": "^1.4.2"
+    "validator": "^13.5.2"
   }
 }

server/routes/product.routes.js

 import express from "express";
+import path from 'path';
+import multer from 'multer';
 import productCtrl from '../controllers/product.controller.js';
 
+// process.cwd() + '/client/public/image'
+
 const router = express.Router()
 
+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'), 
 export default router
\ No newline at end of file

server/schemas/Product.js

@@ -8,15 +8,15 @@ const ProductSchema = new mongoose.Schema({
         required: true,
     },
     price: {
-        type: String,
+        type: Number,
         required: true,
     },
     stock: {
-        type: String,
+        type: Number,
         required: true
     },
     purchase: {
-        type: String,
+        type: Number,
         required: true,
         default: 0
     },