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

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

8
export function MovieDetail() {
9
  const { id } = useParams();
10
  const navigate = useNavigate();
11

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

1
  useEffect(() => {
2
    api
3
      .get(`movie/${id}`, {
4
        params: { append_to_response: "videos" },
5
      })
6
      .then((res) => {
7
        setMovie(res.data);
8
        setLoading(false);
9
      })
10
      .catch(() => {
11
        setMovie(null);
12
        setLoading(false);
13
      });
14
  }, [id]);

1
  if (loading) return <Spinner full />;
2

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

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

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

8
export function MovieDetail() {
9
  const { id } = useParams();
10
  const navigate = useNavigate();
11

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

16
  useEffect(() => {
17
    api
18
      .get(`movie/${id}`, {
19
        params: { append_to_response: "videos" },
20
      })
21
      .then((res) => {
22
        setMovie(res.data);
23
        setLoading(false);
24
      })
25
      .catch(() => {
26
        setMovie(null);
27
        setLoading(false);
28
      });
29
  }, [id]);
30

31
  if (loading) return <Spinner full />;
32

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

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

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

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

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

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

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

79

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

84
              {trailer && (
85
                <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">
86
                  <FontAwesomeIcon icon={faPlay} />
87
                  예고편 보기
88
                </Button>
89
              )}
90
            </div>
91
          </div>
92
        </div>
93
      </div>
94

95
      {showTrailer && trailer && (
96
        <Modal onClose={() => setShowTrailer(false)}>
97
          <div className="w-full max-w-4xl aspect-video">
98
            <iframe
99
              className="w-full h-full rounded-lg"
100
              src={`https://www.youtube.com/embed/${trailer.key}?autoplay=1`}
101
              title="Trailer"
102
              allow="autoplay; encrypted-media"
103
              allowFullScreen
104
            />
105
          </div>
106
        </Modal>
107
      )}
108
    </div>
109
  );
110
}