[FrontEnd6] yts-movie-api를 사용하여 영화 리스트 만들기 (yts-api, axios, pagination)

안녕하세요~ 보라해바라기입니다:)

 

저는 코딩 학원 마지막 수업을 듣고 있는데요 ㅎㅎ

 

프로젝트를 만드는 수업이라 오늘은 제가 만든 프로젝트를 보여드리려 합니다 ㅎㅎ (아주 작긴 하지만)

 

대략의 내용은 axios, pagination, yts-api를 사용하여 영화 리스트를 만드는 것입니다!

 

1. App.js

import axios from 'axios';
import { Component } from 'react';
import './App.css';
import MovieList from './components/MovieList.js'
import Pagination from './components/Pagination.js';

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      movieList:[],
      currentPage:1,
      movieListPerPage:3
    }
  }

  // axios로 yts-movie data 가져오기
  componentDidMount(){
    this.getMovies()
  }

  getMovies=async()=>{
    const {data : {data : {movies}}} 
    = await axios.get("https://yts.mx/api/v2/list_movies.json")
    this.setState({movieList:movies})
    console.log(movies)
  }

  //pagination
  setCurrentPage=(page)=>{
    alert("페이지 설정(App.js):"+page)
    this.setState({
      currentPage:page
    })
  }

  currentMovieList=(movieList)=>{
    const {currentPage, movieListPerPage} = this.state
    const indexOfFirst = (currentPage-1)*movieListPerPage
    const indexOfLast = indexOfFirst+movieListPerPage
    const slicedMovieList = movieList.slice(indexOfFirst, indexOfLast)
    return slicedMovieList;
  }

  render(){
    const {movieList, movieListPerPage, currentPage} = this.state
    return (
      <div id="App">
        <MovieList movieList={this.currentMovieList(movieList)}/>
        <Pagination movieListLength={movieList.length}
        movieListPerPage={movieListPerPage} currentPage={currentPage}
        setCurrentPage={this.setCurrentPage}/>
      </div>
    );
  }
}

export default App;

 

2. App.css

#App {
  width: 1000px;
  height: 1300px;
  margin: 0 auto;
  background-color: thistle;
}

 

3. Movie.js

import { Component } from 'react';
import '../css/Pagination.css';

class Pagination extends Component {
  constructor(props){
    super(props)
    this.state={
    
    }
  }

  setCurrentPage=(page)=>{
    alert(page+"페이지 클릭(Pagination.js)")
    this.props.setCurrentPage(page)
  }

  prevPage=()=>{
    alert("이전")

    const {currentPage, setCurrentPage} = this.props
    if (currentPage==1){
        alert("여기는 첫 페이지 입니다.")
        return
    }
    setCurrentPage(currentPage-1)
  }

  nextPage=()=>{
    alert("다음")

    const {currentPage, setCurrentPage} = this.props
    const {lastPageNum} = this.state

    if (currentPage+1 > lastPageNum){
        alert("여기는 마지막 페이지 입니다.")
        return
    }
    setCurrentPage(currentPage+1)
  }

  render(){
    const {movieListLength, movieListPerPage} = this.props

    let pageNumbers=[];
    const lastPageNum = Math.ceil(movieListLength/movieListPerPage)
    for(var i=1; i<=lastPageNum; i++){
        pageNumbers.push(i)
    }

    const movieList=pageNumbers.map(
        (data)=>(<span className='page' key={data}
        onClick={()=>this.setCurrentPage(data)}>{data}</span>)
      )

    return (
      <div id="pagination">
        <div>
            총 글 갯수: {movieListLength}
        </div>
        <div>
            페이지당 글 갯수: {movieListPerPage}
        </div>
        <div>
            <span className='page' onClick={this.prevPage}>
                &lt;
            </span>
            <span>{movieList}</span>
            <span className='page' onClick={this.nextPage}>
                &gt;
            </span>
        </div>
      </div>
    );
  }
}

export default Pagination;

 

4. Movie.css

#movie{
    width: 900px;
    height: 350px;
    background-color: yellowgreen;
    margin: 10px;
}

