[2단계 - 영화 목록 불러오기] 포도 미션 제출합니다.

.github/workflows/main.yml

@@ -0,0 +1,57 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ "main" ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+# Node.js 20 관련 경고 해결을 위한 전역 환경변수 설정
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build -- --base=/javascript-movie-review/
+        env:
+          VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
+          VITE_ACCESS_TOKEN: ${{ secrets.VITE_ACCESS_TOKEN }}
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

.gitmessage.txt

@@ -0,0 +1 @@
+Co-authored-by: jebiyeon02 <jhje5595@naver.com>

STEP1-README.md

@@ -0,0 +1,54 @@
+# javascript-movie-review
+
+FE 레벨1 영화 리뷰 미션
+
+# 요구사항 목록
+
+## 1. 검색
+
+- 검색어를 입력받아 검색한다.
+- 검색어에 해당하는 영화를 10개 가져온다.
+- 더보기를 누르면 10개를 추가로 가져온다.
+- 해당하는 모든 영화를 가져왔을 때 더 보기 버튼을 숨긴다.
+- 검색어에 해당하는 영화가 없을 경우, "검색 결과가 없습니다"
+- 검색 시 스켈레톤 UI를 표시한다.
+
+## 2. 영화 목록
+
+- 영화 20개를 가져온다.
+- 더보기를 누르면 20개를 추가로 가져온다.
+- 모든 영화를 가져왔을 때 더 보기 버튼을 숨긴다.
+- 검색 시 스켈레톤 UI를 표시한다.
+
+
+
+## 배너
+
+- 가장 인기 있는 영화의 정보를 띄운다.
+
+# 테스트 명세
+
+## 단위 테스트
+
+1. 인기 있는 영화 목록을 가져온다.
+2. 검색어에 맞는 영화만 가져온다.
+
+## E2E 시나리오
+
+### 최초 진입 시
+
+1. 배너에 첫 번째 인기 영화의 정보가 표시된다.
+2. 최초 진입 시 인기 영화 최대 20개가 표시된다.
+3. 더 보기 버튼을 누르면 최대 20개가 추가된다.
+4. 더 이상 보여줄 영화가 없으면 더 보기 버튼이 사라진다.
+
+### 검색 시
+
+1. `인사이드`를 검색하면 제목에 인사이드가 포함된 영화들이 최대 20개 표시된다.
+2. 더 보기 버튼을 누르면 최대 20개가 추가된다.
+3. 더 이상 보여줄 영화가 없으면 더 보기 버튼이 사라진다.
+4. 검색 결과가 없으면 `검색 결과가 없습니다.`를 아이콘과 함께 표시된다.
+5. 로고를 누르면 메인 화면으로 돌아온다.
+
+
+

STEP2-README.md

