[2단계 - 상세 정보 & UI/UX 개선하기] 해니 미션 제출합니다.

README-step2.md

@@ -0,0 +1,53 @@
+# javascript-movie-review
+
+FE 레벨1 영화 리뷰 미션
+
+## 공통 요구사항
+
+- [x] 영화 포스터나 제목을 클릭하면 자세한 예고편이나 줄거리 등의 정보를 보여준다.
+- [x] 별점을 남길 수 있는 기능을 만든다.
+- [x] 반응형 웹을 구상하여 디바이스의 너비에 따라 유동적으로 레이아웃이 조절되는 멋진 UI를 구현한다.
+
+## 기능 목록
+
+### 1. 영화 상세정보 조회 모달
+
+- [x] 영화 제목이나 포스터 클릭 시 모달을 표시한다.
+- [x] 모달에서 보여줄 상세 정보
+  - 영화 포스터
+  - 영화 제목
+  - 영화 장르
+  - 평균 별점
+  - 줄거리
+- [x] 모달 닫기
+  - ESC 키를 누르는 경우
+  - 모달 외부 배경을 클릭하는 경우
+  - 닫기 버튼을 클릭하는 경우
+
+### 2. 별점 매기기
+
+- [x] 2점 단위로 구성 (2 / 4 / 6 / 8 / 10점)
+  - 2점 : 최악이예요
+  - 4점 : 별로예요
+  - 6점 : 보통이예요
+  - 8점 : 재미있어요
+  - 10점 : 명작이예요
+- [x] 별점 선택 시 localStorage에 저장한다.
+- [x] 새로고침 후에도 사용자가 남긴 별점을 유지한다.
+
+### 3. 영화 목록 무한 스크롤
+
+- [x] IntersectionObserver를 사용하여 무한 스크롤을 구현한다.
+- [x] 브라우저 화면 끝에 도달하면 다음 20개 영화를 요청한다.
+
+### 4. 반응형 웹
+
+- [x] 웹 / 모바일 환경에 따른 반응형 레이아웃을 구성한다.
+
+### 5. E2E 테스트 작성
+
+- [x] 영화 포스터 또는 제목 클릭 시 모달 창 표시
+- [x] 닫기 버튼 클릭 시 모달 닫기
+- [x] ESC 키로 모달 닫기
+- [x] 별점 부여 후 새로고침 시 별점 유지
+- [x] 무한 스크롤 동작

cypress/e2e/spec.cy.ts

