Merge pull request #27 from team-azito/Refactor/issue#26

[#26] 상세 페이지 관련 코드 리뷰 반영 완료

src/api/media.ts

@@ -1,7 +1,6 @@
 import { instance } from "@/api/axiosInstance";
-import { Movie } from "@/types/common";
+import { GetDetailsResponse } from "@/types/media";
 
-// 타입 설정 필요
-export const getMediaDetails = async (id: number): Promise<Movie> => {
+export const getMediaDetails = async (id: number): Promise<GetDetailsResponse> => {
   return await instance.get(`/movie/${id}?language=en-US&page=1`);
 };

src/app/media/[id]/page.tsx

@@ -6,7 +6,11 @@ interface Params {
   id: number;
 }
 
-const DetailPage = async ({ params }: { params: Params }) => {
+interface DetailPageProps {
+  params: Params;
+}
+
+const DetailPage = async ({ params }: DetailPageProps) => {
   const posterBaseUrl = process.env.NEXT_PUBLIC_POSTER_BASE_URL;
   const data = await getMediaDetails(params.id);
   return (
@@ -20,7 +24,7 @@ const DetailPage = async ({ params }: { params: Params }) => {
         Play
       </button>
       <div className="flex-column gap-20pxr px-32pxr">
-        <h2 className="text-27pxr font-bold">Previews</h2>
+        <h2 className="text-27pxr font-bold">{data.title}</h2>
         <span className="text-11pxr">{data.overview}</span>
       </div>
     </div>

src/components/common/BottomNavbarItem.tsx

@@ -17,7 +17,7 @@ const BottomNavbarItem = ({ item, children }: BottomNavbarItemProps) => {
 
   return (
     <Link href={`/${item}`}>
-      <li className="flex-column flex-center gap-5pxr">
+      <li className="flex-column flex-center cursor-pointer gap-5pxr">
         <Icon className={`${textColorClass}`} alt={`${item}`} />
         <span className={`text-8pxr ${textColorClass}`}>{children}</span>
       </li>

src/components/home/MoviePlay.tsx

@@ -24,11 +24,18 @@ const MoviePlay = ({ movieData }: MoviePlayProps) => {
     <section className="flex-column mb-43pxr items-center gap-11pxr">
       <div className="relative h-375pxr w-full">
         {randomIndex ? (
-          <Image src={`${posterBaseUrl}${data.poster_path}`} alt={`영화 포스터 이미지: ${data.title}`} fill priority />
+          <Link href={`/media/${data.id}`} className="cursor-pointer">
+            <Image
+              src={`${posterBaseUrl}${data.poster_path}`}
+              alt={`영화 포스터 이미지: ${data.title}`}
+              fill
+              priority
+            />
+            <div className="absolute inset-0pxr bg-gradient-to-b"></div>
+          </Link>
         ) : (
           <span className="flex-center h-full text-gray-10">Loading...</span>
         )}
-        <div className="absolute inset-0pxr bg-gradient-to-b"></div>
       </div>
       <div>
         {randomIndex ? <span className="text-13pxr font-bold">#{randomIndex + 1} in Korea Today</span> : undefined}

src/components/search/SearchedMovies.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { useState, useEffect } from "react";
 import { Movie } from "@/types/common";
 import PlayIcon from "#/icons/search/icon-play.svg";
@@ -40,23 +41,25 @@ const MovieCard = ({ movie }: MovieCardProps) => {
   };
 
   return (
-    <div className="flex h-76pxr cursor-pointer bg-gray-20">
-      <div className="flex-center relative h-full min-w-146pxr">
-        <Image
-          sizes={sizes}
-          src={imageSrc}
-          className="object-cover"
-          fill
-          priority
-          alt="미디어 이미지"
-          onError={handleImageError}
-        />
+    <Link href={`/media/${movie.id}`}>
+      <div className="flex h-76pxr cursor-pointer bg-gray-20">
+        <div className="flex-center relative h-full min-w-146pxr">
+          <Image
+            sizes={sizes}
+            src={imageSrc}
+            className="object-cover"
+            fill
+            priority
+            alt="미디어 이미지"
+            onError={handleImageError}
+          />
+        </div>
+        <div className="flex flex-grow items-center justify-between px-10pxr py-21pxr">
+          <p className="max-w-160pxr overflow-hidden text-16pxr">{movie.title}</p>
+          <PlayIcon alt="재생 아이콘" />
+        </div>
       </div>
-      <div className="flex flex-grow items-center justify-between px-10pxr py-21pxr">
-        <p className="max-w-160pxr overflow-hidden text-16pxr">{movie.title}</p>
-        <PlayIcon alt="재생 아이콘" />
-      </div>
-    </div>
+    </Link>
   );
 };
 

src/types/media.ts

@@ -0,0 +1,50 @@
+interface Genre {
+  id: number;
+  name: string;
+}
+
+interface ProductionCompany {
+  id: number;
+  logo_path: string | null;
+  name: string;
+  origin_country: string;
+}
+
+interface ProductionCountry {
+  iso_3166_1: string;
+  name: string;
+}
+
+interface SpokenLanguage {
+  english_name: string;
+  iso_639_1: string;
+  name: string;
+}
+
+export interface GetDetailsResponse {
+  adult: boolean;
+  backdrop_path: string | null;
+  belongs_to_collection: string | null;
+  budget: number;
+  genres: Genre[];
+  homepage: string;
+  id: number;
+  imdb_id: string;
+  original_language: string;
+  original_title: string;
+  overview: string;
+  popularity: number;
+  poster_path: string | null;
+  production_companies: ProductionCompany[];
+  production_countries: ProductionCountry[];
+  release_date: string;
+  revenue: number;
+  runtime: number;
+  spoken_languages: SpokenLanguage[];
+  status: string;
+  tagline: string;
+  title: string;
+  video: boolean;
+  vote_average: number;
+  vote_count: number;
+}