woowacourse · yujo11 · Apr 4, 2024 · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024
diff --git a/.eslintrc b/.eslintrc
@@ -12,6 +12,8 @@
     "no-promise-executor-return": "off",
     "consistent-return": "off",
     "no-return-await": "off",
+    "no-plusplus": "off",
+
   },
   "env": {
     "es6": true,

diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
 node_modules
-dist
 .env
 cypress.env.json
diff --git a/deploy/images/modal_close_button.png b/deploy/images/modal_close_button.png
diff --git a/dist/06f0f15cfcb8d681b62c.png b/dist/06f0f15cfcb8d681b62c.png
diff --git a/dist/2e162b4fefb34cd7ed8d.png b/dist/2e162b4fefb34cd7ed8d.png
diff --git a/dist/6328741810b732410eec.png b/dist/6328741810b732410eec.png
diff --git a/dist/6c9611deedf4b85849c9.png b/dist/6c9611deedf4b85849c9.png
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/e9a379619c759f886f7c.png b/dist/e9a379619c759f886f7c.png
diff --git a/dist/f1bd4269f4446ceae306.png b/dist/f1bd4269f4446ceae306.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>영화관</title>
+    <script defer type="module" src="./dist/bundle.js"></script>
+  <script defer src="bundle.js"></script></head>
+  <body>
+    <div id="app">
+      <header>
+        <h1>
+          <button id="home-button"></button>
+        </h1>
+      </header>
+      <main>
+        <section class="item-view">
+          <h2></h2>
+          <ul class="item-list"></ul>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md
@@ -4,7 +4,9 @@
 - 실제 동작하는 API를 통한 비동기 통신
 - UX 경험 개선을 위한 더 보기(페이징) 구현
 
-## 구현할 기능 목록
+
+## STEP1 구현할 기능 목록
+
 
 ### 1. 🎬 영화 목록 조회 (인기순)
 
@@ -32,3 +34,27 @@
   - [x] 검색 결과가 없을 경우 (응답은 있으나)
   - [x] HTTP 4xx 오류일 때 (클라이언트 오류)
   - [x] HTTP 5xx 오류일 때 (서버 오류)
+
+
+## STEP2 구현할 기능 목록
+
+### 1. 📺 영화 상세정보 조회
+
+- [ ] 영화 포스터나 제목을 클릭하면 자세한 예고편이나 줄거리 등의 정보를 보여준다.
+- [ ] API에서 제공하는 항목을 활용하여 상세 정보를 보여주는 모달 창을 구현한다.
+- [ ] 키보드의 ESC 키를 누르면 모달 창을 닫을 수 있는 등 사용성을 고려한다.
+
+### 2. ⭐️ 별점 매기기
+
+- [ ] TMDB API 요청과는 관련 없습니다.
+- [ ] 사용자는 영화에 대해 별점을 줄 수 있다.
+  - [ ] 새로고침하더라도 사용자가 남긴 별점은 유지되어야 한다.
+  - [ ] 별점은 5개로 구성되어 있으며 한 개당 2점이며 1점 단위는 고려하지 않는다.
+    - 2점, 4점, 6점, 8점, 10점
+
+### 3. 📐 UI⁄UX 개선하기
+
+- [ ] 영화 목록과 영화 상세 정보가 뜨는 모달창에 대한 반응형 레이아웃을 구성한다.
+- [ ] 영화 목록의 더보기 버튼을 무한 스크롤 방식으로 변경한다.
+  - 검색 결과 화면에서 사용자가 브라우저 화면의 끝에 도달하면 그 다음 20개의 목록을 서버에 요청하여 추가로 불러올 수 있다.
+
diff --git a/index.html b/index.html
@@ -5,16 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="stylesheet" href="./css/reset.css" type="text/css" />
-    <link rel="stylesheet" href="./css/common.css" type="text/css" />
-
     <title>영화관</title>
+    <script defer type="module" src="./dist/bundle.js"></script>
   </head>
   <body>
     <div id="app">
       <header>
         <h1>
-          <button id="home-button"><img src="./images/logo.png" alt="MovieList 로고" /></button>
+          <button id="home-button"></button>
         </h1>
       </header>
       <main>

diff --git a/src/App.ts b/src/App.ts
@@ -1,22 +1,57 @@
 import { Movie } from './index.d';
 
-import { SKELETON_UI_FIXED } from './constants';
+import { SKELETON_UI_PC, SKELETON_UI_TABLET, SKELETON_UI_MOBILE } from './constants';
 
-import MoreButton from './components/MoreButton';
-import MovieCard from './components/MovieCard';
 import movieStore from './store/MovieStore';
-import SearchBox from './components/SearchBox';
 import searchMovieStore from './store/SearchMovieStore';
 
+import SearchBox from './components/SearchBox';
+import MovieCard from './components/MovieCard';
+import Modal from './components/Modal';
+
+import Logo from './images/logo.png';
+
 type Tpage = 'popular' | 'search';
 
 export default class App {
   #pageType: Tpage = 'popular';
 
+  #observer: IntersectionObserver | null = null;
+
+  #isLoading: boolean = false;
+
+  #skeletonBySize: number = SKELETON_UI_PC;
+
   async run() {
+    this.#insertLogo();
     this.#generateMovieList();
     this.#generateSearchBox();
     this.#addHomeButtonEvent();
+    this.#initEventListeners();
+    this.#setupIntersectionObserver();
+  }
+
+  #insertLogo() {
+    const homeButton = document.getElementById('home-button');
+    const imgElement = document.createElement('img');
+
+    imgElement.src = Logo;
+    imgElement.alt = 'MovieList 로고';
+
+    homeButton?.appendChild(imgElement);
+  }
+
+  #getSkeletonCount() {
+    const width = window.innerWidth;
+    let skeletonCount = this.#skeletonBySize;
+
+    if (width <= 390) {
+      skeletonCount = SKELETON_UI_MOBILE;
+    } else if (width <= 834) {
+      skeletonCount = SKELETON_UI_TABLET;
+    }
+
+    return skeletonCount;
   }
 
   #generateMovieList() {
