[2단계 - 영화 목록 불러오기] 라바 미션 제출합니다.

README.md

@@ -128,3 +128,22 @@
     - main-thumbnail-list 렌더링
     - banner 렌더링
     - keyword parameter 제거
+
+---
+
+# 상세 정보 & UI/UX 개선하기
+
+- [x] 더 보기 -> 무한스크롤
+  - 메인 페이지
+  - 검색 페이지
+- [x] 영화 상세정보 조회
+  - 상세정보 UI
+    - ESC키를 누르면 닫히는 모달 창
+  - 상세정보 요청 API
+- [x] 별점 매기기
+  - 2점 단위 별 5개로 구성
+  - API 연동 고려한 localsStorage 활용
+- [ ] 반응형 웹
+  - 데스크톱
+  - 태블릿
+  - 모바일

cypress/e2e/Modal.cy.ts

@@ -0,0 +1,125 @@
+import {
+  interceptPopularPage1,
+  interceptMovieDetail,
+  interceptMovieDetailWithDelay,
+} from "./spec";
+
+describe("모달", () => {
+  beforeEach(() => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+  });
+
+  it("썸네일 클릭 시 모달이 열린다", () => {
+    interceptMovieDetail();
+    cy.get("li[id^='movie-']").first().click();
+    cy.get("#modalBackground").should("not.have.class", "hidden");
+  });
+
+  it("모달이 열리면 API 응답 전 스켈레톤이 표시된다", () => {
+    interceptMovieDetailWithDelay(500);
+    cy.get("li[id^='movie-']").first().click();
+    cy.get("#modal-title").should("have.class", "modal-skeleton");
+    cy.get("#modal-category").should("have.class", "modal-skeleton");
+    cy.get("#modal-rate").should("have.class", "modal-skeleton");
+    cy.get("#modal-detail").should("have.class", "modal-skeleton");
+  });
+
+  it("API 응답 후 영화 정보가 렌더링된다", () => {
+    interceptMovieDetail();
+    cy.get("li[id^='movie-']").first().click();
+    cy.wait("@getMovieDetail");
+    cy.get("#modal-title").should("contain.text", "영화1");
+    cy.get("#modal-category")
+      .should("contain.text", "2024")
+      .and("contain.text", "액션");
+    cy.get("#modal-rate").should("contain.text", "8.0");
+    cy.get("#modal-detail").should("contain.text", "줄거리1");
+  });
+
+  it("API 응답 후 스켈레톤이 제거된다", () => {
+    interceptMovieDetail();
+    cy.get("li[id^='movie-']").first().click();
+    cy.wait("@getMovieDetail");
+    cy.get("#modal-title").should("not.have.class", "modal-skeleton");
+    cy.get("#modal-category").should("not.have.class", "modal-skeleton");
+    cy.get("#modal-rate").should("not.have.class", "modal-skeleton");
+    cy.get("#modal-detail").should("not.have.class", "modal-skeleton");
+  });
+
+  describe("모달 닫기", () => {
+    beforeEach(() => {
+      interceptMovieDetail();
+      cy.get("li[id^='movie-']").first().click();
+      cy.wait("@getMovieDetail");
+    });
+
+    it("X 버튼 클릭 시 모달이 닫힌다", () => {
+      cy.get("#closeModal").click();
+      cy.get("#modalBackground").should("have.class", "hidden");
+    });
+
+    it("배경 클릭 시 모달이 닫힌다", () => {
+      cy.get("#modalBackground").click({ force: true });
+      cy.get("#modalBackground").should("have.class", "hidden");
+    });
+
+    it("ESC 키 입력 시 모달이 닫힌다", () => {
+      cy.get("body").type("{esc}");
+      cy.get("#modalBackground").should("have.class", "hidden");
+    });
+  });
+
+  describe("별점", () => {
+    beforeEach(() => {
+      interceptMovieDetail();
+      cy.get("li[id^='movie-']").first().click();
+      cy.wait("@getMovieDetail");
+    });
+
+    it("별을 클릭하면 해당 별까지 채워진다", () => {
+      cy.get("#modal-my-rate-star-3").click();
+      cy.get("#modal-my-rate-star-1")
+        .should("have.attr", "src")
+        .and("include", "star_filled");
+      cy.get("#modal-my-rate-star-2")
+        .should("have.attr", "src")
+        .and("include", "star_filled");
+      cy.get("#modal-my-rate-star-3")
+        .should("have.attr", "src")
+        .and("include", "star_filled");
+      cy.get("#modal-my-rate-star-4")
+        .should("have.attr", "src")
+        .and("include", "star_empty");
+      cy.get("#modal-my-rate-star-5")
+        .should("have.attr", "src")
+        .and("include", "star_empty");
+    });
+
+    it("별을 클릭하면 별점 레이블이 변경된다", () => {
+      cy.get("#modal-my-rate-star-3").click();
+      cy.get("#modal-rate-review").should("contain.text", "보통이에요");
+      cy.get("#modal-rate-points").should("contain.text", "6/10");
+    });
+
+    it("모달을 닫고 다시 열어도 별점이 유지된다", () => {
+      cy.get("#modal-my-rate-star-4").click();
+      cy.get("#closeModal").click();
+
+      interceptMovieDetail();
+      cy.get("li[id^='movie-']").first().click();
+      cy.wait("@getMovieDetail");
+
+      cy.get("#modal-my-rate-star-1")
+        .should("have.attr", "src")
+        .and("include", "star_filled");
+      cy.get("#modal-my-rate-star-4")
+        .should("have.attr", "src")
+        .and("include", "star_filled");
+      cy.get("#modal-my-rate-star-5")
+        .should("have.attr", "src")
+        .and("include", "star_empty");
+    });
+  });
+});

