TVING 클론코딩 - 7

package.json

@@ -19,6 +19,7 @@
     "framer-motion": "^6.2.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-player": "^2.9.0",
     "react-query": "^3.34.14",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",

src/Api/Api.ts

@@ -11,6 +11,11 @@ interface IMovie {
   vote_average: string;
 }
 
+interface ITrailer {
+  key: string;
+  site: string;
+}
+
 export interface IGetMoviesResult {
   results: IMovie[];
 }
@@ -25,6 +30,11 @@ export interface IGetMoviesDetail {
   runtime: number;
 }
 
+export interface IGetMoviesTrailer {
+  id: number;
+  results: ITrailer[];
+}
+
 export const getMovieUpcoming = async (number: number) => {
   const response = await fetch(
     `${BASE_URL}/movie/upcoming?api_key=${API_Key}&page=${number}`
@@ -40,3 +50,11 @@ export const getMovieDetail = async (moiveID: number) => {
   const json = await response.json();
   return json;
 };
+
+export const getMovieTrailer = async (moiveID: number) => {
+  const response = await fetch(
+    `https://api.themoviedb.org/3/movie/${moiveID}/videos?api_key=${API_Key}`
+  );
+  const json = await response.json();
+  return json;
+};

src/Api/utils.ts

@@ -3,7 +3,7 @@ export function makeImagePath(id: string) {
 }
 
 export function makeTrailerPath(key?: string) {
-  return `https://www.youtube.com/embed/${key}?showinfo=0&enablejsapi=1&origin=http://localhost:3000`; //localhost 제거
+  return `https://www.youtube.com/embed/${key}`;
 }
 
 export const NothingPoster =

src/Components/Air.tsx

@@ -1,5 +1,65 @@
+import { useState } from "react";
+import ReactPlayer from "react-player";
+import Footer from "./Footer";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+
+const ArrayBBogumi = [
+  "https://www.youtube.com/watch?v=Fn83vM8f1h8",
+  "https://www.youtube.com/watch?v=ean9qb2Xtpc&t=120s",
+  "https://www.youtube.com/watch?v=NeKdhpmVI64",
+  "https://www.youtube.com/watch?v=BzcrBlUSHAo",
+  "https://www.youtube.com/watch?v=YfzlR9X7Zfs",
+];
+
 const Air = () => {
-  return null;
+  const [BBogumi, setBBogumi] = useState(0);
+  const [pause, setPause] = useState(true);
+  console.log(BBogumi);
+  const next = () => {
+    let total = 4;
+    setBBogumi((prev) => (prev === total ? 0 : prev + 1));
+  };
+  const prev = () => {
+    let total = 0;
+    setBBogumi((prev) => (prev === total ? 4 : prev - 1));
+  };
+  const onPause = () => {
+    setPause((prev) => !prev);
+  };
+  return (
+    <div className="w-full h-screen bg-black">
+      <div className="w-full h-full relative top-20 overflow-hidden flex justify-center">
+        <ReactPlayer
+          url={ArrayBBogumi[BBogumi]}
+          volume={0.3}
+          controls={false}
+          playing={pause}
+          muted={false}
+          loop={true}
+          width="90%"
+          height="90%"
+        ></ReactPlayer>
+      </div>
+      <div
+        onClick={next}
+        className="w-3 h-[90%] xl:w-10 absolute top-[5rem] right-0 bg-red-500 hover:bg-green-500 flex justify-center items-center"
+      >
+        <ArrowForwardIosIcon />
+      </div>
+      <div
+        onClick={onPause}
+        className="w-[calc(100%-0.75rem)] xl:w-[calc(100%-2.5rem)]  h-[90%] absolute top-[5rem]  flex justify-center items-center"
+      ></div>
+      <div
+        onClick={prev}
+        className="w-3 h-[90%] xl:w-10 absolute top-[5rem] left-0 bg-red-500 hover:bg-green-500 flex justify-center items-center"
+      >
+        <ArrowBackIosIcon />
+      </div>
+      <Footer />
+    </div>
+  );
 };
 
 export default Air;

src/Components/Contents.tsx

@@ -1,15 +1,19 @@
 import React from "react";
 import { useQuery } from "react-query";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { getMovieDetail, IGetMoviesDetail } from "../Api/Api";
 import { makeImagePath, NothingPoster } from "../Api/utils";
 import Footer from "./Footer";
 
 const Contents = () => {
-  const moiveID = useParams();
+  const movieID = useParams();
+  const navigate = useNavigate();
   const { isLoading, data } = useQuery<IGetMoviesDetail>("Movie-Detail", () =>
-    getMovieDetail(Number(moiveID.id))
+    getMovieDetail(Number(movieID.id))
   );
+  const onClickTrailer = () => {
+    navigate(`/contents/trailer/${movieID.id}`);
+  };
   return (
     <React.Fragment>
       {isLoading ? (
@@ -69,7 +73,10 @@ const Contents = () => {
                     {data?.overview}
                   </span>
                 </div>
-                <div className="xl:w-[200px] xl:h-[15%] w-full h-[20%] justify-center flex items-end">
+                <div
+                  onClick={onClickTrailer}
+                  className="xl:w-[200px] xl:h-[15%] w-full h-[20%] justify-center flex items-end"
+                >
                   <div className="w-full h-auto  text-center xl:py-5  py-4 bg-red-500 rounded-md">
                     <span className="text-white font-bold text-sm xl:text-lg">
                       시청하기

src/Components/Home.tsx

@@ -177,4 +177,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;

src/Components/Trailer.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import ReactPlayer from "react-player";
+import { useQuery } from "react-query";
+import { useParams } from "react-router-dom";
+import { getMovieTrailer, IGetMoviesTrailer } from "../Api/Api";
+import { makeTrailerPath } from "../Api/utils";
+import Footer from "./Footer";
+
+const Trailer = () => {
+  const tailerID = useParams();
+  const { isLoading, data } = useQuery<IGetMoviesTrailer>("Trailer", () =>
+    getMovieTrailer(Number(tailerID.id))
+  );
+  return (
+    <React.Fragment>
+      {isLoading ? (
+        "Loading"
+      ) : (
+        <div className="w-full h-screen bg-black">
+          <div className="w-full h-full relative top-20 overflow-hidden flex justify-center">
+            <ReactPlayer
+              url={
+                makeTrailerPath(data?.results[0].key || "") ||
+                "https://www.youtube.com/watch?v=NeKdhpmVI64"
+              }
+              volume={0}
+              controls={false}
+              playing={true}
+              muted={false}
+              loop={true}
+              width="90%"
+              height="90%"
+            ></ReactPlayer>
+          </div>
+          <div className="w-full h-full absolute top-0 "></div>
+          <Footer />
+        </div>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default Trailer;

src/Router/router.tsx

@@ -5,17 +5,19 @@ import TV from "../Components/TV";
 import Contents from "../Components/Contents";
 import Home from "../Components/Home";
 import Header from "./Header";
+import Trailer from "../Components/Trailer";
 
 const Router = () => {
   return (
     <HashRouter>
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/Air" element={<Air />} />
-        <Route path="/TV" element={<TV />} />
-        <Route path="/Movie" element={<Movie />} />
+        <Route path="/air" element={<Air />} />
+        <Route path="/tV" element={<TV />} />
+        <Route path="/movie" element={<Movie />} />
         <Route path="/contents/:id" element={<Contents />} />
+        <Route path="/contents/trailer/:id" element={<Trailer />} />
       </Routes>
     </HashRouter>
   );