[Node/React] 쇼핑몰 사이트 만들기 - 05 상품 리스트를 랜딩 페이지에 나열하기

5-1. 빈 랜딩 페이지 생성

DB에 있는 정보를 가져와달라고 요청 해야하기때문에 axios 사용

5-2. 몽고DB에 저장되어 있는 데이터 가져오기

router.get("/products_by_id", (req, res) => {
 let type = req.query.type;
 let productIds = req.query.id;

 if (type === "array") {
   //id=123123123,324234234,324234234 이거를
   //productIds = ['123123123', '324234234',
   //'324234234'] 이런식으로 바꿔주기
   let ids = req.query.id.split(",");
   productIds = ids.map((item) => {
     return item;
   });
 }

 Product.find({ _id: { $in: productIds } })
   .populate("writer")
   .exec((err, product) => {
     if (err) return res.status(400).send(err);
     return res.status(200).send(product);
   });
});

productId를 이용해서 DB에서 productIds와 같은 상품의 정보를 가져온다.

5-3. 랜딩 페이지 UI 만들기

//랜딩 페이지 카드만들기
const renderCards = Products.map((product, index) => {
    return (
      <Col lg={6} md={8} xs={24} key={index}>
        <Card
          cover={
            <a href={`/product/${product._id}`}>
              <ImageSlider images=
				{product.images} />
            </a>
          }
        >
          <Meta title={product.title} 
			description={`$${product.price}`} />
        </Card>
      </Col>
    );
  });

  <Row gutter={[16, 16]}>{renderCards}</Row>
// 여백부분을 위해 사용

product에 있는 정보 console.log 찍어보기

5-4. 이미지 슬라이더 만들기

import React from 'react'
import { Icon, Col, Card, Row, Carousel } from 'antd';

function ImageSlider(props) {
    return (
        <div>
            <Carousel autoplay >
                {props.images.map((image, index) => (
                    <div key={index}>
                        <img style={{ 
         width: '100%', maxHeight: '150px' }}
      src={`http://localhost:5000/${image}`} />
                    </div>
                ))}
            </Carousel>
        </div>
    )
}

ant디자인에 있는데 Carousel 사용