[React] TMDB API를 활용한 넷플릭스 클론 코딩 - 6. 검색 기능 구현 및 찜 페이지 구현

영화 검색 기능 및 찜 페이지 구현

이번 포스팅에서는 찜 페이지와 영화 검색 기능을 구현한 내용을 다뤄보겠습니다. 이를 통해 사용자가 사이트에서 찜 목록을 쉽게 볼 수 있고 영화 검색을 효율적으로 할 수 있도록 만드는 방법을 소개합니다.

---

1. 영화 검색 기능 구현

사용자는 영화 검색 기능을 통해 원하는 영화를 빠르게 찾을 수 있습니다. 이 기능은 TMDB API를 활용하여 검색된 영화 목록을 표시하고, 필터링 옵션을 제공하여 사용자가 원하는 영화를 정리할 수 있도록 돕습니다.

1.1 검색어 입력 및 API 호출

사용자가 검색어를 입력하면 해당 검색어를 바탕으로 TMDB API에서 영화 목록을 받아옵니다. 이를 위해 useState로 검색어 상태를 관리하고, 검색 버튼을 클릭하면 searchMovies 함수를 호출하여 API 요청을 보냅니다.

searchPage.js

//pages/searchPage.js
const handleSearch = useCallback(async () => {
  try {
    const data = await searchMovies(query, page);
    setMovies(data.results);
    setTotalPages(data.total_pages);
  } catch (error) {
    console.error("Error fetching search results:", error);
  }
}, [query, page]);

1.2 필터링 기능

사용자는 검색 결과를 장르, 평점, 정렬 방식으로 필터링할 수 있습니다. 필터링은 filters 객체를 통해 관리되며, 장르와 평점 등을 기준으로 영화를 선택할 수 있습니다. 필터링된 영화 목록은 filteredMovies 상태에 저장되어 사용자에게 보여집니다.

//searchPage.js
const applyFilters = useCallback(() => {
  let updatedMovies = [...movies];

  if (filters.genre) {
    updatedMovies = updatedMovies.filter((movie) =>
      movie.genre_ids.includes(parseInt(filters.genre))
    );
  }

  if (filters.rating > 0) {
    updatedMovies = updatedMovies.filter(
      (movie) => movie.vote_average >= filters.rating
    );
  }

  if (filters.sortBy) {
    updatedMovies.sort((a, b) => {
      if (filters.sortBy === "popularity.desc") {
        return b.popularity - a.popularity;
      } else if (filters.sortBy === "release_date.desc") {
        return new Date(b.release_date) - new Date(a.release_date);
      }
      return 0;
    });
  }

  setFilteredMovies(updatedMovies);
}, [movies, filters]);

1.3 페이지네이션

검색 결과는 페이지네이션을 통해 여러 페이지에 걸쳐 표시됩니다. 사용자가 페이지를 변경할 때마다 새로운 검색 결과를 불러옵니다. 이를 위해 Pagination 컴포넌트를 사용하여 현재 페이지와 전체 페이지 수를 전달하고, 페이지를 변경할 수 있도록 합니다.

<Pagination page={page} totalPages={totalPages} setPage={setPage} />

Pagination.js

//components/Pagination.js
import React from "react";

const Pagination = ({ page, totalPages, setPage }) => {
  const handlePrevPage = () => {
    if (page > 1) {
      setPage(page - 1);
    }
  };

  const handleNextPage = () => {
    if (page < totalPages) {
      setPage(page + 1);
    }
  };

  return (
    <div className="pagination">
      <button onClick={handlePrevPage} disabled={page === 1}>
        ◀︎
      </button>
      <span>
        {page} / {totalPages}
      </span>
      <button onClick={handleNextPage} disabled={page === totalPages}>
        ▶︎
      </button>
    </div>
  );
};

export default Pagination;

---

2. 찜 페이지 구현

WishlistPage.js

//pages/WishlistPage.js
const WishlistPage = () => {
  const [wishlist, setWishlist] = React.useState([]);
  
  ...
  // 찜한 영화 목록을 localStorage에서 가져오기
  React.useEffect(() => {
    const storedWishlist = getFromLocalStorage("favoriteMovies") || []; // localStorage에서 찜 목록 가져오기
    setWishlist(storedWishlist);
  }, []);

  // 찜 목록에서 영화 삭제
  const handleRemoveFromWishlist = (movie) => {
    const updatedWishlist = wishlist.filter((item) => item.id !== movie.id); // 삭제할 영화 제외한 목록
    setWishlist(updatedWishlist); // 상태 업데이트
    saveToLocalStorage("favoriteMovies", updatedWishlist); // localStorage에 찜 목록 저장
  };

  ...
  return (
    <div className="wishlist-page">
      <h1>찜한 콘텐츠</h1>
      {wishlist.length > 0 ? (
        <div className="movie-list">
          {wishlist.map((movie) => (
            <MovieCard
              key={movie.id}
              movie={movie}
              onClick={() => openModal(movie)}
            />
          ))}
        </div>
      ) : (
        <p>찜한 영화가 없습니다.</p>
      )}

      {showModal && selectedMovie && (
        <Modal
          movie={selectedMovie}
          onClose={closeModal}
          handleAddToWishlist={() => {}}
          handleRemoveFromWishlist={handleFavoriteAction} // 찜 취소 함수 전달
          isFavorite={true} // 찜 상태는 항상 true로 설정 (찜한 상태)
        />
      )}
    </div>
  );
 };

export default WishlistPage;

---

🚀 결과 화면

• 영화 검색 기능

 

• 찜 페이지

---

💡 정리

이번 포스팅에서는 찜 페이지와 영화 검색 기능을 구현하는 방법을 살펴보았습니다. 찜 페이지를 통해 사용자가 찜한 영화 목록을 손쉽게 확인할 수 있고, 영화 검색 기능에서는 TMDB API를 활용해 사용자가 원하는 영화를 검색하고, 필터링할 수 있도록 했습니다.