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

README.md

@@ -2,51 +2,5 @@
 
 FE 레벨1 영화 리뷰 미션
 
-## 기능 요구사항 분석
-
-### 홈 페이지
-
-- [x] 홈 화면 UI 구현
-  - [x] 검색 레이아웃
-  - [x] 섹션 헤더
-  - [x] 더보기 버튼
-  - [x] 탭(인기순, 평점순, 상영 예정) 제거
-
-- [x] 영화목록 데이터를 API를 통해 가져온다.
-- [x] 영화목록을 API 데이터 기반으로 렌더링한다.
-- [x] 더보기 버튼을 누르면 다음 영화목록 20개를 보여준다.
-- [x] 영화 목록을 불러오는 동안 Skeleton UI를 보여준다.
-
-### 검색 페이지
-
-- [x] 홈 화면에서 상단 검색바에 검색어를 입력 후 제출하면 검색 결과 페이지로 이동한다.
-  - [x] 엔터키를 눌러 검색할 수 있다.
-  - [x] 검색 버튼을 클릭하여 검색할 수 있다.
-  - [x] 검색 이후에 더 보기 클릭시 다음 영화 검색 결과 20개를 보여준다.
-
-### API 오류시
-
-- [x] 사용자를 위한 오류 메시지를 띄워준다. (UI 자율)
-
-### 추후 구현 사항
-
-- [x] 영화 데이터 한국어버전 가져오기
-- [x] 평점 소수점 한자리로 보이도록 수정
-
-### 리팩토링 사항
-
-- [x] Component에 사용되는 도메인 상수화
-- [x] API에 사용되는 도메인 상수화
-- [x] main에 존재하는 Render 관련 로직 분리
-- [x] 첫 렌더링 시 헤딩요소가 헤더와 겹치는 문제
-- [x] loadMoreMovies에 사용되는 onError가 하드코딩
-- [x] 상태 로직 분리(page...)
-
-### E2E 테스트 목록
-
-- [x] 영화 배너가 렌더링되었는지 테스트
-- [x] 초기 영화 데이터가 렌더링되었는지 테스트
-- [x] 더 보기를 클릭했을때 영화 데이터가 추가적으로 렌더링되는지 테스트
-- [x] 스켈레톤 UI가 로딩중에 보이는지 테스트
-- [x] 영화 검색시 필터링된 영화가 보이는지 테스트
-- [x] 영화 검색시 검색어가 섹션 헤딩에 보이는지 테스트
+[step1.md](./step1.md)
+[step2.md](./step2.md)

cypress/e2e/spec.cy.ts

@@ -24,6 +24,24 @@ const createMoviesResponse = (count: number, page: number = 1) => ({
   total_results: 10000,
 });
 
