[MovieApp] 추가

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.2"
   },

src/App.js

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import ToDoList from "./ToDoList";
-import CoinTracker from "./CoinTracker";
+import ToDoList from "./components/ToDoList";
+import CoinTracker from "./components/CoinTracker";
+import MovieApp from "./components/MovieApp";
 
 function App() {
   const [index, setIndex] = useState("default");
@@ -21,6 +22,7 @@ function App() {
       <hr />
       {index === "0" ? <ToDoList /> : null}
       {index === "1" ? <CoinTracker /> : null}
+      <MovieApp />
     </div>
   );
 }

src/components/Movie.js

@@ -0,0 +1,29 @@
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+
+function Movie({ id, coverImg, title, summary, genres }) {
+  return (
+    <div>
+      <img src={coverImg} alt={title} />
+      <h3>
+        <Link to={`/movie/${id}`}>{title}</Link>
+      </h3>
+      <p>{summary}</p>
+      <ul>
+        {genres.map((genre, index) => (
+          <li key={index}>{genre}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+Movie.propTypes = {
+  id: PropTypes.number.isRequired,
+  coverImg: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  summary: PropTypes.string.isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+export default Movie;

src/components/MovieApp.js

@@ -0,0 +1,20 @@
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import Home from "../routes/Home";
+import Detail from "../routes/Detail";
+
+function MovieApp() {
+  return (
+    <Router>
+      <Switch>
+        <Route path="/movie/:id">
+          <Detail />
+        </Route>
+        <Route path="/">
+          <Home />
+        </Route>
+      </Switch>
+    </Router>
+  );
+}
+
+export default MovieApp;

src/routes/Detail.js

@@ -0,0 +1,40 @@
+import { useParams } from "react-router-dom";
+import { useState, useEffect } from "react";
+
+function Detail() {
+  const { id } = useParams();
+  const [loading, setLoading] = useState(true);
+  const [movie, setMovie] = useState([]);
+  const getMoive = async () => {
+    const json = await (
+      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
+    ).json();
+
+    setMovie(json.data.movie);
+    setLoading(false);
+  };
+
+  useEffect(() => getMoive(), []);
+
+  return (
+    <div>
+      <h2>About {movie.title} Movie Detail</h2>
+      {loading ? (
+        <strong>Loading...</strong>
+      ) : (
+        <div>
+          <img src={movie.medium_cover_image} alt={movie.title} />
+          <h3>{movie.title}</h3>
+          <span>rating : {movie.rating}</span>
+          <ul>
+            {movie.genres.map((genre, index) => (
+              <li key={index}>{genre}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Detail;

src/routes/Home.js

@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+import Movie from "../components/Movie";
+
+function Home() {
+  const [loading, setLoading] = useState(true);
+  const [movies, setMovies] = useState([]);
+  const getMoives = async () => {
+    const json = await (
+      await fetch(
+        "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
+      )
+    ).json();
+
+    setMovies(json.data.movies);
+    setLoading(false);
+  };
+
+  useEffect(() => getMoives(), []);
+
+  return (
+    <div>
+      <h2>Movie App</h2>
+      {loading ? (
+        <strong>Loading...</strong>
+      ) : (
+        <div>
+          {movies.map(movie => (
+            <Movie
+              key={movie.id}
+              id={movie.id}
+              coverImg={movie.medium_cover_image}
+              title={movie.title}
+              summary={movie.summary}
+              genres={movie.genres}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Home;