[2단계 - 상세 정보 & UI/UX 개선하기] 찰리 미션 제출합니다.

.prettierrc

@@ -1,8 +1,8 @@
 {
-  "endOfLine": "auto",
-  "printWidth": 120,
-  "tabWidth": 4,
-  "singleQuote": true,
-  "trailingComma": "all",
-  "semi": false
+    "endOfLine": "auto",
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "semi": true
 }

README.md

@@ -1,32 +1,51 @@
 # javascript-movie-review
 
-FE 레벨1 영화 리뷰 미션
+FE 레벨1 영화 리뷰 미션 step2
 
 ## 요구사항 명세서
 
-### 영화
+## 영화 상세정보 조회 모달
 
-- [x] 영화 리스트를 불러온다.
-- [x] 영화 섹션 하나에 포스터, 평점, 영화 제목을 띄운다.
-- [x] 영화 목록을 띄울 때 20개씩 띄운다.
-- [x] 검색어에 따른 필러링된 영화 리스트를 불러온다.
+### 이벤트
 
-- [x] 영화를 불러오는 도중에는 스켈레톤 UI를 보여준다.
-- [x] 포스터 클릭 시 백그라운드 영역에 해당 영화 포스터를 보여준다.
+- [x] 클릭시 모달 창 띄우기
+- [x] 우측 상단 x버튼 혹은 모달 밖 화면 클릭 시 모달 창 끄기
 
-### 더 보기 기능
+### UI
 
-- [x] '더보기' 버튼을 누르면 영화 20개를 추가로 띄운다. (띄운 후 아래 '더보기' 버튼 또 생김)
+- [x] 포스터 클릭시 상세정보 모달 띄우기
+- [x] 포스터 사진 (poster_path)
+- [x] 제목 (title)
+- [x] 평균 별점 (vote_average)
+- [x] 내 별점
+- [x] 줄거리 (overview)
 
-### 검색 기능
+### 내 별점
 
-- [x] 검색란에 영화 제목을 입력해서 검색 버튼, Enter키를 눌러 필터링된 영화 20개를 띄운다.
-- [x] 검색 결과가 존재하지 않으면 "검색 결과가 없습니다" 텍스트를 띄운다.
-- [x] 검색 결과 화면에서 검색란에 검색어가 존재하지 않은 상태에서 검색버튼을 누르면 원상복귀.
+- local storage 사용
 
-## 테스트 시나리오
+* [x] 사용자는 영화에 대해 별점을 줄 수 있으며 새로고침하더라도 사용자가 남긴 별점은 유지되어야 한다.
+* [x] 별점은 5개로 구성되어 있으며 한 개당 2점이며 1점 단위는 고려하지 않는다.
+* [x] 2점: 최악이예요
+* [x] 4점: 별로예요
+* [x] 6점: 보통이에요
+* [x] 8점: 재미있어요
+* [x] 10점: 명작이에요
 
-- [x] '더보기' 버튼을 눌러 페이지를 확장시키면 영화 개수가 20개씩 늘어난다.
-- [x] 검색란에 검색어를 입력하고 검색 버튼, Enter키를 누르면 필터링된 영화 목록을 보여준다.
-- [x] 검색란에 검색어를 입력해도 결과가 존재하지 않다면 "검색 결과가 없습니다" 텍스트를 띄운다.
-- [x] 포스터 클릭시 백그라운드에 해당 포스터의 정보가 띄워진다.
+## 무한 스크롤
+
+- [x] 더보기 버튼 대신 무한스크롤 적용
+
+## 반응형 웹
+
+- 분기별로 잘라서 3가지 타입으로 진행
+
+- [x] 데스크톱
+- [x] 태블릿
+- [x] 모바일
+
+## E2E 테스트
+
+- [x] 포스터를 클릭하면 모달창이 뜬다.
+- [x] 내 별점을 클릭하면 별점이 적용이 된다.
+- [x] 스크롤을 끝까지 내리면 다음 영화 리스트가 나온다.

cypress/e2e/clickTest.cy.ts

