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

__test__/api.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { fetchPopularMovies, fetchSearchMovies } from '../src/api/fetchApi.ts';
 import MOCK_DATA from './mock/page_1.json';
+import MOCK_ERROR from './mock/page_error.json';
 
 vi.stubGlobal('fetch', vi.fn());
 

cypress/e2e/spec.cy.ts

@@ -2,39 +2,74 @@ import MOCK_PAGE_1 from '../../__test__/mock/page_1.json';
 import MOCK_PAGE_2 from '../../__test__/mock/page_2.json';
 import MOCK_ERROR from '../../__test__/mock/page_error.json';
 
-describe('영화 리뷰 앱 E2E 테스트', () => {
+describe('e2e 테스트', () => {
   beforeEach(() => {
     cy.intercept('GET', '**/movie/popular?*page=1*', {
       statusCode: 200,
       body: MOCK_PAGE_1,
-    }).as('getPopularMovies');
+    }).as('getPopularMoviePage1');
 
     cy.intercept('GET', '**/movie/popular?*page=2*', {
       statusCode: 200,
       body: MOCK_PAGE_2,
-    }).as('getNextPopularMovies');
+    }).as('getPopularMoviePage2');
   });
 
-  context('1. 메인 페이지 (인기 영화)', () => {
-    it('메인 페이지에 접속하면 인기 영화 20개를 렌더링한다.', () => {
-      cy.visit('http://localhost:5175/');
-      cy.wait('@getPopularMovies');
+  context('사용자는 접속하여 홈페이지에서 영화 리스트를 볼 수 있다', () => {
+    it('메인 페이지의 소개 문구 확인', () => {
+      cy.visit('http://localhost:5173/');
+      cy.wait('@getPopularMoviePage1');
 
+      cy.get('.top-rated-movie .title').should('have.text', MOCK_PAGE_1.results[0].title);
+      cy.get('section h2').should('have.text', '지금 인기있는 영화');
       cy.get('.thumbnail-list > li').should('have.length', 20);
     });
 
-    it('더보기 버튼을 누르면 다음 페이지의 영화 20개를 추가로 렌더링한다.', () => {
-      cy.visit('http://localhost:5175/');
-      cy.wait('@getPopularMovies');
+    it('스크롤을 내리면 다음 페이지의 영화 20개를 추가로 렌더링한다.', () => {
+      cy.visit('http://localhost:5173/');
+      cy.wait('@getPopularMoviePage1');
 
-      cy.get('.more-button').click();
-      cy.wait('@getNextPopularMovies');
+      cy.scrollTo('bottom');
+      cy.wait('@getPopularMoviePage2');
 
       cy.get('.thumbnail-list > li').should('have.length', 40);
     });
+
+    it('영화 리스트 중 하나 클릭했다가 취소하고 나온다 ESC도 가능해야한다', () => {
+      cy.visit('http://localhost:5173/');
+      cy.wait('@getPopularMoviePage1');
+
+      cy.get('ul li:first-child').click();
+      cy.get('.modal').should('be.visible');
+
+      cy.get('.close-modal').click();
+      cy.get('.modal').should('not.be.visible');
+
+      cy.get('body').type('{esc}');
+      cy.get('.modal').should('not.be.visible');
+    });
+  });
+
+  context('검색 기능', () => {
+    it('사용자는 모달을 열고 평점을 6점준다. 별점은 로컬 스토리지에 저장된다', () => {
+      cy.visit('http://localhost:5173/');
+      cy.wait('@getPopularMoviePage1');
+
+      cy.get('ul li:first-child').click();
+      cy.get('.modal').should('be.visible');
+
+      const movieId = MOCK_PAGE_1.results[0].id;
+
+      cy.get('.star-container .submit-star-button').eq(2).click();
+
+      cy.window().then((win) => {
+        const rating = win.localStorage.getItem(String(movieId) as string);
+        expect(rating).to.equal('6');
+      });
+    });
   });
 
-  context('2. 검색 기능', () => {
+  context('검색 기능', () => {
     it('검색창에 검색어를 입력하고 엔터를 누르면 검색 결과 페이지로 이동한다.', () => {
       const encodedQuery = encodeURIComponent('해리포터');
 
@@ -43,49 +78,45 @@ describe('영화 리뷰 앱 E2E 테스트', () => {
         body: MOCK_PAGE_1,
       }).as('getSearchMovies');
 
-      cy.visit('http://localhost:5175/');
+      cy.visit('http://localhost:5173/');
 
       cy.get('input[name="q"]').type('해리포터{enter}');
       cy.wait('@getSearchMovies');
 
       cy.url().should('include', `/search?query=${encodedQuery}`);
-      cy.get('.thumbnail-list > li').should('have.length', 20);
+      cy.get('.thumbnail-list li').should('have.length', 20);
     });
 
     it('검색 결과가 없는 경우 "검색 결과가 없습니다" UI를 띄워준다.', () => {
       const emptyMockData = { page: 1, results: [], total_pages: 0 };
 
-      const encodedEmptyQuery = encodeURIComponent('ㅇㅅㅇ');
+      const encodedEmptyQuery = encodeURIComponent('궤뚫쉟헽');
 
       cy.intercept('GET', `**/search/movie?*query=${encodedEmptyQuery}*`, {
         statusCode: 200,
         body: emptyMockData,
       }).as('getEmptyMovies');
 
-      cy.visit('http://localhost:5175/');
-      cy.get('input[name="q"]').type('ㅇㅅㅇ{enter}');
+      cy.visit('http://localhost:5173/');
+      cy.get('input[name="q"]').type('궤뚫쉟헽{enter}');
       cy.wait('@getEmptyMovies');
 
       cy.get('.nothing').should('be.visible');
       cy.get('.nothing p').contains('검색 결과가 없습니다.');
     });
   });
 
-  context('3. 예외 처리 (API 에러)', () => {
-    it('네트워크 통신에 실패할 경우 에러 메시지를 화면에 표시한다.', () => {
-      cy.on('uncaught:exception', (err, runnable) => {
-        return false;
-      });
-
+  context('API 에러', () => {
+    it('에러가 발생 시 에러 컴포넌트를 불러옴', () => {
       cy.intercept('GET', '**/movie/popular?*', {
         statusCode: 500,
         body: MOCK_ERROR,
       }).as('getApiError');
 
-      cy.visit('http://localhost:5175/');
+      cy.visit('http://localhost:5173/');
       cy.wait('@getApiError');
       cy.get('.nothing').should('be.visible');
-      cy.get('.nothing p').should('contain', 'TMDB');
+      cy.get('.nothing p').should('contain', '에러');
     });
   });
 });

index.html

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="./styles/main.css" />
   <link rel="stylesheet" href="./styles/tab.css" />
   <link rel="stylesheet" href="./styles/thumbnail.css" />
+  <link rel="stylesheet" href="./styles/modal.css" />
 </head>
 
 <body>

src/api/constant.ts

@@ -7,4 +7,5 @@ export const URL = {
 export const PATH = {
   MOVIE_POPULAR: '/movie/popular',
   SEARCH_MOVIE: '/search/movie',
+  MOVIE_DETAIL: (movie_id: number) => `/movie/${movie_id}`,
 } as const;

src/api/fetchApi.ts

@@ -1,6 +1,6 @@
 import { URL, PATH } from './constant.ts';
 import TMDBError from './TMDBError.ts';
-import { ResponseMovie, Request, TmdbErrorType } from './types.ts';
+import { ResponseMovie, Request, TmdbErrorType, MovieDetail } from './types.ts';
 
 const API_KEY = import.meta.env.VITE_API_KEY;
 const options = {
@@ -11,15 +11,14 @@ const options = {
   },
 };
 
-const fetchAPI = async (req: Request): Promise<ResponseMovie> => {
+const fetchAPI = async <T extends ResponseMovie | MovieDetail>(req: Request): Promise<T> => {
   const url = URL.BASE + req.path;
 
   const { query, page } = req.params;
-  const params = new URLSearchParams({ language: 'ko-KR', page: String(page), region: 'kr' });
+  const params = new URLSearchParams({ language: 'ko-KR', region: 'kr' });
   if (query) params.set('query', query);
-
+  if (page) params.set('page', String(page));
   const resultUrl = url + '?' + params.toString();
-
   const response = await fetch(resultUrl, options);
   const data = await response.json();
 
@@ -43,3 +42,10 @@ export const fetchPopularMovies = (page: number = 1): Promise<ResponseMovie> =>
     params: { page },
   });
 };
+
+export const fetchMovieDetails = (movie_id: number): Promise<MovieDetail> => {
+  return fetchAPI({
+    path: PATH.MOVIE_DETAIL(movie_id),
+    params: {},
+  });
+};

src/api/renderImage.ts

@@ -1,9 +1,12 @@
 import { URL } from './constant';
 
-export const getOriginalImageUrl = (src: string): string => {
+const PLACEHOLDER = './images/empty.png';
+export const getOriginalImageUrl = (src: string | null): string => {
+  if (!src) return PLACEHOLDER;
   return URL.ORIGINAL_IMAGE + src;
 };
 
 export const getThumbnailImageUrl = (src: string): string => {
+  if (!src) return PLACEHOLDER;
   return URL.THUMBNAIL_IMAGE + src;
 };

src/api/types.ts

@@ -1,18 +1,32 @@
 export type MovieData = {
+  id: number;
   title: string;
   poster_path: string;
   backdrop_path: string;
   vote_average: number;
 };
 
+type Genres = {
+  name: string;
+};
+export type MovieDetail = {
+  id: number;
+  title: string;
+  overview: string;
+  poster_path: string;
+  genres: Genres[];
+  vote_average: string;
+  release_date: string;
+};
+
 export type ResponseMovie = {
   results: MovieData[];
   page: number;
   total_pages: number;
 };
 
 type Params = {
-  page: number;
+  page?: number;
   query?: string | undefined;
   language?: string;
   region?: string;

src/components/common/ErrorComponent.ts

@@ -0,0 +1,13 @@
+import TMDBError from '../../api/TMDBError';
+
+export const ErrorComponent = (error: Error | TMDBError) => {
+  const $div = document.createElement('div');
+  const infoMessage = error instanceof TMDBError ? 'TMDB 에러' : '예상치못한 에러';
+  $div.className = 'nothing';
+  $div.innerHTML = `
+    <img src="./images/empty.png" alt="nothing" />
+    <p>${infoMessage}</p>
+  `;
+
+  return $div;
+};

src/components/common/Rate.ts

@@ -0,0 +1,14 @@
+import { Star } from './Star';
+
+export const Rate = (vote_average: string, filled?: boolean) => {
+  const $p = document.createElement('p');
+  $p.className = 'rate';
+
+  const $span = document.createElement('span');
+
+  const roundVote = Math.round(Number(vote_average) * 10) / 10;
+  $span.textContent = roundVote.toFixed(1);
+
+  $p.append(Star(filled), $span);
+  return $p;
+};

src/components/common/Star.ts

@@ -1,8 +1,8 @@
-export const Star = () => {
+export const Star = (filled?: boolean) => {
   const $img = document.createElement('img');
   $img.className = 'star';
-  $img.src = './images/star_empty.png';
-  $img.alt = 'star_empty';
+  $img.src = filled ? './images/star_filled.png' : './images/star_empty.png';
+  $img.alt = filled ? 'star_filled' : 'star_empty';
 
   return $img;
 };

src/components/header/SearchForm.ts

@@ -19,8 +19,11 @@ export const SearchForm = (onSubmit: (query: string) => void) => {
 
   $form.addEventListener('submit', (e) => {
     e.preventDefault();
-    const query = $<HTMLInputElement>($form, '#search-input').value;
+
+    const $input = $<HTMLInputElement>($form, '#search-input');
+    const query = $input.value;
     onSubmit(query);
+    $input.value = '';
   });
   return $form;
 };

src/components/header/SearchHeader.ts

@@ -9,11 +9,12 @@ export default class SearchHeader {
     this.#$element = document.createElement('header');
     this.#$element.innerHTML = `
       <div class="background-container">
-        <div class="top-rated-container"></div>
+        <div class="search-container"></div>
       </div>
     `;
 
-    $<HTMLElement>(this.#$element, '.top-rated-container').append(Logo(), SearchForm(onSubmit));
+    const $justLayout = document.createElement('div');
+    $<HTMLElement>(this.#$element, '.search-container').append(Logo(), SearchForm(onSubmit), $justLayout);
   }
 
   get $element() {

src/components/header/TopRate.ts

@@ -7,10 +7,10 @@ export const TopRate = (data: MovieData): HTMLElement => {
   $container.className = 'top-rated-movie';
 
   $container.innerHTML = `
-    <div class="title"></div>
     <div class="rate">
       <span class="rate-value">${data.vote_average.toFixed(1)}</span>
     </div>
+    <div class="title"></div>
     <button class="primary detail">자세히 보기</button>
   `;