[TIL] 개인 : 영화 검색 사이트5

진행사항

fetchData에 search API 추가

// 2. search data
export const getChangeData = async (search, page) => {
  const url = `${BASE_URL}/search/movie?language=ko-KR&api_key=${API_KEY}&query=${search}&page=${page}`;
  return await fetchData(url);
};

search와 page를 인자로 받아 내 보낼 때 값을 쓰기 위한 전처리 완료

main 컴포넌트에 search 변수 추가 하기

import { getPopularData, getChangeData } from './fetchData.js';
import { createPagination, handlePagination } from './pagination.js';

let pageStart = 1;

export const createSection = async () => {
  ...중략
  const data = await getPopularData(pageStart);
  const pageTotal = data.total_pages;
  ...중략
  handlePagination(pageTotal, pageStart);
  activePagenation(pageStart);
}

페이저 기능을 구현하기 위해 모든 페이지 데이터를 가지고 올 수 있는 search 가져왔다.
start 페이지를 1로 설정하고 동기화 된 getPopularData에 page 값을 초기 세팅해 준 후, 모든 페이지의 데이터를 다 가져와 주었다.

그 후, handlePagination에 총 페이지 값과 1페이지를 설정하고 pager 컴포넌트에서 쓰기위해 export 해 주었다.

pager 컴포넌트에 pager 만들기

import { handlePagerClick } from './main.js';

// pagination
const pagination = (pageTotal, pageStart) => {
  let pageTemp = '';
  const pageGroup = 10;
  const pageEnd = Math.min(pageTotal, pageStart + pageGroup - 1);
  for (let i = pageStart; i <= pageEnd; i++) {
    const active = i === pageStart ? 'on' : '';
    pageTemp += `<li class="pager ${active}" id="${i}">${i}</li>`;
  }
  return pageTemp;
};

export const createPagination = (pageTotal, pageStart) => {
  const paginationList = document.createElement('ul');
  paginationList.innerHTML = pagination(pageTotal, pageStart);
  paginationList.id = 'pagination-list';
  return paginationList;
};

export const handlePagination = () => {
  const pageGroupNum = document.querySelectorAll('.pager');
  pageGroupNum.forEach((idx) => {
    idx.addEventListener('click', handlePagerClick);
  });
};

pagination의 인자에 총 페이지 수와, 시작 페이지의 값을 준 후, 빈문자로 초기화 해 주었다. 총 페이지의 개수를 10개로 설정해 보여주게끔 하였고, pageTotal 전체페이지를 가져와 pageStart 첫 페이지 부터 pageGroup의 한번에 포시할 페이지 번호의 개수를 가져오고 1 + 10 은 11 page가 되기 때문에 -1을 줘 1~10페이지 까지 보여지게 했다.

Math.min 메서드 안에서 pageTotal과 pageStart + pageGroup - 1 중에서 더 작은 값을 선택하게 하였고, 이를 통해 페이저 내에서 현재 그룹이 표시할 수 있으면서 전체 페이지 수를 넘지 않게 페이지 그룹 처리 하고 반복문을 돌려 active 값에 활성화 버튼을 처리 하고 pageTemp에 값을 다 넣어준 후 return 하였다.

createPagination에서 새로운 ui를 그려주었고,
handlePagination에서 모든 li페이지를 가져와 클릭 이벤트를 하나하나 달아주었다.

main 컴포넌트에 pager 만들기

// pagination active
const activePagenation = (page) => {
  const pageGroupNum = document.querySelectorAll('.page-num');
  pageGroupNum.forEach((idx) => {
    idx.innerHTML === page ? idx.classList.add('on') : idx.classList.remove('on');
  
  });
};

// pagination click
export const handlePagerClick = async (e) => {
  if (e.target.classList.contains('pager')) {
    // 옵셔널 체이닝 : 연산자 왼쪽을 평가한 뒤 값이 있으면 출력 없으면 undefined, null 후 종료
    document.querySelector('.pager.on')?.classList.remove('on');
    e.target.classList.add('on');
    onChangePage(e.target.innerHTML);
  }
};

// movie change
export const onChangePage = async (pageNumber) => {
  // search의 값을 받는 API를 사용하였기 때문에 변수 선언을 위해 input값을 받아온다
  const searchInput = document.getElementById('search-input').value;
  const movieList = document.getElementById('movie-list');
  const data = searchInput
    ? await getChangeData(searchInput, pageNumber)
    : await getPopularData(pageNumber, window.scrollTo(0, 0));
  const cardTemp = cardList(data);
  movieList.innerHTML = cardTemp;
};

activePagenation 페이저에서 현재 활성화된 페이지를 표시하기 위해 사용
handlePagerClick 페이저페이지네이션에서 페이지 버튼을 클릭했을 때 호출, 용자가 특정 페이지를 클릭하면 해당 페이지로 이동하도록 설정
onChangePage 페이지 번호를 변경할 때마다 해당 페이지에 맞는 영화 목록을 가져와 화면을 업데이트하는 역할

느낀점

api로 페이저 처리하기 너무 힘들다. 다음에는 filter을 써서 해보고 싶다.