@@ -1,57 +1,57 @@
-describe('click poster test', () => {
+describe('포스터 클릭 테스트', () => {
     beforeEach(() => {
-        cy.intercept('GET', '**/movie/popular**', { fixture: 'popularMovies.json' })
-        cy.intercept('GET', '**/search/movie**', { fixture: 'searchMovies.json' })
-    })
+        cy.intercept('GET', '**/movie/popular**', { fixture: 'popularMovies.json' });
+        cy.intercept('GET', '**/search/movie**', { fixture: 'searchMovies.json' });
+    });
 
     it('인기순 영화 페이지에서 두 번째 포스터를 클릭하면 백그라운드에 해당 영화 정보가 띄워진다.', () => {
-        cy.visit('https://javascript-movie-review-dvlk.vercel.app/')
+        cy.visit('http://localhost:5173');
         cy.get('.thumbnail-list li')
             .eq(1)
             .find('#title')
             .invoke('text')
             .then((defaultTitle) => {
-                cy.get('.thumbnail-list li').eq(1).click()
+                cy.get('.thumbnail-list li').eq(1).click();
                 cy.get('.top-rated-movie')
                     .find('.title')
                     .invoke('text')
                     .should((searchTitle) => {
-                        expect(searchTitle.trim()).to.equal(defaultTitle.trim())
-                    })
-            })
-    })
+                        expect(searchTitle.trim()).to.equal(defaultTitle.trim());
+                    });
+            });
+    });
 
     it('인기순 영화 페이지에서 다섯 번째 포스터를 클릭하면 백그라운드에 해당 영화 정보가 띄워진다.', () => {
-        cy.visit('https://javascript-movie-review-dvlk.vercel.app/')
+        cy.visit('http://localhost:5173');
         cy.get('.thumbnail-list li')
             .eq(6)
             .find('#title')
             .invoke('text')
             .then((defaultTitle) => {
-                cy.get('.thumbnail-list li').eq(6).click()
+                cy.get('.thumbnail-list li').eq(6).click();
                 cy.get('.top-rated-movie')
                     .find('.title')
                     .invoke('text')
                     .should((searchTitle) => {
-                        expect(searchTitle.trim()).to.equal(defaultTitle.trim())
-                    })
-            })
-    })
+                        expect(searchTitle.trim()).to.equal(defaultTitle.trim());
+                    });
+            });
+    });
 
     it('인기순 영화 페이지에서 열한 번째 포스터를 클릭하면 백그라운드에 해당 영화 정보가 띄워진다.', () => {
-        cy.visit('https://javascript-movie-review-dvlk.vercel.app/')
+        cy.visit('http://localhost:5173');
         cy.get('.thumbnail-list li')
             .eq(12)
             .find('#title')
             .invoke('text')
             .then((defaultTitle) => {
-                cy.get('.thumbnail-list li').eq(12).click()
+                cy.get('.thumbnail-list li').eq(12).click();
                 cy.get('.top-rated-movie')
                     .find('.title')
                     .invoke('text')
                     .should((searchTitle) => {
-                        expect(searchTitle.trim()).to.equal(defaultTitle.trim())
-                    })
-            })
-    })
-})
+                        expect(searchTitle.trim()).to.equal(defaultTitle.trim());
+                    });
+            });
+    });
+});

cypress/e2e/modalTest.cy.ts

@@ -0,0 +1,33 @@
+describe('모달 테스트', () => {
+    beforeEach(() => {
+        cy.intercept('GET', '**/movie/*', { fixture: 'infoModal.json' });
+        cy.intercept('GET', '**/movie/popular**', { fixture: 'popularMovies.json' });
+        cy.intercept('GET', '**/search/movie**', { fixture: 'searchMovies.json' });
+    });
+
+    it('인기순 영화 페이지에서 두 번째 포스터를 클릭하면 영화 상세정보 모달이 띄워진다.', () => {
+        cy.visit('http://localhost:5173');
+        cy.get('.thumbnail-list li')
+            .eq(1)
+            .find('#title')
+            .invoke('text')
+            .then((listTitle) => {
+                cy.get('.thumbnail-list li').eq(1).click();
+                cy.get('#modalBackground').should('have.class', 'active');
+                cy.get('#modalTitle')
+                    .invoke('text')
+                    .should((modalTitle) => {
+                        expect(modalTitle.trim()).to.equal(listTitle.trim());
+                    });
+            });
+    });
+
+    it('검색 결과에서 포스터를 클릭하면 모달이 열린다.', () => {
+        cy.visit('http://localhost:5173');
+        cy.get('.search-bar').type('스파이더맨');
+        cy.get('.search-btn').click();
+        cy.get('.thumbnail-list li').first().click();
+        cy.get('#modalBackground').should('have.class', 'active');
+        cy.get('#modalTitle').should('not.be.empty');
+    });
+});

