woowacourse · devhyun637 · Mar 31, 2023 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # javascript-movie-review
 
-FE 5기 레벨1 영화관 미션
+## [배포 링크](https://kyw0716.github.io/javascript-movie-review/)
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -5,5 +5,6 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
+    supportFile: false,
   },
 });
diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts
@@ -41,8 +41,10 @@ describe("영화 리뷰 웹 테스트", () => {
     });
   });
 
-  it("더보기 버튼 클릭시 다음 페이지 정보가 렌더링 된다.", () => {
-    cy.get(".btn").click();
+  it("영화 목록을 마지막 요소까지 스크롤시 다음 페이지 정보가 렌더링 된다.", () => {
+    cy.scrollTo("bottom");
+
+    cy.get(".skeleton-container").should("be.visible");
 
     cy.wait("@getPopularMoviesPage2").then((interception) => {
       const movieItems = interception.response?.body.results;

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
diff --git a/index.html b/index.html
@@ -7,13 +7,23 @@
     <title>영화 리뷰</title>
   </head>
   <body>
+    <div class="modal-section" style="display: none">
+      <div class="modal-backdrop"></div>
+      <div class="modal">
+        <div class="modal-header">
+          <p class="modal-header--text"></p>
+          <img class="x-button" alt="close button" />
+        </div>
+        <div class="modal-content"></div>
+      </div>
+    </div>
     <div id="app">
       <header></header>
       <main>
         <section class="item-view">
           <h2 class="sub-title">지금 인기 있는 영화</h2>
           <ul class="item-list"></ul>
-          <button class="btn primary full-width">더 보기</button>
+          <div class="btn"></div>
         </section>
       </main>
     </div>

diff --git a/src/App.ts b/src/App.ts
@@ -1,38 +1,73 @@
 import { Header } from "./components/Header";
+import { Modal } from "./components/Modal";
 import { MovieList } from "./components/MovieList";
 import { $ } from "./utils/selector";
 
 export class App {
   #header;
   #movieList;
+  #modal;
 
   constructor() {
     const $header = $("header");
     const $movieList = $(".item-list");
+    const $modal = $(".modal-content");
 
-    this.#header = new Header(
-      $header,
-      this.onSubmitSearchKeyword.bind(this),
-      this.onClickLogoImage.bind(this)
-    );
+    this.#header = new Header($header);
 
     this.#movieList = new MovieList($movieList);
+
+    this.#modal = new Modal($modal);
+
+    this.bindEvent($movieList, $header);
+  }
+
+  bindEvent($movieList: Element, $header: Element) {
+    $movieList.addEventListener("click", ({ target }) => {
+      if (!(target instanceof HTMLElement)) return;
+
+      const movieCard = target.closest("li");
+      const movieId = movieCard?.dataset.movieId;
+
+      if (movieId) this.onClickMovieCard(Number(movieId));
+    });
+
+    $header.addEventListener("click", ({ target }) => {
+      if (!(target instanceof HTMLImageElement)) return;
+
+      this.onClickLogoImage();
+    });
+
+    $header.addEventListener("submit", (event) => {
+      event.preventDefault();
+
+      this.onSubmitSearchKeyword(this.#header.getInputValue());
+    });
   }
 
   onSubmitSearchKeyword(serachKeyword: string) {
     const subTitle = $(".sub-title");
 
+    if (serachKeyword === "") return alert("검색값을 입력해주세요.");
+    if (serachKeyword.trim().length === 0)
+      return alert("올바른 검색어를 입력해주세요.");
+
     subTitle.innerHTML = `"${serachKeyword}" 검색 결과`;
 
     if (this.#movieList instanceof MovieList)
-      this.#movieList.reset("search", serachKeyword);
+      this.#movieList.changeShowTarget("search", serachKeyword);
   }
 
   onClickLogoImage() {
     const subTitle = $(".sub-title");
 
     subTitle.innerHTML = `지금 인기 있는 영화`;
 
-    if (this.#movieList instanceof MovieList) this.#movieList.reset("popular");
+    if (this.#movieList instanceof MovieList)
+      this.#movieList.changeShowTarget("popular");
+  }
+
+  onClickMovieCard(movieId: number) {
+    this.#modal.open("movieDetail", movieId);
   }
 }
diff --git a/src/components/Header/index.css b/src/components/Header/index.css
@@ -0,0 +1,27 @@
+header h1 {
+  cursor: pointer;
+  user-select: none;
+  font-size: 2rem;
+  font-weight: bold;
+  letter-spacing: -0.1rem;
+  color: #f33f3f;
+}
+
+header > .search-box {
+  background: #fff;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+header .search-box > input {
+  border: 0;
+}
+
+header .search-box > .search-button {
+  width: 14px;
+  border: 0;
+  text-indent: -1000rem;
+  background: url("../../../templates/search_button.png") transparent no-repeat
+    0 1px;
+  background-size: contain;
+}
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
@@ -1,37 +1,17 @@
+import "./index.css";
+
 import logoImage from "../../../templates/logo.png";
+
 import { $ } from "../../utils/selector";
 
 export class Header {
   #$target;
 
-  constructor(
-    $target: Element,
-    onSubmitSearchKeyword: (searchKeyword: string) => void,
-    onClickLogoImage: () => void
-  ) {
+  constructor($target: Element) {
     this.#$target = $target;
 
     this.render();
-
-    $(".search-box").addEventListener("submit", (event: Event) => {
-      event.preventDefault();
-
-      const $searchInput = $(".search-input");
-
-      if ($searchInput instanceof HTMLInputElement) {
-        const inputValue = $searchInput.value;
-
-        if (inputValue === "") return alert("검색값을 입력해주세요.");
-        if (inputValue.trim().length === 0)
-          return alert("올바른 검색어를 입력해주세요.");
-
-        onSubmitSearchKeyword(inputValue);
-      }
-
-      if (event.target instanceof HTMLFormElement) event.target.reset();
-    });
-
-    $(".logo").addEventListener("click", onClickLogoImage);
+    this.bindEvent();
   }
 
   render() {
@@ -43,4 +23,23 @@ export class Header {
         </form>
     `;
   }
+
+  bindEvent() {
+    const $searchInput = $(".search-input");
+
+    if (!($searchInput instanceof HTMLInputElement)) return;
+
+    $searchInput.addEventListener("click", function () {
+      this.select();
+    });
+  }
+
+  getInputValue() {
+    const $searchInput = $(".search-input");
+
+    if (!($searchInput instanceof HTMLInputElement))
+      throw new Error("입력창이 존재하지 않습니다.");
+
+    return $searchInput.value;
+  }
 }
diff --git a/src/components/Modal/MovieDetailModal/Description.ts b/src/components/Modal/MovieDetailModal/Description.ts
@@ -0,0 +1,34 @@
+import type { MovieDetail } from "../../../types";
+
+import filledStarImage from "../../../../templates/star_filled.png";
+
+import { getStarSelectContainerTemplate } from "./StarSelect";
+
+export function getDescriptionTemplate(movie: MovieDetail, starRate: number) {
+  return /*html*/ `
+        <div class="modal-detail-container">
+            <div class="modal-movie-detail">
+                <p class="modal-movie-genre modal-detail--text">
+                    ${
+                      movie.genre.length === 0
+                        ? `장르 정보 없음`
+                        : movie.genre.join(" ")
+                    } 
+                <span>
+                <img 
+                    src="${filledStarImage}" 
+                    alt="별점 ${movie.vote_average}" 
+                />
+                    ${movie.vote_average.toFixed(1)}
+                </span>
+                </p>
+                <p class="modal-movie-description modal-detail--text">
+                    ${movie.overview ? movie.overview : "상세 정보 없음"}
+                </p>
+            </div>
+            <div class="modal-star-rate modal-detail--text">
+                ${getStarSelectContainerTemplate(movie.id, starRate)}
+            </div>
+        </div>
+    `;
+}
diff --git a/src/components/Modal/MovieDetailModal/Image.ts b/src/components/Modal/MovieDetailModal/Image.ts
@@ -0,0 +1,31 @@
+export function getImageContainerTemplate(imagePath: string, title: string) {
+  return /*html*/ `
+    <div class="modal-image-container">
+    ${
+      imagePath
+        ? /*html */
+          `<img 
+            class="modal-image skeleton" 
+            src="https://image.tmdb.org/t/p/w220_and_h330_face/${imagePath}" 
+            alt="${title} 포스터" 
+        />`
+        : /*html */
+          `<div 
+            class="modal-image center" 
+            style="
+                background-color:white; 
+                color:black; 
+                display:flex; 
+                justify-content:center; 
+                align-items:center; 
+                font-weight:600; 
+                font-size:24px;
+                border-radius: 16px;
+                "
+        >
+            <span>No Image</span>
+        </div>`
+    }
+    </div>
+  `;
+}
diff --git a/src/components/Modal/MovieDetailModal/StarSelect.ts b/src/components/Modal/MovieDetailModal/StarSelect.ts
@@ -0,0 +1,59 @@
+import filledStarImage from "../../../../templates/star_filled.png";
+import emptyStarImage from "../../../../templates/star_empty.png";
+
+import { $ } from "../../../utils/selector";
+
+const STAR_RATE_STRING = [
+  "나의 점수는?",
+  "최악이예요",
+  "별로예요",
+  "보통이예요",
+  "재미있어요",
+  "명작이예요",
+];
+
+export function renderStars(movieId: number, starRate: number) {
+  const starRateContainer = $(".modal-star-rate");
+
+  if (starRateContainer instanceof HTMLElement)
+    starRateContainer.innerHTML = getStarSelectContainerTemplate(
+      movieId,
+      starRate
+    );
+}
+
+export function getStarSelectContainerTemplate(
+  movieId: number,
+  starRate: number
+) {
+  const imgArray = getStarTemplate(movieId, starRate);
+
+  return /*html*/ `
+      <span 
+        class="select-zero-rate" 
+        data-movie-id="${movieId}" 
+        data-star-rate="0"
+      >
+        내 별점
+      </span>
+      <span class="star-select-container">
+        ${imgArray.join("")}
+      </span>
+      <span>${starRate * 2}점</span>
+      <span class="star-rate-desc">${STAR_RATE_STRING[starRate]}</span>
+    `;
+}
+
+export function getStarTemplate(movieId: number, starRate: number) {
+  return Array.from(
+    { length: 5 },
+    (_, i) =>
+      `<img 
+            src="${starRate > i ? filledStarImage : emptyStarImage}" 
+            alt="별점" 
+            class="star-rate-select-img" 
+            data-movie-id="${movieId}" 
+            data-star-rate="${i + 1}" 
+        />`
+  );
+}