[사전 미션 - CSR을 SSR로 재구성하기] - 헤일리(최혜림) 미션 제출합니다.

ssr/server/routes/index.js

@@ -1,21 +1,52 @@
-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 { Router } from 'express';
+import { fetchMovieDetail, fetchMovies } from './src/apis/apis.js';
+import { renderMoviePage } from './src/renderMoviePage.js';
+import { TMDB_MOVIE_LISTS } from './src/constants/constant.js';
+import { renderMovieModal } from './src/renderMovieModal.js';
 
 const router = Router();
 
-router.get("/", (_, res) => {
-  const templatePath = path.join(__dirname, "../../views", "index.html");
-  const moviesHTML = "<p>들어갈 본문 작성</p>";
+router.get('/', async (req, res) => {
+  const movies = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING);
+  const moviesHTML = renderMoviePage(movies, '/now-playing');
+
+  res.send(moviesHTML);
+});
+
+router.get('/now-playing', async (req, res) => {
+  const movies = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING);
+  const moviesHTML = renderMoviePage(movies, req.path);
+
+  res.send(moviesHTML);
+});
+
+router.get('/popular', async (req, res) => {
+  const movies = await fetchMovies(TMDB_MOVIE_LISTS.POPULAR);
+  const moviesHTML = renderMoviePage(movies, req.path);
+
+  res.send(moviesHTML);
+});
+
+router.get('/top-rated', async (req, res) => {
+  const movies = await fetchMovies(TMDB_MOVIE_LISTS.TOP_RATED);
+  const moviesHTML = renderMoviePage(movies, req.path);
+
+  res.send(moviesHTML);
+});
+
+router.get('/upcoming', async (req, res) => {
+  const movies = await fetchMovies(TMDB_MOVIE_LISTS.UPCOMING);
+  const moviesHTML = renderMoviePage(movies, req.path);
+
+  res.send(moviesHTML);
+});
 
-  const template = fs.readFileSync(templatePath, "utf-8");
-  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+router.get('/detail/:movieId', async (req, res) => {
+  const movies = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING);
+  const movieDetail = await fetchMovieDetail(req.params.movieId);
+  const moviesHTML = renderMovieModal(movies, movieDetail);
 
-  res.send(renderedHTML);
+  res.send(moviesHTML);
 });
 
 export default router;

ssr/server/routes/src/apis/apis.js

@@ -0,0 +1,15 @@
+import { FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL } from '../constants/constant.js';
+
+export const fetchMovies = async (type) => {
+  const response = await fetch(type, FETCH_OPTIONS);
+  return await response.json();
+};
+
+export const fetchMovieDetail = async (id) => {
+  const url = TMDB_MOVIE_DETAIL_URL + id;
+  const params = new URLSearchParams({
+    language: 'ko-KR',
+  });
+  const response = await fetch(url + '?' + params, FETCH_OPTIONS);
+  return await response.json();
+};

ssr/server/routes/src/constants/constant.js

@@ -0,0 +1,22 @@
+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/src/renderMovieItems.js

@@ -0,0 +1,24 @@
+import { round } from './utils/round.js';
+
+export const renderMovieItems = (movieItems = []) =>
+  movieItems.map(
+    ({ id, title, poster_path, vote_average }) => /*html*/ `
+        <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>${round(
+                vote_average
+              )}</span></p>
+              <strong>${title}</strong>
+            </div>
+          </div>
+        </a>
+      </li>
+      `
+  );

ssr/server/routes/src/renderMovieModal.js

