#20 react-netflix: movie detail modal

react/netflix-app/src/components/Row.js

@@ -1,9 +1,12 @@
 import axios from "../api/axios";
 import React, { useEffect, useState } from "react";
 import "./Row.css";
+import MovieModal from "./modal";
 
 const Row = ({ title, id, fetchUrl, isLargeRow }) => {
   const [movies, setMovies] = useState([]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [movieSelected, setMovieSelected] = useState({});
 
   useEffect(() => {
     fetchMovieData();
@@ -15,6 +18,11 @@ const Row = ({ title, id, fetchUrl, isLargeRow }) => {
     setMovies(request.data.results);
   };
 
+  const handleClick = (movie) => {
+    setModalOpen(true);
+    setMovieSelected(movie);
+  };
+
   return (
     <section className="row">
       <h2>{title}</h2>
@@ -37,6 +45,7 @@ const Row = ({ title, id, fetchUrl, isLargeRow }) => {
                 isLargeRow ? movie.poster_path : movie.backdrop_path
               }`}
               alt={movie.name}
+              onClick={() => handleClick(movie)}
             />
           ))}
         </div>
@@ -50,6 +59,10 @@ const Row = ({ title, id, fetchUrl, isLargeRow }) => {
           <span className="arrow">{">"}</span>
         </div>
       </div>
+
+      {modalOpen && (
+        <MovieModal {...movieSelected} setModalOpen={setModalOpen} />
+      )}
     </section>
   );
 };

react/netflix-app/src/components/modal/MovieModal.css

@@ -0,0 +1,98 @@
+.modal {
+  position: relative;
+  max-width: 800px;
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+  background: #111;
+  overflow: hidden;
+  border-radius: 8px;
+  transition: all 400ms ease-in-out 2s;
+  animation: fadeIn 400ms;
+}
+.modal__poster-img {
+  width: 100%;
+  height: auto;
+}
+.modal__content {
+  padding: 40px;
+  color: white;
+}
+.modal__title {
+  padding: 0;
+  font-size: 40px;
+  margin: 16px 0;
+}
+.modal__details {
+  font-weight: 600;
+  font-size: 18px;
+}
+.modal__overview {
+  font-size: 20px;
+  line-height: 1.5;
+}
+.modal__user-perc {
+  color: #46d369;
+}
+.modal::-webkit-scrollbar {
+  display: none;
+  visibility: hidden;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.modal {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.wrapper-modal {
+  position: fixed;
+  inset: 0px;
+  background-color: rgb(0 0 0 / 71%);
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  justify-content: center;
+}
+.presentation {
+  z-index: 1200;
+  position: absolute;
+}
+.modal-close {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
+  z-index: 1000;
+  color: white;
+}
+@media screen and (max-height: 768px) {
+  .wrapper-modal {
+    align-items: unset;
+    padding-top: 2rem;
+  }
+  .modal {
+    overflow-y: scroll;
+  }
+}
+@media screen and (max-width: 768px) {
+  .modal__overview {
+    font-size: 16px;
+  }
+  .modal__details {
+    font-size: 16px;
+  }
+  .wrapper-modal {
+    padding: 0;
+  }
+  .modal {
+    overflow-y: scroll !important;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

react/netflix-app/src/components/modal/index.js

@@ -0,0 +1,45 @@
+import React from "react";
+import "./MovieModal.css";
+
+const MovieModal = ({
+  backdrop_path,
+  title,
+  overview,
+  name,
+  release_date,
+  first_air_date,
+  vote_averate,
+  setModalOpen,
+}) => {
+  return (
+    <div className="presentation">
+      <div className="wrapper-modal">
+        <div className="modal">
+          <span className="modal-close" onClick={() => setModalOpen(false)}>
+            X
+          </span>
+
+          <img
+            className="modal__poster-img"
+            src={`https://image.tmdb.org/t/p/original${backdrop_path}`}
+            alt="modal__poster-img"
+          />
+
+          <div className="modal__content">
+            <p className="modal__details">
+              <span className="modal__user_perc">100% for you </span>
+
+              {release_date ? release_date : first_air_date}
+            </p>
+
+            <h2 className="modal__title">{title ? title : name}</h2>
+            <p className="modal__overview"> 평점 : {vote_averate}</p>
+            <p className="modal__overview">{overview}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MovieModal;