cypress/e2e/spec.ts

@@ -1,5 +1,6 @@
 const POPULAR_API = "**/movie/popular**";
 const SEARCH_API = "**/search/movie**";
+const MOVIE_DETAIL_API = /\/movie\/\d+/;
 
 export const interceptPopularPage1 = () => {
   cy.intercept("GET", POPULAR_API, { fixture: "popularMoviesPage1.json" }).as(
@@ -24,3 +25,15 @@ export const interceptSearchPage2 = () => {
     "getSearchPage2",
   );
 };
+
+export const interceptMovieDetail = () => {
+  cy.intercept("GET", MOVIE_DETAIL_API, { fixture: "movieDetail.json" }).as(
+    "getMovieDetail",
+  );
+};
+
+export const interceptMovieDetailWithDelay = (delay: number) => {
+  cy.intercept("GET", MOVIE_DETAIL_API, (req) => {
+    req.reply({ delay, fixture: "movieDetail.json" });
+  }).as("getMovieDetail");
+};

cypress/fixtures/movieDetail.json

@@ -0,0 +1,31 @@
+{
+  "id": 1,
+  "title": "영화1",
+  "poster_path": "/poster1.jpg",
+  "backdrop_path": "/back1.jpg",
+  "vote_average": 8.0,
+  "overview": "줄거리1 상세 설명입니다.",
+  "release_date": "2024-01-01",
+  "genres": [
+    { "id": 28, "name": "액션" },
+    { "id": 12, "name": "어드벤처" }
+  ],
+  "adult": false,
+  "belongs_to_collection": null,
+  "budget": 0,
+  "homepage": "",
+  "imdb_id": "tt0000001",
+  "origin_country": ["KR"],
+  "original_language": "ko",
+  "original_title": "Movie1",
+  "popularity": 100,
+  "production_companies": [],
+  "production_countries": [],
+  "revenue": 0,
+  "runtime": 120,
+  "spoken_languages": [],
+  "status": "Released",
+  "tagline": "",
+  "video": false,
+  "vote_count": 1000
+}

index.html

@@ -6,14 +6,15 @@
     <link rel="stylesheet" href="./styles/reset.css" />
     <link rel="stylesheet" href="./styles/main.css" />
     <link rel="stylesheet" href="./styles/thumbnail.css" />
+    <link rel="stylesheet" href="./styles/modal.css" />
     <title>영화 리뷰</title>
   </head>
   <body>
     <div id="app">
       <header>
         <div class="logo-input-wrapper">
           <button class="logo" id="logo">
-            <img src="./public/images/logo.png" alt="MovieList" />
+            <img src="./images/logo.png" alt="MovieList" />
           </button>
           <div class="movie-search">
             <input
@@ -23,7 +24,7 @@
               autocomplete="off"
             />
             <button id="search-button">
-              <img src="./public/images/search.png" alt="검색" />
+              <img src="./images/search.png" alt="검색" />
             </button>
           </div>
         </div>
@@ -32,7 +33,7 @@
           <div class="top-rated-container">
             <div class="top-rated-movie">
               <div class="rate">
-                <img src="./public/images/star_empty.png" class="star" />
+                <img src="./images/star_empty.png" class="star" />
                 <span class="rate-value"></span>
               </div>
               <h3 class="title"></h3>
@@ -48,7 +49,7 @@ <h2 class="sub-title" id="sub-title">지금 인기 있는 영화</h2>
 
             <ul class="thumbnail-list hidden" id="main-thumbnail-list"></ul>
             <ul class="thumbnail-list hidden" id="search-thumbnail-list"></ul>
-
+            <div id="main-error-container"></div>
             <ul class="thumbnail-list hidden" id="skeleton-list">
               <li class="skeleton">
                 <div class="item">
@@ -188,12 +189,12 @@ <h2 class="sub-title" id="sub-title">지금 인기 있는 영화</h2>
             </ul>
 
             <div class="unexpected-container hidden" id="empty-container">
-              <img src="./public/images/으아아행성이.png" alt="" />
+              <img src="./images/으아아행성이.png" alt="" />
               <p>검색 결과가 없습니다.</p>
             </div>
 
             <div class="unexpected-container hidden" id="error-container">
-              <img src="./public/images/으아아행성이.png" alt="" />
+              <img src="./images/으아아행성이.png" alt="" />
               <p>🚨 에러 발생 🚨</p>
               <button>재시도</button>
             </div>
@@ -207,14 +208,88 @@ <h2 class="sub-title" id="sub-title">지금 인기 있는 영화</h2>
           </section>
         </main>
       </div>
-
+      <div id="sentinel"></div>
       <footer class="footer">
         <p>&copy; 우아한테크코스 All Rights Reserved.</p>
         <p>
-          <img src="./public/images/woowacourse_logo.png" width="180" />
+          <img src="./images/woowacourse_logo.png" width="180" />
         </p>
       </footer>
     </div>
+    <div class="modal-background active" id="modalBackground">
+      <div class="modal" id="modal">
+        <button class="close-modal" id="closeModal">
+          <img src="./images/modal_button_close.png" />
+        </button>
+        <div class="modal-container">
+          <div class="modal-image modal-skeleton-image" id="modal-image">
+            <img src="" alt="" />
+          </div>
+          <div class="modal-description" id="modal-description">
+            <div class="modal-header">
+              <h2
+                id="modal-title"
+                class="modal-skeleton modal-skeleton-title"
+              ></h2>
+              <p
+                id="modal-category"
+                class="modal-skeleton modal-skeleton-category"
+              ></p>
+              <p class="rate">
+                <img src="./images/star_filled.png" class="star" /><span
+                  id="modal-rate"
+                  class="modal-skeleton modal-skeleton-rate"
+                ></span>
+              </p>
+            </div>
+            <hr />
+            <h3 id="modal-my-rate" class="modal-sub-title">내 별점</h3>
+            <p id="modal-rate-stars" class="modal-rate-stars">
+              <img
+                src="./images/star_empty.png"
+                class="modal-my-rate-star"
+                id="modal-my-rate-star-1"
+              />
+              <img
+                src="./images/star_empty.png"
+                class="modal-my-rate-star"
+                id="modal-my-rate-star-2"
+              />
+              <img
+                src="./images/star_empty.png"
+                class="modal-my-rate-star"
+                id="modal-my-rate-star-3"
+              />
+              <img
+                src="./images/star_empty.png"
+                class="modal-my-rate-star"
+                id="modal-my-rate-star-4"
+              />
+              <img
+                src="./images/star_empty.png"
+                class="modal-my-rate-star"
+                id="modal-my-rate-star-5"
+              />
+              <span>
+                <span class="modal-rate-review" id="modal-rate-review"
+                  >명작이에요</span
+                >
+                <span class="modal-rate-points" id="modal-rate-points"
+                  >(8/10)</span
+                ></span
+              >
+            </p>
+            <hr />
+            <h3 id="modal-detail-title" class="modal-sub-title">줄거리</h3>
+            <p
+              class="detail"
+              id="modal-detail"
+              class="modal-skeleton modal-skeleton-detail"
+            ></p>
+          </div>
+        </div>
+      </div>
+    </div>
     <script type="module" src="./src/main.ts"></script>
   </body>
 </html>