[사전 미션 - CSR을 SSR로 재구성하기] - 쑤쑤(현수연) 미션 제출합니다.

ssr/server/api/movies.js

@@ -0,0 +1,15 @@
+import { FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL } from "./url.js";
+
+export const fetchMovies = async (url) => {
+  const response = await fetch(url, FETCH_OPTIONS);
+
+  const data = await response.json();
+  return data.results;
+};
+
+export const fetchMovieDetails = async (movieId) => {
+  const response = await fetch(`${TMDB_MOVIE_DETAIL_URL}${movieId}?language=ko-KR`, FETCH_OPTIONS);
+  const data = await response.json();
+
+  return data;
+};

ssr/server/api/url.js

@@ -0,0 +1,20 @@
+export const BASE_URL = "https://api.themoviedb.org/3/movie";
+
+export const TMDB_THUMBNAIL_URL = "https://media.themoviedb.org/t/p/w440_and_h660_face/";
+export const TMDB_ORIGINAL_URL = "https://image.tmdb.org/t/p/original/";
+export const TMDB_BANNER_URL = "https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/";
+export const TMDB_MOVIE_LISTS = {
+  POPULAR: BASE_URL + "/popular?language=ko-KR&page=1",
+  NOW_PLAYING: BASE_URL + "/now_playing?language=ko-KR&page=1",
+  TOP_RATED: BASE_URL + "/top_rated?language=ko-KR&page=1",
+  UPCOMING: BASE_URL + "/upcoming?language=ko-KR&page=1",
+};
+export const TMDB_MOVIE_DETAIL_URL = "https://api.themoviedb.org/3/movie/";
+
+export const FETCH_OPTIONS = {
+  method: "GET",
+  headers: {
+    accept: "application/json",
+    Authorization: "Bearer " + process.env.TMDB_TOKEN,
+  },
+};

ssr/server/routes/index.js

@@ -1,20 +1,44 @@
 import { Router } from "express";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+import { fetchMovies, fetchMovieDetails } from "../api/movies.js";
+import { renderMoviePage } from "../services/renderMoviePage.js";
+import { TMDB_MOVIE_LISTS } from "../api/url.js";
+import { renderModal } from "../services/renderModal.js";
 
 const router = Router();
 
-router.get("/", (_, res) => {
-  const templatePath = path.join(__dirname, "../../views", "index.html");
-  const moviesHTML = "<p>들어갈 본문 작성</p>";
+export const renderMovieListPage = async (listType, res) => {
+  const moviesData = await fetchMovies(listType);
+  const movieListHTML = renderMoviePage(moviesData);
+
+  res.send(movieListHTML);
+};
+
+router.get("/", async (req, res) => {
+  renderMovieListPage(TMDB_MOVIE_LISTS.POPULAR, res);
+});
+
+router.get("/now-playing", (req, res) => {
+  renderMovieListPage(TMDB_MOVIE_LISTS.NOW_PLAYING, res);
+});
+
+router.get("/popular", (req, res) => {
+  renderMovieListPage(TMDB_MOVIE_LISTS.POPULAR, res);
+});
+
+router.get("/top-rated", (req, res) => {
+  renderMovieListPage(TMDB_MOVIE_LISTS.TOP_RATED, res);
+});
+
+router.get("/upcoming", (req, res) => {
+  renderMovieListPage(TMDB_MOVIE_LISTS.UPCOMING, res);
+});
 
-  const template = fs.readFileSync(templatePath, "utf-8");
-  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+router.get("/detail/:movieId", async (req, res) => {
+  const movieId = req.params.movieId;
+  const moviesData = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING);
+  const movieDetailItem = await fetchMovieDetails(movieId);
 
+  const renderedHTML = renderModal(moviesData, movieDetailItem);
   res.send(renderedHTML);
 });
 

ssr/server/services/renderModal.js

@@ -0,0 +1,44 @@
+import { renderMoviePage } from "./renderMoviePage.js";
+
+export const renderModal = (moviesData, movieDetailItem) => {
+  const moviesPageTemplate = renderMoviePage(moviesData);
+
+  return moviesPageTemplate.replace(
+    "<!--${MODAL_AREA}-->",
+    /*html*/ `
+      <div class="modal-background active" id="modalBackground">
+        <div class="modal">
+        <button class="close-modal" id="closeModal"><img src="../assets/images/modal_button_close.png" /></button>
+        <div class="modal-container">
+          <div class="modal-image">
+            <img src="https://image.tmdb.org/t/p/original/${movieDetailItem.poster_path}" />
+          </div>
+          <div class="modal-description">
+            <h2>${movieDetailItem.title}</h2>
+            <p class="category">${movieDetailItem.release_date} · ${movieDetailItem.genres
+      .map((genre) => genre.name)
+      .join(", ")}</p>
+            <p class="rate"><img src="../assets/images/star_filled.png" class="star" /><span>${
+              movieDetailItem.vote_average
+            }</span></p>
+            <hr />
+            <p class="detail">
+              ${movieDetailItem.overview}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 모달 창 닫기 스크립트 -->
+    <script>
+      const modalBackground = document.getElementById("modalBackground");
+      const closeModal = document.getElementById("closeModal");
+      document.addEventListener("DOMContentLoaded", () => {
+        closeModal.addEventListener("click", () => {
+          modalBackground.classList.remove("active");
+        });
+      });
+    </script>
+  `
+  );
+};

ssr/server/services/renderMovieList.js

@@ -0,0 +1,21 @@
+export const renderMovieList = (movieItems = []) => {
+  return movieItems.map(
+    ({ id, title, vote_average, poster_path }) => `
+      <li>
+        <a href="/detail/${id}">
+          <div class="item">
+            <img
+              class="thumbnail"
+              src="https://media.themoviedb.org/t/p/w440_and_h660_face/${poster_path}"
+              alt="${title}"
+            />
+            <div class="item-desc">
+              <p class="rate"><img src="../assets/images/star_empty.png" class="star" /><span>${vote_average}</span></p>
+              <strong>${title}</strong>
+            </div>
+          </div>
+        </a>
+      </li>
+      `
+  );
+};

ssr/server/services/renderMoviePage.js

@@ -0,0 +1,27 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+import { renderMovieList } from "./renderMovieList.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const renderMoviePage = (moviesData) => {
+  const moviesParsed = renderMovieList(moviesData);
+  const bestMovieItem = moviesData[0];
+  const moviesHTML = moviesParsed.join("");
+
+  const templatePath = path.join(__dirname, "../../views", "index.html");
+  let template = fs.readFileSync(templatePath, "utf-8");
+
+  template = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+  template = template.replace(
+    "${background-container}",
+    "https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/" + bestMovieItem.poster_path
+  );
+  template = template.replace("${bestMovie.rate}", bestMovieItem.vote_average);
+  template = template.replace("${bestMovie.title}", bestMovieItem.title);
+
+  return template;
+};

ssr/views/index.html

@@ -77,4 +77,27 @@ <h2>지금 인기 있는 영화</h2>
     </div>
     <!--${MODAL_AREA}-->
   </body>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const tabItems = document.querySelectorAll(".tab-item");
+
+      const currentPath = window.location.pathname;
+
+      tabItems.forEach((tab) => {
+        const targetLink = tab.parentElement.getAttribute("href");
+        if (targetLink === currentPath) {
+          tab.classList.add("selected");
+        }
+
+        tab.addEventListener("click", (event) => {
+          tabItems.forEach((item) => item.classList.remove("selected"));
+          tab.classList.add("selected");
+
+          if (targetLink) {
+            window.location.href = targetLink;
+          }
+        });
+      });
+    });
+  </script>
 </html>