0113

client/src/Components/Card.js

-import React, { useState, useEffect, useRef } from 'react';
-
-function card(props) {
-    const [card, setCard] = useState([...props])
-
-    return (
-        <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
\ 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/Pages/ProductRegist.js

 import React, { useState, useEffect, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
-import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
+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 = []
@@ -98,30 +98,18 @@ function ProductsRegist() {
         product["sizes"]=sizes
         console.log(product)
         const formData = new FormData();
-        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)
-                }
+        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])
             }
         }
-        // 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)
+            const response = axios.post('/api/product/regist', formData)
+            // setSuccess(true)
+            console.log(response)
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -135,7 +123,6 @@ function ProductsRegist() {
             <Container>
                 <Row className="justify-content-md-center">
                     <Col md={8} className="border p-1" 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">
@@ -205,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 { 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)
@@ -23,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">
@@ -67,55 +86,7 @@ function ProductsList() {
                     </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 />

server/controllers/product.controller.js

@@ -28,4 +28,25 @@ const regist = async (req, res) => {
     }
 }
 
-export default { imageUpload, regist }
+const getlist=(req,res)=>{
\ No newline at end of file
+    try {
+        res.json(req.productslist)
+    } catch (error) {
+        res.status(500).send('상품을 불러오지 못했습니다.')
+    }
+
+}
+
+const categoryId = async (req, res, next, category) => {
+    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

server/routes/product.routes.js

@@ -6,8 +6,10 @@ const router = express.Router()
 
 router.route('/regist')
     .post(productCtrl.imageUpload, productCtrl.regist)
-    
-// router.route('/productone')
-//     .get(productCtrl.getProduct)
+
+router.route('/getproduct/:category')
+    .get(productCtrl.getlist)
+
+router.param('category', productCtrl.categoryId)
     
 export default router
\ No newline at end of file