[1단계 - 영화 목록 불러오기] 헤일리(최혜림) 미션 제출합니다. (#102)

* init: 개발 환경 세팅 Co-Authored-By: badahertz52 <[email protected]> * docs: 기능 구현 목록 작성 Co-Authored-By: badahertz52 <[email protected]> * feat: header 컴포넌트 작업 Co-Authored-By: badahertz52 <[email protected]> * feat: setAttribute 해주는 메서드에서 create 까지 해주게 업그레이드 Co-Authored-By: badahertz52 <[email protected]> * refactor: 불필요한 as 명시 삭제 Co-Authored-By: badahertz52 <[email protected]> * feat: movie list, card 컴포넌트 작업 Co-Authored-By: badahertz52 <[email protected]> * feat: 이벤트 리스너 추가 Co-Authored-By: badahertz52 <[email protected]> * feat: api 연결 및 비동기 작업 Co-Authored-By: badahertz52 <[email protected]> * feat: debounce func 기능 추가 Co-Authored-By: badahertz52 <[email protected]> * chore: 이미지 url config 추가 Co-Authored-By: badahertz52 <[email protected]> * feat: 검색 결과 없음 컴포넌트 작업 Co-Authored-By: badahertz52 <[email protected]> * feat: 아이템 추가시 스크롤 고정 작업 Co-Authored-By: badahertz52 <[email protected]> * feat: skeleton UI 추가 Co-Authored-By: badahertz52 <[email protected]> * feat: 에러 UI 작업 Co-Authored-By: badahertz52 <[email protected]> * build: set main.yml * build: 영화 리뷰 웹 배포 Co-Authored-By: badahertz52 <[email protected]> * build: 영화 리뷰 배포 Co-Authored-By: badahertz52 <[email protected]> * build: 영화 리뷰 재배포 Co-Authored-By: badahertz52 <[email protected]> * refactor: 함수 분리 작업 및 리팩토링 Co-Authored-By: badahertz52 <[email protected]> * chore: eslint 설정 변경 Co-Authored-By: badahertz52 <[email protected]> * refactor: 사용되지 않는 xss 방지 기능 삭제 Co-Authored-By: badahertz52 <[email protected]> * refactor: api max number 500 세팅 Co-Authored-By: badahertz52 <[email protected]> * feat: 이미지 없을 때 `no Img` 사진으로 대체 Co-Authored-By: badahertz52 <[email protected]> * feat: 헤더 클릭 후 리프래시 중 검색창 초기화 Co-Authored-By: badahertz52 <[email protected]> * chore: 내부 텍스트 변경 Co-Authored-By: badahertz52 <[email protected]> * feat: button 출력 유무 조건 변경 Co-Authored-By: badahertz52 <[email protected]> * refactor: list reset 조건 추가 Co-Authored-By: badahertz52 <[email protected]> * init: cypress 세팅 Co-Authored-By: badahertz52 <[email protected]> * test: 테스트 fixtures 추가 Co-Authored-By: badahertz52 <[email protected]> * test: 더보기 버튼 테스트 Co-Authored-By: badahertz52 <[email protected]> * test: 검색창 기능 테스트 Co-Authored-By: badahertz52 <[email protected]> * refactor: 자주 사용하는 테스트 함수 분리 Co-Authored-By: badahertz52 <[email protected]> * build: 영화 미션 웹 재배포 Co-Authored-By: badahertz52 <[email protected]> * docs: README.md 업데이트 * refactor: 오타 수정 * refactor: test 코드 리팩토링 * refactor: 텍스트 상수처리 * refactor: h2 className `list-title` 로 추가 * chore: 함수명 변경 * feat: 사진 로딩 전 스켈래톤 이미지로 대체 작업 * refactor: error view 랜더링 작업 변경 * style: 뮤비 스코어 align 맞추기 * chore: 사용하지 않는 주석 삭제 * refactor: debounce 시간 추가 * build: 1단계 피드백 반영 후 재 배포 --------- Co-authored-by: badahertz52 <[email protected]>
woowacourse · Mar 24, 2024 · afaddd2 · afaddd2
1 parent 82002bc
commit afaddd2
Show file tree

Hide file tree

Showing 56 changed files with 8,067 additions and 1,639 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+cypress
+webpack*
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,87 @@
 {
-  "rules": {},
+  "rules": {
+    "import/extensions": ["off"],
+    "no-await-in-loop": "off",
+    "no-constant-condition": "off",
+    "max-lines-per-function": ["error", 12],
+    "max-depth": ["error", 1],
+    "no-console": "off",
+    "class-methods-use-this": "off",
+    "spaced-comment": "off",
+    "lines-between-class-members": [
+      "error",
+      "always",
+      { "exceptAfterSingleLine": true },
+    ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": false,
+        "allowSeparatedGroups": true,
+      },
+    ],
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        "groups": [
+          ["builtin", "external"],
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+        ],
+        "pathGroups": [
+          {
+            "pattern": "next",
+            "group": "builtin",
+          },
+          {
+            "pattern": "react",
+            "group": "builtin",
+          },
+          {
+            "pattern": "@MyDesignSystem/**",
+            "group": "internal",
+          },
+          {
+            "pattern": "src/**",
+            "group": "internal",
+          },
+        ],
+        "pathGroupsExcludedImportTypes": ["src/**", "@MyDesignSystem/**"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true,
+        },
+      },
+    ],
+  },
   "env": {
     "es6": true,
-    "node": true
+    "node": true,
   },
   "parserOptions": {
-    "ecmaVersion": "latest"
+    "ecmaVersion": "latest",
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "prettier",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+    "import/resolver": {
+      "typescript": {},
+    },
   },
