[넷플릭스 클론코딩] 슬라이드에 영화 카드 만들어 넣기

problem_hun·2023년 4월 6일
0

넷플릭스 클론코딩

목록 보기
10/10
post-thumbnail

슬라이드를 만들었으면 슬라이드 안에 영화의 정보를 담은 카드를 만들어 담아 보자.

react multi carousel의 기본 코드를 작성하고 props로 받아온 영화들을 MovieCard라는 컴포넌트를 만들어 map으로 리스트했다.

//MovieSlide.js
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

const responsive = {
  superLargeDesktop: {
    breakpoint: { max: 4000, min: 3000 },
    items: 6,
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 4,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 3,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 2,
  },
};

function MovieSlide({ movies }) {
  console.log(movies.results);
  return (
    <Carousel responsive={responsive}>
      {movies.results.map((movie) => (
        <MovieCard key={movie.id} movie={movie} />
      ))}
    </Carousel>
  );
}

영화 카드에서는 장르 리스트를 보여주는 것에 시간을 많이 할애했다.
영화 정보에서 장르를 id화 시켜서 숫자로 데이터를 보내주기 때문이다.

TMDB의 API 페이지에서 장르 API 문서를 찾아 장르와 id가 객체로 들어있는 데이터를 받아 리액트에서 장르 id와 매칭되는 것들은 문자로 나타나도록 해 주었다.

우선, 영화 정보 API를 호출하는 함수에 추가로 장르 API도 호출하도록 하였고 그 데이터를 바탕으로 리덕스에 장르리스트를 추가해 주었다.

장르 리스트를 콘솔 로그 해 보면 다음과 같이 나온다.

따라서 리액트에는 id와 매칭되는 장르 객체의 name의 값이 필요하므로 다음과 같이 작성해 주었다.

{movie.genre_ids.map((id) => (
  <Badge bg="danger" key={id}>
	{genreList.find((genre) => genre.id === id).name}
  </Badge>
))}

영화 카드의 최종 코드는 다음과 같다.

//movieCard.js
import Badge from 'react-bootstrap/Badge';
import { useSelector } from 'react-redux';

function MovieCard({ movie }) {
  const { genreList } = useSelector((state) => state.movie);

  return (
    <a
      href="/"
      className="movieCard"
      style={{
        backgroundImage: `url(https://www.themoviedb.org/t/p/w1920_and_h800_multi_faces/${movie.poster_path})`,
      }}
    >
      <div className="movieCard-info">
        <h1 className="movieCard-info-title">{movie.title}</h1>
        <div className="movieCard-info-detail">
          <div className="movieCard-info-average">
            <Badge bg="danger">{movie.vote_average}</Badge>
          </div>
          <div className="movieCard-info-genres">
            {movie.genre_ids.map((id) => (
              <Badge bg="danger" key={id}>
                {genreList.find((genre) => genre.id === id).name}
              </Badge>
            ))}
          </div>
          <div className="movieCard-info-adult">
            {movie.adult ? <Badge bg="danger">청불</Badge> : null}
          </div>
        </div>
      </div>
    </a>
  );
}

스타일링과 호버를 적용하여 보았다.

profile
문제아

0개의 댓글