OnlineShop 만들기 - 4) Landing Page 만들기 1(상품리스트 가져오기)

이제 홈페이지를 들어오면 가장 먼저 이동하는 landing page를 만들 것이다. 

 

순서

완성된 화면

 

먼저랜딩페이지에서 상품리스트를 가져와야 보여줄 수 있다. 

import React, {useEffect} from 'react'
import { FaCode } from "react-icons/fa";
import Axios from 'axios';


function LandingPage() {

    useEffect(() => {
        //먼저 상품리스트를 가져와야 랜딩페이지에 나타낼 수 있다. 
        Axios.post('/api/product/getProducts')
            .then(response=>{
                if(response.data.success){

                }else{
                    alert('상품리스트를 가져오는데 실패했습니다.')
                }
            })
    }, [])
    return (
        <>

        </>
    )
}

export default LandingPage

Axios를 작성했으니 router도 작성해보자. 

 

router.get("/getProducts",  (req, res) => {//아무나 랜딩페이지 볼 수 있어야 하므로 auth는 삭제해준다.
    
    Product.find()
        .exec((err, products)=>{
            if(err) return res.status(400).json({success:false, err})
            res.status(200).json({success:true, products})
        })

});

 

상품을 가져왔으면 상품리스트를 저장해준다.

    const [Products, setProducts] = useState([])

    useEffect(() => {
        //먼저 상품리스트를 가져와야 랜딩페이지에 나타낼 수 있다. 
        Axios.post('/api/product/getProducts')
            .then(response=>{
                if(response.data.success){
                    setProducts(response.data.products)//가져온 모든 상품들을 배열에 저장한다. 
                }else{
                    alert('상품리스트를 가져오는데 실패했습니다.')
                }
            })
    }, [])

 

 

랜딩페이지의 템플릿을 만들어보자. 

    return (
        <div style={{ width: '75%', margin: '3rem auto' }}>
            <div style={{ textAlign: 'center' }}>
                <h2>  Let's Travel Anywhere  <Icon type="rocket" />  </h2>
            </div>


            {/* Filter  */}


            {/* Search  */}


            {Products.length === 0 ?
                <div style={{ display: 'flex', height: '300px', justifyContent: 'center', alignItems: 'center' }}>
                    <h2>No post yet...</h2>
                </div> :
                <div>

                </div>
            }
            <br /><br />

            
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <button>Load More</button>
                </div>
            


        </div>

 

화면의 크기가 줄어들 수록 나타나는 아이템의 수를 반응형으로 사이즈에 맞게 줄어들게끔 만들자. 

또한 이미지가 나타날때 옆으로 slide하면서 여러사진이 나올 수 있도록 애니메이션 효과를 줄 것이다. 

   import { Icon, Col, Card, Row } from 'antd';
   import ImageSlider from '../../utils/ImageSlider';


   const { Meta } = Card;
   
   
   const renderCards = Products.map((product, index) => {

        return <Col lg={6} md={8} xs={24}>
            <Card
                hoverable={true}
                cover={<a href={`/product/${product._id}`} > <ImageSlider images={product.images} /></a>}//이미지가 애니메이션 형식으로 옆으로 이동하도록 설정
            >
                <Meta
                    title={product.title}
                    description={`$${product.price}`}
                />
            </Card>
        </Col>
    })
    
    
    
    
    
    
                {Products.length === 0 ?
                <div style={{ display: 'flex', height: '300px', justifyContent: 'center', alignItems: 'center' }}>
                    <h2>No post yet...</h2>
                </div> :
                <div>
                    <Row gutter={[16, 16]}>

                        {renderCards}

                    </Row>


                </div>
            }

 

 

사진이 옆으로 이동하는 애니메이션 효과는 재사용이 가능하도록 utils폴더에 만든다. 

utils>ImageSlider.js

import React from 'react'
import { Carousel } from 'antd';//antd이용한다.

function ImageSlider(props) {
    return (
        <div>

            <Carousel autoplay>
                {props.images.map((image, index) => (//여러사진 가지고 온다.(map은 인덱스를 같이 준다(key로))
                    <div key={index}>
                        <img style={{ width: '100%', maxHeight: '150px' }}
                            src={`http://localhost:5000/${image}`} alt="productImage" />
                    </div>
                ))}
            </Carousel>
        </div>
    )
}

export default ImageSlider

완성된 화면