-  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
 }
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,26 @@
+name: Automatically Deployment
+
+on: [push]
+
+jobs:
+  deployment:
+    runs-on: ubuntu-latest
+
+    name: Deploying to surge
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Setting .env
+        run: |
+          echo "TMDB_API_KEY=$TMDB_API_KEY" >> .env
+          echo "TMDB_ACCESS_TOKEN=$TMDB_ACCESS_TOKEN" >> .env
+          cat .env
+          
+        env:
+          TMDB_API_KEY: ${{ secrets.TMDB_API_KEY }}
+          TMDB_ACCESS_TOKEN: ${{ secrets.TMDB_ACCESS_TOKEN }}
+
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules
+.env
diff --git a/README.md b/README.md
@@ -1,3 +1,50 @@
 # javascript-movie-review
 
-FE 레벨1 영화관 미션
+FE 레벨1 영화관 미션 
+
+<br>
+
+## 시연 영상
+
+![ezgif com-video-to-gif-converter](https://github.com/healim01/javascript-movie-review/assets/74346290/49546f9e-7206-4200-bd30-6c856b355ee4)
+
+<br>
+
+## 모듈 구조 
+![모듈구조](https://github.com/healim01/javascript-movie-review/assets/74346290/f0868b16-e84d-478d-b8d1-b427d79ce086)
+
+<br>
+
+## 기능 목록
+
+### 도메인 로직
+
+#### APIClient
+
+- api 데이터 받아오기
+- 더보기 버튼 숨길지 보일지 결정
+
+#### DataStateStore
+
+- 데이터 관리
+- 스택으로 관리
+- 이전 데이터와 합쳐짐
+
+### 영화 리스트 구현
+
+- DataStateStore의 데이터를 받아와서 영화 리스트를 보여줌
+- 스크롤: 스롤링 기능
+
+### 영화 검색 기능
+
+#### 검색 입력창
+
+- enter 키, 검색 아이콘 클릭 시 검색 진행
+
+#### 검색 결과에 따른 영화 리스트
+
+- 검색 결과에 따라 영화 리스트와 타이틀 변경
+
+### 더보기 버튼
+
+- api를 통해 데이터를 불어올때, 다음 검색 대상이 존재하는지 여부에 따라 더보기 버튼을 숨기거나 보여줌
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/cypress/e2e/more-button.cy.js b/cypress/e2e/more-button.cy.js
@@ -0,0 +1,121 @@
+import { getPopularURL, getSearchURL } from "../utils/createURL";
+
+describe("더보기 버튼 테스트", () => {
+  describe("인기 영화 리스트안의 더보기 버튼 테스트", () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: "GET",
+          url: getPopularURL(1),
+        },
+        { fixture: "movie-popular-page1.json" },
+      ).as("getPopularMovies1");
+
+      cy.visitMainPage();
+
+      cy.wait("@getPopularMovies1").then((intercept) => {
+        cy.get("#more-button").click();
+      });
+    });
+
+    it("인기 영화 리스트에서 더보기 버튼을 눌렀을 경우,인기 영화 리스트에 20개 이하의 영화가 추가된다.", () => {
+      cy.intercept(
+        {
+          method: "GET",
+          url: getPopularURL(2),
+        },
+        { fixture: "movie-popular-page2.json" },
+      ).as("getPopularMovies2");
+
+      cy.wait("@getPopularMovies2").then((intercept) => {
+        cy.get(".item-view").within(() => {
+          cy.get(".item-list").then(($elements) => {
+            expect($elements.length).to.be.at.most(40);
+          });
+        });
+      });
+    });
+
+    it("인기 영화 리스트에서 더보기 버튼을 눌렀을 경우, 더 이상 불러온 영화 데이터가 없으면 더보기 버튼은 사라진다.", () => {
+      cy.intercept(
+        {
+          method: "GET",
+          url: getPopularURL(2),
+        },
+        { fixture: "movie-popular-last-page.json" },
+      ).as("getPopularMoviesLast");
+
+      cy.wait("@getPopularMoviesLast").then((intercept) => {
+        cy.get(".item-view").within(() => {
+          cy.get("#more-button").should("not.be.visible");
+        });
+      });
+    });
+  });
+
+  describe("영화 검색 리스트안의 더보기 버튼 테스트", () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: "GET",
+          url: getPopularURL(1),
+        },
+        { fixture: "movie-popular-page1.json" },
+      ).as("getPopularMovies1");
+
+      cy.intercept(
+        {
+          method: "GET",
+          url: getSearchURL(1),
+        },
+        { fixture: "movie-search-page1.json" },
+      ).as("getSearchMovies1");
+
+      cy.visitMainPage();
+
+      cy.wait("@getPopularMovies1").then((intercept) => {
+        const TITLE = "행복";
+        cy.get("#search-input").type(TITLE);
+        cy.get(".search-button").click();
+
+        cy.wait("@getSearchMovies1").then((intercept) => {
+          cy.get("#more-button").click();
+        });
+      });
+    });
+
+    it("영화 검색 리스트에서 더보기 버튼을 눌렀을 경우, 영화 검색 리스트에 20개 이하의 영화가 추가된다.", () => {
+      cy.intercept(
+        {
+          method: "GET",
+          url: getSearchURL(2),
+        },
+        { fixture: "movie-search-page2.json" },
+      ).as("getSearchMovies2");
+
+      cy.wait("@getSearchMovies2").then((intercept) => {
+        cy.get(".item-view").within(() => {
+          cy.get(".item-list").then(($elements) => {
+            expect($elements.length).to.be.at.most(40);
+          });
+        });
+      });
+    });
+
+    it.only("영화 검색 리스트에서 더보기 버튼을 눌렀을 경우, 더 이상 불러온 영화 데이터가 없으면 더보기 버튼은 사라진다.", () => {
+      cy.intercept(
+        {
+          method: "GET",
+          url: getSearchURL(2),
+        },
+        { fixture: "movie-search-last-page.json" },
+      ).as("getSearchMoviesLast");
+
+      cy.wait("@getSearchMovies2").then((intercept) => {
+        cy.get(".item-view").within(() => {
+          cy.get("#more-button").should("not.be.visible");
+        });
+      });
+    });
+  });
+});
diff --git a/cypress/e2e/search-box.cy.js b/cypress/e2e/search-box.cy.js
@@ -0,0 +1,52 @@
+import { getPopularURL, getSearchURL } from "../utils/createURL";
+
+describe("검색창 테스트", () => {
+  beforeEach(() => {
+    cy.intercept(
+      {
+        method: "GET",
+        url: getPopularURL(1),
+      },
+      { fixture: "movie-popular-page1.json" },
+    ).as("getPopularMovies1");
+
+    cy.intercept(
+      {
+        method: "GET",
+        url: getSearchURL(1),
+      },
+      { fixture: "movie-search-page1.json" },
+    ).as("getSearchMovies1");
+
+    cy.visitMainPage();
+  });
+
+  it("검색창에 영화 제목을 입력 후 '검색 아이콘 클릭'하면 검색 데이터가 나온다.", () => {
+    // API 호출
+    cy.wait("@getPopularMovies1").then((intercept) => {
+      const TITLE = "행복";
+      cy.get("#search-input").type(TITLE);
+      cy.get(".search-button").click();
+
+      cy.wait("@getSearchMovies1").then((intercept) => {
+        cy.get(".item-view").within(() => {
+          cy.get(".list-title").should("contain.text", TITLE);
+        });
+      });
+    });
+  });
+  // TODO: 엔터 누르는 이벤트가 cypress 에 적용 되지 않음
+  it.skip("검색창에 영화 제목을 입력 후 '엔터를 누르면' 검색 데이터가 나온다.", () => {
+    // API 호출
+    cy.wait("@getPopularMovies1").then((intercept) => {
+      const TITLE = "행복";
+      cy.get("#search-input").type(TITLE).type("{enter}");
+
+      cy.wait("@getSearchMovies1").then((intercept) => {
+        cy.get(".item-view").within(() => {
+          cy.get(".list-title").should("contain.text", TITLE);
+        });
+      });
+    });
+  });
+});