[TIL]231020_TMDB_2

1. UI 구성

영화 리스트를 검색을 하니 꽤 많은 글이 있었다.
그러다 공통적인게 보여서 확인해봤더니 HEROPY이 분이 강의한 내용중에 있는 것 같아서 Github에서 보고 css를 가져다 사용했습니다.

헤더

 <header>
    <a href="/index.html" class="logo">
      <span>KDH</span>
    </a>
    <nav>
      <ul>
        <li>
          <a href="/index.html" class="header_home active">
            검색
          </a>
        </li>
        <li>
          <a href="/detail.html" class="header_info">
            정보
          </a>
        </li>

      </ul>
    </nav>
  </header>

contents

<router-view>
    <div class="container">
      <div class="headline">
        <h1>
          <span>TMDB API</span> THE OPEN MOVIE DATABASE
        </h1>
      </div>
      <div class="search">
        <input value="" placeholder="Enter the movie title to search!" />

        <button class="btn btn-primary">
          Search!
        </button>
      </div>
      <div class="movie-list">
        <div class="movies"></div>
        <div class="the-loader hiden"></div>
      </div>
    </div>
    <button class="btn view-more">View more..</button>

  </router-view>

2. API Test

TMDB API에서 테스트를 진행을 할 수 있었다.

데이터를 조회하는 방식을 알았으니 VScode에 가지고 와서 콘솔에 찍어보자.

데이터가 콘솔에 잘 찍히는 것을 확인했다.

main.js에서 데이터 요청 시 데이터를 return 함수를 만들었다.

3. 구현

movies.js

// 인기 순위 20개씩 요청하여 받아오는 함수
const getMovies = async (page) => {
  const popularUrl = `https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=${page}`;
  try {
    const res = await fetch(popularUrl, options);
    const data = await res.json();
    return data;
  } catch (error) {
    console.log(error);
  }
};
// 입력한 검색값을 요청하여 받아오는 함수
const findByTitle = async (search, page) => {
  const searchUrl = `https://api.themoviedb.org/3/search/multi?query=${search}&include_adult=false&language=ko-KR&page=${page}`;
  try {
    const res = await fetch(searchUrl, options);
    const data = await res.json();
    return data;
  } catch (err) {
    console.log(err);
  }
};

// 입력한 영화 1개를 요청하여 자세한 정보를 받아오는 함수
const findByOneDetail = async (search) => {
  const movieUrl = `https://api.themoviedb.org/3/movie/${search}?language=ko-KR`;
  try {
    const res = await fetch(movieUrl, options);
    const data = await res.json();
    return data;
  } catch (err) {
    console.log(err);
  }
};

drawsItems.js

const baseurl = "https://image.tmdb.org/t/p/w500";
const drawItems = (movie) => {
  const imageUrl = baseurl + movie.poster_path;
  const url = new URL(window.location.href).host;
  const urls = "http://" + url + "/detail.html?id=" + movie.id;
  let name = movie.title ? movie.title : movie.original_title;
  let date = movie.first_air_date ? movie.first_air_date : movie.release_date;
  let text = `  
      <a class="movie" href="${urls}" style="background-image:url(${imageUrl})">
        <div class="info">
          <div class="title">${name}</div>
          <div class="year">${date}</div>
        </div>
      </a>`;
  return text;
};

export { drawItems };

3개의 파일을 통해 메인을 페이지를 구현 하였고 화면에서 그리면서 id값으로 넣어서 버튼마다 구분을 할 수 있게 하였다.

구현 화면은 링크 에서 확인 가능합니다.