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

README.md

@@ -1,130 +1,46 @@
 # 요구 사항 목록
 
-## 영상 목록 조회
+## 무한 스크롤
 
-- [x] 영화 목록의 1페이지를 불러오며 더보기 버튼을 누르면 그 다음의 영화 목록을 불러 올 수 있다.
-- [x] 페이지 끝에 도달한 경우에는 더보기 버튼을 화면에 출력하지 않는다.
-- [x] 영화는 한 번의 요청당 20개씩 영화 목록을 보여준다.
-- [x] 영화 목록을 불러오는 동안 Skeleton UI 를 보여준다
-  - [x] Skeleton UI는 템플릿으로 제공되는 파일 이외로 자유롭게 구현할 수 있다.
+- [x] 더 보기 버튼 제거
+- [x] page search params 제거
 
-## 검색
+## 영화 상세정보 조회
 
-- [x] 영화 검색 API를 이용하여 내가 보고 싶은 영화를 검색할 수 있다.
-  - [x] 엔터키를 눌러 검색할 수 있다
-  - [x] 검색 버튼을 클릭하여 검색할 수 있다
-  - [x] 영화 목록 조회와 같이 검색한 결과에 한해 정보를 보여주는 화면의 요구사항은 동일하다
+- [x] 영화 포스터나 제목을 클릭하면 예고편, 줄거리 모달 렌더링
+- [x] x 버튼, esc로 모달 닫기
+- [x] 이벤트 위임 -> renderMovieItems에서 처리
 
-## 오류
+## 별점 매기기
 
-- [x] 오류가 발생하는 경우에는 사용자를 위한 오류 메시지를 띄워 준다.
-  - [x] 어떤 오류를 대응해야 하고, 어떤 UI로 보여줄 것인지는 자율적으로 결정한다.
+- [x] 상세 모달 안에서 등록한 별점이 없는 경우 등록 가능
+- [x] 이미 등록한 별점이 있는 경우 별점 렌더링
+- [x] 별점은 로컬스토리지에 저장, api 서버 연결 가능성을 고려하여 확장성 있게 설계
 
----
-
-# 기능 목록
-
-## 퍼블리싱
-
-### 기본 UI
-
-- [x] 영화 목록 검색 input
-- [x] 정렬 버튼 삭제
-- [x] 더보기 버튼
-  - [x] 다음 페이지 없으면 제거
-- [x] 영화 리스트 background 변경
-
-### 검색 시 UI
-
-- [x] 검색 시(엔터, 검색 버튼 클릭) 인기 영화 배너 hidden
-- [x] 검색 결과 없을 때 영화 배열 및 더 보기 버튼 hidden
-- [x] 검색 결과 없음 UI
-
-### 조회 에러 UI
-
-- [x] 검색 결과가 없음 UI에서 텍스트 변경 + 재시도 버튼 추가
-
-## 기능
-
-### 메인 페이지
-
-- [x] 최초 접근 시 인기순 영화 20개 렌더링
+## UI/UX 개선
 
-### 더보기 버튼
-
-- [x] api 함수 받아서 호출
-
-### 검색
-
-- [x] 검색 버튼 클릭 or 엔터 입력 시 검색 api 호출
-- [x] 검색 버튼 클릭 시 keyword 파라미터 추가
-  - [x] 이전 검색 기록 남아있는 버그 수정
-
-### 로고
-
-- [x] 클릭 시 기본 UI로
+- [x] width에 따라 column 수 조절
+- [x] 헤더 및 배너 UI 레이아웃도 변경
+- [x] 데스크톱: 중앙 모달
+- [x] 태블릿: 하단 모달
+- [x] 모바일: 하단 모달 + 중앙 정렬 + 썸네일 제거
+- [x] 모달 렌더링 시 백그라운드 스크롤 제한
 
 ---
 
 ## 미룬이
 
 - [ ] getElementById로 가져온 html 요소 타입 좁혀주는 유틸
-- [x] TMDBError class 사용에 대해 논의
-- [x] 빈 keyword 검색 시 기본 UI로 변경
 - [ ] parameter로 관리하는 page가 1일 때도 보여지게 하는게 맞을까? 안 보이게 할까?
-- [x] E2E 테스트
 - [ ] 돔 접근을 어디서 할 것인지 기준 세우기 (인자로 받기 vs 함수 안에서 호출하기)
 - [ ] 동일 검색어 api 요청 막기
 
 ## E2E 테스트 목록
 