#movie>#left-side{
    float: left;
    width: 250px;
    height: 330px;
    background-color: lightpink;
    padding-top: 60px;
    padding-left: 50px;
    box-sizing: border-box;
}

#movie>#right-side{
    float: left;
    width: 550px;
    height: 330px;
    background-color: lightblue;
}

#movie>#right-side>span{
    display: block;
    width: 540px;
    height: 35px;
    padding-top: 10px;
    box-sizing: border-box;
}

#movie>#right-side>span:first-child{
    background-color: lightgray;
}

#movie>#right-side>span:nth-child(2){
    background-color: lightgoldenrodyellow;
}

#movie>#right-side>span:nth-child(3){
    background-color: lightcyan;
}

#movie>#right-side>span:nth-child(4){
    background-color: sandybrown;
}

#movie>#right-side>span:nth-child(5){
    background-color: plum;
}

#movie>#right-side>span:nth-child(6){
    overflow: auto;
    height: 140px;
    background-color: lightsalmon;
}

 

5. MovieList.js

import { Component } from 'react';
import '../css/MovieList.css';
import Movie from './Movie';

class MovieList extends Component {
  constructor(props){
    super(props)
    this.state={
    
    }
  }

  render(){
    const result= this.props.movieList.map(
        (data) => (<Movie key={data.id} 
        medium_cover_image = {<img src= {data.medium_cover_image}/>}
        title={data.title} year={data.year} genres={data.genres}
        summary={data.summary} runtime={data.runtime} rating={data.rating}/>)
    )

    return (
      <div id="movie-list">
        {result}
      </div>
    );
  }
}

export default MovieList;

 

6. MovieList.css

#movie-list{
    width: 900px;
    height: auto;
    margin: 0 auto;
}

img{
    width: 150px;
    height: 200px;
}

 

7. Pagination.js

import { Component } from 'react';
import '../css/Pagination.css';

class Pagination extends Component {
  constructor(props){
    super(props)
    this.state={
    
    }
  }

  setCurrentPage=(page)=>{
    alert(page+"페이지 클릭(Pagination.js)")
    this.props.setCurrentPage(page)
  }

  prevPage=()=>{
    alert("이전")

    const {currentPage, setCurrentPage} = this.props
    if (currentPage==1){
        alert("여기는 첫 페이지 입니다.")
        return
    }
    setCurrentPage(currentPage-1)
  }

  nextPage=()=>{
    alert("다음")

    const {currentPage, setCurrentPage} = this.props
    const {lastPageNum} = this.state

    if (currentPage+1 > lastPageNum){
        alert("여기는 마지막 페이지 입니다.")
        return
    }
    setCurrentPage(currentPage+1)
  }

  render(){
    const {movieListLength, movieListPerPage} = this.props

    let pageNumbers=[];
    const lastPageNum = Math.ceil(movieListLength/movieListPerPage)
    for(var i=1; i<=lastPageNum; i++){
        pageNumbers.push(i)
    }

    const movieList=pageNumbers.map(
        (data)=>(<span className='page' key={data}
        onClick={()=>this.setCurrentPage(data)}>{data}</span>)
      )

    return (
      <div id="pagination">
        <div>
            총 글 갯수: {movieListLength}
        </div>
        <div>
            페이지당 글 갯수: {movieListPerPage}
        </div>
        <div>
            <span className='page' onClick={this.prevPage}>
                &lt;
            </span>
            <span>{movieList}</span>
            <span className='page' onClick={this.nextPage}>
                &gt;
            </span>
        </div>
      </div>
    );
  }
}

export default Pagination;

 

8. Pagination.css

#pagination{
    width: 900px;
    height: 100px;
    background-color: springgreen;
    position: relative;
    margin-left: 60px;
}

.page{
    display:inline-block;
    width:35px;
    height:35px;
    border:1px solid black;
    margin:5px;
    text-align: center;
    padding-top:5px;
    box-sizing: border-box;
    background-color: darkgray;
    cursor: pointer;
}

#pagination>div:nth-child(3){
    position: absolute;
    left: 240px;
}

 

9. 실행 결과