[React] API 활용한 영화 웹페이지 만들기 (2)

https://khw063011.tistory.com/46

[React] API 활용한 영화 웹페이지 만들기 (1)

 

1편에 이어서 조금 디자인을 수정해보도록 하자.

1편에서는 현재 상영중인 영화를 모두 가져왔다면, 이번에는 각 카테고리별로 다르게 가져오도록 했다.

 

기능설명

 

옆으로 넘기면

 

이런 식으로 넘어가는 것을 확인할 수 있다. 

조금 형태가 갖춰가는 모습이다. ㅎㅎ

 

코드설명

1. App.js

import React from 'react';
import MovieList from './components/MovieList';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>HYELONG</h1>
      </header>
      <MovieList title="인기 영화" apiUrl="https://api.themoviedb.org/3/movie/popular" />
      <MovieList title="현재 상영 중인 영화" apiUrl="https://api.themoviedb.org/3/movie/now_playing" />
      <MovieList title="방영 예정작" apiUrl="https://api.themoviedb.org/3/movie/upcoming" />
    
    </div>
  );
}

export default App;

 

2. MovieList.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './MovieStyle.css';

const MovieList = ({ title, apiUrl }) => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const fetchMovies = async () => {
      const response = await axios.get(apiUrl, {
        params: {
          api_key: process.env.REACT_APP_MOVIE_API_KEY,
          language: 'ko',
          region: 'KR',
        },
      });
      setMovies(response.data.results);
    };

    fetchMovies();
  }, [apiUrl]);
  


  return (
    <div className="movie-category">
      <h2>{title}</h2>
      
      <div className="movie-category__list">
        {movies.map((movie) => (
          <div key={movie.id} className="movie-card">
            <img
              src={`https://image.tmdb.org/t/p/w200${movie.poster_path}`}
              alt={movie.title}
              className="movie-poster"
            />
            <h3>{movie.title}</h3>
          </div>
        ))}
      </div>
    </div>
  );
};

export default MovieList;

 

3. MovieStyle.css

.movie-category {
    margin: 20px 0;
    overflow: hidden;
  }
  
  .movie-category h2 {
    margin-left: 20px;
    color: white;
  }
  
  .movie-category__list {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px;
  }
  
  .movie-card {
    min-width: 200px;
    margin-right: 10px;
    background-color: #222;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    color: white;
  }
  
  .movie-card img {
    width: 100%;
    border-bottom: 1px solid #444;
  }

 

overflow-x 를 주어서 옆으로 넘어갈 수 있도록 해주었다. 

나머지는 (1) 에서 했던 것과 거의 비슷하다.