woowacourse · igy95 · Mar 31, 2023 · Mar 14, 2023 · Mar 14, 2023 · Mar 14, 2023
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -3,7 +3,7 @@ name: NodeJS with Webpack
 on:
   # step1브랜치에 커밋을 push할 때마다 실행
   push:
-    branches: ["step1"]
+    branches: ["step2"]
 
 jobs:
   # deploy라는 job에 배포에 필요한 과정 기술

diff --git a/README.md b/README.md
@@ -50,7 +50,7 @@
 
 ### 📝 실행 방법
 
-- <a href="https://feb-dain.github.io/javascript-/javascript-movie-review">앱 바로 실행하기</a>
+- <a href="https://gabrielyoon7.github.io/javascript-movie-review/">앱 바로 실행하기</a>
 
 - 터미널에서 npm 설치(`npm install`) 후 `npm run start` 커맨드로 앱을 실행할 수 있다.
 

diff --git a/cypress/e2e/movie.spec.cy.ts b/cypress/e2e/movie.spec.cy.ts
@@ -3,23 +3,40 @@ describe("영화관 앱 테스트.", () => {
     cy.visit("http://localhost:8080/");
   });
 
-  it("더보기를 클릭하면 영화 목록이 20개씩 추가된다.", () => {
-    cy.get("#more-button").click();
+  it("스크롤이 바닥에 터치할 때 마다 20개씩 추가된다.", () => {
+    // cy.get('#loading-trigger').click();
+    cy.get('#loading-trigger').scrollIntoView();
     cy.get(".item-list").children().should("have.length", "40");
-    cy.get("#more-button").click();
+    cy.wait(1000);
+    cy.get('#loading-trigger').scrollIntoView();
     cy.get(".item-list").children().should("have.length", "60");
+    cy.wait(1000);
+    cy.get('#loading-trigger').scrollIntoView();
+    cy.get(".item-list").children().should("have.length", "80");
   });
 
   it("키워드를 검색하면 해당 키워드가 포함된 영화 목록을 보여준다.", () => {
-    cy.get("input[name='search-bar']").type("고양이");
-    cy.get("#search-bar").submit();
-    cy.get(".item-list > li").each((li: HTMLElement) => {
+    cy.get("#search-input").type("고양이");
+    cy.wait(1000);
+    cy.get("#search-button").click();
+    cy.wait(1000);
+    cy.get(".item-list > movie-item > li").each((li: HTMLElement) => {
       expect(li).to.contain.text("고양이");
     });
   });
 
   it("로고를 클릭하면 처음 화면으로 이동한다.", () => {
+    cy.get("#search-input").type("고양이");
+    cy.wait(1000);
+    cy.get("#search-button").click();
+    cy.wait(1000);
     cy.get("#logo").click();
-    cy.get(".item-view > h2").should("contain.text", "지금 인기 있는 영화");
+    cy.get(".sub-title > h2").should("contain.text", "지금 인기 있는 영화");
+  });
+
+  it("별점을 3점 준다.", () => {
+    cy.get('ul.item-list movie-item:first-child').click();
+    cy.get('.rating-star:nth-child(3)').click();
+    cy.get('#rating-point').should("contain.text", "6");
   });
 });
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md
@@ -4,7 +4,7 @@
 - [x] 사용자가 더보기를 누르면 1페이지를 추가 요청한다.
   - [x] 사용자가 더보기를 누르면 더 많은 영화 목록을 보여준다.
 - [x] API의 끝 페이지에 도달하면 더보기 버튼을 화면에서 삭제한다.
-- [ ] 로딩중에는 스켈레톤 UI를 표시한다.
+- [x] 로딩중에는 스켈레톤 UI를 표시한다.
 - [x] 인기순으로 영화를 정렬한다.
 
 - [x] 사용자는 보고 싶은 영화를 검색할 수 있다.

diff --git a/index.html b/index.html
@@ -10,8 +10,11 @@
 
 <body>
   <div id="app">
-    <movie-header></movie-header>
+    <div id="movie-header">
+      <movie-header></movie-header>
+    </div>
     <movie-list id="movie-list"></movie-list>
+    <movie-modal id="movie-modal"></movie-modal>
   </div>
 </body>
 

diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "dotenv": "^16.0.3"
+    "dotenv": "^16.0.3",
+    "eslint-plugin-prettier": "^4.2.1"
   }
-}
+}
diff --git a/src/assets/star_empty.png b/src/assets/star_empty.png
diff --git a/src/components/Header/headerHandler.ts b/src/components/Header/headerHandler.ts
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
diff --git a/src/components/MovieList/index.ts b/src/components/MovieList/index.ts
diff --git a/src/components/MovieList/movieListHandler.ts b/src/components/MovieList/movieListHandler.ts
diff --git a/src/components/movie-header/Header.ts b/src/components/movie-header/Header.ts
@@ -0,0 +1,42 @@
+import { onClickLogo, onClickSearchButton, onClickSearchFormTrigger, searchInputEnterListener } from "./headerHandler";
+
+export default class Header extends HTMLElement {
+
+  constructor() {
+    super();
+    this.render();
+    onClickLogo();
+    onClickSearchFormTrigger();
+    onClickSearchButton();
+    searchInputEnterListener();
+  }
+
+  render() {
+    this.innerHTML = `
+    <header id="header" class="d-flex justify-content-between">
+      <div id="logo">
+        <h1><img id="logo" src="./assets/logo.png" alt="MovieList 로고" /></h1>
+      </div>
+
+      <div id="search-box" class="search-box d-flex justify-content-between">
+        <div id="search-form" class="search-box d-flex justify-content-between">
+          <input
+            id="search-input" 
+            type="text" 
+            placeholder="검색" 
+            name="search-bar" 
+            class=""
+          />
+          <button 
+            id="search-button" 
+            class="search-button"
+          >
+            검색
+          </button>
+        </div>
+        <button id="search-form-trigger" class="search-button">검색</button>
+      </div>
+    </header>
+    `;
+  }
+}
diff --git a/src/components/movie-header/headerHandler.ts b/src/components/movie-header/headerHandler.ts
@@ -0,0 +1,51 @@
+import { searchMovieByKeyword, updateMovies } from "../../domain/movies";
+import Store from "../../domain/Store";
+import { $ } from "../../utils/selector";
+
+export const onClickLogo = () => {
+  const store: Store = Store.getInstance();
+  $("#logo").addEventListener("click", function resetApp() {
+    store.resetMoviesAndPages();
+    store.setLastKeyword("");
+
+    updateMovies();
+  })
+};
+
+export const onClickSearchFormTrigger = () => {
+  $("#search-form-trigger").addEventListener("click", function openSearchForm() {
+    $('#logo').classList.add('display-none');
+    $('#search-form-trigger').remove();
+    ($('#search-box') as HTMLElement).style.width = '100%';
+    ($('#search-form') as HTMLElement).style.display = 'flex';
+    ($('#search-form') as HTMLElement).style.width = '100%';
+    ($('#search-input') as HTMLElement).style.width = '100%';
+  })
+}
+
+export const onClickSearchButton = () => {
+  $('#search-button').addEventListener('click', function submitKeyword() {
+    searchMoviesAndResetHeader();
+  });
+}
+
+export const searchInputEnterListener = () => {
+  const input = $('#search-input') as HTMLInputElement;
+  input.addEventListener("keydown", function submitKeyword(event) {
+    if (event.key === "Enter") {
+      searchMoviesAndResetHeader();
+    }
+  })
+}
+
+export const readSearchInputKeyword = () => {
+  const input = $('#search-input') as HTMLInputElement;
+  const keyword = input.value;
+  return keyword;
+}
+
+const searchMoviesAndResetHeader = () => {
+  const keyword = readSearchInputKeyword();
+  searchMovieByKeyword(keyword);
+  $('#movie-header').innerHTML = '<movie-header></movie-header>';
+}