cypress/e2e/moreBtnTest.cy.ts

@@ -1,23 +1,90 @@
-describe('more btn test', () => {
+describe('무한스크롤 테스트', () => {
     beforeEach(() => {
-        cy.intercept('GET', '**/movie/popular**', { fixture: 'popularMovies.json' })
-        cy.intercept('GET', '**/search/movie**', { fixture: 'searchMovies.json' })
-    })
-    it('페이지 접속 후 더보기 버튼을 1번 누르면 영화 개수가 40개가 된다.', () => {
-        cy.visit('https://javascript-movie-review-dvlk.vercel.app/')
-
-        cy.get('.item').should('have.length', 20)
-
-        cy.get('.display-more-btn').click()
-
-        cy.get('.item').should('have.length', 40)
-    })
-    it('페이지 접속 후 더보기 버튼을 10번 누르면 영화 개수가 220개가 된다.', () => {
-        cy.visit('https://javascript-movie-review-dvlk.vercel.app/')
-        cy.get('.item').should('have.length', 20)
-        for (let i = 0; i < 10; i++) {
-            cy.get('.display-more-btn').click()
-        }
-        cy.get('.item').should('have.length', 220)
-    })
-})
+        cy.intercept('GET', '**/movie/popular**', { fixture: 'popularMovies.json' });
+    });
+    it('스크롤을 내리면 추가 영화 목록을 불러온다.', () => {
+        cy.fixture('popularMovies.json').then((data) => {
+            const pageSize = data.results.length;
+            const scrollCount = 20;
+
+            cy.visit('http://localhost:5173');
+
+            cy.get('.thumbnail-list li').should('have.length', pageSize);
+
+            for (let i = 0; i < scrollCount; i++) {
+                cy.get('.thumbnail-list li').then(($items) => {
+                    const beforeCount = $items.length;
+
+                    cy.get('.thumbnail-list li').last().scrollIntoView();
+
+                    cy.get('.thumbnail-list li').should('have.length.greaterThan', beforeCount);
+                });
+            }
+        });
+    });
+    // it('스크롤을 내리면 추가 영화 목록을 불러온다.', () => {
+    //     cy.visit('http://localhost:5173');
+
+    //     cy.get('.thumbnail-list li').should('have.length', 20);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 40);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 60);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 80);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 100);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 120);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 140);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 160);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 180);
+
+    //     cy.get('.thumbnail-list li').last().scrollIntoView();
+
+    //     cy.get('.thumbnail-list li').should('have.length', 200);
+    // });
+});
+
+// describe('more btn test', () => {
+//     beforeEach(() => {
+//         cy.intercept('GET', '**/movie/popular**', { fixture: 'popularMovies.json' })
+//         cy.intercept('GET', '**/search/movie**', { fixture: 'searchMovies.json' })
+//     })
+//     it('페이지 접속 후 더보기 버튼을 1번 누르면 영화 개수가 40개가 된다.', () => {
+//         cy.visit('https://javascript-movie-review-dvlk.vercel.app/')
+
+//         cy.get('.item').should('have.length', 20)
+
+//         cy.get('.display-more-btn').click()
+
+//         cy.get('.item').should('have.length', 40)
+//     })
+//     it('페이지 접속 후 더보기 버튼을 10번 누르면 영화 개수가 220개가 된다.', () => {
+//         cy.visit('https://javascript-movie-review-dvlk.vercel.app/')
+//         cy.get('.item').should('have.length', 20)
+//         for (let i = 0; i < 10; i++) {
+//             cy.get('.display-more-btn').click()
+//         }
+//         cy.get('.item').should('have.length', 220)
+//     })
+// })