@@ -2,22 +2,75 @@ describe("영화 리뷰 웹 E2E 테스트", () => {
   beforeEach(() => {
     cy.visit("localhost:5173");
     cy.get(".thumbnail-list li").should("have.length.greaterThan", 0);
+    cy.get(".search-input").should("not.be.disabled");
   });
 
-  it("초기 진입 시 인기영화 목록이 표시된다", () => {
-    cy.get(".main-title").should("have.text", "지금 인기 있는 영화");
-    cy.get(".btn-more").should("be.visible");
+  // 1. 모달 표시
+  it("영화 포스터 클릭 시 모달 창이 표시된다", () => {
+    cy.get(".thumbnail-list li").first().find(".thumbnail").click();
+    cy.get(".modal-background").should("have.class", "active");
+    cy.get(".modal-title").should("be.visible");
+  });
+
+  it("영화 제목 클릭 시 모달 창이 표시된다", () => {
+    cy.get(".thumbnail-list li").first().find("strong").click();
+    cy.get(".modal-background").should("have.class", "active");
+    cy.get(".modal-title").should("be.visible");
+  });
+
+  // 2. 닫기 버튼으로 모달 닫기
+  it("닫기 버튼 클릭 시 모달이 닫힌다", () => {
+    cy.get(".thumbnail-list li").first().find(".thumbnail").click();
+    cy.get(".modal-background").should("have.class", "active");
+    cy.get(".close-modal").click();
+    cy.get(".modal-background").should("not.have.class", "active");
+  });
+
+  // 3. ESC 키로 모달 닫기
+  it("ESC 키 입력 시 모달이 닫힌다", () => {
+    cy.get(".thumbnail-list li").first().find(".thumbnail").click();
+    cy.get(".modal-background").should("have.class", "active");
+    cy.get("body").type("{esc}");
+    cy.get(".modal-background").should("not.have.class", "active");
+  });
+
+  // 별점 테스트
+  it("별점 부여 후 새로고침 시 별점이 유지된다", () => {
+    cy.get(".thumbnail-list li").first().find(".thumbnail").click();
+    cy.get(".modal-background").should("have.class", "active");
+
+    cy.get(".modal-star[data-index='4']").click();
+    cy.get(".rating-label").should("have.text", "재미있어요");
+    cy.get(".rating-score").should("have.text", "(8/10)");
+
+    cy.get(".close-modal").click();
+    cy.reload();
+    cy.get(".thumbnail-list li").should("have.length.greaterThan", 0);
+
+    cy.get(".thumbnail-list li").first().find(".thumbnail").click();
+    cy.get(".modal-background").should("have.class", "active");
+    cy.get(".rating-label").should("have.text", "재미있어요");
+    cy.get(".rating-score").should("have.text", "(8/10)");
   });
 
-  it("더보기 클릭 시 영화 카드가 추가된다", () => {
+  // 무한 스크롤 테스트
+  it("화면 끝에 도달하면 추가 영화가 로드된다", () => {
+    cy.intercept("GET", /movie\/popular/).as("loadMore");
+
     cy.get(".thumbnail-list li")
       .its("length")
       .then((before) => {
-        cy.get(".btn-more").click();
+        cy.get(".scroll-sentinel").scrollIntoView();
+        cy.wait("@loadMore", { timeout: 8000 });
         cy.get(".thumbnail-list li").should("have.length.greaterThan", before);
       });
   });
 
+  it("초기 진입 시 인기영화 목록이 표시된다", () => {
+    cy.get(".main-title").should("have.text", "지금 인기 있는 영화");
+    cy.get(".thumbnail-list li").should("have.length.greaterThan", 0);
+  });
+
   it("검색어 입력 시 검색 결과가 표시된다", () => {
     cy.get(".search-input").type("아이언맨");
     cy.get(".search-form").submit();

index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="./src/styles/main.css" />
     <link rel="stylesheet" href="./src/styles/tab.css" />
     <link rel="stylesheet" href="./src/styles/thumbnail.css" />
+    <link rel="stylesheet" href="./src/styles/modal.css" />
     <title>영화 리뷰</title>
   </head>
   <body>
@@ -20,7 +21,7 @@
             <h2 class="main-title">지금 인기 있는 영화</h2>
             <div class="main-result"></div>
             <ul class="thumbnail-list"></ul>
-            <button class="btn-more" style="display: none">더 보기</button>
+            <div class="scroll-sentinel"></div>
           </section>
         </main>
       </div>

src/features/View/Header.ts

@@ -24,7 +24,7 @@ export const Header = {
             <div class="top-rated-movie">
                 <div class="rate">
                   <img src="${starImg}" class="star" />
-                  <span class="rate-value">${movie.vote_average.toFixed(1)}</span>
+                  <span class="rate-value">${(movie.vote_average ?? 0).toFixed(1)}</span>
                 </div>
                 <div class="title">${movie.title}</div>
                 <button class="primary detail">자세히 보기</button>
@@ -82,4 +82,4 @@ export const Header = {
                 </div>
             </div>`;
   },
-};
+};

src/features/View/MovieCard.ts

@@ -11,6 +11,8 @@ export default class MovieCard {
 
   render(): HTMLLIElement {
     const li = document.createElement("li");
+    li.className = "movie-card";
+    li.dataset.id = this.movie.id.toString();
     li.innerHTML = `<div class="item">
       <img
          class="thumbnail"
@@ -20,7 +22,7 @@ export default class MovieCard {
         <div class="item-desc">
           <p class="rate">
             <img src="${starImg}" class="star" />
-            <span>${this.movie.vote_average.toFixed(1)}</span>
+            <span>${(this.movie.vote_average ?? 0).toFixed(1)}</span>
           </p>
           <strong>${this.movie.title}</strong>
         </div>