[사전 미션 - CSR을 SSR로 재구성하기] - 헤인(방세린) 미션 제출합니다.

ssr/server/index.js

@@ -1,9 +1,9 @@
-import "./config.js";
-import express from "express";
-import path from "path";
-import { fileURLToPath } from "url";
+import './config.js';
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-import movieRouter from "./routes/index.js";
+import movieRouter from './routes/index.js';
 // import membersRouter from "./routes/members.js"; // 본 미션 참고를 위한 코드이며 사전 미션에서는 사용하지 않습니다.
 
 const app = express();
@@ -12,9 +12,10 @@ const PORT = 3000;
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-app.use("/assets", express.static(path.join(__dirname, "../public")));
+app.use('/assets', express.static(path.join(__dirname, '../public')));
+app.use('/images', express.static(path.join(__dirname, '../public/images')));
 
-app.use("/", movieRouter);
+app.use('/', movieRouter);
 // app.use("/members", membersRouter); // 본 미션 참고를 위한 코드이며 사전 미션에서는 사용하지 않습니다.
 
 // Start server

ssr/server/routes/index.js

@@ -1,19 +1,163 @@
-import { Router } from "express";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
+import { Router } from 'express';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { fetchMovies, renderMovieItem, renderDetailModal } from './utils.js';
+import {
+  TMDB_BANNER_URL,
+  TMDB_MOVIE_LISTS,
+  TMDB_MOVIE_DETAIL_URL,
+} from '../src/constant.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const router = Router();
 
-router.get("/", (_, res) => {
-  const templatePath = path.join(__dirname, "../../views", "index.html");
-  const moviesHTML = "<p>들어갈 본문 작성</p>";
+router.get('/', async (_, res) => {
+  const templatePath = path.join(__dirname, '../../views', 'index.html');
 
-  const template = fs.readFileSync(templatePath, "utf-8");
-  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+  const responseFetchMovies = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING);
+  const movieList = responseFetchMovies.results;
+
+  const moviesHTML = renderMovieItem(movieList).join('');
+
+  const template = fs.readFileSync(templatePath, 'utf-8');
+
+  const renderedHTML = template
+    .replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML)
+    .replace(
+      '${background-container}',
+      `${TMDB_BANNER_URL}${movieList[0].backdrop_path}`
+    )
+    .replace('${bestMovie.rate}', movieList[0].vote_average)
+    .replace('${bestMovie.title}', movieList[0].title)
+    .replace('${TAB_NOW_PLAYING}', 'selected');
+
+  res.send(renderedHTML);
+});
+
+// 상영 중
+router.get('/now-playing', async (_, res) => {
+  const templatePath = path.join(__dirname, '../../views', 'index.html');
+
+  const responseFetchMovies = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING);
+  const movieList = responseFetchMovies.results;
+
+  const moviesHTML = renderMovieItem(movieList).join('');
+
+  const template = fs.readFileSync(templatePath, 'utf-8');
+
+  const renderedHTML = template
+    .replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML)
+    .replace(
+      '${background-container}',
+      `${TMDB_BANNER_URL}${movieList[0].backdrop_path}`
+    )
+    .replace('${bestMovie.rate}', movieList[0].vote_average)
+    .replace('${bestMovie.title}', movieList[0].title)
+    .replace('${TAB_NOW_PLAYING}', 'selected');
+
+  res.send(renderedHTML);
+});
+
+//인기순
+router.get('/popular', async (_, res) => {
+  const templatePath = path.join(__dirname, '../../views', 'index.html');
+
+  const responseFetchMovies = await fetchMovies(TMDB_MOVIE_LISTS.POPULAR);
+  const movieList = responseFetchMovies.results;
+
+  const moviesHTML = renderMovieItem(movieList).join('');
+
+  const template = fs.readFileSync(templatePath, 'utf-8');
+
+  const renderedHTML = template
+    .replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML)
+    .replace(
+      '${background-container}',
+      `${TMDB_BANNER_URL}${movieList[0].backdrop_path}`
+    )
+    .replace('${bestMovie.rate}', movieList[0].vote_average)
+    .replace('${bestMovie.title}', movieList[0].title)
+    .replace('${TAB_POPULAR}', 'selected');
+
+  res.send(renderedHTML);
+});
+
+// 평점순
+router.get('/top-rated', async (_, res) => {
+  const templatePath = path.join(__dirname, '../../views', 'index.html');
+
+  const responseFetchMovies = await fetchMovies(TMDB_MOVIE_LISTS.TOP_RATED);
+  const movieList = responseFetchMovies.results;
+
+  const moviesHTML = renderMovieItem(movieList).join('');
+
+  const template = fs.readFileSync(templatePath, 'utf-8');
+
+  const renderedHTML = template
+    .replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML)
+    .replace(
+      '${background-container}',
+      `${TMDB_BANNER_URL}${movieList[0].backdrop_path}`
+    )
+    .replace('${bestMovie.rate}', movieList[0].vote_average)
+    .replace('${bestMovie.title}', movieList[0].title)
+    .replace('${TAB_TOP_RATED}', 'selected');
+
+  res.send(renderedHTML);
+});
+
+// 상영 예정
+router.get('/upcoming', async (_, res) => {
+  const templatePath = path.join(__dirname, '../../views', 'index.html');
+
+  const responseFetchMovies = await fetchMovies(TMDB_MOVIE_LISTS.UPCOMING);
+  const movieList = responseFetchMovies.results;
+
+  const moviesHTML = renderMovieItem(movieList).join('');
+
+  const template = fs.readFileSync(templatePath, 'utf-8');
+
+  const renderedHTML = template
+    .replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML)
+    .replace(
+      '${background-container}',
+      `${TMDB_BANNER_URL}${movieList[0].backdrop_path}`
+    )
+    .replace('${bestMovie.rate}', movieList[0].vote_average)
+    .replace('${bestMovie.title}', movieList[0].title)
+    .replace('${TAB_UPCOMING}', 'selected');
+
+  res.send(renderedHTML);
+});
+
+router.get('/detail/:id', async (req, res) => {
+  const templatePath = path.join(__dirname, '../../views', 'index.html');
+  const movieId = req.params.id;
+
+  const responseFetchMovies = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING);
+  const movieList = responseFetchMovies.results;
+
+  const moviesHTML = renderMovieItem(movieList).join('');
+
+  const movieDetail = await fetchMovies(
+    `${TMDB_MOVIE_DETAIL_URL}/${movieId}?language=ko-KR`
+  );
+
+  const template = fs.readFileSync(templatePath, 'utf-8');
+
+  const renderedHTML = template
+    .replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML)
+    .replace(
+      '${background-container}',
+      `${TMDB_BANNER_URL}${movieList[0].backdrop_path}`
+    )
+    .replace('${bestMovie.rate}', movieList[0].vote_average)
+    .replace('${bestMovie.title}', movieList[0].title)
+    .replace('${TAB_NOW_PLAYING}', 'selected')
+    .replace('<!--${MODAL_AREA}-->', renderDetailModal(movieDetail));
 
   res.send(renderedHTML);
 });

