next-step · Seung-wan · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 17, 2025
diff --git a/REQUIREMENTS.md b/REQUIREMENTS.md
@@ -0,0 +1,5 @@
+- [v] 영화 목록의 1페이지를 불러오며 더보기 버튼을 누르면 그 다음의 영화 목록을 불러 올 수 있다.
+  - 단, 페이지 끝에 도달한 경우에는 더보기 버튼을 화면에 출력하지 않는다.
+  - ⚠️ 인기순은 TMDB에서 제공하는 API의 속성 이름을 나타내는 것이므로 별도로 받은 데이터를 정렬하지 않습니다.
+- [v] 영화 목록 아이템에 대한 Skeleton UI를 구현한다.
+  - Skeleton UI는 템플릿으로 제공되는 파일 이외로 자유롭게 구현할 수 있다.
diff --git a/cypress.config.js b/cypress.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/cypress/e2e/index.cy.js b/cypress/e2e/index.cy.js
@@ -0,0 +1,45 @@
+describe("메인 페이지", () => {
+  beforeEach(() => {
+    cy.intercept(
+      {
+        method: "GET",
+        url: /^https:\/\/api\.themoviedb\.org\/3\/movie\/popular*/,
+      },
+      (req) => {
+        req.reply({
+          fixture: "popular-movies.json",
+          delayMs: 500,
+        });
+      }
+    ).as("getPopularMovies");
+
+    cy.visit("http://localhost:5173");
+  });
+
+  it("영화 목록 API를 호출하면 20개의 영화가 불러와진다.", () => {
+    cy.wait("@getPopularMovies").then((interception) => {
+      const popularMovies = interception.response.body.results;
+      expect(popularMovies).to.have.length(20);
+
+      const popularMovieItems = cy.get("ul.thumbnail-list > li");
+      popularMovieItems.should("have.length", 20);
+    });
+  });
+
+  it("더보기 버튼 클릭 시 스켈레톤이 보였다가 사라지고, 새 영화 카드 20개가 추가로 보인다.", () => {
+    cy.get("ul.thumbnail-list > li").should("have.length", 20);
+
+    cy.get("button").contains("더 보기").click();
+
+    cy.get("ul.thumbnail-list > li.card-skeleton").should(
+      "have.length.greaterThan",
+      0
+    );
+
+    cy.wait("@getPopularMovies");
+
+    cy.get("ul.thumbnail-list > li.card-skeleton").should("have.length", 0);
+
+    cy.get("ul.thumbnail-list > li").should("have.length", 40);
+  });
+});
diff --git a/cypress/fixtures/popular-movies.json b/cypress/fixtures/popular-movies.json
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/index.html b/index.html
@@ -3,10 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles/index.css" />
     <title>영화 리뷰</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="src/main.js"></script>
   </body>
 </html>
