09. MovieDetail — 영화 상세 페이지 만들기

1. 상세 페이지의 기능

이전 교안과 달리, 새 상세 페이지는 훨씬 풍부한 기능을 가진다.

네 단계로 나누어 작업한다.

2. 1단계 — import + API 호출

src/components/MovieDetail.jsx 파일을 열고 임시 코드를 모두 지운 뒤 작성한다.

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft, faPlay } from "@fortawesome/free-solid-svg-icons";
import api from "../api/axios";
import { Spinner, Modal, Button } from "./UI.jsx";

export function MovieDetail() {
  const { id } = useParams();
  const navigate = useNavigate();

  const [movie, setMovie] = useState(null);
  const [loading, setLoading] = useState(true);
  const [showTrailer, setShowTrailer] = useState(false);

같은 MovieDetail.jsx 파일에서, const [showTrailer, ... 줄 바로 아래에 이어서 작성한다. 이 코드는 URL에서 꺼낸 영화 ID로 TMDB에 "이 영화의 상세 정보와 예고편 영상 목록을 한꺼번에 보내줘"라고 요청하는 부분이다.

  useEffect(() => {
    api
      .get(`movie/${id}`, {
        params: { append_to_response: "videos" },
      })
      .then((res) => {
        setMovie(res.data);
        setLoading(false);
      })
      .catch(() => {
        setMovie(null);
        setLoading(false);
      });
  }, [id]);

3. 2단계 — 로딩/에러 처리

같은 MovieDetail.jsx 파일에서, useEffect 블록 바로 아래에 이어서 작성한다. 이 부분은 문지기 역할이다. 데이터가 아직 도착하지 않았으면 로딩 화면을 보여주고, 에러가 발생했으면 에러 메시지를 보여주고, 정상이면 그 아래 코드로 넘겨보내 준다.

  if (loading) return <Spinner full />;

  if (!movie) {
    return (
      <div className="bg-black min-h-screen flex items-center justify-center">
        <p className="text-red-400 text-2xl">영화 정보를 불러오지 못했습니다.</p>
      </div>
    );
  }

  const poster = `https://image.tmdb.org/t/p/w500/${movie.poster_path}`;
  const videoList = movie.videos ? movie.videos.results : [];
  const trailer = videoList.find((v) => v.type === "Trailer" && v.site === "YouTube");
  const genres = movie.genres || [];

4. 3단계 — 영화 정보 레이아웃

같은 MovieDetail.jsx 파일에서, const genres = ... 줄 아래에 return 문을 작성한다. 코드가 길기 때문에 세 부분으로 나누어 설명한다. 탭을 눌러 각 부분을 확인하면서 순서대로 이어 붙인다.

  return (
    <div className="bg-black min-h-screen relative">
      <div className="relative pt-24 pb-16">
        <div className="container mx-auto px-6">
          <Button variant="ghost" onClick={() => navigate(-1)} className="mb-6 inline-flex items-center gap-2">
            <FontAwesomeIcon icon={faArrowLeft} />
            <span>뒤로가기</span>
          </Button>

          <div className="flex flex-col md:flex-row gap-10">
            <img
              src={poster}
              alt={movie.title}
              className="w-full md:w-72 rounded-lg object-cover shadow-2xl"
            />

5. 동작 확인

6. 전체 코드

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft, faPlay } from "@fortawesome/free-solid-svg-icons";
import api from "../api/axios";
import { Spinner, Modal, Button } from "./UI.jsx";

export function MovieDetail() {
  const { id } = useParams();
  const navigate = useNavigate();

  const [movie, setMovie] = useState(null);
  const [loading, setLoading] = useState(true);
  const [showTrailer, setShowTrailer] = useState(false);

  useEffect(() => {
    api
      .get(`movie/${id}`, {
        params: { append_to_response: "videos" },
      })
      .then((res) => {
        setMovie(res.data);
        setLoading(false);
      })
      .catch(() => {
        setMovie(null);
        setLoading(false);
      });
  }, [id]);

  if (loading) return <Spinner full />;

  if (!movie) {
    return (
      <div className="bg-black min-h-screen flex items-center justify-center">
        <p className="text-red-400 text-2xl">영화 정보를 불러오지 못했습니다.</p>
      </div>
    );
  }

  const poster = `https://image.tmdb.org/t/p/w500/${movie.poster_path}`;
  const videoList = movie.videos ? movie.videos.results : [];
  const trailer = videoList.find((v) => v.type === "Trailer" && v.site === "YouTube");
  const genres = movie.genres || [];

  return (
    <div className="bg-black min-h-screen relative">
      <div className="relative pt-24 pb-16">
        <div className="container mx-auto px-6">
          <Button variant="ghost" onClick={() => navigate(-1)} className="mb-6 inline-flex items-center gap-2">
            <FontAwesomeIcon icon={faArrowLeft} />
            <span>뒤로가기</span>
          </Button>

          <div className="flex flex-col md:flex-row gap-10">
            <img
              src={poster}
              alt={movie.title}
              className="w-full md:w-72 rounded-lg object-cover shadow-2xl"
            />

            <div className="flex flex-col gap-4 text-white">
              <h1 className="text-4xl font-bold text-yellow-400">{movie.title}</h1>
              <p className="text-gray-400 text-lg">{movie.original_title}</p>

              <div className="flex gap-4 text-sm text-gray-300">
                <span>개봉일: {movie.release_date || "미정"}</span>
                <span>러닝타임: {movie.runtime || 0}분</span>
              </div>

              <div className="flex gap-2 flex-wrap">
                {genres.map((genre) => (
                  <span key={genre.id} className="bg-yellow-400 text-black px-3 py-1 rounded-full text-sm font-bold">
                    {genre.name}
                  </span>
                ))}
              </div>


              <p className="text-gray-300 leading-relaxed max-w-xl">
                {movie.overview || "줄거리 정보가 없습니다."}
              </p>

              {trailer && (
                <Button variant="danger" onClick={() => setShowTrailer(true)} className="mt-2 px-6 py-3 rounded-lg inline-flex items-center gap-2 w-fit transition-colors">
                  <FontAwesomeIcon icon={faPlay} />
                  예고편 보기
                </Button>
              )}
            </div>
          </div>
        </div>
      </div>

      {showTrailer && trailer && (
        <Modal onClose={() => setShowTrailer(false)}>
          <div className="w-full max-w-4xl aspect-video">
            <iframe
              className="w-full h-full rounded-lg"
              src={`https://www.youtube.com/embed/${trailer.key}?autoplay=1`}
              title="Trailer"
              allow="autoplay; encrypted-media"
              allowFullScreen
            />
          </div>
        </Modal>
      )}
    </div>
  );
}