[사전 미션 - CSR을 SSR로 재구성하기] - 파슬리(김윤아) 미션 제출합니다.

ssr/public/styles/tab.css

@@ -1,4 +1,4 @@
-@import "./colors.css";
+@import './colors.css';
 
 .tab {
   display: flex;

ssr/server/apis/movie.js

@@ -0,0 +1,16 @@
+import fetch from 'node-fetch';
+import { FETCH_OPTIONS } from '../constant.js';
+
+export const getMovies = async (url) => {
+  const response = await fetch(url, FETCH_OPTIONS);
+  const data = await response.json();
+
+  return data.results;
+};
+
+export const getMovieDetail = async (url) => {
+  const response = await fetch(url, FETCH_OPTIONS);
+  const data = await response.json();
+
+  return data;
+};

ssr/server/components/renderHeader.js

@@ -0,0 +1,22 @@
+export function renderHeader(backgroundUrl, title, rate) {
+  return `
+      <header>
+        <div class="background-container" style="background-image: url('${backgroundUrl}')">
+          <div class="overlay" aria-hidden="true"></div>
+          <div class="top-rated-container">
+            <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" />
+                <span class="rate-value">${rate.toFixed(1)}</span>
+              </div>
+              <div class="title">${title}</div>
+              <button class="primary detail">자세히 보기</button>
+            </div>
+          </div>  
+        </div>
+      </header>
+    `;
+}

ssr/server/components/renderMovieItem.js

@@ -0,0 +1,14 @@
+export function renderMovieItem(movieId, title, thumbnailFullUrl, rate) {
+  return `
+      <div class="item" onClick="window.location.href='/detail/${movieId}'">
+        <img class="thumbnail" src="${thumbnailFullUrl}" alt="${title}" />
+        <div class="item-desc">
+          <p class="rate">
+            <img src="/assets/images/star_filled.png" class="star" alt="star" />
+            <span>${rate.toFixed(1)}</span>
+          </p>
+          <strong>${title}</strong>
+        </div>
+      </div>
+    `;
+}

ssr/server/components/renderMovieModal.js

@@ -0,0 +1,39 @@
+export function renderMovieModal(title, thumbnailFullUrl, releaseYear, genres, rate, description) {
+  return `
+      <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="${thumbnailFullUrl}" />
+            </div>
+            <div class="modal-description">
+              <h2>${title}</h2>
+              <p class="category">
+                ${releaseYear.split('-')[0]} · ${genres.map((genre) => genre.name).join(', ')}
+              </p>
+              <p class="rate">
+                <img src="/assets/images/star_filled.png" class="star" />
+                <span>${rate.toFixed(1)}</span>
+              </p>
+              <hr />
+              <p class="detail">
+                ${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/config.js

@@ -1,2 +1,2 @@
-import dotenv from "dotenv";
+import dotenv from 'dotenv';
 dotenv.config();

ssr/server/constant.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',
+  nowPlaying: BASE_URL + '/now_playing?language=ko-KR&page=1',
+  topRated: 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/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,9 @@ 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("/", movieRouter);
+app.use('/', movieRouter);
 // app.use("/members", membersRouter); // 본 미션 참고를 위한 코드이며 사전 미션에서는 사용하지 않습니다.
 
 // Start server

ssr/server/routes/index.js

@@ -1,19 +1,110 @@
-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';
 
 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>";
+import { renderHeader } from '../components/renderHeader.js';
+import { renderMovieItem } from '../components/renderMovieItem.js';
+import { renderMovieModal } from '../components/renderMovieModal.js';
+import { getMovies, getMovieDetail } from '../apis/movie.js';
+import {
+  TMDB_MOVIE_LISTS,
+  TMDB_MOVIE_DETAIL_URL,
+  TMDB_THUMBNAIL_URL,
+  TMDB_BANNER_URL,
+} from '../constant.js';
 
-  const template = fs.readFileSync(templatePath, "utf-8");
-  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+function createMoviePage(movies, activeTab) {
+  const templatePath = path.join(__dirname, '../../views', 'index.html');
+  const template = fs.readFileSync(templatePath, 'utf-8');
+
+  const headerHTML = renderHeader(
+    TMDB_BANNER_URL + movies[0].backdrop_path,
+    movies[0].title,
+    movies[0].vote_average
+  );
+
+  const moviesHTML = movies
+    .map((movie) =>
+      renderMovieItem(
+        movie.id,
+        movie.title,
+        TMDB_THUMBNAIL_URL + movie.poster_path,
+        movie.vote_average
+      )
+    )
+    .join('');
+
+  if (activeTab === '')
+    return template
+      .replace('<!--${HEADER}-->', headerHTML)
+      .replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML);
+
+  return template
+    .replace('<!--${HEADER}-->', headerHTML)
+    .replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML)
+    .replace(activeTab, 'selected');
+}
+
+router.get('/', async (_, res) => {
+  const movies = await getMovies(TMDB_MOVIE_LISTS.nowPlaying);
+  const renderedHTML = createMoviePage(movies, '<!--${NOW_PLAYING_ACTIVE}-->');
+
+  res.send(renderedHTML);
+});
+
+router.get('/now-playing', async (_, res) => {
+  const movies = await getMovies(TMDB_MOVIE_LISTS.nowPlaying);
+  const renderedHTML = createMoviePage(movies, '<!--${NOW_PLAYING_ACTIVE}-->');
+
+  res.send(renderedHTML);
+});
+
+router.get('/popular', async (_, res) => {
+  const movies = await getMovies(TMDB_MOVIE_LISTS.popular);
+  const renderedHTML = createMoviePage(movies, '<!--${POPULAR_ACTIVE}-->');
+
+  res.send(renderedHTML);
+});
+
+router.get('/top-rated', async (_, res) => {
+  const movies = await getMovies(TMDB_MOVIE_LISTS.topRated);
+  const renderedHTML = createMoviePage(movies, '<!--${TOP_RATED_ACTIVE}-->');
+
+  res.send(renderedHTML);
+});
+
+router.get('/upcoming', async (_, res) => {
+  const movies = await getMovies(TMDB_MOVIE_LISTS.upcoming);
+  const renderedHTML = createMoviePage(movies, '<!--${UPCOMING_ACTIVE}-->');
+
+  res.send(renderedHTML);
+});
+
+router.get('/detail/:movieId', async (req, res) => {
+  const movies = await getMovies(TMDB_MOVIE_LISTS.nowPlaying);
+  const movieDetail = await getMovieDetail(
+    TMDB_MOVIE_DETAIL_URL + req.params.movieId + '?language=ko-KR'
+  );
+
+  const modalHTML = renderMovieModal(
+    movieDetail.title,
+    TMDB_THUMBNAIL_URL + movieDetail.poster_path,
+    movieDetail.release_date,
+    movieDetail.genres,
+    movieDetail.vote_average,
+    movieDetail.overview
+  );
+
+  const renderedHTML = createMoviePage(movies, '<!--${NOW_PLAYING_ACTIVE}-->').replace(
+    '<!--${MODAL_AREA}-->',
+    modalHTML
+  );
 
   res.send(renderedHTML);
 });

ssr/views/index.html

@@ -13,48 +13,33 @@
   </head>
   <body>
     <div id="wrap">
-      <header>
-        <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>
-            <div class="top-rated-movie">
-              <div class="rate">
-                <img src="../assets/images/star_empty.png" class="star" />
-                <span class="rate-value">${bestMovie.rate}</span>
-              </div>
-              <div class="title">${bestMovie.title}</div>
-              <button class="primary detail">자세히 보기</button>
-            </div>
-          </div>
-        </div>
-      </header>
+      <!--${HEADER}-->
       <div class="container">
         <ul class="tab">
           <li>
             <a href="/now-playing">
-              <div class="tab-item">
+              <div class="tab-item <!--${NOW_PLAYING_ACTIVE}-->">
                 <h3>상영 중</h3>
               </div></a
             >
           </li>
           <li>
             <a href="/popular"
-              ><div class="tab-item">
+              ><div class="tab-item <!--${POPULAR_ACTIVE}-->">
                 <h3>인기순</h3>
               </div></a
             >
           </li>
           <li>
             <a href="/top-rated"
-              ><div class="tab-item">
+              ><div class="tab-item <!--${TOP_RATED_ACTIVE}-->">
                 <h3>평점순</h3>
               </div></a
             >
           </li>
           <li>
             <a href="/upcoming"
-              ><div class="tab-item">
+              ><div class="tab-item <!--${UPCOMING_ACTIVE}-->">
                 <h3>상영 예정</h3>
               </div></a
             >
@@ -69,7 +54,6 @@ <h2>지금 인기 있는 영화</h2>
           </section>
         </main>
       </div>
-
       <footer class="footer">
         <p>&copy; 우아한테크코스 All Rights Reserved.</p>
         <p><img src="../assets/images/woowacourse_logo.png" width="180" /></p>