diff --git a/src/apis/getPopularMovies.js b/src/apis/getPopularMovies.js
@@ -0,0 +1,62 @@
+export async function getPopularMovies(params) {
+  const { language = "ko-KR", page = 1 } = params;
+
+  const url = new URL("https://api.themoviedb.org/3/movie/popular");
+  url.searchParams.set("language", language);
+  url.searchParams.set("page", page);
+
+  const response = await fetch(url.toString(), {
+    headers: {
+      accept: "application/json",
+      Authorization: `Bearer ${import.meta.env.VITE_TMDB_API_KEY}`,
+    },
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.status_message || "일시적으로 에러가 발생했어요.");
+  }
+
+  const popularMovies = await response.json();
+
+  return {
+    ...popularMovies,
+    results: popularMovies.results.map(toClientEntity),
+  };
+}
+
+function toClientEntity(popularMovies) {
+  const {
+    adult,
+    backdrop_path,
+    genre_ids,
+    id,
+    original_language,
+    original_title,
+    overview,
+    popularity,
+    poster_path,
+    release_date,
+    title,
+    video,
+    vote_average,
+    vote_count,
+  } = popularMovies;
+
+  return {
+    adult,
+    backdropPath: backdrop_path,
+    genreIds: genre_ids,
+    id,
+    originalLanguage: original_language,
+    originalTitle: original_title,
+    overview,
+    popularity,
+    posterPath: poster_path,
+    releaseDate: release_date,
+    title,
+    video,
+    voteAverage: vote_average,
+    voteCount: vote_count,
+  };
+}
diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -0,0 +1,23 @@
+export function createBanner() {
+  const banner = document.createElement("div");
+  banner.classList.add("background-container");
+
+  banner.innerHTML = /* HTML */ `
+    <div class="overlay" aria-hidden="true"></div>
+    <div class="top-rated-container">
+      <h1 class="logo">
+        <img src="./images/logo.png" alt="MovieList" />
+      </h1>
+      <div class="top-rated-movie">
+        <div class="rate">
+          <img src="./images/star_empty.png" class="star" />
+          <span class="rate-value">9.5</span>
+        </div>
+        <div class="title">인사이드 아웃2</div>
+        <button class="primary detail">자세히 보기</button>
+      </div>
+    </div>
+  `;
+
+  return banner;
+}
diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
@@ -0,0 +1,42 @@
+import { formatMovieRate } from "../domain/formatMovieRate.js";
+import { getImageUrl } from "../domain/getImageUrl.js";
+
+export function createMovieCard({ title, imageFileName, rate }) {
+  const li = document.createElement("li");
+  const div = document.createElement("div");
+  div.classList.add("item");
+
+  div.innerHTML = /* HTML */ `
+    <img class="thumbnail" src=${getImageUrl(imageFileName)} alt=${title} />
+    <div class="item-desc">
+      <p class="rate">
+        <img src="./images/star_empty.png" class="star" /><span
+          >${formatMovieRate(rate)}</span
+        >
+      </p>
+      <strong>${title}</strong>
+    </div>
+  `;
+
+  li.append(div);
+
+  return li;
+}
+
+export function createMovieCardSkeleton() {
+  const li = document.createElement("li");
+  li.classList.add("card-skeleton");
+
+  const div = document.createElement("div");
+  div.classList.add("item");
+
+  div.innerHTML = /* HTML */ `
+    <div class="thumbnail-skeleton"></div>
+    <div class="rate-skeleton"></div>
+    <div class="title-skeleton"></div>
+  `;
+
+  li.append(div);
+
+  return li;
+}
diff --git a/src/domain/formatMovieRate.js b/src/domain/formatMovieRate.js
@@ -0,0 +1,10 @@
+/**
+ * rate는 1~10 사이의 값이 들어옵니다.
+ * 소수점 1자리까지 보여줍니다.
+ * @example
+ * const movieRate = formatMovieRate(7.654);
+ * console.log(movieRate); // 7.6
+ */
+export function formatMovieRate(rate) {
+  return rate.toFixed(1);
+}
diff --git a/src/domain/getImageUrl.js b/src/domain/getImageUrl.js
@@ -0,0 +1,3 @@
+export function getImageUrl(posterPath) {
+  return `https://media.themoviedb.org/t/p/w440_and_h660_face/${posterPath}`;
+}
diff --git a/src/main.js b/src/main.js
@@ -1,35 +1,91 @@
-import image from "../templates/images/star_filled.png";
-
-console.log("npm run dev 명령어를 통해 영화 리뷰 미션을 시작하세요");
-
-console.log(
-  "%c" +
-    " _____ ______   ________  ___      ___ ___  _______                \n" +
-    "|\\   _ \\  _   \\|\\   __  \\|\\  \\    /  /|\\  \\|\\  ___ \\               \n" +
-    "\\ \\  \\\\\\__\\ \\  \\ \\  \\|\\  \\ \\  \\  /  / | \\  \\ \\   __/|              \n" +
-    " \\ \\  \\\\|__| \\  \\ \\  \\\\\\  \\ \\  \\/  / / \\ \\  \\ \\  \\_|/__            \n" +
-    "  \\ \\  \\    \\ \\  \\ \\  \\\\\\  \\ \\    / /   \\ \\  \\ \\  \\_|\\ \\           \n" +
-    "   \\ \\__\\    \\ \\__\\ \\_______\\ \\__/ /     \\ \\__\\ \\_______\\          \n" +
-    "    \\|__|     \\|__|\\|_______|\\|__|/       \\|__|\\|_______|          \n" +
-    "                                                                   \n" +
-    "                                                                   \n" +
-    "                                                                   \n" +
-    " ________  _______   ___      ___ ___  _______   ___       __      \n" +
-    "|\\   __  \\|\\  ___ \\ |\\  \\    /  /|\\  \\|\\  ___ \\ |\\  \\     |\\  \\    \n" +
-    "\\ \\  \\|\\  \\ \\   __/|\\ \\  \\  /  / | \\  \\ \\   __/|\\ \\  \\    \\ \\  \\   \n" +
-    " \\ \\   _  _\\ \\  \\_|/_\\ \\  \\/  / / \\ \\  \\ \\  \\_|/_\\ \\  \\  __\\ \\  \\  \n" +
-    "  \\ \\  \\\\  \\\\ \\  \\_|\\ \\ \\    / /   \\ \\  \\ \\  \\_|\\ \\ \\  \\|\\__\\_\\  \\ \n" +
-    "   \\ \\__\\\\ _\\\\ \\_______\\ \\__/ /     \\ \\__\\ \\_______\\ \\____________\\\n" +
-    "    \\|__|\\|__|\\|_______|\\|__|/       \\|__|\\|_______|\\|____________|",
-  "color: #d81b60; font-size: 14px; font-weight: bold;"
-);
-
-addEventListener("load", () => {
+import { getPopularMovies } from "./apis/getPopularMovies.js";
+import { createBanner } from "./components/Banner.js";
+import {
+  createMovieCard,
+  createMovieCardSkeleton,
+} from "./components/MovieCard.js";
+import { getImageUrl } from "./domain/getImageUrl.js";
+
+addEventListener("load", async () => {
   const app = document.querySelector("#app");
-  const buttonImage = document.createElement("img");
-  buttonImage.src = image;
 
-  if (app) {
-    app.appendChild(buttonImage);
-  }
+  const wrap = document.createElement("div");
+  wrap.id = "wrap";
+  app.append(wrap);
+
+  const header = document.createElement("header");
+  wrap.append(header);
+
+  const banner = createBanner();
+  header.append(banner);
+
+  const container = document.createElement("div");
+  container.classList.add("container");
+  wrap.append(container);
+
+  const main = document.createElement("main");
+  container.append(main);
+
+  const section = document.createElement("section");
+  main.append(section);
+
+  const title = document.createElement("h2");
+  title.textContent = "지금 인기 있는 영화";
+  section.append(title);
-  const wrap = document.createElement("div");
-  wrap.id = "wrap";
-  app.append(wrap);
-
-  const header = document.createElement("header");
-  wrap.append(header);
-
-  const banner = createBanner();
-  header.append(banner);
-
-  const container = document.createElement("div");
-  container.classList.add("container");
-  wrap.append(container);
-
-  const main = document.createElement("main");
-  container.append(main);
-
-  const section = document.createElement("section");
-  main.append(section);
-
-  const title = document.createElement("h2");
-  title.textContent = "지금 인기 있는 영화";
-  section.append(title);
+  const wrap = document.createElement("div");
+  const header = document.createElement("header");
+  const container = document.createElement("div");
+  const main = document.createElement("main");
+  const section = document.createElement("section");
+  const title = document.createElement("h2");
+  
+  wrap.id = "wrap";
+  app.append(wrap);
+  wrap.append(header);
+  header.append(createBanner());
+  container.classList.add("container");
+  wrap.append(container);
+  container.append(main);
+  main.append(section);
+
+  title.textContent = "지금 인기 있는 영화";
+  section.append(title);
-  const wrap = document.createElement("div");
-  wrap.id = "wrap";
-  app.append(wrap);
-
-  const header = document.createElement("header");
-  wrap.append(header);
-
-  const banner = createBanner();
-  header.append(banner);
-
-  const container = document.createElement("div");
-  container.classList.add("container");
-  wrap.append(container);
-
-  const main = document.createElement("main");
-  container.append(main);
-
-  const section = document.createElement("section");
-  main.append(section);
-
-  const title = document.createElement("h2");
-  title.textContent = "지금 인기 있는 영화";
-  section.append(title);
+  const wrap = document.createElement("div");
+  const header = document.createElement("header");
+  const container = document.createElement("div");
+  const main = document.createElement("main");
+  const section = document.createElement("section");
+  const title = document.createElement("h2");
+  
+  wrap.id = "wrap";
+  app.append(wrap);
+  wrap.append(header);
+  header.append(createBanner());
+  container.classList.add("container");
+  wrap.append(container);
+  container.append(main);
+  main.append(section);
+
+  title.textContent = "지금 인기 있는 영화";
+  section.append(title);
+
+  let page = 1;
+  const response = await getPopularMovies({ page });
+
+  const ul = document.createElement("ul");
+  ul.classList.add("thumbnail-list");
+  section.append(ul);
+
+  const cards = response.results.map(({ title, posterPath, voteAverage }) =>
+    createMovieCard({ title, imageFileName: posterPath, rate: voteAverage })
+  );
+
+  const firstMoviePosterPath = response.results[0].posterPath;
+  header.style.backgroundImage = `url(${getImageUrl(firstMoviePosterPath)})`;
+  ul.append(...cards);
+
+  const loadMoreButton = document.createElement("button");
+  loadMoreButton.textContent = "더 보기";
+  loadMoreButton.classList.add("load-more-button");
+  loadMoreButton.addEventListener("click", async () => {
+    const cardSkeleton = Array.from({ length: ITEM_PER_PAGE }, () =>
+      createMovieCardSkeleton()
+    );
+    ul.append(...cardSkeleton);
+
+    page = page + 1;
+
+    try {
+      const response = await getPopularMovies({
+        language: "ko-KR",
+        page,
+      });
+      if (response.total_pages === page) {
+        loadMoreButton.classList.add("hide");
+      }
+
+      const cards = response.results.map(({ title, posterPath, voteAverage }) =>
+        createMovieCard({ title, imageFileName: posterPath, rate: voteAverage })
+      );
+
+      removeSkeleton();
+      ul.append(...cards);
+    } catch (error) {
+      removeSkeleton();
+      // TODO: Toast나 Alert로 표현하기
+      window.alert(error.message);
+    }
+  });
+
+  section.append(loadMoreButton);
 });
+
+function removeSkeleton() {
+  ul.querySelectorAll(".card-skeleton").forEach((el) => el.remove());
+}
+
+const ITEM_PER_PAGE = 20;