woowacourse · iftype · Apr 8, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
diff --git a/__test__/api.test.ts b/__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());
 

diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts
@@ -23,11 +23,11 @@ describe('영화 리뷰 앱 E2E 테스트', () => {
       cy.get('.thumbnail-list > li').should('have.length', 20);
     });
 
-    it('더보기 버튼을 누르면 다음 페이지의 영화 20개를 추가로 렌더링한다.', () => {
+    it('스크롤을 내리면 다음 페이지의 영화 20개를 추가로 렌더링한다.', () => {
       cy.visit('http://localhost:5175/');
       cy.wait('@getPopularMovies');
 
-      cy.get('.more-button').click();
+      cy.scrollTo('bottom');
       cy.wait('@getNextPopularMovies');
 
       cy.get('.thumbnail-list > li').should('have.length', 40);

diff --git a/index.html b/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>

diff --git a/src/api/constant.ts b/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;
diff --git a/src/api/fetchApi.ts b/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,14 +11,15 @@ 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();
+  console.log(resultUrl);
-  console.log(resultUrl);
-  console.log(resultUrl);
 
   const response = await fetch(resultUrl, options);
   const data = await response.json();
@@ -43,3 +44,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: {},
+  });
+};
diff --git a/src/api/types.ts b/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;

diff --git a/src/components/common/Rate.ts b/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;
+};
diff --git a/src/components/common/Star.ts b/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;
 };
diff --git a/src/components/header/SearchForm.ts b/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;
 };
