[React UI 라이브러리 ] AntDesign Carousel 추가

현재 랜딩페이지는 tmdb에서 가져온 인기 영화 첫번째가 나타나도록 되어 있는데
AntDesign의 Carousel을 적용해서 인기영화 5번까지 슬라이드 되도록 수정

1. antd에서 Carousel 임포트

import { Button,Carousel } from 'antd';

---

2. fetchMovies 수정

fetchMovies로 인기있는 영화를 가져올 때 setMainMovies 는 배열의 0번째(제일 인기있는 영화)의 데이터로 되어있습니다.

const fetchMovies = (endPoint) => {
        //fetch로 현재 인기있는 영화 가져오기
        fetch(endPoint)
            .then(response => response.json())
            .then(response => {
                console.log(response);
                //setMovies로 가져온 데이터를 배열에 넣기
                setMovies([...Movies, ...response.results]);
                setMainMovieImage(...Movies, response.results)[0]; //여기
                setCurrentPage(response.page);
            })
    }

인기영화 전체 데이터를 받도록 setMainMovies 수정

setMainMovieImage(...Movies,response.results);

---

3. state 수정

MainMovie상태의 타입을 null > []로 변경

const [MainMovieImage, setMainMovieImage] = useState(null);

const [MainMovieImage, setMainMovieImage] = useState([]);

---

4.Carousel 적용하기

수정 전

{MainMovieImage &&
  <MainImage
  image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
  title={MainMovieImage.title}
  text={MainMovieImage.overview}
  tagline={MainMovieImage.tagline}
/>
}

MainMovieImage가 존재할 경우 렌더링

수정 후

<Carousel autoplay>
  {/* 메인 이미지 */}
  {MainMovieImage.slice(0, 5).map((main, index) => (
    <MainImage
      key={index}
      image={`${IMAGE_BASE_URL}w1280${MainMovieImage[index].backdrop_path}`}
      title={MainMovieImage[index].title}
      text={MainMovieImage[index].overview}
      tagline={MainMovieImage[index].tagline}
      />
      ))
    }
</Carousel>

MainMovieImage.slice(0, 5).map()로 MainMovieImage의 5번째 까지 렌더링


slice(0, 5)에서 0은 시작 인덱스를 나타내고, 5는 종료 인덱스를 나타냄 0,1,2,3,4

---

완성

LandingPage.jsx 수정 전

import React, { useEffect, useState } from 'react'
// import { response } from 'express'
import { API_KEY, API_URL, IMAGE_BASE_URL } from '../../../Config';
import { Button } from 'antd';

import MainImage from '../commons/MainImage';
import GridCards from '../commons/GridCards';


function LandingPage() {
    const [Movies, setMovies] = useState([]);
    const [MainMovieImage, setMainMovieImage] = useState(null);
    const [CurrentPage, setCurrentPage] = useState(0);

    useEffect(() => {
        //인기있는 영화 엔드포인트 지정
        const endPoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=ko-KO&page=1`;

        fetchMovies(endPoint);

    }, [])
    const fetchMovies = (endPoint) => {
        //fetch로 현재 인기있는 영화 가져오기
        fetch(endPoint)
            .then(response => response.json())
            .then(response => {
                console.log(response);
                //setMovies로 가져온 데이터를 배열에 넣기
                setMovies([...Movies, ...response.results]);
                setMainMovieImage(...Movies, response.results[0]);
                setCurrentPage(response.page);
            })
    }

    const loadMoreItems = () => {
        //인기있는 영화 엔드포인트 지정
        const endPoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=ko-KO&page=${CurrentPage + 1}`;
        fetchMovies(endPoint);
    }
    return (
        <div style={{ width: '100%', margin: '0' }}>
            {/* 메인 이미지 */}
            {MainMovieImage &&
                <MainImage
                    image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
                    title={MainMovieImage.title}
                    text={MainMovieImage.overview}
                    tagline={MainMovieImage.tagline}
                />
            }
            <div style={{ width: '85%', margin: '1rem auto' }}>

                <h2>Movies by latest</h2>
                <hr />

                {/* Movie Grid Cards */}

                <div className='gridWrap' style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }}>

                    {Movies && Movies.map((movie, index) => (
                        <React.Fragment key={index}>
                            <GridCards
                                landingPage
                                image={movie.poster_path ?
                                    `${IMAGE_BASE_URL}w500${movie.poster_path}` : null}
                                movieId={movie.id}
                                movieName={movie.original_title}
                            />
                        </React.Fragment>
                    ))}
                </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Button onClick={loadMoreItems}>더 보기</Button>
            </div>
        </div>
    )
}
export default LandingPage;

LandingPage.jsx 수정 후

import React, { useEffect, useState } from 'react'
// import { response } from 'express'
import { API_KEY, API_URL, IMAGE_BASE_URL } from '../../../Config';
import { Button, Carousel } from 'antd';

import MainImage from '../commons/MainImage';
import GridCards from '../commons/GridCards';



function LandingPage() {


    const [Movies, setMovies] = useState([]);
    const [MainMovieImage, setMainMovieImage] = useState([]);
    const [CurrentPage, setCurrentPage] = useState(0);

    useEffect(() => {
        //인기있는 영화 엔드포인트 지정
        const endPoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=ko-KO&page=1`;

        fetchMovies(endPoint);

    }, [])
    const fetchMovies = (endPoint) => {
        //fetch로 현재 인기있는 영화 가져오기
        fetch(endPoint)
            .then(response => response.json())
            .then(response => {
                console.log(response);
                //setMovies로 가져온 데이터를 배열에 넣기
                setMovies([...Movies, ...response.results]);
                setMainMovieImage(...Movies, response.results); //여기
                setCurrentPage(response.page);
            })
    }

    const loadMoreItems = () => {
        //인기있는 영화 엔드포인트 지정
        const endPoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=ko-KO&page=${CurrentPage + 1}`;
        fetchMovies(endPoint);

    }

    return (
        <div style={{ width: '100%', margin: '0' }}>
            {/* 메인 Carousel */}
            <Carousel autoplay>
                {/* 메인 이미지 */}
                {MainMovieImage.slice(0, 5).map((main, index) => (
                    <MainImage
                        key={index}
                        image={`${IMAGE_BASE_URL}w1280${MainMovieImage[index].backdrop_path}`}
                        title={MainMovieImage[index].title}
                        text={MainMovieImage[index].overview}
                        tagline={MainMovieImage[index].tagline}
                    />
                ))
                }
            </Carousel>

            <div style={{ width: '85%', margin: '1rem auto' }}>

                <h2>Movies by latest</h2>
                <hr />

                {/* Movie Grid Cards */}

                <div className='gridWrap' style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }}>

                    {Movies && Movies.map((movie, index) => (
                        <React.Fragment key={index}>
                            <GridCards
                                landingPage
                                image={movie.poster_path ?
                                    `${IMAGE_BASE_URL}w500${movie.poster_path}` : null}
                                movieId={movie.id}
                                movieName={movie.original_title}
                            />
                        </React.Fragment>
                    ))}

                </div>

            </div>

            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Button onClick={loadMoreItems}>더 보기</Button>
            </div>
        </div>
    )
}

export default LandingPage;