dd

client/src/Components/Card.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Card } from 'react-bootstrap';
 
-function Card(props) {
-    const []
+function card(props) {
+    const [card, setCard] = useState([...props])
 
     return (
-        <Card>
-            <Card.Img></Card.Img>
+        <Card className="mt-5">
+            <Card.Img varient="top" src={} style={{ objectFit: "contain", height: "22rem" }}></Card.Img>
             <Card.Body>
                 <Card.Title></Card.Title>
+                <Card.Text></Card.Text>
+                <Card.Text></Card.Text>
             </Card.Body>
         </Card>
     )
 }
 
-export default Card
+export default card
\ No newline at end of file

client/src/Components/MainNav.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
-import logo from '../footprint.svg';
-import cart from '../cart.svg';
-import option from '../option.svg';
 
 function MainNav() {
     function handleClick() {
@@ -13,18 +10,18 @@ function MainNav() {
     return (
         <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
             <Navbar.Brand href="/home" className="text-light">
-                <img src={logo} width="24" height="24" />
+                <img src="icon/footprint.svg" width="24" height="24" />
                 {' '}KU#
             </Navbar.Brand>
             <Nav className="justify-content-end">
                 <Nav.Link className="text-light" href="/login">Login</Nav.Link>
                 <Nav.Link className="text-light" href="/signup">Signup</Nav.Link>
                 <Nav.Link href="/shoppingcart">
-                    <img src={cart} width="30" height="30" />
+                    <img src="icon/cart.svg" width="30" height="30" />
                 </Nav.Link>
                 <Nav.Link className="text-light" onClick={() => handleClick()}>Logout</Nav.Link>
                 <Nav.Link href="/admin">
-                    <img src={option} width="30" height="30" />
+                    <img src="icon/option.svg" width="30" height="30" />
                 </Nav.Link>
             </Nav>
         </Navbar>

client/src/Pages/Admin.js

@@ -2,7 +2,6 @@ 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 { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
 
 function Admin() {
@@ -37,7 +36,7 @@ function Admin() {
                 <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
                     <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
                     <Button type="submit" className="px-2">
-                        <img src={search} width="20" height="20" />
+                        <img src="icon/search.svg" width="20" height="20" />
                     </Button>
                     <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
                 </Row>

client/src/Pages/Payment.js

@@ -258,7 +258,7 @@ function Payment() {
                     <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
                     <div className="text-center mt-5">
                         <Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
-                        <input type="image" src="img/payment_icon_yellow_small.png" onClick={kakaopay} />
+                        <input type="image" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} />
                     </div>
                     {paymentWay}
                 </div>

client/src/Pages/ProductRegist.js

 import React, { useState, useEffect, useRef } from 'react';
 import MainNav from '../Components/MainNav';
 import SubNav from '../Components/SubNav';
-import { Row, Col, Button, Form, Container } from 'react-bootstrap';
-import axios from 'axios'
+import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
+import axios from 'axios';
+import catchErrors from "../utils/catchErrors";
 
 
 function ProductsRegist() {
     const [product, setProduct] = useState()
+    const [error, setError] = useState('')
 
-    function handleChange(event) {
-        const { name, value } = event.target
-        console.log("file=",event.target.files)
-        console.log("name=",name,"value=",value)
-        setProduct({ ...product, [name]: value })
+    function handleChange(e) {
+        const { name, value, files } = e.target
+        if (files) {
+            setProduct({ ...product, [name]: files })
+        } else {
+            setProduct({ ...product, [name]: value })
+        }
     }
 
-    function handleSubmit(e) {
+    async function handleSubmit(e) {
         e.preventDefault()
         const formData = new FormData();
-        for (let key of Object.keys(product)) {
-            formData.append(key, product[key])
+        for (const key in product) {
+            console.log("product[key]=", product[key])
+            if (key == "main_image" || key == "detail_image") {
+                for (const file of product[key]) {
+                    formData.append(key, file)
+                }
+            } else {
+                formData.append(key, product[key])
+            }
+        }
+        // formData 값 확인용
+        // for (const key of formData.keys()) {
+
+        //     console.log("key=",key);
+
+        //   }
+
+        //   for (const value of formData.values()) {
+
+        //     console.log(value);
+
+        //   }
+        try {
+            const response = await axios.post('/api/product/regist', formData)
+        } catch (error) {
+            catchErrors(error, setError)
         }
-        console.log("formData=",formData)
-        axios.post('/api/product/regist',{data: formData}).then(function(res) {
-            console.log("client의 res=", res)
-        })
     }
 
     return (
@@ -35,6 +59,7 @@ function ProductsRegist() {
             <Container>
                 <Row className="justify-content-md-center">
                     <Col md={6} className="border m-5 p-3" style={{ background: '#F7F3F3' }}>
+                        {error && <Alert variant="danger" className="text-center">{error}</Alert>}
                         <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
                         <Form className="p-5" onSubmit={handleSubmit}>
                             <Form.Group controlId="productNameform">

client/src/Pages/ProductsList.js

@@ -2,7 +2,6 @@ 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, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
 
 function ProductsList() {
@@ -51,7 +50,7 @@ function ProductsList() {
                     <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" />
+                            <img src="icon/search.svg" width="20" height="20" />
                         </Button>
                         <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
                     </Form>

client/src/Pages/ShoppingCart.js

@@ -5,7 +5,6 @@ import SubNav from '../Components/SubNav';
 import { Card, Button, Container, Row, Col } from 'react-bootstrap';
 
 function ShoppingCart() {
-
     const [num, setNum] = useState(0)
 
     function plusNum() {
@@ -39,7 +38,7 @@ function ShoppingCart() {
                                 <input className="" type="checkbox" id="exampleCheck1" />
                             </Col>
                             <Col className="text-center">
-                                <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
+                                <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" style={{ width: '20rem' }} />
                             </Col>
                             <Col md={6} className="p-2">
                                 <Card.Body>

client/src/utils/catchErrors.js

+function catchErrors(error, displayError) {
+    let errorMsg
+    if (error.response) {
+        errorMsg = error.response.data
+        console.log('Error response', errorMsg)
+    } else if (error.request) {
+        errorMsg = error.request
+        console.log('Error request', errorMsg)
+    } else {
+        errorMsg = error.message
+        console.log('Error message', errorMsg)
+    }
+    displayError(errorMsg)
+}
+
+export default catchErrors  
\ No newline at end of file

server/app.js

 import express from 'express';
-// import bodyParser from "body-parser";
+import fs from 'fs';
 import connectDb from './schemas/index.js'
 import userRouter from "./routes/user.routes.js";
 import productRouter from './routes/product.routes.js';
@@ -8,14 +8,17 @@ import kakaopayRoutes from './routes/kakaopay.routes.js'
 import config from './config.js'
 import cors from 'cors'
 
+fs.readdir('uploads', (error) => {
+  if (error) {
+      fs.mkdirSync('uploads');
+  }
+})
+
 connectDb()
 
 const app = express();
 
-
-app.use(express.json());
 app.use(cors())
-
 app.use(express.static(path.join(process.cwd(), 'dist')))
 // app.use(bodyParser.urlencoded({ extended: true }))
 

server/controllers/product.controller.js

 import Product from "../schemas/Product.js";
+import multer from 'multer';
+
+const upload = multer({ dest: 'uploads/' })
+
+const imageUpload = upload.fields([
+    { name: 'main_image' },
+    { name: 'detail_image' }
+  ])
 
 const regist = async (req, res) => {
-    console.log('req.body=', req.body)
-    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
+        const { pro_name, price, stock, main_category, sub_category, description } = req.body
+        const main_img = req.files['main_image'][0]
+        const detail_img = req.files['detail_image']
+        const main_imgUrl = main_img.filename
+        const detail_imgUrls = []
+        detail_img.forEach(file => {
+            detail_imgUrls.push(file.filename)
+        })
+        const newProduct = await new Product({
+            pro_name, price, stock, main_category, sub_category, description, main_imgUrl, detail_imgUrls
         }).save()
         console.log(newProduct)
         res.json(newProduct)
     } catch (error) {
         console.log(error)
-        res.status(500).send('죄송합니다. 다시 입력해 주십시오.')
+        res.status(500).send('제품 정보 등록에 실패하였습니다. 다시 진행해 주십시오.')
     }
 }
 
-export default { regist }
+export default { imageUpload, regist }
\ No newline at end of file

server/controllers/user.controller.js

-import User from "../models/User.js";
+import User from "../schemas/User.js";
 import isLength from 'validator/lib/isLength.js';
 import bcrypt from 'bcryptjs';
 

server/models/User.js

-import mongoose from "mongoose";
-
-const { String } = mongoose.Schema.Types
-
-const UserSchema = new mongoose.Schema({
-    name: {
-        type: String,
-        required: true, // 꼭 필요한 값
-    },
-    id: {
-        type: String,
-        required: true,
-        unique: true,
-    },
-    password: {
-        type: String,
-        required: true,
-    },
-    number1:{
-        type:String,
-        required:true,
-        unique:true
-    },
-    number2:{
-        type:String,
-        required:true,
-        unique:true
-    },
-    tel:{
-        type:String,
-        required:true,
-        unique:true
-    },
-    role: {
-        type: String,
-        required: true,
-        default: 'user',
-        enum: ['user', 'admin', 'root']
-    }
-}, {
-    timestamps: true
-})
-
-export default mongoose.models.User || mongoose.model('User', UserSchema)
\ No newline at end of file