[6주차] Reddigg 미션 제출합니다.

public/svgs/index.tsx

@@ -10,6 +10,7 @@ import PlusIcon from "./plusIcon.svg";
 import Top10Icon from "./top10Icon.svg";
 import SearchIcon2 from "./searchIcon2.svg";
 import XIcon from "./xIcon.svg";
+import PlayCircleIcon from "./playCircleIcon.svg";
 import SquareForRankingIcon from "./squareForRanking.svg";
 export {
   HomeIcon,
@@ -25,4 +26,5 @@ export {
   SquareForRankingIcon,
   SearchIcon2,
   XIcon,
+  PlayCircleIcon,
 };

src/app/search/page.tsx

@@ -1,19 +1,48 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
+import tmdbApi, { requests } from "@/components/api";
 import NavBar from "@/components/navbar";
 import SearchBar from "./searchBar";
+import { renderMovieLists } from "../utils/movieFunctions";
+import { render } from "react-dom";
 
 type Props = {};
+interface Movie {
+  id: number;
+  title: string;
+  poster_path: string;
+  backdrop_path: string;
+  overview: string;
+}
 
 function Search({}: Props) {
+  const [topRated, setTopRated] = useState<Movie[]>([]);
+  useEffect(() => {
+    const fetchMovies = async () => {
+      try {
+        const [topRatedData] = await Promise.all([
+          tmdbApi.get(requests.fetchTopRated),
+        ]);
+        setTopRated(topRatedData.data.results);
+      } catch (error) {
+        console.error("Failed to fetch movies:", error);
+      }
+    };
+    fetchMovies();
+  }, []);
+
   return (
-    <div className="flex flex-col items-center justify-center w-full h-screen">
+    <div className="flex flex-col items-center w-full h-screen">
       <SearchBar />
-      <h3 className="pl-[0.25rem] text-white text-preview font-bold">
+
+      <h3 className="pl-[0.63rem] pt-[117px] text-start text-white text-preview font-bold mb-[1.3rem] w-[375px]">
         Top Searches
       </h3>
 
+      <div className="flex flex-col items-center justify-center w-full pb-[60px] overflow-y-auto">
+        {renderMovieLists(topRated)}
+      </div>
       <NavBar />
     </div>
   );

src/app/utils/movieFunctions.tsx

@@ -1,6 +1,15 @@
-import { SquareImg, Previews, BackgroundImg } from "@/components/ImageType";
+import {
+  SquareImg,
+  Previews,
+  BackgroundImg,
+  SearchMovieImg,
+} from "@/components/ImageType";
 import { useEffect, useState, useMemo } from "react";
-import { SquareForRankingIcon, Top10Icon } from "../../../public/svgs";
+import {
+  SquareForRankingIcon,
+  Top10Icon,
+  PlayCircleIcon,
+} from "../../../public/svgs";
 import Link from "next/link";
 
 interface Movie {
@@ -92,3 +101,25 @@ export const renderBoxMovies = (movies: Movie[]) => {
 export const getImageUrl = (posterPath: string) => {
   return `https://image.tmdb.org/t/p/w500${posterPath}`;
 };
+
+//search 페이지에 사용될 함수
+export const renderMovieLists = (movies: Movie[]) => {
+  return movies.map((movie) => (
+    <div key={movie.id}>
+      <Link
+        href={{
+          pathname: `/movie-detail/${movie.id}`,
+          query: { path: movie.backdrop_path, overview: movie.overview },
+        }}
+      >
+        <div className="flex flex-row items-center justify-between bg-[#424242] w-[375px] h-[76px] mb-[0.2rem] relative">
+          <SearchMovieImg imageUrl={getImageUrl(movie.poster_path)} />
+          <span className="text-start	w-[160px] text-white text-sm font-normal">
+            {movie.title}
+          </span>
+          <PlayCircleIcon className="mr-[0.75rem]" />
+        </div>
+      </Link>
+    </div>
+  ));
+};

src/components/ImageType.tsx

@@ -66,3 +66,17 @@ export const SquareImg = ({ imageUrl }: { imageUrl: string }) => {
     </div>
   );
 };
+
+//search화면에 보이는 영화 리스트 아이템
+export const SearchMovieImg = ({ imageUrl }: { imageUrl: string }) => {
+  return (
+    <div style={{ width: "9.125rem", height: "4.75rem", position: "relative" }}>
+      <Image
+        src={imageUrl}
+        alt="popularimage"
+        layout="fill"
+        objectFit="cover"
+      />
+    </div>
+  );
+};