@@ -35,13 +70,19 @@ export default class App {
   async #generateItemList(title: string, fetchData: () => Promise<Movie[]>, store: any) {
     this.#changeTitle(title);
     this.#removePreviousError();
+
     const ulElement = document.querySelector('ul.item-list');
 
     if (ulElement) {
-      this.#generateSkeletonUI(ulElement as HTMLElement);
+      const skeletonCount = this.#getSkeletonCount();
+      this.#generateSkeletonUI(ulElement as HTMLElement, skeletonCount);
+
       const newData = await fetchData();
+
       this.#removeSkeletonUI();
       this.#appendMovieCard(newData, ulElement as HTMLElement);
+
+      this.#observeSentinel();
     }
   }
 
@@ -61,17 +102,12 @@ export default class App {
 
       ulElement?.appendChild(card.element);
     });
-
-    this.#generateMoreButton();
   }
 
-  // eslint-disable-next-line max-lines-per-function
-  #generateSkeletonUI(ulElement: HTMLElement) {
-    this.#removeMoreButton();
-
+  #generateSkeletonUI(ulElement: HTMLElement, skeletonCount: number) {
     const fragment = new DocumentFragment();
 
-    for (let i = 0; i < SKELETON_UI_FIXED; i++) {
+    for (let i = 0; i < skeletonCount; i++) {
       const card = new MovieCard({
         classes: ['skeleton-container'],
       });
@@ -92,34 +128,49 @@ export default class App {
     }
   }
 
-  /* eslint-disable max-lines-per-function */
-  #generateMoreButton() {
-    this.#removeMoreButton();
+  #setupIntersectionObserver() {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.8,
+    };
+
+    this.#observer = new IntersectionObserver(this.#handleIntersection, options);
+    const sentinel = document.createElement('li');
+    sentinel.classList.add('sentinel');
+    this.#observer.observe(sentinel);
+  }
 
-    if (searchMovieStore.presentPage === searchMovieStore.totalPages) return;
+  #observeSentinel() {
+    const sentinel = document.querySelector('.sentinel');
+    if (sentinel && this.#observer) {
+      this.#observer.observe(sentinel);
+    }
+  }
 
-    const itemView = document.querySelector('section.item-view');
-
-    const moreBtn = new MoreButton({
-      onClick: () => {
-        if (this.#pageType === 'popular') {
-          movieStore.increasePageCount();
-          this.#generateMovieList();
-        } else {
-          searchMovieStore.increasePageCount();
-          this.#generateSearchMovieList();
-        }
-      },
+  #handleIntersection = (entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting && entry.intersectionRatio >= 0.8 && !this.#isLoading) {
+        this.#loadMoreMovies();
+      }
     });
+  };
 
-    itemView?.appendChild(moreBtn.element);
-  }
+  // eslint-disable-next-line max-lines-per-function
+  async #loadMoreMovies() {
+    if (searchMovieStore.presentPage === searchMovieStore.totalPages) return;
 
-  #removeMoreButton() {
-    const moreButton = document.getElementById('more-button');
-    if (moreButton) {
-      moreButton.parentNode?.removeChild(moreButton);
+    this.#isLoading = true;
+
+    if (this.#pageType === 'popular') {
+      await movieStore.increasePageCount();
+      await this.#generateMovieList();
+    } else {
+      await searchMovieStore.increasePageCount();
+      await this.#generateSearchMovieList();
     }
+
+    this.#isLoading = false;
   }
 
   #removePreviousError() {
@@ -130,6 +181,7 @@ export default class App {
     }
   }
 
+  // eslint-disable-next-line max-lines-per-function
   #generateSearchBox() {
     const header = document.querySelector('header');
     const ulElement = document.querySelector('ul.item-list');
@@ -154,7 +206,6 @@ export default class App {
         this.#pageType = 'popular';
         this.#changeTitle('지금 인기 있는 영화');
         this.#removePreviousError();
-        this.#removeMoreButton();
         this.#renderAllMovieList();
       });
     }
@@ -169,5 +220,24 @@ export default class App {
 
     ulElement.innerHTML = '';
     this.#appendMovieCard(movieDatas, ulElement as HTMLElement);
+    this.#observeSentinel();
+  }
+
+  #initEventListeners() {
+    const itemList = document.querySelector('ul.item-list');
+
+    if (itemList) {
+      itemList.addEventListener('click', this.#handleMovieCardClick.bind(this));
+    }
+  }
+
+  #handleMovieCardClick(event: any) {
+    const clickedElement = event.target.closest('.item-card');
+
+    if (clickedElement) {
+      const movieId = Number(clickedElement.dataset.movieid);
+      const modal = Modal.getInstance(movieId);
+      modal.openModal();
+    }
   }
 }