@@ -0,0 +1,49 @@
+import { renderMoviePage } from './renderMoviePage.js';
+import { parseMovieDetail } from './utils/parseMovieDetail.js';
+import { round } from './utils/round.js';
+
+export const renderMovieModal = (moviesData, movieDetailItem) => {
+  const movieDetail = parseMovieDetail(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/${
+                movieDetail.bannerUrl
+              }.jpg" />
+            </div>
+            <div class="modal-description">
+              <h2>${movieDetail.title}</h2>
+              <p class="category">${
+                movieDetail.releaseYear
+              } · ${movieDetail?.genres?.join(', ')}</p>
+              <p class="rate"><img src="../assets/images/star_filled.png" class="star" /><span>${round(
+                movieDetail.rate
+              )}</span></p>
+              <hr />
+              <p class="detail">
+                ${movieDetail.description}
+              </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/routes/src/renderMoviePage.js

@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+import { renderMovieItems } from './renderMovieItems.js';
+import { parseMovieItems } from './utils/parseMovieItems.js';
+import { fileURLToPath } from 'url';
+import { round } from './utils/round.js';
+import { renderTabs } from './renderTabs.js';
+
+export const renderMoviePage = (moviesData, currentPath) => {
+  const movieItems = parseMovieItems(moviesData);
+  const bestMovieItem = movieItems[0];
+  const moviesHTML = renderMovieItems(movieItems).join('');
+
+  const templatePath = path.join(__dirname, '../../../views', 'index.html');
+  let template = fs.readFileSync(templatePath, 'utf-8');
+
+  // tabs
+  template = renderTabs(template, currentPath);
+
+  // movie list
+  template = template.replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML);
+
+  // best movie
+  template = template.replace(
+    '${background-container}',
+    'https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/' +
+      bestMovieItem.backdrop_path
+  );
+  template = template.replace(
+    '${bestMovie.rate}',
+    round(bestMovieItem.vote_average)
+  );
+  template = template.replace('${bestMovie.title}', bestMovieItem.title);
+
+  return template;
+};

ssr/server/routes/src/renderTabs.js

@@ -0,0 +1,11 @@
+export const renderTabs = (template, currentPath) => {
+  template = template.replace(
+    new RegExp(
+      `<a\\s+href="${currentPath}"[^>]*><div\\s+class="tab-item">`,
+      'g'
+    ),
+    `<a href="${currentPath}"><div class="tab-item selected">`
+  );
+
+  return template;
+};

ssr/server/routes/src/utils/parseMovieDetail.js

@@ -0,0 +1,13 @@
+import { TMDB_ORIGINAL_URL } from '../constants/constant.js';
+import { round } from './round.js';
+
+export const parseMovieDetail = (movieDetail) => {
+  return {
+    title: movieDetail.title,
+    bannerUrl: TMDB_ORIGINAL_URL + movieDetail.poster_path,
+    releaseYear: movieDetail.release_date.split('-')[0],
+    description: movieDetail.overview,
+    genres: movieDetail.genres.map(({ name }) => name),
+    rate: round(movieDetail.vote_average),
+  };
+};

ssr/server/routes/src/utils/parseMovieItems.js

@@ -0,0 +1,3 @@
+export const parseMovieItems = (moviesData) => {
+  return moviesData.results;
+};

ssr/server/routes/src/utils/round.js

@@ -0,0 +1,4 @@
+export const round = (value) => {
+  const factor = 10;
+  return Math.round(value * factor) / factor;
+};

ssr/views/index.html

@@ -14,10 +14,15 @@
   <body>
     <div id="wrap">
       <header>
-        <div class="background-container" style="background-image: url('${background-container}')">
+        <div
+          class="background-container"
+          style="background-image: url('${background-container}')"
+        >
           <div class="overlay" aria-hidden="true"></div>
           <div class="top-rated-container">
-            <h1 class="logo"><img src="../assets/images/logo.png" alt="MovieList" /></h1>
+            <h1 class="logo">
+              <img src="../assets/images/logo.png" alt="MovieList" />
+            </h1>
             <div class="top-rated-movie">
               <div class="rate">
                 <img src="../assets/images/star_empty.png" class="star" />
@@ -32,8 +37,8 @@ <h1 class="logo"><img src="../assets/images/logo.png" alt="MovieList" /></h1>
       <div class="container">
         <ul class="tab">
           <li>
-            <a href="/now-playing">
-              <div class="tab-item">
+            <a href="/now-playing"
+              ><div class="tab-item">
                 <h3>상영 중</h3>
               </div></a
             >