Merge remote-tracking branch 'origin/jaeyeon' into jiwon

client/src/Components/Card.js

-import React, { useState, useEffect, useRef } from 'react';
-
-function Card() {
-
-
-    return (
-        <div></div>
-        
-    )
-}
-
-export default Card
\ No newline at end of file

client/src/Components/ListCard.js

+import React, { useState, useEffect, useRef } from 'react';
+import {Card} from 'react-bootstrap'
+
+function ListCard(props) {
+
+    return (
+        <>
+        {props.productlist.map((e)=>(
+          <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
+            <Card.Img variant="top" src={e.main_imgUrl && `/images/${e.main_imgUrl}`} style={{ objectFit: "contain", height: "22rem" }} />
+            <Card.Body>
+                <Card.Title>{e.pro_name}</Card.Title>
+                <Card.Text>{e.price}</Card.Text>
+            </Card.Body>
+        </Card>    
+        ))}      
+        </>
+    )
+}
+
+export default ListCard
\ No newline at end of file

client/src/Components/MainNav.js

 import React from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
-import logo from '../footprint.svg';
-import cart from '../cart.svg';
-import option from '../option.svg';
 import { handleLogout, isAuthenticated } from '../utils/auth'
 
 function MainNav() {
@@ -11,7 +8,7 @@ function MainNav() {
     return (
         <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
             <Navbar.Brand href="/home" className="text-light">
-                <img alt="로고" src={logo} width="24" height="24" />
+                <img alt="로고" src="icon/footprint.svg" width="24" height="24" />
                 {' '}KU#
             </Navbar.Brand>
             <Nav>
@@ -23,10 +20,10 @@ function MainNav() {
                         </>
                     )}
                 <Nav.Link href="/shoppingcart">
-                    <img alt="카트" src={cart} width="30" height="30" />
+                    <img alt="카트" src="icon/cart.svg" width="30" height="30" />
                 </Nav.Link>
                 <Nav.Link href="/admin">
-                    <img alt="관리자" src={option} width="30" height="30" />
+                    <img alt="관리자" src="icon/option.svg" width="30" height="30" />
                 </Nav.Link>
             </Nav>
         </Navbar>

client/src/Pages/Admin.js

 import React, { useState, useEffect, useRef } from 'react';
 import Pagination from '../Components/Pagination';
-import search from '../search.svg';
 import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
 
 function Admin() {
@@ -33,7 +32,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/Home.js

@@ -10,42 +10,42 @@ function Home() {
                     <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" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
@@ -57,42 +57,42 @@ function Home() {
                     <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" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>

client/src/Pages/Payment.js

@@ -254,7 +254,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" alt="카카오페이결제" src="img/payment_icon_yellow_small.png" onClick={kakaopay} />
+                        <input type="image" alt="카카오페이결제" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} />
                     </div>
                     {paymentWay}
                 </div>

client/src/Pages/ProductRegist.js

@@ -99,7 +99,7 @@ function ProductsRegist() {
         console.log(product)
         const formData = new FormData();
         for (let key in product) {
-            if (key === "main_image" ||key === "detail_image") {
+            if (key === "main_imgUrl" ||key === "detail_imgUrl") {
                 console.log(product[key][0])
                 formData.append(key, product[key][0])
             } else {
@@ -192,11 +192,11 @@ function ProductsRegist() {
                             </Form.Group>
                             <Form.Group>
                                 <Form.Label>대표이미지</Form.Label>
-                                <Form.File id="productImageform" name="main_image" onChange={handleChange} />
+                                <Form.File id="productImageform" name="main_imgUrl" onChange={handleChange} />
                             </Form.Group>
                             <Form.Group>
                                 <Form.Label>상세이미지</Form.Label>
-                                <Form.File id="productImageform" name="detail_image" onChange={handleChange} />
+                                <Form.File id="productImageform" name="detail_imgUrl" onChange={handleChange} />
                             </Form.Group>
                             <Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
                         </Form>

client/src/Pages/ProductsList.js

 import React, { useState, useEffect, useRef } from 'react';
 import Pagination from '../Components/Pagination';
-import search from '../search.svg';
 import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
+import ListCard from '../Components/ListCard';
+import axios from 'axios';
+import catchError from '../utils/catchErrors'
+import {isAuthenticated} from '../utils/auth'
 
 function ProductsList() {
     const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
+    const [productlist, setProductlist] = useState([])
+    const [error, setError] = useState('')
+    const [category, setCategory] = useState('OUTER')
 
-    // useEffect(() => {
-    //     getProfile(user)
-    // }, [user])
+    const user=isAuthenticated()
+
+    useEffect(() => {
+        getProductlist(user)
+    }, [user])
 
     // async function getProfile(user){
     //     console.log(user)
@@ -24,6 +32,16 @@ function ProductsList() {
         e.preventDefault()
     }
 
+    async function getProductlist() {
+        try {
+            const response = await axios.get(`/api/product/getproduct/${category}`)
+            console.log(response.data)
+            setProductlist(response.data)
+        } catch (error) {
+            catchError(error, setError)
+        }
+    }
+
     return (
         <div>
             <style type="text/css">
@@ -48,73 +66,27 @@ function ProductsList() {
                         ))}</div>
                     </Col>
                 </Row>
-                <Row className="justify-content-between mx-0 my-5">
+                <Row className="justify-content-end mx-0 my-5">
                     <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
                         <Dropdown>
-                        <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
-                        <Dropdown.Menu>
-                            <Dropdown.Item>인기상품</Dropdown.Item>
-                            <Dropdown.Item>신상품</Dropdown.Item>
-                            <Dropdown.Item>낮은가격</Dropdown.Item>
-                            <Dropdown.Item>높은가격</Dropdown.Item>
-                        </Dropdown.Menu>
-                    </Dropdown>
-                    <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
-                        <Button type="submit" className="search px-2 mb-1 ">
-                            <img src={search} width="20" height="20" />
-                        </Button>
+                            <Dropdown.Toggle className="mx-2">정렬</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="icon/search.svg" width="20" height="20" />
+                            </Button>
+                        </Form>
                     </Form>
                 </Row>
                 <Row md={8} sm={12} className="justify-content-start m-2">
-                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
-                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
-                        <Card.Body>
-                            <Card.Title>케이시앵글부츠(SH)</Card.Title>
-                            <Card.Text>가격 : 12,000원</Card.Text>
-                        </Card.Body>
-                    </Card>
-                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
-                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
-                        <Card.Body>
-                            <Card.Title>메리제인플랫(SH)</Card.Title>
-                            <Card.Text>가격 : 12,000원</Card.Text>
-                        </Card.Body>
-                    </Card>
-                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
-                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
-                        <Card.Body>
-                            <Card.Title>솔티드스니커즈(SH)</Card.Title>
-                            <Card.Text>가격 : 12,000원</Card.Text>
-                        </Card.Body>
-                    </Card>
-                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
-                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
-                        <Card.Body>
-                            <Card.Title>버켄슬리퍼(SH)</Card.Title>
-                            <Card.Text>가격 : 12,000원</Card.Text>
-                        </Card.Body>
-                    </Card>
-                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
-                        <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} />
-                        <Card.Body>
-                            <Card.Title>크레센도 하이힐펌프스</Card.Title>
-                            <Card.Text>가격 : 12,000원</Card.Text>
-                        </Card.Body>
-                    </Card>
-                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
-                        <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
-                        <Card.Body>
-                            <Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title>
-                            <Card.Text>가격 : 12,000원</Card.Text>
-                        </Card.Body>
-                    </Card>
-                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
-                        <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} />
-                        <Card.Body>
-                            <Card.Title>포웰3.5cm 스니커즈</Card.Title>
-                            <Card.Text>가격 : 12,000원</Card.Text>
-                        </Card.Body>
-                    </Card>
+                    <ListCard productlist={productlist} />
                 </Row>
             </Container>
             <Pagination />

client/src/Pages/ShoppingCart.js

@@ -6,8 +6,9 @@ import catchErrors from '../utils/catchErrors';
 import { isAuthenticated } from '../utils/auth'
 import CartCard from '../Components/CartCard';
 
-function ShoppingCart() {
 
+
+function ShoppingCart() {
     const [num, setNum] = useState(0)
     const [error, setError] = useState('')
     const [cart, setCart] = useState()

client/src/utils/catchErrors.js

-function catchErrors(error,displayError){ 
+function catchErrors(error, displayError) {
     let errorMsg
 
-    if(error.response){
-        errorMsg=error.response.data
+    if (error.response) {
+        errorMsg = error.response.data
         console.log(errorMsg)
-    }else if(error.request){
-        errorMsg=error.request
+    } else if (error.request) {
+        errorMsg = error.request
         console.log(errorMsg)
-    }else{
-        errorMsg=error.message
+    } else {
+        errorMsg = error.message
         console.log(errorMsg)
     }
     displayError(errorMsg)
 }
 
-export default catchErrors
+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';
@@ -10,14 +10,19 @@ import config from './config.js'
 import authRouter from './routes/auth.routes.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(cors())
 app.use(express.static(path.join(process.cwd(), 'dist')))
 // app.use(bodyParser.urlencoded({ extended: true }))
 app.use('/images', express.static('uploads/'))

server/controllers/product.controller.js

 import Product from "../schemas/Product.js";
 import multer from 'multer';
 
+const upload = multer({ dest: 'uploads/' })
 
-const upload = multer({ dest: 'uploads/' });
-
-const fileUpload = upload.fields([
-    { name: 'main_image', maxCount: 1 },
-    { name: 'detail_image', maxCount: 1 }
-])
+const imageUpload = upload.fields([
+    { name: 'main_image' },
+    { name: 'detail_image' }
+  ])
 
 const regist = async (req, res) => {
-    console.log('req.body=', req.body)
-    const { pro_name, price, stock, main_category, sub_category, colors, sizes, 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
     try {
+        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, colors, sizes, description, main_image, detail_image
+            pro_name, price, stock, main_category, sub_category, description, main_imgUrl, detail_imgUrls
         }).save()
         res.json(newProduct)
     } catch (error) {
         console.log(error)
-        res.status(500).send('죄송합니다. 다시 입력해 주십시오.')
+        res.status(500).send('제품 정보 등록에 실패하였습니다. 다시 진행해 주십시오.')
     }
 }
 
+const getlist=(req,res)=>{
+    try {
+        res.json(req.productslist)
+    } catch (error) {
+        res.status(500).send('상품을 불러오지 못했습니다.')
+    }
 
-const getProduct = (req, res) => {
-    res.json(req.body)
 }
 
-export default { regist, fileUpload, getProduct }
+const categoryId = async (req, res, next, category) => {
\ No newline at end of file
+    try {
+        const productslist = await Product.find({main_category:category})
+        if (!productslist) {
+            res.status(404).send('상품을 찾을 수 없습니다.')
+        }
+        req.productslist = productslist
+        next()
+    } catch (error) {
+        res.status(500).send('상품을 불러오지 못했습니다.')
+    }
+}
+export default { imageUpload, regist, categoryId, getlist }
\ No newline at end of file