hello it's me NICE TO MEET YOU

client/src/Pages/Product.js

 import axios from 'axios';
 import React, { useState, useEffect, useRef } from 'react';
-import { Row, Col, Form, Card, Button } from 'react-bootstrap';
+import { Row, Col, Form, Card, Button, Image } from 'react-bootstrap';
 import { Redirect } from 'react-router-dom';
 import catchErrors from '../utils/catchErrors';
 
@@ -29,7 +29,7 @@ function Product({ match, location }) {
     }
 
     function pushOptions() {
-        setCart([...cart, { color, size, productId: product.id, count:1 }])
+        setCart([...cart, { color, size, productId: product.id, count: 1 }])
         selected.sizes = false
         selected.colors = false
         console.log(product)
@@ -53,8 +53,8 @@ function Product({ match, location }) {
         e.preventDefault()
         let preprice = 0
         const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name)
-        asd.map((el)=>{
-            preprice = preprice + el.count *product.price
+        asd.map((el) => {
+            preprice = preprice + el.count * product.price
         })
         setCart(asd)
         setPrice(Number(preprice))
@@ -69,8 +69,8 @@ function Product({ match, location }) {
             }
         })
         let preprice = 0
-        addCount.map((el)=>{
-            preprice = preprice + el.count *product.price
+        addCount.map((el) => {
+            preprice = preprice + el.count * product.price
         })
         setPrice(Number(preprice))
         setCart(addCount)
@@ -163,8 +163,24 @@ function Product({ match, location }) {
             </Row>
             <Row className="justify-content-center mt-5 mx-0">
                 <Col sm={11} md={8}>
-                    <h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }}>설명</h3>
-                    <div></div>
+                    <h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3">
+                        설명
+                        </h3>
+                    <Col className='m-3 text-center d-flex justify-content-center'>
+                        <div style={{ wordBreak: 'break-all', wordWrap: 'break-word', fontFamily: "맑은 고딕" }} className="p-3">
+                            <h1 className='m-3'>{product.name} </h1>
+                            <>
+                            <Image src={`/images/${product.main_img}`} style={{ objectFit: "contain", width: '100%'}} />
+                            </>
+                            <Card className='m-3 d-flex justify-content-center'>
+                                <Card.Body>
+                                    {product.description}
+                                </Card.Body>
+                            </Card>
+                            <h3 className='mt-5'>[ Detail Images ]</h3>
+                            <Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain"}} className='m-3' />
+                        </div>
+                    </Col>
                 </Col>
             </Row>
             <Row className="justify-content-center mx-0 pt-3 px-2" style={{ position: "fixed", bottom: "0", width: "100%", backgroundColor: "#fff" }}>

client/src/Pages/ProductRegist.js

@@ -136,7 +136,7 @@ function ProductsRegist() {
         for (let key in product) {
             if (key === "main_image" || key === "detail_image") {
                 formData.append(key, product[key][0])
-            } else if(key === "sizes" || key === "colors"){
+            } else if(key === "sizes" || key === "colors" || key === 'sub_category'){
                 for (let i = 0; i < product[key].length ; i++){
                     formData.append([key], product[key][i])
                 }

client/src/Pages/ProductsList.js

@@ -30,8 +30,9 @@ function ProductsList({ match }) {
             const response = await axios.get(`/api/categories/sub/${mainCategory}`)
             setSubcategory(Object.values(response.data)[0])
 
-            console.log("response data=", response.data)
-            console.log("object value=", Object.values(response.data));
+            // console.log("response data=", response.data)
+            // console.log("object value=", Object.values(response.data));
+            // console.log("object value=2", Object.values(response.data)[0]);
 
         } catch (error) {
             catchError(error, setError)
@@ -39,9 +40,10 @@ function ProductsList({ match }) {
     }
 
     async function getProductlist() {
+        console.log("tlfgpd")
         try {
-            const response = await axios.get(`/api/product/getproduct/${mainCategory}`)
-            console.log("response.data=", response.data)
+            const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`)
+            console.log("response.data=main", response.data)
             setProductlist(response.data)
 
         } catch (error) {
@@ -49,6 +51,46 @@ function ProductsList({ match }) {
         }
     }
 
+    async function handleSubname(e) {
+        const subname = e.target.name
+        console.log("subname=", subname)
+        try {
+            console.log("first test!!!!!!!!")
+            const response = await axios.get(`/api/product/getproduct/sub/${subname}`)
+            console.log("subname response data=", response.data)
+            setProductlist([response.data])
+        } catch (error) {
+            console.log("error22")
+        }
+
+
+        // const listvalue = Object.values(productlist)
+        // for (let i = 0; i < listvalue.length; i++) {
+        //     const list = listvalue[i].sub_category[0]
+        //     console.log("list=", list)
+
+        //     console.log("include=", subcategory.includes("LONG DRESS"))
+        // if (listvalue[i].sub_category[0] === subcategory[0]) {
+        //     console.log("yes")
+        // }
+        // else {
+        //     console.log("no")
+        // }
+    }
+    // if (productlist.sub_category) {
+
+    // }
+    // console.log("list", list)
+    // for (let i = 0; i < list.length; i++) {
+    //     if (response.data[i] === "subcategory") {
+    //         console.log("handlesub=", response.data[i].sub_category)
+    //     }
+    //     else {
+    //         console.log("handlesub=2 ", response.data[i].sub_category)
+    //     }
+    // }
+    // }
+
     return (
         <div>
             <style type="text/css">
@@ -75,7 +117,7 @@ function ProductsList({ match }) {
                         <h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
                         <div className="text-center">
                             <ButtonGroup className="m-3" variant="outline-light secondary" style={{ display: "inline-block" }}>
-                                {subcategory.map(el => (<Button className="m-1" variant="secondary">{el}</Button>))}
+                                {subcategory.map(el => (<Button className="m-1" variant="secondary" name={el} onClick={handleSubname}>{el}</Button>))}
                             </ButtonGroup>
                         </div>
                     </Col>

server/controllers/category.controller.js

@@ -12,12 +12,12 @@ const getCategory = async (req, res) => {
 }
 
 const getSubCategory = async (req, res) => {
-     console.log("req.params=", req.params);
+     console.log("req.params=?(getsubcategory)", req.params);
     const { sub } = req.params
     try {
         const subcategory = await Category.findOne({}, { _id: 0}).select(`${sub}`)
-        // console.log("sub= ",subcategory);
         res.json(subcategory);
+        console.log("sub= ",subcategory);
     } catch (error) {
         res.status(500).send('카테고리를 불러오지 못했습니다.')
     }

server/controllers/product.controller.js

@@ -58,6 +58,15 @@ const getlist = (req, res) => {
     }
 }
 
+const subname = async (req, res) => {
+    try {
+        console.log("last subname::: LET ME SEE")
+        res.json(req.findsubname)
+    } catch (error) {
+        res.status(500).send('상품을 불러오지 못했습니다.')
+    }
+}
+
 const categoryId = async (req, res, next, category) => {
     try {
         const productslist = await Product.find({ main_category: category })
@@ -65,32 +74,41 @@ const categoryId = async (req, res, next, category) => {
             res.status(404).send('상품을 찾을 수 없습니다.')
         }
         req.productslist = productslist
+        console.log("nononono", req.productslist)
         next()
     } catch (error) {
         res.status(500).send('상품을 불러오지 못했습니다.')
     }
 }
 
-const subgetlist = (req, res) => {
+const subcategoryId = async (req, res, next, subname) => {
     try {
-        res.json(req.subproductslist)
-    } catch (error) {
-        res.status(500).send('상품을 불러오지 못했습니다.')
-    }
-}
+        console.log("Please===>>>", subname)
+        const findSubname = await Product.findOne({ sub_category: subname })
+        // const findSubname = await Product.find({ sub_category: { $elemMatch: { subname: req.subname }}})
+        console.log("findSubname111=", findSubname)
+        // const onlySub = findSubname.sub_category
+        // console.log(";;", onlySub)
+        // console.log(".", Object.values(onlySub))
 
-const subcategoryId = async (req, res, next, subcategory) => {
-    try {
-        const subproductslist = await Product.find({ sub_category: subcategory })
-        if (!subproductslist) {
-            res.status(404).send('상품을 찾을 수 없습니다.')
+        if (!findSubname) {
+            console.log("ㅏㅁㄴ우하ㅣㅜㅁㄴ어ㅏㅣ훔ㄴ어ㅏㅣ휴")
+            const findSubname = {
+                _id: 'nothing',
+                pro_name: '상품준비중',
+                price: 0,
+                main_imgUrl:''
+            }
+            console.log("findSubname2222=", findSubname)
+            res.send(findSubname)
         }
-        req.subproductslist = subproductslist
-        next()
+        res.send(findSubname)
+        // next()
     } catch (error) {
-        res.status(500).send('상품을 불러오지 못했습니다.')
+        res.send('상품을 불러오지 못했습니다.')
     }
 }
+//https://docs.mongodb.com/manual/reference/operator/projection/elemMatch/index.html
 
 const plusPurchase = async (req, res) => {
     const { products } = req.body
@@ -99,7 +117,7 @@ const plusPurchase = async (req, res) => {
         for (let i = 0; i < products.length; i++) {
             const count = products[i].count
             const product = await Product.findOne(
-                {_id: products[i].productId._id }
+                { _id: products[i].productId._id }
             )
             const purchase = product.purchase
             await Product.updateOne(
@@ -114,4 +132,4 @@ const plusPurchase = async (req, res) => {
     }
 }
 
-export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subgetlist, plusPurchase }
\ No newline at end of file
+export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subname, plusPurchase }
\ No newline at end of file

server/controllers/user.controller.js

@@ -32,7 +32,7 @@ const userById = async (req, res, next, id) => {
 
 const signup = async (req, res) => {
     const { name, number1, number2, id, password, tel, email } = req.body
-    console.log("whatup",req.body)
+    console.log("whatup", req.body)
     try {
         if (!isLength(password, { min: 8, max: 15 })) {
             return res.status(422).send('비밀번호는 8-15자리로 입력해주세요.')

server/routes/product.routes.js

@@ -13,16 +13,16 @@ router.route('/getproduct')
 router.route('/getproduct/all')
     .get(productCtrl.getAll)
 
-router.route('/getproduct/:category')
+router.route('/getproduct/main/:category')
     .get(productCtrl.getlist)
 
-router.route('/getproduct/:subcategory')
-    .get(productCtrl.subgetlist)
+router.route('/getproduct/sub/:subname')
+    .get(productCtrl.subname)
 
 router.route('/pluspurchase')
     .post(productCtrl.plusPurchase)
 
 router.param('category', productCtrl.categoryId)
-router.param('subcategory',productCtrl.subcategoryId)
+router.param('subname',productCtrl.subcategoryId)
     
 export default router
\ No newline at end of file

test/test.js

+const inventory = {
+    sibal: [
+        { name: 'apples', quantity: 2 },
+        { name: 'bananas', quantity: 4 },
+        { name: 'cherries', quantity: 9 }
+    ]
+}
+
+
+const result = inventory.find(fruit => fruit.name === 'cherries');
+const what = inventory.find({},{ sibal: { $elemMatch: { quantity: 2 } } })
+
+// db.schools.find( { zipcode: "63109" },
+//                  { students: { $elemMatch: { school: 102, age: { $gt: 10} } } } )
+console.log(result);
+console.log(what);
\ No newline at end of file