+const createMockMovieDetail = (id: number) => ({
+  id,
+  title: `어벤져스 ${id}`,
+  poster_path: `/avengers${id}.jpg`,
+  vote_average: 7.5,
+  backdrop_path: `/backdrop${id}.jpg`,
+  genres: [{ id: 28, name: "액션" }],
+  original_language: "ko",
+  original_title: `어벤져스 ${id}`,
+  overview: "타노스를 조심해",
+  popularity: 22.4343,
+  release_date: "2026-04-01",
+  tagline: "어벤져스 어셈블",
+  video: false,
+  vote_count: 1000,
+  adult: false,
+});
+
 describe("영화 리뷰 앱", () => {
   beforeEach(() => {
     cy.intercept("GET", "**/movie/popular*", createMoviesResponse(20)).as(
@@ -60,64 +78,20 @@ describe("영화 리뷰 앱", () => {
       cy.wait("@getPopularMoviesDelayed");
       cy.get(".thumbnail-list li.skeleton").should("not.exist");
     });
-  });
 
-  describe("더 보기", () => {
-    it("더 보기 클릭 시 영화가 20개 추가 렌더링된다", () => {
+    it("스크롤 시 추가 영화 목록이 로드된다", () => {
       cy.wait("@getPopularMovies");
+      cy.get(".thumbnail-list li").should("have.length", 20);
 
       cy.intercept("GET", "**/movie/popular*", createMoviesResponse(20, 2)).as(
         "getMoreMovies",
       );
 
-      cy.get(".load-more-button").click();
+      cy.get(".load-more-inView").scrollIntoView();
       cy.wait("@getMoreMovies");
 
       cy.get(".thumbnail-list li").should("have.length", 40);
     });
-
-    it("더 보기 API 실패 시 에러 메시지가 렌더링된다", () => {
-      cy.wait("@getPopularMovies");
-
-      cy.intercept("GET", "**/movie/popular*", { statusCode: 500 }).as(
-        "getMoreMoviesError",
-      );
-
-      cy.get(".load-more-button").click();
-      cy.wait("@getMoreMoviesError");
-
-      cy.get(".notice-text").should(
-        "contain.text",
-        "영화 정보를 불러오는 데 실패했습니다.",
-      );
-    });
-
-    it("마지막 페이지 도달 시 더 보기 버튼이 숨겨진다", () => {
-      cy.wait("@getPopularMovies");
-
-      cy.intercept("GET", "**/movie/popular*", createMoviesResponse(7, 2)).as(
-        "getLastPageMovies",
-      );
-
-      cy.get(".load-more-button").click();
-      cy.wait("@getLastPageMovies");
-
-      cy.get(".load-more-button").should("not.be.visible");
-    });
-
-    it("더 보기 로딩 중에는 더 보기 버튼이 숨겨진다", () => {
-      cy.wait("@getPopularMovies");
-
-      cy.intercept("GET", "**/movie/popular*", (req) => {
-        req.reply({ delay: 500, body: createMoviesResponse(20, 2) });
-      }).as("getMoreMoviesDelayed");
-
-      cy.get(".load-more-button").click();
-      cy.get(".load-more-button").should("not.be.visible");
-
-      cy.wait("@getMoreMoviesDelayed");
-      cy.get(".load-more-button").should("be.visible");
-    });
   });
 
   describe("검색", () => {
@@ -218,27 +192,6 @@ describe("영화 리뷰 앱", () => {
       );
     });
 
-    it("검색 이후 더 보기 클릭 시 영화가 20개 추가 렌더링된다", () => {
-      cy.wait("@getPopularMovies");
-
-      cy.intercept("GET", "**/search/movie*", createMoviesResponse(20)).as(
-        "searchMovies",
-      );
-
-      cy.get(".search-form input").type("액션");
-      cy.get(".search-form").submit();
-      cy.wait("@searchMovies");
-
-      cy.intercept("GET", "**/search/movie*", createMoviesResponse(20, 2)).as(
-        "searchMoreMovies",
-      );
-
-      cy.get(".load-more-button").click();
-      cy.wait("@searchMoreMovies");
-
-      cy.get(".thumbnail-list li").should("have.length", 40);
-    });
-
     it("검색 중 스켈레톤 UI가 표시된다", () => {
       cy.wait("@getPopularMovies");
 
@@ -275,29 +228,55 @@ describe("영화 리뷰 앱", () => {
       cy.get(".thumbnail-list li").should("have.length", 20);
       cy.get("section > h2").should("have.text", "지금 인기 있는 영화");
     });
+  });
 
-    it("검색 이후 더 보기 API 실패 시 에러 메시지가 렌더링된다", () => {
+  describe("검색 결과 무한 스크롤", () => {
+    it("검색 결과가 여러 페이지일 때 스크롤 시 추가 결과가 로드된다", () => {
       cy.wait("@getPopularMovies");
 
-      cy.intercept("GET", "**/search/movie*", createMoviesResponse(20)).as(
-        "searchMovies",
-      );
+      cy.intercept("GET", "**/search/movie*", {
+        ...createMoviesResponse(20),
+        total_pages: 3,
+      }).as("searchMovies");
 
       cy.get(".search-form input").type("액션");
       cy.get(".search-form").submit();
       cy.wait("@searchMovies");
+      cy.get(".thumbnail-list li").should("have.length", 20);
 
-      cy.intercept("GET", "**/search/movie*", { statusCode: 500 }).as(
-        "searchMoreMoviesError",
-      );
+      cy.intercept("GET", "**/search/movie*", {
+        ...createMoviesResponse(20, 2),
+        total_pages: 3,
+      }).as("searchMoreMovies");
 
-      cy.get(".load-more-button").click();
-      cy.wait("@searchMoreMoviesError");
+      cy.get(".load-more-inView").scrollIntoView();
+      cy.wait("@searchMoreMovies");
 
-      cy.get(".notice-text").should(
-        "contain.text",
-        "영화 정보를 불러오는 데 실패했습니다.",
-      );
+      cy.get(".thumbnail-list li").should("have.length", 40);
+    });
+
+    it("검색 결과 마지막 페이지 도달 후 스크롤해도 추가 요청이 발생하지 않는다", () => {
+      cy.wait("@getPopularMovies");
+
+      cy.intercept("GET", "**/search/movie*", {
+        ...createMoviesResponse(5),
+        total_pages: 1,
+      }).as("searchLastPage");
+
+      cy.get(".search-form input").type("액션");
+      cy.get(".search-form").submit();
+      cy.wait("@searchLastPage");
+
+      let extraCallCount = 0;
+      cy.intercept("GET", "**/search/movie*", () => {
+        extraCallCount++;
+      });
+
+      cy.get(".load-more-inView").scrollIntoView();
+      cy.wait(500);
+      cy.then(() => {
+        expect(extraCallCount).to.equal(0);
+      });
     });
   });
 
@@ -316,4 +295,121 @@ describe("영화 리뷰 앱", () => {
       );
     });
   });
+
+  describe("영화 상세 정보 모달", () => {
+    it("영화 포스터 또는 제목 클릭 시 영화 상세 정보 모달이 렌더링된다", () => {
+      cy.wait("@getPopularMovies");
+
+      cy.intercept("GET", /\/movie\/\d+/, createMockMovieDetail(1)).as(
+        "getMovieDetails",
+      );
+
+      cy.get(".thumbnail-list li:first-child").click();
+      cy.wait("@getMovieDetails");
+
+      cy.get(".modal-background").should("be.visible");
+      cy.get(".modal h2").should("have.text", "어벤져스 1");
+    });
+
+    it("영화 상세 정보 조회 API 실패 시 에러 메시지가 렌더링된다", () => {
+      cy.wait("@getPopularMovies");
+
+      cy.intercept("GET", /\/movie\/\d+/, { statusCode: 500 }).as(
+        "getMovieDetailsError",
+      );
+
+      cy.get(".thumbnail-list li:first-child").click();
+      cy.wait("@getMovieDetailsError");
+
+      cy.get(".notice-text").should(
+        "contain.text",
+        "영화 상세 정보를 불러오는 데 실패했습니다",
+      );
+    });
+  });
+
+  describe("영화 상세 정보 모달 닫기", () => {
+    beforeEach(() => {
+      cy.wait("@getPopularMovies");
+
+      cy.intercept("GET", /\/movie\/\d+/, createMockMovieDetail(1)).as(
+        "getMovieDetails",
+      );
+
+      cy.get(".thumbnail-list li:first-child").click();
+      cy.wait("@getMovieDetails");
+      cy.get(".modal-background").should("be.visible");
+    });
+
+    it("ESC 키 입력 시 모달이 닫힌다", () => {
+      cy.get("body").type("{esc}");
+      cy.get(".modal-background").should("not.exist");
+    });
+
+    it("모달 외부(dimmed) 클릭 시 모달이 닫힌다", () => {
+      cy.get(".modal-background").click({ force: true });
+      cy.get(".modal-background").should("not.exist");
+    });
+
+    it("X 버튼 클릭 시 모달이 닫힌다", () => {
+      cy.get(".close-modal").click();
+      cy.get(".modal-background").should("not.exist");
+    });
+  });
+
+  describe("별점", () => {
+    beforeEach(() => {
+      cy.clearLocalStorage();
+      cy.wait("@getPopularMovies");
+
+      cy.intercept("GET", /\/movie\/\d+/, createMockMovieDetail(1)).as(
+        "getMovieDetails",
+      );
+
+      cy.get(".thumbnail-list li:first-child").click();
+      cy.wait("@getMovieDetails");
+    });
+
+    it("모달 오픈 시 별점이 초기값(0/10)으로 표시된다", () => {
+      cy.get(".my-rating__point").should("have.text", "(0/10)");
+    });
+
+    it("별점 클릭 시 해당 별점으로 변경된다", () => {
+      cy.get('.my-rating__content img[data-rating-value="8"]').click();
+
+      cy.get(".my-rating__point").should("have.text", "(8/10)");
+      cy.get(".my-rating__content img")
+        .eq(0)
+        .should("have.attr", "src")
+        .and("include", "star_filled");
+      cy.get(".my-rating__content img")
+        .eq(3)
+        .should("have.attr", "src")
+        .and("include", "star_filled");
+      cy.get(".my-rating__content img")
+        .eq(4)
+        .should("have.attr", "src")
+        .and("include", "star_empty");
+    });
+
+    it("새로고침 후에도 매긴 별점이 유지된다", () => {
+      cy.get('.my-rating__content img[data-rating-value="6"]').click();
+      cy.get(".my-rating__point").should("have.text", "(6/10)");
+
+      cy.get(".close-modal").click();
+      cy.get(".modal-background").should("not.exist");
+
+      cy.reload();
+      cy.wait("@getPopularMovies");
+
+      cy.intercept("GET", /\/movie\/\d+/, createMockMovieDetail(1)).as(
+        "getMovieDetailsAgain",
+      );
+
+      cy.get(".thumbnail-list li:first-child").click();
+      cy.wait("@getMovieDetailsAgain");
+
+      cy.get(".my-rating__point").should("have.text", "(6/10)");
+    });
+  });
 });

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>
 
@@ -42,7 +43,6 @@ <h1 class="logo">
             <h2 class="home-section-heading"></h2>
             <ul class="thumbnail-list"></ul>
           </section>
-          <button class="primary load-more-button">더 보기</button>
         </div>
       </main>
 
@@ -51,6 +51,8 @@ <h2 class="home-section-heading"></h2>
         <p><img src="src/images/woowacourse_logo.png" width="180" /></p>
       </footer>
     </div>
+
+    <!-- <div class="modal-background active" id="modalBackground"></div> -->
     <script src="src/main.ts" type="module"></script>
   </body>
 </html>