[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());
 

__test__/mock/item_1.json

@@ -0,0 +1,87 @@
+{
+  "adult": false,
+  "backdrop_path": "/1x9e0qWonw634NhIsRdvnneeqvN.jpg",
+  "belongs_to_collection": null,
+  "budget": 0,
+  "genres": [
+    {
+      "id": 10749,
+      "name": "로맨스"
+    },
+    {
+      "id": 18,
+      "name": "드라마"
+    }
+  ],
+  "homepage": "",
+  "id": 1523145,
+  "imdb_id": "tt38190257",
+  "origin_country": [
+    "RU"
+  ],
+  "original_language": "ru",
+  "original_title": "Твоё сердце будет разбито",
+  "overview": "",
+  "popularity": 821.6874,
+  "poster_path": "/iGpMm603GUKH2SiXB2S5m4sZ17t.jpg",
+  "production_companies": [
+    {
+      "id": 71928,
+      "logo_path": "/7M6z2jX570P3HzNQULCTjlZcXkB.png",
+      "name": "All Media A Start Company",
+      "origin_country": "RU"
+    },
+    {
+      "id": 114676,
+      "logo_path": "/aVsos0RDN9Ib7H8nW5Vv5kHKykz.png",
+      "name": "START Studio",
+      "origin_country": "RU"
+    },
+    {
+      "id": 13850,
+      "logo_path": "/6KsdcnTIpQ47NHad4EtxOCkB94K.png",
+      "name": "Sverdlovsk Film Studio",
+      "origin_country": "RU"
+    },
+    {
+      "id": 76049,
+      "logo_path": "/tam9pIV4QK1ZPwdxBgtVkK1WTYC.png",
+      "name": "Cinema Foundation of Russia",
+      "origin_country": "RU"
+    },
+    {
+      "id": 42877,
+      "logo_path": "/15THT1W3NROsbDXPbrcmWFVkrSv.png",
+      "name": "Yellow, Black & White",
+      "origin_country": "RU"
+    },
+    {
+      "id": 119813,
+      "logo_path": "/iyGJzcnWXZoNxYLzZu4jKzxIoFw.png",
+      "name": "Premier Studios",
+      "origin_country": "RU"
+    }
+  ],
+  "production_countries": [
+    {
+      "iso_3166_1": "RU",
+      "name": "Russia"
+    }
+  ],
+  "release_date": "2026-03-26",
+  "revenue": 0,
+  "runtime": 134,
+  "spoken_languages": [
+    {
+      "english_name": "Spanish",
+      "iso_639_1": "es",
+      "name": "Español"
+    }
+  ],
+  "status": "Released",
+  "tagline": "",
+  "title": "Твоё сердце будет разбито",
+  "video": false,
+  "vote_average": 7.045,
+  "vote_count": 56
+}

cypress/e2e/spec.cy.ts

@@ -1,40 +1,85 @@
 import MOCK_PAGE_1 from '../../__test__/mock/page_1.json';
 import MOCK_PAGE_2 from '../../__test__/mock/page_2.json';
+import MOCK_ITEM_1 from '../../__test__/mock/item_1.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');
+
+    cy.intercept('GET', '**/movie/[0-9]*', {
+      statusCode: 200,
+      body: MOCK_ITEM_1,
+    }).as('getMovieDetail');
   });
 
-  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('2. 검색 기능', () => {
+  context('모달', () => {
+    it('사용자는 모달을 열고 평점을 6점준다. 별점은 로컬 스토리지에 저장된다', () => {
+      cy.visit('http://localhost:5173/');
+      cy.wait('@getPopularMoviePage1');
+
+      cy.get('ul li:first-child').click();
+      cy.get('.modal').should('be.visible');
+
+      cy.get('.modal-description h2').should('contain', MOCK_ITEM_1.title);
+      cy.get('.rate span').should('contain', MOCK_ITEM_1.vote_average.toFixed(1));
+      cy.get('.star-container .submit-star-button').eq(2).click();
+
+      cy.get('.star-container .submit-star-button').each(($el, index) => {
+        const img = $el.find('img');
+        if (index <= 2) {
+          cy.wrap(img).should('have.attr', 'alt', 'star_filled');
+        } else {
+          cy.wrap(img).should('have.attr', 'alt', 'star_empty');
+        }
+      });
+    });
+  });
+
+  context('검색 기능', () => {
     it('검색창에 검색어를 입력하고 엔터를 누르면 검색 결과 페이지로 이동한다.', () => {
       const encodedQuery = encodeURIComponent('해리포터');
 
@@ -43,49 +88,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;
 };