-- [x] 처음 앱에 도달했을 때 메인 구성 요소가 렌더링 되는지 테스트
-  - given: 없음
-  - when: 페이지 진입
-  - then
-    - main-thumbnail-list 렌더링
-    - banner 렌더링
-    - logo 렌더링
-    - search input 렌더링
-
-- [x] 더 보기 기능 (main)
-  - given: 페이지 진입, 더 보기 버튼
-  - when: 더 보기 버튼 클릭
-  - then: 기존 영화 목록에 추가 영화 목록이 append됨
-
-- [x] 더 보기 기능 (search)
-  - given: 검색어 입력 후 검색, 더 보기 버튼
-  - when: 더 보기 버튼 클릭
-  - then: 기존 검색 결과 목록에 추가 결과가 append됨
-
-- [x] 검색 기능 - 버튼 클릭
-  - given: 영화 검색 input에 검색어 입력
-  - when: 검색 버튼 클릭
-  - then
-    - search-thumbnail-list 렌더링
-    - URL에 keyword parameter 추가
-    - subtitle이 "${검색어} 검색 결과"로 변경
-
-- [x] 검색 기능 - 엔터 입력
-  - given: 영화 검색 input에 검색어 입력
-  - when: 엔터 키 입력
-  - then
-    - search-thumbnail-list 렌더링
-    - URL에 keyword parameter 추가
-    - subtitle이 "${검색어} 검색 결과"로 변경
-
-- [x] 검색 후 메인으로 복귀(logo 클릭)
-  - given: 검색 결과 화면
-  - when: 로고 클릭
-  - then
-    - main-thumbnail-list 렌더
-    - banner 렌더링
-    - keyword parameter 제거
-
-- [x] 검색 후 메인으로 복귀(빈 문자열 검색)
-  - given: 검색 결과 화면
-  - when: 빈 문자열 검색
-  - then
-    - main-thumbnail-list 렌더링
-    - banner 렌더링
-    - keyword parameter 제거
+- [x] 무한스크롤
+- [x] 상세 모달 렌더링
+- [x] x 버튼으로 모달 닫기
+- [x] esc 입력으로 모달 닫기
+- [x] 별점 입력
+- [x] 별점 업데이트
+- [x] 새로고침 시에도 별점 유지

cypress/e2e/InfiniteScroll.cy.ts

@@ -0,0 +1,108 @@
+import { interceptPopularError, interceptPopularLastPage, interceptPopularPage1, interceptPopularPage2, interceptSearchError, interceptSearchLastPage, interceptSearchPage1, interceptSearchPage2 } from "./spec";
+
+describe("메인 무한 스크롤 동작 테스트", () => {
+  it("스크롤이 observer target에 도달하면 추가 영화가 append된다", () => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+
+    cy.get("#popular-thumbnail-list li").then(($initialItems) => {
+      const initialCount = $initialItems.length;
+
+      interceptPopularPage2();
+      cy.get("#home-observer-target").scrollIntoView();
+      cy.wait("@getPopularPage2");
+
+      cy.get("#popular-thumbnail-list li").should(
+        "have.length.greaterThan",
+        initialCount,
+      );
+    });
+  });
+
+  it("마지막 페이지인 경우 observer target이 렌더링되지 않는다", () => {
+    interceptPopularLastPage();
+    cy.visit("/");
+    cy.wait("@getPopularLastPage");
+
+    cy.get("#home-observer-target").should("not.exist");
+  });
+});
+
+describe("검색 무한 스크롤 동작 테스트", () => {
+  it("검색 후 스크롤이 observer target에 도달하면 추가 결과가 append된다", () => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+
+    interceptSearchPage1();
+    cy.get("#search-input").type("인터스텔라");
+    cy.get("#search-button").click();
+    cy.wait("@getSearchPage1");
+
+    cy.get("#search-thumbnail-list li").then(($initialItems) => {
+      const initialCount = $initialItems.length;
+
+      interceptSearchPage2();
+      cy.get("#search-observer-target").scrollIntoView();
+      cy.wait("@getSearchPage2");
+
+      cy.get("#search-thumbnail-list li").should(
+        "have.length.greaterThan",
+        initialCount,
+      );
+    });
+  });
+
+  it("검색 결과가 마지막 페이지인 경우 observer target이 렌더링되지 않는다", () => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+
+    interceptSearchLastPage();
+    cy.get("#search-input").type("인터스텔라");
+    cy.get("#search-button").click();
+    cy.wait("@getSearchLastPage");
+
+    cy.get("#search-observer-target").should("not.exist");
+  });
+});
+
+describe("홈 무한 스크롤 에러 테스트", () => {
+  it("스크롤로 추가 로딩 중 에러가 발생하면 에러 메시지가 alert된다", () => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+
+    interceptPopularError();
+    const alertStub = cy.stub();
+    cy.on("window:alert", alertStub);
+
+    cy.get("#home-observer-target").scrollIntoView();
+    cy.wait("@getPopularError").then(() => {
+      expect(alertStub).to.have.been.called;
+    });
+  });
+});
+
+describe("검색 무한 스크롤 에러 테스트", () => {
+  it("검색 후 스크롤로 추가 로딩 중 에러가 발생하면 에러 메시지가 alert된다", () => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+
+    interceptSearchPage1();
+    cy.get("#search-input").type("인터스텔라");
+    cy.get("#search-button").click();
+    cy.wait("@getSearchPage1");
+
+    interceptSearchError();
+    const alertStub = cy.stub();
+    cy.on("window:alert", alertStub);
+
+    cy.get("#search-observer-target").scrollIntoView();
+    cy.wait("@getSearchError").then(() => {
+      expect(alertStub).to.have.been.called;
+    });
+  });
+});

