-
Notifications
You must be signed in to change notification settings - Fork 155
[2단계 - 영화 목록 불러오기] 피트 미션 제출합니다. #294
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: gamjaismine02
Are you sure you want to change the base?
Changes from all commits
72104b8
0bf6f7f
bb5adc5
2eb8cf7
0438b33
8620a14
f9b62aa
3bf96cb
8d395d3
5485d2f
6f080aa
edc1c22
e44c031
5f77764
66812b8
d08842f
e5397fc
ae2976d
935fe32
6bb8e4a
480ecdc
8bd5001
72b7f52
980a235
9de06c3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -62,12 +62,35 @@ describe("에러 메시지 흐름", () => { | |
| cy.visit("http://localhost:5173"); | ||
| cy.wait("@getPopularMovies"); | ||
|
|
||
| cy.get(".display-more-btn").click(); | ||
| cy.scrollTo("bottom"); | ||
| cy.wait("@getPopularMovies"); | ||
|
|
||
| cy.get(".error-text").should( | ||
| "contain.text", | ||
| "영화를 추가로 불러오지 못했습니다.", | ||
| ); | ||
| }); | ||
| it("모달을 띄울 시 영화 상세 정보 요청이 실패하면 상세 정보 에러 메시지를 보여준다.", () => { | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. P3. 사람마다 상이할 수 있으나 에러 케이스만 모아두는 것 보다, 각 페이지별 시나리오로 보아두는게 더 좋을 것 같아요. 현재는 에러 시나리오가 1~2개이지만 이후 에러 케이스가 늘어나면 각 페이지에서 어떤 에러가 발생 할 수 있는지 확인이 어려울 가능성이 높아요.
|
||
| mockPopularMovies({ | ||
| 1: createMoviePage("인기 영화", 1), | ||
| }); | ||
|
|
||
| cy.intercept("GET", /\/movie\/\d+\?/, { | ||
| statusCode: 500, | ||
| body: {}, | ||
| }).as("getMovieDetail"); | ||
|
|
||
| cy.visit("http://localhost:5173"); | ||
| cy.wait("@getPopularMovies"); | ||
|
|
||
| cy.get(".thumbnail-list li").first().find(".thumbnail").click(); | ||
| cy.wait("@getMovieDetail"); | ||
|
|
||
| cy.get(".error-text").should( | ||
| "contain.text", | ||
| "영화 상세 정보를 불러오지 못했습니다.", | ||
| ); | ||
|
|
||
| cy.get(".modal-background").should("not.have.class", "active"); | ||
| }); | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { createMovieDetail, mockMovieDetails } from "../support/modalApi"; | ||
| import { createMoviePage, mockPopularMovies } from "../support/movieApi"; | ||
|
|
||
| describe("세부정보 모달 & 별점 기능 흐름", () => { | ||
| beforeEach(() => { | ||
| mockPopularMovies({ | ||
| 1: createMoviePage("인기 영화", 1), | ||
| }); | ||
|
|
||
| mockMovieDetails({ | ||
| 5: createMovieDetail(5, "인기 영화 5"), | ||
| }); | ||
|
|
||
| cy.visit("http://localhost:5173"); | ||
| cy.wait("@getPopularMovies"); | ||
| }); | ||
|
|
||
| it("영화 포스터 또는 제목을 클릭하면 세부 정보 모달을 띄울 수 있고, 별점을 매길 수 있다.", () => { | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. P2; 우선 테스트 시나리오를 유저 행동 기반으로 작성한 점은 정말 좋다고 생각해요. 만약 별점을 매기기 위해 모달을 반드시 띄워야 했다면 beforEach 등으로 모달을 띄우는 과정을 기본으로 설정해둬도 좋을 것 같아요. |
||
| cy.get(".thumbnail-list li").eq(4).find(".thumbnail").click(); | ||
| cy.wait("@getMovieDetail"); | ||
|
|
||
| cy.get(".modal-background").should("have.class", "active"); | ||
| cy.get(".movie-detail h2").should("have.text", "인기 영화 5"); | ||
| cy.get(".detail").should("contain.text", "인기 영화 5 줄거리"); | ||
|
|
||
| cy.get(".rate-description").should("have.text", "별점 평가 전"); | ||
|
|
||
| cy.get('.star-container .star[value="4"]').click(); | ||
|
|
||
| cy.get(".rate-description").should("have.text", "재미있어요"); | ||
| cy.get(".rate-percentage").should("have.text", "(8/10)"); | ||
| }); | ||
|
|
||
| it("닫기 버튼 또는 ESC키를 눌러 모달을 닫을 수 있고, 새로고침해도 사용자가 매긴 별점이 유지된다.", () => { | ||
| cy.get(".thumbnail-list li").eq(4).find(".thumbnail").click(); | ||
| cy.wait("@getMovieDetail"); | ||
|
|
||
| cy.get('.star-container .star[value="4"]').click(); | ||
|
|
||
| cy.get(".close-modal").click(); | ||
| cy.get(".modal-background").should("not.have.class", "active"); | ||
|
|
||
| cy.get(".thumbnail-list li").eq(4).find(".thumbnail").click(); | ||
| cy.wait("@getMovieDetail"); | ||
|
|
||
| cy.get(".rate-description").should("have.text", "재미있어요"); | ||
| cy.get(".rate-percentage").should("have.text", "(8/10)"); | ||
|
|
||
|
Comment on lines
+34
to
+48
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 테스트 시나리오 이름과 검증 내용이 불일치합니다. 케이스명은 “새로고침해도 별점 유지”인데, 본문에는 실제 🤖 Prompt for AI Agents |
||
| cy.get("body").type("{esc}"); | ||
| cy.get(".modal-background").should("not.have.class", "active"); | ||
| }); | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { MockMovieDetail } from "./types"; | ||
|
|
||
| export const createMovieDetail = ( | ||
| id: number, | ||
| title: string, | ||
| ): MockMovieDetail => ({ | ||
| id, | ||
| title, | ||
| poster_path: "/test-poster.jpg", | ||
| backdrop_path: "/test-backdrop.jpg", | ||
| vote_average: 8.5, | ||
| overview: `${title} 줄거리`, | ||
| release_date: "2024-01-01", | ||
| genres: [{ name: "드라마" }], | ||
| }); | ||
|
|
||
| export const mockMovieDetails = ( | ||
| movieDetails: Record<number, MockMovieDetail>, | ||
| ) => { | ||
| cy.intercept("GET", /\/movie\/\d+\?/, (req) => { | ||
| const id = Number(req.url.split("/movie/")[1].split("?")[0]); | ||
|
|
||
| req.reply({ | ||
| statusCode: 200, | ||
| body: movieDetails[id], | ||
| }); | ||
|
Comment on lines
+20
to
+26
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 누락된 상세 mock을 200 응답으로 돌려주지 않는 편이 좋습니다. 지금은 🤖 Prompt for AI Agents |
||
| }).as("getMovieDetail"); | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export type MockMovie = { | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. P2; 실제 API의 응답을 MOCK 데이터로 활용할 것 같은데요. 별도의 MockMovie 타입을 만드는 이유가 있을까요? |
||
| id: number; | ||
| title: string; | ||
| poster_path: string; | ||
| backdrop_path: string; | ||
| vote_average: number; | ||
| }; | ||
|
|
||
| export type MockMovieDetail = MockMovie & { | ||
| overview: string; | ||
| release_date: string; | ||
| genres: { name: string }[]; | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,12 +10,31 @@ | |
| <body> | ||
| <div id="app"> | ||
| <header> | ||
| <div class="search-container"> | ||
| <input class="search-bar" placeholder="검색어를 입력하세요" /> | ||
| <button class="search-btn">🔍</button> | ||
| <div class="background-container"> | ||
| <div class="overlay" aria-hidden="true"> | ||
| <img alt="영화 이미지" /> | ||
| </div> | ||
| <div class="top-rated-container"> | ||
| <div class="top-rated-movie"> | ||
| <div class="rate"> | ||
| <img src="./templates/images/star_empty.png" class="star" /> | ||
| <span class="rate-value">0</span> | ||
| </div> | ||
| <div class="title"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="background-container"></div> | ||
| </header> | ||
| <nav> | ||
| <div class="logo-container"> | ||
| <img src="./templates/images/logo.png" alt="MovieList" /> | ||
| <div class="search-container"> | ||
| <input class="search-bar" placeholder="검색어를 입력하세요" /> | ||
| <button class="search-btn">🔍</button> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <div class="container"> | ||
| <main> | ||
| <section> | ||
|
|
@@ -28,12 +47,11 @@ | |
| /> | ||
| <p class="error-text"></p> | ||
| </div> | ||
|
|
||
| <ul class="thumbnail-list"></ul> | ||
| </section> | ||
| <div class="btn-container"> | ||
| <!-- <div class="btn-container"> | ||
| <button type="button" class="display-more-btn">더 보기</button> | ||
| </div> | ||
| </div> --> | ||
| </main> | ||
| </div> | ||
|
|
||
|
|
@@ -42,6 +60,70 @@ | |
| <p><img src="./templates/images/woowacourse_logo.png" width="180" /></p> | ||
| </footer> | ||
| </div> | ||
|
|
||
| <div class="modal-background" id="modalBackground"> | ||
| <div class="modal"> | ||
| <button class="close-modal" id="closeModal"> | ||
| <img src="./templates/images/modal_button_close.png" /> | ||
| </button> | ||
|
Comment on lines
+64
to
+68
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 모달에 dialog semantics와 닫기 버튼 이름이 빠져 있습니다. 현재 마크업만 보면 보조기기는 이 레이어를 모달 대화상자로 인지하기 어렵고, 닫기 버튼도 이미지뿐이라 용도를 제대로 읽어주지 못할 가능성이 큽니다. 새 핵심 UI인 만큼 🤖 Prompt for AI Agents |
||
| <div class="modal-container"> | ||
| <div class="modal-image"> | ||
| <img | ||
| src="https://image.tmdb.org/t/p/original//pmemGuhr450DK8GiTT44mgwWCP7.jpg" | ||
| /> | ||
| </div> | ||
| <div class="modal-description"> | ||
| <div class="movie-detail"> | ||
| <h2></h2> | ||
| <p class="category"></p> | ||
| <div class="rate"> | ||
| <span>평균 </span> | ||
| <img src="./templates/images/star_filled.png" class="star" /> | ||
| <p class="rate_average"></p> | ||
| </div> | ||
| </div> | ||
| <hr /> | ||
| <p class="rate-title">내 별점</p> | ||
| <div class="user-rate"> | ||
| <div class="star-container"> | ||
| <img | ||
| src="./templates/images/star_empty.png" | ||
| class="star" | ||
| value="1" | ||
| /> | ||
| <img | ||
| src="./templates/images/star_empty.png" | ||
| class="star" | ||
| value="2" | ||
| /> | ||
| <img | ||
| src="./templates/images/star_empty.png" | ||
| class="star" | ||
| value="3" | ||
| /> | ||
| <img | ||
| src="./templates/images/star_empty.png" | ||
| class="star" | ||
| value="4" | ||
| /> | ||
| <img | ||
| src="./templates/images/star_empty.png" | ||
| class="star" | ||
| value="5" | ||
| /> | ||
| </div> | ||
| <div class="rate-detail"> | ||
| <span class="rate-description"></span> | ||
| <span class="rate-percentage"></span> | ||
| </div> | ||
|
Comment on lines
+87
to
+118
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 별점 컨트롤이 키보드로는 조작되지 않습니다. 클릭 가능한 🤖 Prompt for AI Agents |
||
| </div> | ||
| <hr /> | ||
| <p class="detail-title">줄거리</p> | ||
| <p class="detail"></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
문서 기준이 아직 버튼 방식과 무한 스크롤 방식으로 섞여 있습니다.
여기서는 무한 스크롤로 정리됐는데, 같은 README의 Line 66과 Line 72는 아직
"더 보기 버튼"기준으로 서술돼 있습니다. 요구사항과 테스트 체크리스트가 서로 다른 기준을 가리키지 않도록 한쪽으로 맞춰두는 편이 좋겠습니다.Also applies to: 74-77
🤖 Prompt for AI Agents