[200109] mission004

[eastjun-dev]

🔥 Movie List 사이트 만들기

• https://developers.themoviedb.org/3/movies/get-movie-details
• 위 사이트의 "Movie" 카테고리에 있는 오픈 API를 활용하여 Movie List 사이트를 만듭니다.
• 자세한 API 사용 방법은 아래의 "API 사용 방법"을 참고해주세요.

기본 요구사항

1. 메인 화면을 구현한다.

• 메인 화면에는 Movie List 데이터가 보여진다.
• 영화의 제목, 영화 개봉 연도, 포스터 이미지 데이터를 보여줘야 한다.
• 메인 화면에서, 스크롤이 화면의 바닥에 닿을 경우 infinity scroll로 데이터를 불러온다.
• 좌측 상단의 로고를 누르면 다시 메인 화면으로 돌아온다.

2. 영화 검색 기능을 구현한다.

• 화면 우측 상단의 input에서 영화를 검색할 수 있다.
• 검색어 입력 후, enter 키를 누르거나 옆의 돋보기 아이콘을 클릭 시 검색된다.
• 검색 결과가 존재하지 않을 경우, <검색 결과가 존재하지 않습니다> 라는 텍스트를 뿌려준다.

3. 영화 상세 페이지를 구현한다.

• 상세 페이지에서는 해당 영화의 backdrop 이미지, poster, 영화 제목, 개봉 날짜, 영화 시간, 장르, overview 텍스트 데이터를 보여준다.

추가 요구사항

1. 메인 화면 스크롤 후, 상세페이지를 다녀왔을 때, 메인 화면에서의 스크롤 위치 기억하기

• 스크롤 위치를 기억함으로써 더 좋은 UX를 제공한다.

API 사용 방법

Movie List 불러오기

• API 문서 : https://developers.themoviedb.org/3/movies/get-upcoming
• API : https://api.themoviedb.org/3/movie/upcoming?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=1
• 아래 Json Data에서, "page", "results"의 "poster_path", "release_date", "title" 데이터를 활용합니다.

Query String

{
  api_key(requirement) : 제 개인 API Key 발급받아 넣었습니다
  language(Optional) : 신경쓰지 않아도 됩니다
  reigion(Optional) : 신경쓰지 않아도 됩니다
  page(Optional) : 페이지 넘버입니다. infinity scroll 구현을 위해 필요합니다. 
}

Json Data

{
  {
    "page": 1,
    "results": [
      {
        "poster_path": 포스터 주소(string)
        "adult": 성인물 여부(boolean)
        "overview": 한줄 요약(string)
       "release_date": 영화 릴리즈 날짜(string)
        "genre_ids": 장르 id 숫자 배열(number[])
        "id": 아이디(number)
        "original_title": 영화 오리지널 타이틀(string)
        "original_language": 언어(string)
        **"title": 영화 타이틀(string)**
        "backdrop_path": 배경이미지 주소(string)
        "popularity": 인기도 (number)
        "vote_count": 투표수 (number)
        "video": 미리보기 비디오가 있는가 여부(boolean)
        "vote_average": 투표 평균(number)
      },
     ...
     ]
   }
 }

Movie Detail 데이터 불러오기

• API 문서 : https://developers.themoviedb.org/3/movies/get-movie-details
• API : https://api.themoviedb.org/3/movie/{movie_id}?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US
• {movie_id}를 path param으로 받습니다.
• {movie_id}에 아무 숫자나 넣으면 일단 API 불러와집니다.
• 아래 Json Data에서, "backdrop_path", "genres", "overview", "poster_path", "release_date", "runtime", "title" 데이터를 활용합니다.

Query String

{
  api_key(requirement) : 제 개인 API Key 발급받아 넣었습니다
  language(Optional) : 신경쓰지 않아도 됩니다
  append_to_response(Optional) : 정확히 모르겠으나.. 신경쓰지 않아도 됩니다
}

Json Data

{
  {
  "adult": false,
  "backdrop_path": "/8HqSxB9VLJkbRXRdlocbLq9wxwY.jpg",
  "belongs_to_collection": {
    "id": 141290,
    "name": "The Lord of the Rings Animated Collection",
    "poster_path": "/pQuazFOlGRdn2Lb3oWFJYPeASOc.jpg",
    "backdrop_path": "/uUG532EWfyhtKDzsA0sLb1PsHhL.jpg"
  },
  "budget": 4000000,
  "genres": [
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 14,
      "name": "Fantasy"
    },
    {
      "id": 10751,
      "name": "Family"
    }
  ],
  "homepage": null,
  "id": 123,
  "imdb_id": "tt0077869",
  "original_language": "en",
  "original_title": "The Lord of the Rings",
  "overview": "The Fellowship of the Ring embark on a journey to destroy the One Ring and end Sauron's reign over Middle-earth.",
  "popularity": 13.134,
  "poster_path": "/1l3WpoF7TX9pOprX4XepCXjQXUV.jpg",
  "production_companies": [
    {
      "id": 60,
      "logo_path": "/oJXpAs4I3W46e4dkaOEzCa4yBko.png",
      "name": "United Artists",
      "origin_country": "US"
    },
    {
      "id": 286,
      "logo_path": null,
      "name": "Fantasy Films",
      "origin_country": ""
    }
  ],
  "production_countries": [
    {
      "iso_3166_1": "US",
      "name": "United States of America"
    }
  ],
  "release_date": "1978-11-15",
  "revenue": 30471420,
  "runtime": 132,
  "spoken_languages": [
    {
      "iso_639_1": "en",
      "name": "English"
    }
  ],
  "status": "Released",
  "tagline": "Fantasy...beyond your imagination",
  "title": "The Lord of the Rings",
  "video": false,
  "vote_average": 6.5,
  "vote_count": 391
}
 }

👨‍💻 Reviewer Match 👩‍💻

@eastjun

@YongHoonJJo @StellaKim1230 @ganeodolu

@YongHoonJJo

@StellaKim1230 @ganeodolu @s280493

@StellaKim1230

@ganeodolu @s280493 @eastjun

@ganeodolu

@s280493 @eastjun @YongHoonJJo

@s280493

@eastjun @YongHoonJJo @StellaKim1230

[ganeodolu]

detail.html의 이미지경로 예시를 나중에 발견하여 좀 헤맸는데 api 결과값의 이미지 경로가 하위경로만 표시되어있어요. 앞에 https://image.tmdb.org/t/p/w500 를 붙여주시면 정상적으로 나오니 참고하세요. 🤘
예시 : https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg
참고 : https://developers.themoviedb.org/3/getting-started/images

그리고 영화검색 기능을 이용시 API를 아래처럼 사용하시면 돼요.
https://api.themoviedb.org/3/search/movie?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&query=검색어&page=1
참고 : https://developers.themoviedb.org/3/search/search-movies