cypress/e2e/MainRender.cy.ts

@@ -1,4 +1,4 @@
-import { interceptPopularPage1, interceptPopularError } from "./spec";
+import { interceptPopularError, interceptPopularPage1 } from "./spec";
 
 describe("처음 앱에 도달했을 때 메인 구성 요소가 렌더링 되는지 테스트", () => {
   beforeEach(() => {
@@ -7,8 +7,8 @@ describe("처음 앱에 도달했을 때 메인 구성 요소가 렌더링 되
     cy.wait("@getPopularPage1");
   });
 
-  it("main-thumbnail-list가 렌더링된다", () => {
-    cy.get("#main-thumbnail-list").should("be.visible");
+  it("popular-thumbnail-list가 렌더링된다", () => {
+    cy.get("#popular-thumbnail-list").should("be.visible");
   });
 
   it("banner가 렌더링된다", () => {

cypress/e2e/MovieModal.cy.ts

@@ -0,0 +1,107 @@
+import {
+  interceptMovieDetail,
+  interceptMovieDetailError,
+  interceptPopularPage1,
+} from "./spec";
+
+const openModal = () => {
+  interceptMovieDetail();
+  cy.get("#popular-thumbnail-list li").first().click();
+  cy.wait("@getMovieDetail");
+};
+
+describe("영화 상세 모달 렌더링 테스트", () => {
+  beforeEach(() => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+  });
+
+  it("영화 아이템을 클릭하면 상세 모달이 렌더링된다", () => {
+    openModal();
+    cy.get("#modal-dialog").should("be.visible");
+  });
+
+  it("모달에 영화 제목이 표시된다", () => {
+    openModal();
+    cy.get(".modal-description h2").should("contain.text", "영화1");
+  });
+
+  it("모달에 장르가 표시된다", () => {
+    openModal();
+    cy.get(".modal-description .category").should("contain.text", "액션");
+    cy.get(".modal-description .category").should("contain.text", "모험");
+  });
+
+  it("모달에 평균 별점이 표시된다", () => {
+    openModal();
+    cy.get(".modal-rate .rate span").should("contain.text", "8");
+  });
+
+  it("모달에 내 별점이 표시된다", () => {
+    openModal();
+    cy.get("#my-rate").should("be.visible");
+  });
+
+  it("모달에 줄거리가 표시된다", () => {
+    openModal();
+    cy.get(".detail p").should("contain.text", "영화1의 줄거리입니다.");
+  });
+});
+
+describe("영화 상세 모달 닫기 테스트", () => {
+  beforeEach(() => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+  });
+
+  it("닫기 버튼을 클릭하면 모달이 닫힌다", () => {
+    openModal();
+    cy.get("#closeModal").click({ force: true });
+    cy.get("#modal-dialog").should("not.exist");
+  });
+
+  it("ESC 키를 누르면 모달이 닫힌다", () => {
+    openModal();
+    cy.get("#modal-dialog").then(($dialog) => {
+      $dialog[0].dispatchEvent(new Event("cancel"));
+    });
+    cy.get("#modal-dialog").should("not.exist");
+  });
+
+  it("모달 내부를 클릭하면 모달이 닫히지 않는다", () => {
+    openModal();
+    cy.get(".modal-description h2").click();
+    cy.get("#modal-dialog").should("be.visible");
+  });
+});
+
+describe("영화 상세 모달 에러 테스트", () => {
+  beforeEach(() => {
+    interceptPopularPage1();
+    cy.visit("/");
+    cy.wait("@getPopularPage1");
+  });
+
+  it("영화 상세 조회에 실패하면 에러 메시지가 alert된다", () => {
+    interceptMovieDetailError();
+    const alertStub = cy.stub();
+    cy.on("window:alert", alertStub);
+
+    cy.get("#popular-thumbnail-list li").first().click();
+    cy.wait("@getMovieDetailError").then(() => {
+      expect(alertStub).to.have.been.called;
+    });
+  });
+
+  it("영화 상세 조회에 실패하면 모달이 렌더링되지 않는다", () => {
+    interceptMovieDetailError();
+    cy.on("window:alert", () => {});
+
+    cy.get("#popular-thumbnail-list li").first().click();
+    cy.wait("@getMovieDetailError");
+
+    cy.get("#modal-dialog").should("not.exist");
+  });
+});