Skip to content

Commit

Permalink
[1단계 - 영화 목록 불러오기] 헤일리(최혜림) 미션 제출합니다. (#102)
Browse files Browse the repository at this point in the history 
* init: 개발 환경 세팅

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* docs: 기능 구현 목록 작성

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: header 컴포넌트 작업

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: setAttribute 해주는 메서드에서 create 까지 해주게 업그레이드

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* refactor: 불필요한 as 명시 삭제

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: movie list, card 컴포넌트 작업

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: 이벤트 리스너 추가

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: api 연결 및 비동기 작업

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: debounce func 기능 추가

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* chore: 이미지 url config 추가

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: 검색 결과 없음 컴포넌트 작업

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: 아이템 추가시 스크롤 고정 작업

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: skeleton UI 추가

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: 에러 UI 작업

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* build: set main.yml

* build: 영화 리뷰 웹 배포

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* build: 영화 리뷰 배포

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* build: 영화 리뷰 재배포

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* refactor: 함수 분리 작업 및 리팩토링

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* chore: eslint 설정 변경

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* refactor: 사용되지 않는 xss 방지 기능 삭제

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* refactor: api max number 500 세팅

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: 이미지 없을 때 `no Img` 사진으로 대체

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat: 헤더 클릭 후 리프래시 중 검색창 초기화

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* chore: 내부 텍스트 변경

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* feat:  button 출력 유무 조건 변경

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* refactor: list reset 조건 추가

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* init: cypress 세팅

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* test: 테스트 fixtures 추가

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* test: 더보기 버튼 테스트

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* test: 검색창 기능 테스트

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* refactor: 자주 사용하는 테스트 함수 분리

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* build: 영화 미션 웹 재배포

Co-Authored-By: badahertz52 <badahertz52@gmail.com>

* 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 <badahertz52@gmail.com>
  • Loading branch information
@healim01 @BadaHertz52
healim01 and BadaHertz52 authored Mar 24, 2024
1 parent 82002bc commit afaddd2
Show file tree
Hide file tree
Showing 56 changed files with 8,067 additions and 1,639 deletions.
2 changes: 2 additions & 0 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
cypress
webpack*
84 changes: 80 additions & 4 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -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"]
}
26 changes: 26 additions & 0 deletions .github/workflows/main.yml
View file
Original file line number Diff line number Diff line change
@@ -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 }}

1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
node_modules
.env
49 changes: 48 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -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를 통해 데이터를 불어올때, 다음 검색 대상이 존재하는지 여부에 따라 더보기 버튼을 숨기거나 보여줌
9 changes: 9 additions & 0 deletions cypress.config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { defineConfig } from "cypress";

export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
121 changes: 121 additions & 0 deletions cypress/e2e/more-button.cy.js
View file
Original file line number Diff line number Diff line change
@@ -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");
});
});
});
});
});
52 changes: 52 additions & 0 deletions cypress/e2e/search-box.cy.js
View file
Original file line number Diff line number Diff line change
@@ -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);
});
});
});
});
});
Loading

0 comments on commit afaddd2

Please sign in to comment.