order.controller 상품추천 promiseAll안쓰게 수정

client/src/Pages/Home.js

@@ -49,7 +49,7 @@ function Home() {
                 `}
             </style>
             <div className="my-4">
-                <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
+                <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}>Best</h2>
                 <Row className="justify-content-center mx-0">
                     {productlist.bestProduct.map(pro => (
                         <Link to={{
@@ -71,7 +71,7 @@ function Home() {
                 </Row>
             </div>
             <div className="my-4">
-                <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
+                <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}>New Arrival</h2>
                 <Row className="justify-content-center mx-0">
                     {productlist.newProduct.map(pro => (
                         <Link to={{

client/src/Pages/Product.js

@@ -35,12 +35,12 @@ function Product({ match, location }) {
         }
     }, [size, color])
 
-    async function getRecommend(){
+    async function getRecommend() {
         try {
             const response = await axios.get(`/api/order/recommend?products=${product.id}`)
             setProductList(response.data)
         } catch (error) {
-            catchErrors(error,setError)
+            catchErrors(error, setError)
         }
     }
 
@@ -264,7 +264,10 @@ function Product({ match, location }) {
                         </Card>
                         <Col className='p-5'>
                             <div className='border p-2' style={{ maxWidth: "100%", height: 'auto', margin: 'auto', fontSize: '3.5vmin' }}>[ Detail Images ]</div>
-                            <Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%", height: 'auto', margin: 'auto' }} className='p-4 d-flex justify-content-center' />
+                            {product.detail_imgs.map((el) => (
+
+                                <Image src={`/images/${el}`} style={{ objectFit: "contain", maxWidth: "100%", height: 'auto', margin: 'auto' }} className='p-4 d-flex justify-content-center' />
+                            ))}
                         </Col>
                     </Col>
                 </Col>
@@ -275,21 +278,22 @@ function Product({ match, location }) {
                         <a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem", cursor: "pointer" }}>X</a>
                     </h6>
                     <Row className="justify-content-center mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
+                        {console.log(productList)}
                         {productList.map(pro => (
                             <Link to={{
                                 pathname: `/product/${pro._id}`,
                                 state: {
                                     id: pro._id,
-                                    name: pro.pro_name,
-                                    price: pro.price,
-                                    colors: pro.colors,
-                                    sizes: pro.sizes,
-                                    description: pro.description,
-                                    main_img: pro.main_imgUrl,
-                                    detail_imgs: pro.detail_imgUrls
+                                    name: pro.product[0].pro_name,
+                                    price: pro.product[0].price,
+                                    colors: pro.product[0].colors,
+                                    sizes: pro.product[0].sizes,
+                                    description: pro.product[0].description,
+                                    main_img: pro.product[0].main_imgUrl,
+                                    detail_imgs: pro.product[0].detail_imgUrls
                                 }
                             }}>
-                                <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} status={'recommend'} />
+                                <ListCard id={pro._id} name={pro.product[0].pro_name} price={pro.product[0].price} main_img={pro.product[0].main_imgUrl} status={'recommend'} />
                             </Link>
                         ))}
                     </Row>

server/controllers/order.controller.js

@@ -66,29 +66,23 @@ const recommendPro = async (req, res) => {
                     _id: "$products.productId",
                     count: { $sum: 1 }
                 }
+            },
+            { $sort: { count: -1 } },
+            { $limit: 5 },
+            {
+                $lookup:
+                {
+                    from: "products",
+                    localField: "_id",
+                    foreignField: "_id",
+                    as: "product"
+                }
             }
         ])
         console.log('recommend=', recommend)
         const filteredRecommend = recommend.filter((el) => String(el._id) !== String(productId))
         console.log('filtering=', filteredRecommend)
-        filteredRecommend.sort(function (a, b) {
-            if (a.count > b.count) {
-                return -1;
-            }
-            if (a.count < b.count) {
-                return 1;
-            }
-            // a must be equal to b
-            return 0;
-        });
-        console.log('sort=',filteredRecommend)
-        const finalrecommend= filteredRecommend.slice(0, 4)
-        const array = finalrecommend.map(async (el) => {
-            const aa = await Product.findById(el._id)
-            return aa
-        })
-        const bb  = await Promise.all(array)
-        res.json(bb)
+        res.json(filteredRecommend)
     } catch (error) {
         console.log('error in order ', error)
     }