@@ -0,0 +1,69 @@
+# javascript-movie-review
+
+FE 레벨1 영화 리뷰 미션 step2
+
+# 요구사항 목록
+
+## 1. 영화 상세정보 조회
+
+- 영화를 클릭하면 모달이 뜬다
+- ESC를 누르면 모달이 사라진다
+- x를 누르면 모달이 사라진다
+
+## 2. 별점 매기기
+
+- 영화 상세정보 모달에서 별을 눌러 별점을 설정할 수 있다.
+- 별점은 5개로 구성되어 있으며 한 개당 2점이댜.
+  - 2점: 최악이예요
+  - 4점: 별로예요
+  - 6점: 보통이에요
+  - 8점: 재미있어요
+  - 10점: 명작이에요
+- 새로고침을 하더라도 별점이 유지된다.
+- local storage를 사용하되, 추후에 API 요청으로 갈아끼울 수 있는 형태로 만든다.
+
+## 3. 반응형 UI
+
+## 4. 무한스크롤
+
+- 기존 더보기 버튼이 사라지고 무한 스크롤 형태로 변경
+- 사용자가 브라우저 화면의 끝에 도달하면 그 다음 20개의 목록을 서버에 요청하여 추가한다.
+
+## 배너
+
+- 가장 인기 있는 영화의 정보를 띄운다.
+
+# 테스트 명세
+
+## E2E 시나리오
+### 최초 진입 시
+
+1. 배너에 첫 번째 인기 영화의 정보가 표시된다.
+2. 최초 진입 시 인기 영화 20개가 표시된다.
+3. 스크롤을 내리면 다음 20개가 자동으로 추가된다.
+4. 연속 스크롤 시 다음 페이지가 순차적으로 추가된다.
+5. 영화를 클릭하면 모달이 열린다.
+   - 클릭 즉시 모달이 열리고, API 응답 전까지 콘텐츠가 비어있다.
+   - API 응답 후 모달에 제목, 카테고리, 평점, 줄거리가 채워진다.
+   - 모달이 열리면 body 스크롤이 방지된다.
+   - X 버튼을 누르면 모달이 닫힌다.
+   - ESC 키를 누르면 모달이 닫힌다.
+   - 배경(딤 영역)을 클릭하면 모달이 닫힌다.
+6. 반응형 레이아웃
+   - 모바일(375px)에서 영화 목록이 1열로 표시된다.
+   - 태블릿(900px)에서 영화 목록이 3열로 표시된다.
+   - 데스크톱(1200px)에서 영화 목록이 4열로 표시된다.
+   - 와이드(1600px)에서 영화 목록이 5열로 표시된다.
+   - 모바일(375px)에서 모달의 포스터 이미지가 숨겨진다.
+   - 태블릿(900px)에서 모달이 하단 시트 형태로 표시된다.
+
+### 검색 시
+
+1. "인사이드"를 검색하면 관련 영화가 최대 20개 표시된다.
+2. 스크롤을 내리면 다음 검색 결과가 자동으로 추가된다.
+3. 마지막 페이지까지 불러오면 더 이상 요청이 발생하지 않는다.
+4. 검색 결과가 없으면 안내 메시지를 아이콘과 함께 표시한다.
+5. 로고를 누르면 메인 화면으로 돌아온다.
+6. 검색 결과에서 영화를 클릭하면 모달이 열린다.
+   - 모달에 영화 정보가 올바르게 표시된다.
+   - 모달을 닫고 검색 결과 화면으로 돌아올 수 있다.

__tests__/movie.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import {
+  fetchPopularMovies,
+  fetchSearchedMovies,
+} from "../src/api/fetchMovies.ts";
+
+describe("영화 목록 테스트", () => {
+  it("인기 있는 영화 목록을 가져온다", async () => {
+    // given
+
+    // when
+    const movies = await fetchPopularMovies(1);
+
+    // then
+    expect(movies.movies.length).toBe(20);
+  });
+
+  it("검색어에 맞는 영화만 가져온다.", async () => {
+    // given
+
+    // when
+    const movies = await fetchSearchedMovies(1, "인사이드");
+
+    // then
+    expect(movies.movies.length).toBe(20);
+  });
+});
+
+describe("영화 목록 API 에러 테스트", () => {
+  beforeEach(() => {
+    vi.stubGlobal("fetch", vi.fn());
+  });
+
+  it("인기 영화 목록 요청 실패 시(500 에러) 정의된 에러 메시지를 던진다.", async () => {
+    // given
+    vi.mocked(fetch).mockResolvedValue({
+      ok: false,
+      status: 500,
+    } as Response);
+
+    // when & then
+    await expect(fetchPopularMovies(1)).rejects.toThrow(
+      "영화를 불러오는 데 실패했습니다.",
+    );
+  });
+
+  it("영화 검색 실패 시(404 에러) 상태 코드를 포함한 에러 메시지를 던진다.", async () => {
+    // given
+    const status = 404;
+    vi.mocked(fetch).mockResolvedValue({
+      ok: false,
+      status: status,
+    } as Response);
+
+    // when & then
+    await expect(fetchSearchedMovies(1, "인사이드")).rejects.toThrow(
+      `영화 검색 중 에러가 발생했습니다.`,
+    );
+  });
+
+  it("네트워크 장애(Network Error) 발생 시 에러를 던진다.", async () => {
+    // given
+    vi.mocked(fetch).mockRejectedValue(new Error("Network Error"));
+
+    // when & then
+    await expect(fetchPopularMovies(1)).rejects.toThrow("Network Error");
+  });
+});