zz

client/src/Components/ListCard.js

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

client/src/Components/MainNav.js

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

client/src/Pages/Home.js

@@ -13,42 +13,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="icon/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="icon/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="icon/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="icon/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="icon/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="icon/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>
@@ -60,42 +60,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="icon/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="icon/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="icon/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="icon/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="icon/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="icon/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/ProductRegist.js

@@ -3,7 +3,6 @@ import { Redirect } from 'react-router-dom';
 import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
 import axios from 'axios';
 import catchErrors from '../utils/catchErrors';
-import { Redirect } from 'react-router-dom';
 
 let color = {}
 let preColors = []

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 React, { useState, useEffect} from 'react';
+import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
 import ListCard from '../Components/ListCard';
 import axios from 'axios';
 import catchError from '../utils/catchErrors'
-import {isAuthenticated} from '../utils/auth'
 import catchErrors from '../utils/catchErrors';
 
 function ProductsList(props) {
     const [productlist, setProductlist] = useState([])
     const [error, setError] = useState('')
-    const [category, setCategory] = useState(props.match.params.product)
-    const [subcategory, setSubcategory] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
-    const [click, setClick] = useState(true)
+    const [category, setCategory] = useState('')
+    const [subcategory, setSubcategory] = useState([])
 
-    const user=isAuthenticated()
 
     useEffect(() => {
-        return getProductlist(user)         
-    }, [user])
+        setCategory(props.match.params.product.toUpperCase())
+    }, [props.match.params.product])
+    
+    useEffect(() => {
+        getProductlist()         
+    }, [category])
+
+    useEffect(async() => {
+        getsubproductlist()
+    }, [subcategory])
 
     function handleSubmit(e) {
         e.preventDefault()
@@ -26,7 +30,6 @@ function ProductsList(props) {
 
     async function getProductlist() {
         try {
-            console.log('dd=',category)
             const response = await axios.get(`/api/product/getproduct/${category}`)
             console.log(response.data)
             setProductlist(response.data)
@@ -52,7 +55,8 @@ function ProductsList(props) {
 
     return (
         <div>
-            {console.log("match.params=",props.match.params.product)}
+            {console.log("match.params=",category)}
+            {console.log("props=",props)}
             <style type="text/css">
                 {`  
                 .btn {
@@ -69,7 +73,7 @@ function ProductsList(props) {
             <Container>
                 <Row className="justify-content-center" >
                     <Col sm={10} xs={12} >
-                        <h1 style={{ fontSize: "3rem" }} className="text-center">OUTER</h1>
+                        <h1 style={{ fontSize: "3rem" }} className="text-center">{category}</h1>
                         <div className="text-center">{subcategory.map((ele) => (
                             <Button className="m-1" onClick={handleClick}>{ele}</Button>
                         ))}</div>
@@ -89,13 +93,13 @@ function ProductsList(props) {
                         <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" />
+                                <img src="/icon/search.svg" width="20" height="20" />
                             </Button>
                         </Form>
                     </Form>
                 </Row>
                 <Row md={8} sm={12} className="justify-content-start m-2">
-                    <ListCard productlist={productlist} />
+                    <ListCard productlist={productlist}/>
                 </Row>
             </Container>
             {/* <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} paginate={paginate} /> */}

server/controllers/product.controller.js

@@ -41,10 +41,12 @@ const getlist=(req,res)=>{
 
 const categoryId = async (req, res, next, category) => {
     try {
-        const productslist = await Product.find({main_category:category})
+        console.log(category)
+        const productslist = await Product.find({"main_category": `${category}`})
         if (!productslist) {
             res.status(404).send('상품을 찾을 수 없습니다.')
         }
+        console.log("list=",productslist)
         req.productslist = productslist
         next()
     } catch (error) {
@@ -61,7 +63,7 @@ const subgetlist=(req,res)=>{
 }
 const subcategoryId = async (req, res, next, subcategory) => {
     try {
-        const subproductslist = await Product.find({sub_category:subcategory})
+        const subproductslist = await Product.find({"sub_category":`${subcategory}`})
         if (!subproductslist) {
             res.status(404).send('상품을 찾을 수 없습니다.')
         }

server/routes/product.routes.js

@@ -7,8 +7,8 @@ const router = express.Router()
 router.route('/regist')
     .post(productCtrl.imageUpload, productCtrl.regist)
 
-// router.route('/getproduct/:category')
-//     .get(productCtrl.getlist)
+router.route('/getproduct/:category')
+    .get(productCtrl.getlist)
 
 router.route('/getproduct/:subcategory')
     .get(productCtrl.subgetlist)