diff --git a/src/components/header/SearchHeader.ts b/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() {

diff --git a/src/components/header/TopRate.ts b/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>
   `;
 

diff --git a/src/components/main/Main.ts b/src/components/main/Main.ts
@@ -1,18 +1,18 @@
 import { MovieData } from '../../api/types.ts';
 import { $ } from '../../utils/dom.ts';
 import { Error } from './Error.ts';
-import { MoreButton } from './MoreButton.ts';
 import { MovieItem } from './MovieItem.ts';
 import { MovieItemSkeleton } from './MovieItemSkeleton.ts';
 import { NothingResult } from './NothingResult.ts';
 
 export default class Main {
   #$element: HTMLElement;
   #$list: HTMLElement;
-  #$skeletons: HTMLElement[] = [];
-  #$moreButton: HTMLElement | null;
+  #$skeletons: Map<string, HTMLElement[]>;
+
+  constructor(title: string, onDetail: (movie_id: number) => void) {
+    this.#$skeletons = new Map<string, HTMLElement[]>();
 
-  constructor(title: string) {
     this.#$element = document.createElement('div');
     this.#$element.className = 'container';
     this.#$element.innerHTML = `
@@ -24,38 +24,41 @@ export default class Main {
       </main>
     `;
     this.#$list = $<HTMLElement>(this.#$element, '.thumbnail-list');
-    this.#$moreButton = null;
+
+    const $ul = $(this.#$element, 'ul');
+    $ul.addEventListener('click', (e) => {
+      const $li = (e.target as Element).closest('li');
+      const id = $li?.dataset.id;
+      onDetail(Number(id));
+    });
   }
 
   get $element() {
     return this.#$element;
   }
 
-  renderMovies(movies: MovieData[]) {
-    this.removeSkeletons();
+  renderMovies(movies: MovieData[], page: number) {
+    this.removeSkeletons(page);
     const $fragment = new DocumentFragment();
     movies.forEach((movie) => $fragment.append(MovieItem(movie)));
     this.#$list.append($fragment);
   }
 
-  renderSkeletons(length: number = 20) {
-    this.#$skeletons = Array.from({ length }, () => MovieItemSkeleton());
-    this.#$skeletons.forEach(($skeleton) => this.#$list.append($skeleton));
-  }
-
-  removeSkeletons() {
-    this.#$skeletons.forEach(($skeleton) => $skeleton.remove());
-    this.#$skeletons = [];
-  }
-
-  renderMoreButton(onClick: () => void) {
-    this.#$moreButton = MoreButton(onClick);
-    $<HTMLElement>(this.#$element, 'section').append(this.#$moreButton);
+  renderSkeletons(page: number, length: number = 20) {
+    if (this.#$skeletons.has(String(page))) {
+      this.removeSkeletons(page);
+    }
+    const $newSkeletons = Array.from({ length }, () => MovieItemSkeleton());
+    $newSkeletons.forEach(($skeleton) => this.#$list.append($skeleton));
+    this.#$skeletons.set(String(page), $newSkeletons);
   }
 
-  removeMoreButton() {
-    this.#$moreButton?.remove();
-    this.#$moreButton = null;
+  removeSkeletons(page: number) {
+    if (!this.#$skeletons.has(String(page))) {
+      return;
+    }
+    const $skeletonList = this.#$skeletons.get(String(page));
+    $skeletonList?.forEach(($skeleton) => $skeleton.remove());
   }
 
   renderError(messsage: string) {

diff --git a/src/components/main/MoreButton.ts b/src/components/main/MoreButton.ts
@@ -1,8 +1,8 @@
-export const MoreButton = (onClick: () => void): HTMLElement => {
-  const $button = document.createElement('button');
-  $button.className = 'more-button';
-  $button.textContent = '더 보기';
-  $button.addEventListener('click', onClick);
+// export const MoreButton = (onClick: () => void): HTMLElement => {
+//   const $button = document.createElement('button');
+//   $button.className = 'more-button';
+//   $button.textContent = '더 보기';
+//   $button.addEventListener('click', onClick);
 
-  return $button;
-};
+//   return $button;
+// };
diff --git a/src/components/main/MovieItem.ts b/src/components/main/MovieItem.ts
@@ -4,9 +4,10 @@ import { Star } from '../common/Star.ts';
 import { MovieData } from '../../api/types.ts';
 
 export const MovieItem = (data: MovieData) => {
-  const { title, poster_path, vote_average } = data;
+  const { id, title, poster_path, vote_average } = data;
 
   const $li = document.createElement('li');
+  $li.dataset.id = String(id);
 
   $li.innerHTML = `
     <div class="item">

diff --git a/src/components/modal/Modal.ts b/src/components/modal/Modal.ts
@@ -0,0 +1,94 @@
+import { getOriginalImageUrl } from '../../api/renderImage';
+import { MovieDetail } from '../../api/types';
+import LocalStorage from '../../storage/LocalStorage';
+import { $ } from '../../utils/dom';
+import { Star } from '../common/Star';
+import SubmitRate from './SubmitRate';
+
+export default class Modal {
+  #$modal: HTMLElement;
+  #$body: HTMLElement;
+
+  constructor($body: HTMLElement) {
+    this.#$body = $body;
+
+    this.#$modal = document.createElement('div');
+    this.#$modal.id = 'modalBackground';
+    this.#$modal.className = 'modal-background';
+    this.#$modal.innerHTML = /*html */ `
+      <div class="modal">
+        <button class="close-modal" id="closeModal">
+          <img src="./images/modal_button_close.png" />
+        </button>
+        <div class="modal-container">
+          <div class="modal-image"><img /></div>
+          <div class="modal-description">
+            <h2></h2>
+            <p class="category"></p>
+            <div class="rate"></div>
+            <hr />
+            <div class="modal-submit-star">
+              <h3>내 별점</h3>
+            </div>
+            <hr />
+            <div>
+              <h3>줄거리</h3>
+              <p class="detail"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    $(this.#$modal, 'button').addEventListener('click', () => this.close());
+  }
+
+  get $element() {
+    return this.#$modal;
+  }
+
+  #update(movie: MovieDetail) {
+    const { title, release_date, overview, poster_path, genres, vote_average } = movie;
+
+    $<HTMLImageElement>(this.#$modal, '.modal-image img').src = getOriginalImageUrl(poster_path);
+    $(this.#$modal, 'h2').textContent = title;
+    $(this.#$modal, '.detail').textContent = overview;
+
+    const releaseYear = new Date(release_date).getFullYear();
+    const category = genres.map((g) => g.name).join(' ');
+    $(this.#$modal, '.category').textContent = `${releaseYear} · ${category}`;
+
+    const $rateContainer = $(this.#$modal, '.rate');
+    $rateContainer.innerHTML = '';
+
+    const $starIcon = Star(true);
+    const $score = document.createElement('span');
+    $score.textContent = `평균 ${Number(vote_average).toFixed(1)}`;
+
+    $rateContainer.append($starIcon, $score);
+  }
+
+  open(movie: MovieDetail) {
+    this.#$body.className = 'modal-open';
+    this.#$modal.classList.add('active');
+    this.#update(movie);
-  open(movie: MovieDetail) {
-    this.#$body.className = 'modal-open';
-    this.#$modal.classList.add('active');
-    this.#update(movie);
+  open(movie: MovieDetail) {
+    this.#$body.classList.add('modal-open');
+    this.#$modal.classList.add('active');
+    this.#update(movie);
+  }
-  open(movie: MovieDetail) {
-    this.#$body.className = 'modal-open';
-    this.#$modal.classList.add('active');
-    this.#update(movie);
+  open(movie: MovieDetail) {
+    this.#$body.classList.add('modal-open');
+    this.#$modal.classList.add('active');
+    this.#update(movie);
+  }
+
+    const { id } = movie;
+    const movieRate = Number(LocalStorage.getRate(`${id}`)) || 0;
+
+    const $submitRate = new SubmitRate(movieRate, (rate) => {
+      LocalStorage.saveRate(`${id}`, String(rate));
+    }).$element;
+
+    const $container = $(this.#$modal, '.modal-submit-star');
+    const $oldCon = $container.querySelector('.submit-rate-container');
+    if ($oldCon) $oldCon.remove();
+    $container.append($submitRate);
+  }
+
+  close() {
+    console.log('object');
+    this.#$body.classList.remove('modal-open');
+    this.#$modal.classList.remove('active');
+  }
-  close() {
-    console.log('object');
-    this.#$body.classList.remove('modal-open');
-    this.#$modal.classList.remove('active');
-  }
+  close() {
+    this.#$body.classList.remove('modal-open');
+    this.#$modal.classList.remove('active');
+  }
-  close() {
-    console.log('object');
-    this.#$body.classList.remove('modal-open');
-    this.#$modal.classList.remove('active');
-  }
+  close() {
+    this.#$body.classList.remove('modal-open');
+    this.#$modal.classList.remove('active');
+  }
+}