ssr/server/routes/utils.js

@@ -0,0 +1,74 @@
+import {
+  TMDB_THUMBNAIL_URL,
+  TMDB_ORIGINAL_URL,
+  FETCH_OPTIONS,
+} from '../src/constant.js';
+
+const STAR_IMAGE = '/images/star_filled.png';
+const CLOSE_MODAL_BUTTON_IMAGE = '/images/modal_button_close.png';
+
+export const fetchMovies = async (url) => {
+  const response = await fetch(url, FETCH_OPTIONS);
+
+  return await response.json();
+};
+
+export const renderMovieItem = (movieItems = []) =>
+  movieItems.map(
+    ({ id, title, poster_path, vote_average }) => /*html*/ `
+        <li>
+        <a href="/detail/${id}">
+          <div class="item">
+            <img
+              class="thumbnail"
+              src="${TMDB_THUMBNAIL_URL}${poster_path}"
+              alt="${title}"
+            />
+            <div class="item-desc">
+              <p class="rate"><img src='${STAR_IMAGE}' alt='' class="star" /><span>${
+      Math.round(vote_average * 10) / 10
+    }</span></p>
+              <strong>${title}</strong>
+            </div>
+          </div>
+        </a>
+      </li>
+      `
+  );
+
+export const renderDetailModal = (movieDetail) => /*html*/ `
+  <div class="modal-background active" id="modalBackground">
+  <div class="modal">
+  <button class="close-modal" id="closeModal"><img src="${CLOSE_MODAL_BUTTON_IMAGE}" alt=''/></button>
+  <div class="modal-container">
+    <div class="modal-image">
+      <img src="${TMDB_ORIGINAL_URL}${movieDetail.poster_path}.jpg" />
+    </div>
+    <div class="modal-description">
+    <h2>${movieDetail.title}</h2>
+    <p class="category">
+    ${new Date(movieDetail.release_date).getFullYear()} · ${movieDetail.genres
+  .map((g) => g.name)
+  .join(', ')}
+  </p>
+      <p class="rate"><img src='${STAR_IMAGE}' class="star"  alt="평점"/>
+      <span>${Math.round(movieDetail.vote_average * 10) / 10}</span>
+      </p>
+      <hr />
+      <p class="detail">${movieDetail.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");
+    window.location.href = '/'
+  });
+  });
+  </script>
+  `;

ssr/server/src/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/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" />
@@ -33,31 +38,31 @@ <h1 class="logo"><img src="../assets/images/logo.png" alt="MovieList" /></h1>
         <ul class="tab">
           <li>
             <a href="/now-playing">
-              <div class="tab-item">
+              <div class="tab-item ${TAB_NOW_PLAYING}">
                 <h3>상영 중</h3>
-              </div></a
-            >
+              </div>
+            </a>
           </li>
           <li>
-            <a href="/popular"
-              ><div class="tab-item">
+            <a href="/popular">
+              <div class="tab-item ${TAB_POPULAR}">
                 <h3>인기순</h3>
-              </div></a
-            >
+              </div>
+            </a>
           </li>
           <li>
-            <a href="/top-rated"
-              ><div class="tab-item">
+            <a href="/top-rated">
+              <div class="tab-item ${TAB_TOP_RATED}">
                 <h3>평점순</h3>
-              </div></a
-            >
+              </div>
+            </a>
           </li>
           <li>
-            <a href="/upcoming"
-              ><div class="tab-item">
+            <a href="/upcoming">
+              <div class="tab-item ${TAB_UPCOMING}">
                 <h3>상영 예정</h3>
-              </div></a
-            >
+              </div>
+            </a>
           </li>
         </ul>
         <main>