diff --git a/.github/pull_request_template2.md b/.github/pull_request_template2.md
new file mode 100644
index 0000000000..9210f13e66
--- /dev/null
+++ b/.github/pull_request_template2.md
@@ -0,0 +1,33 @@
+## 🎯 미션 소개
+
+- API 연동을 통한 비동기 통신 학습
+- 사용자 시나리오 기반 E2E 테스트
+
+---
+
+## 🕵️ 셀프 리뷰(Self-Review)
+
+### 제출 전 체크 리스트
+
+- [x] 기능 요구 사항을 모두 구현했고, 정상적으로 동작하는지 확인했나요?
+- [x] 기본적인 프로그래밍 요구 사항(코드 컨벤션, 에러 핸들링 등)을 준수했나요?
+- [ ] 테스트 코드는 모두 정상적으로 실행되나요? (필요 시, API Mocking 등)
+- [ ] (해당하는 경우) 배포한 데모 페이지에 정상적으로 접근할 수 있나요?
+  - (해당하는 경우) 배포 링크 기입: \***\*\_\_\*\***
+
+### 리뷰 요청 & 논의하고 싶은 내용
+
+#### 1) 이번 단계에서 가장 많이 고민했던 문제와 해결 과정에서 배운 점
+
+#### 2) 이번 리뷰를 통해 논의하고 싶은 부분
+
+---
+
+## ✅ 리뷰어 체크 포인트
+
+<!-- 리뷰어가 이 PR을 검토할 때 중점적으로 확인할 사항입니다.
+코드의 완성도만이 아니라, 리뷰이가 구현 과정에서 어떤 고민과 결정을 하며 학습했는지도 함께 고려해 주세요. -->
+
+- [ ] 비동기 통신 과정에서 발생할 수 있는 예외(네트워크, 서버 오류 등)를 고려했는가?
+- [ ] 비동기 로직에서 콜백 지옥 없이, 적절히 async/await 또는 Promise를 활용했는가?
+- [ ] 역할과 책임에 따라 파일/모듈을 분리했는가? (UI, 비즈니스 로직, API 호출 등)
diff --git a/README2.md b/README2.md
new file mode 100644
index 0000000000..a322e0b077
--- /dev/null
+++ b/README2.md
@@ -0,0 +1,43 @@
+# javascript-movie-review
+
+FE 레벨1 영화 리뷰 미션 2단계
+
+## 기능 요구 사항
+### 더보기 버튼 무한스크롤로 변경
+- [x] 기존 더보기 버튼 클릭 시 영화목록을 호출하던 조건을 화면 맨 아래로 내려왔을 때로 변경
+
+### 영화 상세정보 조회
+- [x] 자세히 보기 클릭 시 출력
+- [x] 영화 섬네일 클릭 시 출력
+- [x] 상세 정보 로딩 중 스켈레톤 처리
+- [x] 모달 창 닫기 기능
+  - [x] X 키
+  - [x] esc 키
+  - [x] 모달 창 바깥 클릭
+- 출력할 내용
+  - [x] 영화 포스터
+  - [x] 영화 제목
+  - [x] 연도
+  - [x] 장르
+  - [x] 평균 별점
+  - [x] 내 별점 (별점 그림 + 별점에 따른 설명 + (8/10)과 같은 별점 수치화)
+  - [x] 줄거리
+- [x] API 에러 처리
+
+### UI/UX 개선
+- [x] 반응형 웹을 구상하여 디바이스의 너비에 따라 레이아웃이 조절되도록 변경
+  - [x] 너비에 따라 영화 출력 갯수 반응형으로 변경
+  - [x] 모달 창 데스크톰은 중앙 출력, 태블릿이나 모바일은 하단 출력으로 제작
+  - [x] 자세히 보기 창에서 화면이 너무 작으면 포스터 출력 x
+
+### 별점 매기기 기능
+- [x] 2점 단위의 별점 매기기 기능
+  - [x] 새로고침해도 별점 유지
+  - [x] 별점 UI 호버, 클릭 이벤트 처리
+  - [x] 새로 입력받은 별점 데이터를 상세화면에 반영
+- [x] 로컬 스토리지 및 서버API로 쉽고 안전하게 갈아끼울 수 있는 구조로 제작
+
+### E2E 테스트
+- [x] 무한 스크롤 동작 테스트
+- [x] 상세 정보 모달 여닫기 테스트
+- [x] 별점 평가, 반영, 새로고침 시 데이터 유지 테스트
\ No newline at end of file
diff --git a/cypress/e2e/movie.cy.ts b/cypress/e2e/movie.cy.ts
new file mode 100644
index 0000000000..bd337aefb3
--- /dev/null
+++ b/cypress/e2e/movie.cy.ts
@@ -0,0 +1,117 @@
+describe('영화 리뷰 step2 테스트', () => {
+  beforeEach(() => {
+    // 인기 영화 목록 API 가로채기
+    cy.intercept('GET', '**/movie/popular*', {
+      fixture: 'popularMovies.json', 
+    }).as('getPopularMovies');
+
+    // 영화 상세 정보 API를 가로채기
+    cy.intercept('GET', /\/movie\/\d+/, {
+      fixture: 'movieDetail.json', 
+    }).as('getMovieDetail');
+
+    cy.visit('/');
+    
+    cy.wait('@getPopularMovies'); 
+  });
+
+  describe('무한 스크롤 동작 테스트', () => {
+    it('화면을 끝까지 스크롤하면 새로운 영화 목록이 추가로 로드된다.', () => {
+      // 렌더링된 영화 아이템 개수 저장
+      cy.get('.thumbnail-list .movie-item').then(($items) => {
+        const initialCount = $items.length;
+
+        // 바닥으로 스크롤하여 더 보기 트리거
+        cy.scrollTo('bottom');
+        
+        // 렌더링 대기
+        cy.wait('@getPopularMovies');
+
+        // 영화 아이템 개수가 늘어났는지 검증
+        cy.get('.thumbnail-list .movie-item')
+          .should('have.length.greaterThan', initialCount);
+      });
+    });
+  });
+
+  describe('상세 정보 모달 여닫기 테스트', () => {
+    // 클릭 확인
+    it('영화 클릭 시 모달이 열리고, 닫기 버튼을 누르면 모달이 닫힌다.', () => {
+      // 첫 번째 영화 아이템 클릭
+      cy.get('.thumbnail-list .movie-item').first().click();
+
+      // 모달 데이터 응답 대기
+      cy.wait('@getMovieDetail');
+
+      // 모달이 활성화되었는지 확인 (active 클래스 및 화면노출)
+      cy.get('#modalBackground').should('have.class', 'active');
+      cy.get('#modalContainer').should('be.visible');
+
+      // 닫기 버튼 클릭
+      cy.get('#closeModal').click();
+
+      // 모달이 정상적으로 닫혔는지 확인
+      cy.get('#modalBackground').should('not.have.class', 'active');
+    });
+
+    // 배경클릭 확인
+    it('모달 배경을 클릭해도 모달이 닫힌다.', () => {
+      cy.get('.thumbnail-list .movie-item').first().click();
+      
+      // 배경 영역 클릭
+      cy.get('#modalBackground').click('topLeft', { force: true }); 
+
+      cy.get('#modalBackground').should('not.have.class', 'active');
+    });
+
+    // ESC키 확인
+    it('ESC 키를 누르면 모달이 닫힌다.', () => {
+      cy.get('.thumbnail-list .movie-item').first().click();
+      cy.get('#modalBackground').should('have.class', 'active');
+
+      // body 태그에 대고 ESC 키 입력 이벤트 발생
+      cy.get('body').type('{esc}');
+
+      // 모달이 정상적으로 닫혔는지 확인
+      cy.get('#modalBackground').should('not.have.class', 'active');
+    });
+  });
+
+  describe('별점 평가 및 데이터 유지 테스트', () => {
+    it('별점을 선택하면 반영되고, 새로고침 후에도 해당 점수가 유지된다.', () => {
+      const TARGET_SCORE = 8;
+      const RATING_TEXT = '재미있어요';
+
+      // 모달 열기
+      cy.get('.thumbnail-list .movie-item').first().click();
+
+      // 8점 클릭
+      cy.get(`.rate-star-img[data-score="${TARGET_SCORE}"]`).click();
+
+      // UI에 평가 문구와 점수가 반영되었는지 확인
+      cy.get('#ratingDescription')
+        .should('contain.text', RATING_TEXT)
+        .and('contain.text', `(${TARGET_SCORE}/10)`);
+
+      // 모달 닫기
+      cy.get('#closeModal').click();
+
+      // 페이지 새로고침
+      cy.reload();
+      cy.wait('@getPopularMovies');
+
+      // 동일한 영화의 모달을 다시 열기
+      cy.get('.thumbnail-list .movie-item').first().click();
+
+      // LocalStorage에서 데이터를 잘 가져와서 이전 점수가 그대로 표시되는지 확인
+      cy.get('#ratingDescription')
+        .should('contain.text', RATING_TEXT)
+        .and('contain.text', `(${TARGET_SCORE}/10)`);
+        
+      // 별 이미지 소스도 채워진 별(star_filled)인지 확인 (첫 번째 별점 예시)
+      cy.get(`.rate-star-img[data-score="2"]`)
+        .should('have.attr', 'src')
+        .and('include', 'star_filled');
+    });
+  });
+});
\ No newline at end of file
diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts
index 34fbd142fa..f07a861675 100644
--- a/cypress/e2e/spec.cy.ts
+++ b/cypress/e2e/spec.cy.ts
@@ -41,16 +41,16 @@ describe('영화 리뷰 앱 E2E 테스트', () => {
       cy.get('.thumbnail-list > li').should('have.length', 20);
     });
 
-    it('더보기 버튼을 누르면 다음 페이지의 영화 20개를 추가로 렌더링한다.', () => {
-      cy.visit('/');
-      cy.wait('@getPopularMovies');
+    // it('더보기 버튼을 누르면 다음 페이지의 영화 20개를 추가로 렌더링한다.', () => {
+    //   cy.visit('/');
+    //   cy.wait('@getPopularMovies');
 
-      cy.get('#more-page-button').click();
-      cy.wait('@getNextPopularMovies');
+    //   cy.get('#more-page-button').click();
+    //   cy.wait('@getNextPopularMovies');
 
-      // 기존 20개 + 추가 20개 = 40개
-      cy.get('.thumbnail-list > li').should('have.length', 40);
-    });
+    //   // 기존 20개 + 추가 20개 = 40개
+    //   cy.get('.thumbnail-list > li').should('have.length', 40);
+    // });
   });
 
   context('2. 검색 기능', () => {
diff --git a/cypress/fixtures/movieDetail.json b/cypress/fixtures/movieDetail.json
new file mode 100644
index 0000000000..70a933f838
--- /dev/null
+++ b/cypress/fixtures/movieDetail.json
@@ -0,0 +1,26 @@
+{
+  "id": 1022789,
+  "title": "인사이드 아웃 2",
+  "poster_path": "/vpnVM9B6NMmQpWeZvzRxHXlNpzT.jpg",
+  "release_date": "2024-06-12",
+  "genres": [
+    {
+      "id": 16,
+      "name": "애니메이션"
+    },
+    {
+      "id": 10751,
+      "name": "가족"
+    },
+    {
+      "id": 12,
+      "name": "모험"
+    },
+    {
+      "id": 35,
+      "name": "코미디"
+    }
+  ],
+  "vote_average": 8.5,
+  "overview": "13살이 된 라일리의 머릿속 감정 컨트롤 본부에 불안, 당황, 따분, 부럽의 낯선 감정들이 새롭게 등장하면서 평화롭던 일상이 깨지고 다시 시작된 위기와 모험을 다룬 애니메이션 영화"
+}
diff --git a/cypress/fixtures/popularMovies.json b/cypress/fixtures/popularMovies.json
new file mode 100644
index 0000000000..1c0a9c9dbf
--- /dev/null
+++ b/cypress/fixtures/popularMovies.json
@@ -0,0 +1,41 @@
+{
+  "page": 1,
+  "results": [
+    {
+      "id": 1022789,
+      "title": "인사이드 아웃 2",
+      "poster_path": "/vpnVM9B6NMmQpWeZvzRxHXlNpzT.jpg",
+      "backdrop_path": "/stKGOm8UyhuLPR9sLsGAXo0I94w.jpg",
+      "vote_average": 8.5
+    },
+    {
+      "id": 533535,
+      "title": "데드풀과 울버린",
+      "poster_path": "/8cdWjvZQUExUUTzyp4t6EDMubfO.jpg",
+      "backdrop_path": "/yDHYTfA3R0jFYba16ZBRWUP1lNl.jpg",
+      "vote_average": 7.9
+    },
+    {
+      "id": 1029528,
+      "title": "슈퍼배드 4",
+      "poster_path": "/3w84hCFJATpiCO5g8hpdWVPBcbF.jpg",
+      "backdrop_path": "/lgkPzcOSnTvjeMnuFzozRO5HHw1.jpg",
+      "vote_average": 7.4
+    },
+    {
+      "id": 653346,
+      "title": "혹성탈출: 새로운 시대",
+      "poster_path": "/fQZ5o2eY9KusVq6qO2o1EudV9Iq.jpg",
+      "backdrop_path": "/fqv8v6AycXKsivp1T5yKtLbGXce.jpg",
+      "vote_average": 6.9
+    },
+    {
+      "id": 748783,
+      "title": "가필드 더 무비",
+      "poster_path": "/a0A9YlRhaV7Z1rA0N6P4qF8w3rO.jpg",
+      "backdrop_path": "/xg27NrZaAKk4pM1r7K531Qk7u0D.jpg",
+      "vote_average": 7.1
+    }
+  ],
+  "total_pages": 100
+}
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000000..d8476f93ed
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/modal_button_close.png b/images/modal_button_close.png
new file mode 100644
index 0000000000..b352a220dc
Binary files /dev/null and b/images/modal_button_close.png differ
diff --git a/images/star_empty.png b/images/star_empty.png
new file mode 100644
index 0000000000..bf32725179
Binary files /dev/null and b/images/star_empty.png differ
diff --git a/images/star_filled.png b/images/star_filled.png
new file mode 100644
index 0000000000..5b6f299937
Binary files /dev/null and b/images/star_filled.png differ
diff --git a/images/woowacourse_logo.png b/images/woowacourse_logo.png
new file mode 100644
index 0000000000..e64c002e12
Binary files /dev/null and b/images/woowacourse_logo.png differ
diff --git a/index.html b/index.html
index 4186769bc3..1c86c6e1d5 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="./styles/main.css" />
   <link rel="stylesheet" href="./styles/tab.css" />
   <link rel="stylesheet" href="./styles/thumbnail.css" />
+  <link rel="stylesheet" href="./styles/modal.css" />
 </head>
 
 <body>
@@ -16,13 +17,26 @@
   <header style="position: relative; width: 100%;">
     <div class="background-container">
       <div class="overlay" aria-hidden="true"></div>
-      <div class="top-rated-container">
+      
+      <div class="header-top-wrapper">
         <h1 class="logo">
-          <a href="/"><img src="./images/logo.png" alt="MovieList" /></a>
+          <a href="./"><img src="./images/logo.png" alt="MovieList" /></a>
         </h1>
+        <form class="pretty-search-bar" action="./search.html" method="GET">
+          <input type="text" class="search-input" name="q" placeholder="검색어를 입력하세요" required/>
+          <button type="submit" class="search-icon-btn">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+          </button>
+        </form>
+      </div>
+
+      <div class="top-rated-container">
         <div class="top-rated-movie">
           <div class="rate">
-            <img src="./images/star_empty.png" class="star" alt="별점" />
+            <img src="./images/star_filled.png" class="star" alt="별점" />
             <span class="rate-value">9.5</span>
           </div>
           <div class="title">인사이드 아웃2</div>
@@ -30,16 +44,6 @@ <h1 class="logo">
         </div>
       </div>
     </div>
-
-    <form class="pretty-search-bar" action="./search.html" method="GET" style="position: absolute; top: 48px; left: 50%; transform: translateX(-50%); width: 480px; z-index: 10;">
-      <input type="text" class="search-input" name="q" placeholder="검색어를 입력하세요" required/>
-      <button type="submit" class="search-icon-btn">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="11" cy="11" r="8"></circle>
-          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-        </svg>
-      </button>
-    </form>
   </header>
 
   <main>
@@ -51,6 +55,17 @@ <h2>지금 인기 있는 영화</h2>
     </section>
   </main>
 
+  <div class="modal-background" id="modalBackground">
+    <div class="modal">
+      <button class="close-modal" id="closeModal">
+        <img src="./images/modal_button_close.png" alt="닫기" />
+      </button>
+      <div class="modal-container" id="modalContainer">
+        
+      </div>
+    </div>
+  </div>
+
   <footer class="footer">
     <p>&copy; 우아한테크코스 All Rights Reserved.</p>
     <p><img src="./images/woowacourse_logo.png" width="180" /></p>
diff --git a/package-lock.json b/package-lock.json
index f57cd75e4d..3aefea1c83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,9 @@
         "@babel/core": "^7.29.0",
         "@babel/preset-env": "^7.29.0",
         "@babel/preset-typescript": "^7.28.5",
-        "cypress": "^15.11.0",
+        "cypress": "^15.13.1",
         "eslint": "^10.0.2",
+        "gh-pages": "^6.3.0",
         "jsdom": "^29.0.2",
         "prettier": "^3.8.1",
         "typescript": "~5.9.3",
@@ -2539,6 +2540,44 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.59.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
@@ -3218,6 +3257,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/asn1": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
@@ -3258,6 +3307,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3425,6 +3481,19 @@
         "node": "18 || 20 || >=22"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
@@ -3733,6 +3802,13 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -3791,9 +3867,9 @@
       }
     },
     "node_modules/cypress": {
-      "version": "15.11.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.11.0.tgz",
-      "integrity": "sha512-NXDE6/fqZuzh1Zr53nyhCCa4lcANNTYWQNP9fJO+tzD3qVTDaTUni5xXMuigYjMujQ7CRiT9RkJJONmPQSsDFw==",
+      "version": "15.13.1",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.13.1.tgz",
+      "integrity": "sha512-jLkgo75zlwo7PhXp0XJot+zIfFSDzN1SvTml6Xf3ETM1XHRWnH3Q4LAR3orCo/BsnxPnhjG3m5HYSvn9DAtwBg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -3948,6 +4024,19 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3981,6 +4070,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/email-addresses": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4472,6 +4568,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -4486,6 +4612,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -4535,6 +4671,79 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
@@ -4699,6 +4908,54 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "node_modules/gh-pages": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.3.0.tgz",
+      "integrity": "sha512-Ot5lU6jK0Eb+sszG8pciXdjMXdBJ5wODvgjR+imihTqsUWF2K6dJ9HST55lgqcs8wWcw6o6wAsUzfcYRhJPXbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.4",
+        "commander": "^13.0.0",
+        "email-addresses": "^5.0.0",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^11.1.1",
+        "globby": "^11.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/commander": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
+      "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/gh-pages/node_modules/fs-extra": {
+      "version": "11.3.4",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.4.tgz",
+      "integrity": "sha512-CTXd6rk/M3/ULNQj8FBqBWHYBVYybQ3VPBw0xGKFe3tuH7ytT6ACnvzpIQ3UZtB8yvUKC2cXn1a+x+5EVQLovA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4728,6 +4985,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -4992,6 +5270,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-path-inside": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
@@ -5296,6 +5584,19 @@
         }
       }
     },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
@@ -5406,6 +5707,22 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5430,6 +5747,43 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -5617,6 +5971,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-locate/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/p-map": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
@@ -5633,6 +6016,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse5": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
@@ -5673,6 +6066,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -5724,6 +6127,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.8",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
@@ -5846,6 +6262,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -5959,6 +6396,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -6011,6 +6459,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -6185,6 +6657,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/slice-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
@@ -6288,6 +6770,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-outer/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6457,6 +6962,19 @@
         "node": ">=14.14"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
@@ -6493,6 +7011,29 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/trim-repeated/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
diff --git a/package.json b/package.json
index cbcfa27324..4929008572 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
+    "predeploy": "npm run build",
     "test-unit": "vitest",
     "test-e2e": "cypress open",
     "deploy": "vite build --base=/javascript-movie-review/ --minify=false && npx gh-pages -d dist"
@@ -24,8 +25,9 @@
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-typescript": "^7.28.5",
-    "cypress": "^15.11.0",
+    "cypress": "^15.13.1",
     "eslint": "^10.0.2",
+    "gh-pages": "^6.3.0",
     "jsdom": "^29.0.2",
     "prettier": "^3.8.1",
     "typescript": "~5.9.3",
diff --git a/search.html b/search.html
index ad1e0a0a94..a8f701070c 100644
--- a/search.html
+++ b/search.html
@@ -9,28 +9,29 @@
   <link rel="stylesheet" href="./styles/main.css" />
   <link rel="stylesheet" href="./styles/tab.css" />
   <link rel="stylesheet" href="./styles/thumbnail.css" />
+  <link rel="stylesheet" href="./styles/modal.css" />
 </head>
 
 <body>
   <div id="app"></div>
 
-<header style="position: relative; width: 100%; height: 144px;">
+<header style="position: relative; width: 100%;">
   
-  <div style="width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 48px;">
-    <h1 class="logo" style="margin: 0;">
-      <a href="/"><img src="./images/logo.png" alt="MovieList" /></a>
+  <div class="header-top-wrapper">
+    <h1 class="logo">
+      <a href="./"><img src="./images/logo.png" alt="MovieList" /></a>
     </h1>
-  </div>
 
-  <form class="pretty-search-bar" action="./search.html" method="GET" style="position: absolute; top: 48px; left: 50%; transform: translateX(-50%); width: 480px; margin: 0;">
-    <input type="text" class="search-input" name="q" placeholder="검색어를 입력하세요" required/>
-    <button type="submit" class="search-icon-btn">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-      </svg>
-    </button>
-  </form>
+    <form class="pretty-search-bar" action="./search.html" method="GET">
+      <input type="text" class="search-input" name="q" placeholder="검색어를 입력하세요" required/>
+      <button type="submit" class="search-icon-btn">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
+       </button>
+    </form>
+  </div>
 </header>
 
   <main>
@@ -41,6 +42,17 @@ <h2 id="resultTitle">검색 결과</h2>
       <button type="button" id="more-page-button" class="primary hidden">더 보기</button>
     </section>
   </main>
+   
+  <div class="modal-background" id="modalBackground">
+    <div class="modal">
+      <button class="close-modal" id="closeModal">
+        <img src="./images/modal_button_close.png" alt="닫기" />
+      </button>
+      <div class="modal-container" id="modalContainer">
+        
+      </div>
+    </div>
+  </div>
 
   <footer class="footer">
     <p>&copy; 우아한테크코스 All Rights Reserved.</p>
diff --git a/src/api.ts b/src/api.ts
index 43abbe30df..6daa30271d 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -12,7 +12,8 @@ const options = {
   },
 };
 
-export interface resultData {
+export interface ResultData {
+  id: number;
   title: string;
   poster_path: string;
   backdrop_path: string;
@@ -22,24 +23,35 @@ export interface resultData {
 
 export interface PreviewData {
   page: number;
-  results: resultData[];
+  results: ResultData[];
   total_pages: number;
 }
 
-export interface Params {
+export interface QueryParams {
   page: number;
   query?: string | undefined;
   language?: string;
   region?: string;
 }
 
-export interface Request {
+export interface ApiRequest {
   path: string;
-  params: Params;
+  params: QueryParams;
 }
+
+export interface MovieDetailData {
+  id: number;
+  title: string;
+  poster_path: string | null;
+  release_date: string;
+  genres: { id: number; name: string }[];
+  vote_average: number;
+  overview: string;  
+}
+
 const BASE_URL = 'https://api.themoviedb.org/3';
 
-const fetchAPI = async (req: Request): Promise<PreviewData> => {
+const fetchAPI = async (req: ApiRequest): Promise<PreviewData> => {
   const url = new URL(BASE_URL + req.path);
 
   if (req.params.query) {
@@ -72,3 +84,18 @@ export const fetchPopularMovies = (page: number = 1): Promise<PreviewData> => {
     params: { page },
   });
 };
+
+export const fetchMovieDetail = async (movieId: number): Promise<MovieDetailData> => {
+  const url = new URL(`${BASE_URL}/movie/${movieId}`);
+  url.searchParams.append('region', 'ko-KR');
+  url.searchParams.append('language', 'ko');
+
+  const response = await fetch(url.toString(), options);
+
+  if (!response.ok) {
+    throw new Error('영화 데이터를 불러오는 데 실패했습니다.');
+  }
+
+  const data = (await response.json()) as MovieDetailData;
+  return data;
+};
diff --git a/src/main.ts b/src/main.ts
index dd43539cf2..982542e1fc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { initMovieList } from './movieController.ts';
+import { initMovieList } from './movieListApp.ts';
 
 addEventListener('load', () => {
   const app = document.querySelector('#app');
diff --git a/src/modal.ts b/src/modal.ts
new file mode 100644
index 0000000000..95bd4b410c
--- /dev/null
+++ b/src/modal.ts
@@ -0,0 +1,93 @@
+import { fetchMovieDetail } from './api.ts';
+import { reviewStorage } from './reviewStorage.ts';
+import * as modalView from './modalView.ts';
+
+const modalState = {
+  movieId: 0,
+  savedRating: 0,
+};
+
+// 모달 열기
+export const openModal = async (movieId: number) => {
+  modalView.openModalUI();
+  modalView.showModalSkeleton();
+
+  try {
+    const data = await fetchMovieDetail(movieId);
+    // 스토리지에서 내 별점 가져오기
+
+    modalState.movieId = movieId;
+    modalState.savedRating = (await reviewStorage.getRating(movieId)) || 0;
+
+    modalView.renderModalContent(data, modalState.savedRating);
+  } catch (error) {
+    modalView.showError();
+  }
+};
+
+// 마우스 올린 곳까지 색칠
+const handleStarHover = (e: Event) => {
+  const target = e.target as HTMLElement;
+  if (target.classList.contains('rate-star-img')) {
+    const hoverScore = Number(target.dataset.score);
+    modalView.updateStarsUI(hoverScore);
+  }
+};
+
+const handleStarLeave = (e: Event) => {
+  const target = e.target as HTMLElement;
+  const relatedTarget = (e as MouseEvent).relatedTarget as HTMLElement | null;
+
+  if (target.closest('.star-rating') && !relatedTarget?.closest('.star-rating')) {
+    modalView.updateStarsUI(modalState.savedRating); // 마우스를 빼면 기존 점수로 복구
+  }
+};
+
+const handleStarClick = async (e: Event) => {
+  const target = e.target as HTMLElement;
+  if (target.classList.contains('rate-star-img')) {
+    const clickedScore = Number(target.dataset.score);
+    
+    modalState.savedRating = clickedScore; // 기존 점수를 클릭한 점수로 업데이트
+    modalView.updateStarsUI(clickedScore); // 클릭한 점수로 점수 변경
+
+    await reviewStorage.saveRating(modalState.movieId, clickedScore); // 변경된 점수를 저장
+  }
+};
+
+// 모달 이벤트 총괄
+const initModalEvents = () => {
+  const $closeModalButton = document.querySelector('#closeModal');
+  const $modalBackground = document.querySelector('#modalBackground');
+  const $modalContainer = document.querySelector('#modalContainer');
+
+  // 닫기 관련 이벤트
+  $closeModalButton?.addEventListener('click', handleCloseModal);
+  $modalBackground?.addEventListener('click', handleBackgroundClick);
+  document.addEventListener('keydown', handleEscapeKey);
+
+  // 별점 관련 이벤트
+  $modalContainer?.addEventListener('mouseover', handleStarHover);
+  $modalContainer?.addEventListener('mouseout', handleStarLeave);
+  $modalContainer?.addEventListener('click', handleStarClick);
+};
+
+// 닫기 버튼 클릭할 때
+const handleCloseModal = () => modalView.closeModalUI();
+
+// 모달 창 바깥 배경 클릭하면
+const handleBackgroundClick = (e: Event) => {
+  if (e.target === document.querySelector('#modalBackground')) {
+    modalView.closeModalUI();
+  }
+};
+
+// ESC 키 눌렀을 때
+const handleEscapeKey = (e: KeyboardEvent) => {
+  const isModalActive = document.querySelector('#modalBackground')?.classList.contains('active');
+  if (e.key === 'Escape' && isModalActive) {
+    modalView.closeModalUI();
+  }
+};
+
+initModalEvents();
diff --git a/src/modalView.ts b/src/modalView.ts
new file mode 100644
index 0000000000..f2e08bd64d
--- /dev/null
+++ b/src/modalView.ts
@@ -0,0 +1,165 @@
+import { MovieDetailData } from './api.ts';
+
+const $modalBackground = document.querySelector('#modalBackground') as HTMLElement | null;
+const $modalContainer = document.querySelector('#modalContainer') as HTMLElement | null;
+
+const RATING_MESSAGES: Record<number, string> = {
+  2: '최악이에요',
+  4: '별로에요',
+  6: '보통이에요',
+  8: '재미있어요',
+  10: '명작이에요',
+};
+
+// 모달 UI 여닫기 추상화
+export const openModalUI = () => {
+  $modalBackground?.classList.add('active');
+  document.body.classList.add('modal-open');
+};
+
+export const closeModalUI = () => {
+  $modalBackground?.classList.remove('active');
+  document.body.classList.remove('modal-open');
+};
+
+// 모달 스켈레톤
+export const showModalSkeleton = () => {
+  if ($modalContainer) {
+    $modalContainer.innerHTML = `
+      <div class="modal-loading-wrapper">
+        <h2>정보를 불러오는 중입니다...</h2>
+      </div>
+    `;
+  }
+};
+
+// 모달 에러 메시지
+export const showError = () => {
+  if ($modalContainer) {
+    $modalContainer.innerHTML = `
+      <div class="modal-description">
+        <h2>에러가 발생했습니다! 모달창을 닫고 다시 켜주세요!</h2>
+      </div>
+    `;
+  }
+};
+
+// 모달 렌더링
+export const renderModalContent = (data: MovieDetailData, myRating: number) => {
+  if (!$modalContainer) return;
+
+  const year = formatYear(data.release_date);
+  const genres = formatGenres(data.genres);
+  const posterUrl = getPosterUrl(data.poster_path);
+  const ratingText = getRatingText(myRating);
+  const starsHTML = generateStarsHTML(myRating);
+
+  $modalContainer.innerHTML = /* html */ `
+    ${createPosterHTML(posterUrl, data.title)}
+    <div class="modal-description">
+      ${createMovieHeaderHTML(data.title, year, genres, data.vote_average)}
+      ${createMyRatingHTML(starsHTML, ratingText, myRating)}
+      ${createPlotHTML(data.overview)}
+    </div>
+  `;
+};
+
+// 연도 추출
+const formatYear = (date?: string) => (date ? date.split('-')[0] : '연도가 없습니다!');
+
+// 장르 배열 문자열 변환
+const formatGenres = (genres?: { name: string }[]) =>
+  genres ? genres.map((genre) => genre.name).join(', ') : '장르가 없습니다!';
+
+// 포스터 이미지
+const getPosterUrl = (path: string | null) =>
+  path ? `https://image.tmdb.org/t/p/original${path}` : './images/woowacourse_logo.png';
+
+// 별점 텍스트 설정
+const getRatingText = (rating: number) => (rating > 0 ? RATING_MESSAGES[rating] : '평가해주세요');
+
+// 별점 이미지 HTML 생성
+const generateStarsHTML = (myRating: number) => {
+  return [2, 4, 6, 8, 10]
+    .map((score) => {
+      const imgSrc = score <= myRating ? './images/star_filled.png' : './images/star_empty.png';
+
+      return `<img src="${imgSrc}" class="rate-star-img" data-score="${score}" alt="${score}점" />`;
+    })
+    .join('');
+};
+
+// 포스터 이미지 영역
+const createPosterHTML = (posterUrl: string, title: string) => /* html */ `
+  <div class="modal-image">
+    <img src="${posterUrl}" alt="${title}" />
+  </div>
+`;
+
+// 영화 헤더 영역
+const createMovieHeaderHTML = (title: string, year: string, genres: string, voteAverage: number) => /* html */ `
+  <h2>${title}</h2>
+  <p class="category">${year} · ${genres}</p>
+  <p class="rate">
+    <span class="average-text">평균</span>
+    <img src="./images/star_filled.png" class="average-star" />
+    <span>${voteAverage.toFixed(1)}</span>
+  </p>
+  <hr />
+`;
+
+// 내 별점 영역
+const createMyRatingHTML = (starsHTML: string, ratingText: string, myRating: number) => /* html */ `
+  <div class="my-rating-container">
+    <h3>내 별점</h3>
+    <div class="star-rating" id="starRating">
+      <div class="stars-wrapper">
+        ${starsHTML}
+      </div>
+      <span class="rating-desc" id="ratingDescription">
+        ${ratingText} 
+        ${myRating > 0 ? `<span class="score-number">(${myRating}/10)</span>` : ''}
+      </span>
+    </div>
+  </div>
+  <hr />
+`;
+
+// 줄거리 영역
+const createPlotHTML = (overview: string) => /* html */ `
+  <div class="plot-container">
+    <h3>줄거리</h3>
+    <p class="detail">${overview || '줄거리 정보가 없습니다.'}</p>
+  </div>
+`;
+
+// 별점 UI 업데이트
+export const updateStarsUI = (score: number) => {
+    updateStarImages(score);
+    updateRatingText(score);
+};
+
+// 별점 이미지 칠해주는 함수
+const updateStarImages = (score: number) => {
+  const $stars = document.querySelectorAll('.rate-star-img');
+  
+  $stars.forEach(($star) => {
+    const starScore = Number(($star as HTMLElement).dataset.score);
+    const imgElement = $star as HTMLImageElement;
+    // 점수에 따라 빈 별 / 채워진 별 이미지 경로 교체
+    imgElement.src = starScore <= score ? './images/star_filled.png' : './images/star_empty.png';
+  });
+};
+
+// 별점 텍스트 바꿔주는 함수
+const updateRatingText = (score: number) => {
+  const $description = document.querySelector('#ratingDescription');
+
+  if (!$description) return;
+
+  if (score > 0) {
+    $description.innerHTML = `${RATING_MESSAGES[score]} <span class="score-number">(${score}/10)</span>`;
+  } else {
+    $description.innerHTML = '평가해주세요';
+  }
+};
diff --git a/src/movieController.ts b/src/movieController.ts
deleted file mode 100644
index cb48d515e1..0000000000
--- a/src/movieController.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { renderFetchMovieItem, hideMoreButton } from './render.ts';
-
-export const initMovieList = (query?: string) => {
-  let currentPage: number = 1;
-  const $thumbnailList = document.querySelector('.thumbnail-list');
-  const $button = document.querySelector('#more-page-button');
-
-  if (!$thumbnailList) return;
-
-  const loadMovies = async () => {
-    try {
-      await renderFetchMovieItem($thumbnailList, currentPage, query);
-      
-      // 에러 없이 렌더링 성공시에만 페이지 번호 증가
-      currentPage++; 
-    } catch (error) {
-      if (error instanceof Error) {
-        alert(error.message);
-      }
-    }
-  };
-
-  // 초기 렌더링
-  loadMovies();
-
-  // 더보기 버튼 클릭 시 렌더링
-  $button?.addEventListener('click', async () => {
-    hideMoreButton();
-    loadMovies();
-  });
-};
diff --git a/src/movieListApp.ts b/src/movieListApp.ts
new file mode 100644
index 0000000000..44c45b0a7c
--- /dev/null
+++ b/src/movieListApp.ts
@@ -0,0 +1,111 @@
+import { fetchPopularMovies, fetchSearchMovies } from './api.ts';
+import * as view from './view.ts';
+import { openModal } from './modal.ts';
+
+export const initMovieList = (query?: string) => {
+  let currentPage: number = 1;
+  let isFetching: boolean = false;
+  let isError: boolean = false;
+
+  const $thumbnailList = document.querySelector('.thumbnail-list');
+  const $button = document.querySelector('#more-page-button') as HTMLElement | null;
+  const $heroDetailBtn = document.querySelector('.top-rated-movie .detail') as HTMLButtonElement | null;
+
+  if (!$thumbnailList || !$button) return;
+
+  const loadMovies = async () => {
+    try {
+      view.renderSkeleton($thumbnailList);
+
+      const data = query ? await fetchSearchMovies(query, currentPage) : await fetchPopularMovies(currentPage);
+
+      view.removeSkeleton($thumbnailList);
+
+      if (query && data.results.length === 0) {
+        view.renderEmptyState($thumbnailList, query);
+        return;
+      }
+
+      if (currentPage === 1 && !query && data.results.length > 0) {
+        view.updateHeroBanner(data.results[0]);
+      }
+
+      view.renderMovieList($thumbnailList, data.results);
+      view.toggleButton(data.total_pages, currentPage);
+
+      // 에러 없이 렌더링 성공시에만 페이지 번호 증가
+      currentPage++;
+    } catch (error) {
+      view.removeSkeleton($thumbnailList);
+      view.showMoreButton();
+      isError = true;
+      if (error instanceof Error) {
+        alert('영화 목록을 불러오지 못했습니다! 새로고침을 누르거나 더보기 버튼을 한번 더 눌러주세요!');
+      }
+    }
+  };
+
+  const handleIntersect = async (entries: IntersectionObserverEntry[]): Promise<void> => {
+    const entry = entries[0];
+
+    if (entry.isIntersecting && !isFetching && !isError) {
+      isFetching = true;
+      await loadMovies();
+      isFetching = false;
+    }
+  };
+
+  const observerOptions: IntersectionObserverInit = {
+    root: null,
+    rootMargin: '0px 0px 200px 0px', // 더보기 버튼 200px 위부터 관찰하기
+    threshold: 0,
+  };
+
+  const observer = new IntersectionObserver(handleIntersect, observerOptions);
+
+  const start = async () => {
+    // 초기 렌더링
+    isFetching = true;
+    await loadMovies();
+    isFetching = false;
+
+    $heroDetailBtn?.addEventListener('click', handleHeroClick);
+    $thumbnailList.addEventListener('click', handleMovieItemClick);
+
+    // 초기 렌더링이 끝난 뒤, 더보기 버튼 관찰 시작
+    observer.observe($button);
+  };
+
+  // 실행
+  start();
+  // 더보기 버튼 클릭 시 렌더링
+  $button?.addEventListener('click', async () => {
+    isError = false; // 버튼 클릭 시 에러 상태 초기화
+    view.hideMoreButton();
+
+    if (!isFetching) {
+      isFetching = true;
+      await loadMovies();
+      isFetching = false;
+    }
+  });
+};
+
+// herobanner 자세히 보기 버튼 클릭 이벤트
+const handleHeroClick = (event: Event) => {
+  const target = event.currentTarget as HTMLButtonElement;
+  const movieId = Number(target.dataset.id);
+  if (movieId) openModal(movieId);
+};
+
+const handleMovieItemClick = (event: Event) => {
+  const target = event.target as HTMLElement;
+  const $movieItem = target.closest('.movie-item') as HTMLElement | null;
+
+  if ($movieItem) {
+    const movieId = Number($movieItem.dataset.id);
+    if (movieId) {
+      openModal(movieId);
+    }
+  }
+};
diff --git a/src/render.ts b/src/render.ts
deleted file mode 100644
index 476d43c904..0000000000
--- a/src/render.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { fetchPopularMovies, fetchSearchMovies, PreviewData, resultData } from './api.ts';
-
-export const renderFetchMovieItem = async (
-  $target: HTMLElement | Element,
-  page: number,
-  query?: string,
-): Promise<number | Error> => {
-  try {
-    // 스켈레톤 먼저 표현
-    showSkeleton($target);
-
-    // 데이터 페치받아오기
-    const data = query ? await fetchSearchMovies(query, page) : await fetchPopularMovies(page);
-
-    // 페치 결과에 따른 렌더링
-    renderResult($target, data, page, query);
-
-    return data.total_pages;
-  } catch (error) {
-    // error가 뜨면 스켈레톤 제거
-    removeSkeleton($target);
-    // error가 떴으므로 제거되었던 더보기 버튼 다시 렌더링
-    showMoreButton();
-    // error를 던져서 main에서 받음으로써 currentPage가 잘못 증가하는 것을 방지
-    // 문구 상세화로 사용자 상호작용 유도
-    throw new Error('영화 목록을 불러오지 못했습니다! 새로고침을 누르거나 더보기 버튼을 한번 더 눌러주세요!');
-  }
-};
-
-const showSkeleton = ($target: HTMLElement | Element) => {
-  $target.insertAdjacentHTML('beforeend', renderSkellMovieItem());
-};
-
-const renderResult = ($target: HTMLElement | Element, data: PreviewData, page: number, query?: string) => {
-  // 스켈레톤 다 지우기
-  removeSkeleton($target);
-
-  // 검색 결과 없으면 없음 ui 표시
-  if (query && data.results.length === 0) {
-    renderEmptyState($target, query);
-    return;
-  }
-
-  // 첫 페이지 인기 영화면 히어로 배너 업데이트
-  handleHeroBanner(data, page, query);
-
-  // 페치해온 데이터 렌더링
-  renderMovieList($target, data);
-
-  // 더보기 버튼 토글
-  toggleButton(data.total_pages, page);
-};
-
-const renderEmptyState = ($target: HTMLElement | Element, query: string) => {
-  $target.innerHTML = renderEmptyPage(query);
-};
-
-const handleHeroBanner = (data: PreviewData, page: number, query?: string) => {
-  if (page === 1 && !query && data.results.length > 0) {
-    updateHeroBanner(data.results[0]);
-  }
-};
-
-const renderMovieList = ($target: HTMLElement | Element, data: PreviewData) => {
-  const dataHTML = data.results.map(renderMovieItem).join('');
-  $target.insertAdjacentHTML('beforeend', dataHTML);
-};
-
-const renderEmptyPage = (query: string) => {
-  return /* html */ `
-      <div class = "empty-result">
-        <img src="./images/empty.png" alt="검색 결과가 없습니다." class="empty-image" />
-        <p>"${query}" 검색 결과가 없습니다.</p>
-      </div>`;
-};
-
-export const toggleButton = (totalPage: number, currentPage: number) => {
-  if (currentPage < totalPage) {
-    showMoreButton();
-  } else {
-    hideMoreButton();
-  }
-};
-
-export const showMoreButton = () => {
-  document.querySelector('#more-page-button')?.classList.remove('hidden');
-};
-
-export const hideMoreButton = () => {
-  document.querySelector('#more-page-button')?.classList.add('hidden');
-};
-
-export function renderMovieItem(data: resultData): string {
-  return /* html */ `
-      <li>
-        <div class="item">
-          <img class="thumbnail" src="https://image.tmdb.org/t/p/w500${data.poster_path}" alt="${data.title}" />
-          <div class="item-desc">
-            <p class="rate">
-              <img src="./images/star_empty.png" class="star" />
-              <span>${data.vote_average}</span>
-            </p>
-            <strong>${data.title}</strong>
-          </div>
-        </div>
-      </li>
-    `;
-}
-
-export function renderSkellMovieItem(): string {
-  const skelHTML = /* html */ `
-      <li class= "skeleton-container">
-        <div class="item">
-          <div class="thumbnail skeleton"></div>
-        </div>
-      </li>
-    `;
-  return skelHTML.repeat(20);
-}
-
-export const removeSkeleton = ($target: Element) => {
-  $target.querySelectorAll('.skeleton-container').forEach((node) => {
-    node.remove();
-  });
-};
-
-const updateHeroBanner = (movie: resultData) => {
-  const $bg = document.querySelector<HTMLElement>('.background-container');
-  if ($bg && movie.backdrop_path) {
-    $bg.style.backgroundImage = `url(https://image.tmdb.org/t/p/original${movie.backdrop_path})`;
-  }
-
-  const $title = document.querySelector('.top-rated-movie .title');
-  if ($title) $title.textContent = movie.title;
-
-  const $rate = document.querySelector('.top-rated-movie .rate-value');
-  if ($rate) $rate.textContent = movie.vote_average.toFixed(1);
-};
diff --git a/src/reviewStorage.ts b/src/reviewStorage.ts
new file mode 100644
index 0000000000..3d1ffe685e
--- /dev/null
+++ b/src/reviewStorage.ts
@@ -0,0 +1,34 @@
+// 추상화 인터페이스
+export interface ReviewStorage {
+  getRating(movieId: number): Promise<number | null>;
+  saveRating(movieId: number, score: number): Promise<void>; 
+}
+
+// 로컬 스토리지 구체화
+class LocalReviewStorage implements ReviewStorage {
+  private readonly STORAGE_KEY = 'movie_ID_stars';
+
+  // movie_id, star 순의 영화리뷰 데이터 뽑아오기
+  private getReviews(): Record<number, number> {
+    const data = localStorage.getItem(this.STORAGE_KEY);
+    return data ? JSON.parse(data) : {};
+  }
+
+  async getRating(movieId: number): Promise<number | null> {
+    const reviews = this.getReviews();
+    return reviews[movieId] || null;
+  }
+
+  // 전체 영화데이터를 긁어와서 원하는 영화의 score 덮어쓰고 다시 로컬에 저장
+  async saveRating(movieId: number, score: number): Promise<void> {
+    const reviews = this.getReviews();
+    reviews[movieId] = score;
+    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(reviews));
+  }
+}
+
+// 의존성 주입을 통해 교체가 용이하게 만들기 
+// RevieStorage에 일단 Local 주입
+// 추후 웹 API 구체화
+
+export const reviewStorage: ReviewStorage = new LocalReviewStorage();
\ No newline at end of file
diff --git a/src/search.ts b/src/search.ts
index 02d8b682ee..6533210b72 100644
--- a/src/search.ts
+++ b/src/search.ts
@@ -1,4 +1,4 @@
-import { initMovieList } from './movieController.ts';
+import { initMovieList } from './movieListApp.ts';
 
 addEventListener('load', () => {
   const app = document.querySelector('#app');
diff --git a/src/view.ts b/src/view.ts
new file mode 100644
index 0000000000..bd2f302132
--- /dev/null
+++ b/src/view.ts
@@ -0,0 +1,102 @@
+import { ResultData } from './api.ts';
+
+// 스켈레톤 렌더링
+export const renderSkeleton = ($target: Element) => {
+  $target.insertAdjacentHTML('beforeend', createSkeletonHTML());
+};
+
+export const removeSkeleton = ($target: Element) => {
+  $target.querySelectorAll('.skeleton-item').forEach((node) => {
+    node.remove();
+  });
+};
+
+const createSkeletonHTML = (): string => {
+  const skelHTML = /* html */ `
+    <li class="skeleton-item">
+      <div class="item">
+        <div class="thumbnail skeleton skeleton-thumbnail"></div>
+        <div class="item-desc">
+          <div class="skeleton skeleton-text" style="width: 40%;"></div>
+          <div class="skeleton skeleton-text"></div>
+        </div>
+      </div>
+    </li>`;
+  return skelHTML.repeat(20);
+};
+
+// 영화 목록 렌더링
+export const renderMovieList = ($target: HTMLElement | Element, movies: ResultData[]) => {
+  const dataHTML = movies.map(renderMovieItem).join('');
+  $target.insertAdjacentHTML('beforeend', dataHTML);
+};
+
+const renderMovieItem = (data: ResultData): string => {
+  const posterUrl = data.poster_path 
+    ? `https://image.tmdb.org/t/p/w500${data.poster_path}` 
+    : './images/woowacourse_logo.png';
+
+  return /* html */ `
+      <li class="movie-item" data-id="${data.id}">
+        <div class="item">
+          <img class="thumbnail" src="${posterUrl}" alt="${data.title}" />
+          <div class="item-desc">
+            <p class="rate">
+              <img src="./images/star_filled.png" class="star" alt="별점" />
+              <span>${data.vote_average.toFixed(1)}</span>
+            </p>
+            <strong>${data.title}</strong>
+          </div>
+        </div>
+      </li>
+    `;
+};
+
+// 빈 검색 결과 렌더링
+export const renderEmptyState = ($target: HTMLElement | Element, query: string) => {
+  $target.innerHTML = renderEmptyPage(query);
+};
+
+const renderEmptyPage = (query: string) => {
+  return /* html */ `
+      <div class = "empty-result">
+        <img src="./images/empty.png" alt="검색 결과가 없습니다." class="empty-image" />
+        <p>"${query}" 검색 결과가 없습니다.</p>
+      </div>`;
+};
+
+// 히어로 배너 렌더링
+export const updateHeroBanner = (movie: ResultData) => {
+  const $bg = document.querySelector<HTMLElement>('.background-container');
+  if ($bg && movie.backdrop_path) {
+    $bg.style.backgroundImage = `url(https://image.tmdb.org/t/p/original${movie.backdrop_path})`;
+  }
+
+  const $title = document.querySelector('.top-rated-movie .title');
+  if ($title) $title.textContent = movie.title;
+
+  const $rate = document.querySelector('.top-rated-movie .rate-value');
+  if ($rate) $rate.textContent = movie.vote_average.toFixed(1);
+
+  const $detailBtn = document.querySelector('.top-rated-movie .detail') as HTMLButtonElement | null;
+  if ($detailBtn) {
+    $detailBtn.dataset.id = String(movie.id);
+  }
+};
+
+// 더보기 버튼 렌더링
+export const toggleButton = (totalPage: number, currentPage: number) => {
+  if (currentPage < totalPage) {
+    showMoreButton();
+  } else {
+    hideMoreButton();
+  }
+};
+
+export const showMoreButton = () => {
+  document.querySelector('#more-page-button')?.classList.remove('hidden');
+};
+
+export const hideMoreButton = () => {
+  document.querySelector('#more-page-button')?.classList.add('hidden');
+};
diff --git a/styles/main.css b/styles/main.css
index 5035258243..27986a3db0 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -27,10 +27,18 @@ h2 {
   font-size: 1.4rem;
   font-weight: bold;
   margin-bottom: 32px;
+  padding-left: 30px;
+}
+
+@media (max-width: 360px) {
+  h2 {
+    padding-left: 0;
+    text-align: center;
+  }
 }
 
 main {
-  margin: 64px 0;
+  margin: 32px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -58,17 +66,26 @@ button.primary {
   display: none;
 }
 
+.header-top-wrapper {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 40px;
+}
+
 .pretty-search-bar {
-display: flex;
+  display: flex;
   align-items: center;
   justify-content: space-between;
-
-  width: 480px; 
-  flex-shrink: 0;
-
+  
+  width: 90%;
+  max-width: 480px;
+  
   height: 48px;
   padding: 0 16px;
-
   border-radius: 40px;
   border: 1px solid var(--color-bluegray-30);
   background: var(--color-bluegray-90);
@@ -76,6 +93,7 @@ display: flex;
 
 .search-input {
   flex: 1;
+  min-width: 0;
   border: none;
   background: transparent;
   outline: none;
@@ -84,15 +102,19 @@ display: flex;
   font-size: 16px;
   font-weight: 700;
   padding: 0;
+  text-overflow: ellipsis;
 }
 
 .search-icon-btn {
+  flex-shrink: 0;
   border: none;
   background: transparent;
   cursor: pointer;
   padding: 0;
   margin-left: 10px;
-  display: flex; align-items: center; justify-content: center;
+  display: flex; 
+  align-items: center; 
+  justify-content: center;
 }
 
 .empty-result {
@@ -116,7 +138,7 @@ display: flex;
   position: relative;
   background-position: center center;
   background-size: cover;
-  height: 500px;
+  max-height: 500px;
   padding: 48px;
 }
 
@@ -169,12 +191,15 @@ h1.logo {
 span.rate-value {
   margin-left: 8px;
   font-weight: bold;
-  font-size: 1.66rem;
+  font-size: 1.66rem; 
 }
 
+
 .title {
-  font-size: 3rem;
+  font-size: clamp(1rem, 6vw, 3rem); 
   font-weight: bold;
+  word-break: keep-all;
+  line-height: 1.2;
 }
 
 footer.footer {
diff --git a/styles/modal.css b/styles/modal.css
index 240a7a37c1..ff1c69890e 100644
--- a/styles/modal.css
+++ b/styles/modal.css
@@ -9,15 +9,15 @@ body.modal-open {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경을 위해 설정 */
-  backdrop-filter: blur(10px); /* 블러 효과 적용 */
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(10px);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10;
-  visibility: hidden; /* 모달이 기본적으로 보이지 않도록 설정 */
+  visibility: hidden;
   opacity: 0;
   transition:
     opacity 0.3s ease,
@@ -36,7 +36,10 @@ body.modal-open {
   color: white;
   z-index: 2;
   position: relative;
-  width: 1000px;
+  max-width: 1000px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
 }
 
 .close-modal {
@@ -56,9 +59,25 @@ body.modal-open {
   display: flex;
 }
 
+.modal-loading-wrapper {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.modal-image {
+  flex-shrink: 0;
+  width: 40%;
+  max-width: 350px;
+}
+
 .modal-image img {
-  width: 380px;
+  width: 100%;
   border-radius: 16px;
+  object-fit: cover;
 }
 
 .modal-description {
@@ -79,10 +98,176 @@ body.modal-open {
 
 .modal-description h2 {
   font-size: 2rem;
-  margin: 0 0 8px;
+  padding: 0 0 8px 0;
+}
+
+.rate {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  padding: 0 0 12px 0;
+}
+
+.average-star {
+  width: 24px;
+  margin: 0 0 0 8px;
+}
+
+.modal-description .rate .average-text {
+  margin-left: 0;
+}
+
+.average-text {
+  color: var(--color-white);
+}
+
+.my-rating-container {
+  margin: 24px 0;
+}
+
+.my-rating-container h3 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 18px;
+}
+
+.star-rating {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 24px;
+}
+
+.stars-wrapper {
+  display: flex;
+  flex-direction: row; 
+  align-items: center;
+}
+
+.rate-star-img {
+  width: 32px;
+  height: 32px;
+  margin-right: 4px;
+  transition: transform 0.1s ease;
+}
+
+.rate-star-img:hover {
+  transform: scale(1.1);
+}
+
+.rating-desc {
+  margin-left: 12px;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.score-number {
+  color: var(--color-bluegray-30);
+  font-weight: bold; 
+  font-size: 1.5rem;
+}
+
+.plot-container {
+  margin-top: 24px;
+}
+
+.plot-container h3 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 12px;
 }
 
 .detail {
   max-height: 430px;
   overflow-y: auto;
 }
+
+@media (max-width: 1024px) {
+  .modal-background {
+    align-items: flex-end;
+  }
+
+  .modal {
+    width: 100%;
+    max-width: 100%;
+    border-radius: 24px 24px 0 0;
+    padding: 32px 24px 48px;
+    max-height: 50vh;
+    
+    transform: translateY(100%);
+    animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  }
+
+  .modal-container {
+    flex-direction: column; 
+    align-items: flex-start;
+  }
+
+  .close-modal {
+    top: 24px;
+    right: 24px;
+    z-index: 1000;
+  }
+
+  .modal-image {
+    align-self: center;
+    width: 40%;
+    min-width: 150px;
+    margin-bottom: 16px;
+  }
+
+  .modal-image img {
+    width: 100%;
+    margin-bottom: 0;
+  }
+  
+  .modal-description {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .modal-description h2,
+  .modal-description .category {
+    text-align: center;
+  }
+
+  .modal-description .rate {
+    justify-content: center;
+  }
+
+  .my-rating-container { text-align: left; }
+  .star-rating { justify-content: flex-start; }
+  .plot-container h3, .plot-container .detail { text-align: left; }
+}
+
+@media (max-width: 360px) {
+  .modal-image {
+    display: none; 
+  }
+
+  .my-rating-container {
+    text-align: center;
+  }
+  
+  .star-rating {
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .rating-desc {
+    margin-left: 0; 
+  }
+
+  .plot-container h3 {
+    text-align: center;
+  }
+  
+  .plot-container .detail {
+    text-align: left;
+  }
+}
+
+@keyframes slideUp {
+  to { transform: translateY(0); }
+}
\ No newline at end of file
diff --git a/styles/skeleton.css b/styles/skeleton.css
new file mode 100644
index 0000000000..32e0a00db4
--- /dev/null
+++ b/styles/skeleton.css
@@ -0,0 +1,26 @@
+/* 스켈레톤 기본 뼈대 애니메이션 */
+.skeleton {
+  background: linear-gradient(90deg, var(--color-bluegray-80) 25%, var(--color-bluegray-90) 50%, var(--color-bluegray-80) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 8px;
+}
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* 포스터(이미지) 크기의 회색 박스 */
+.skeleton-thumbnail {
+  width: 200px;
+  height: 300px;
+  margin-bottom: 8px;
+}
+
+/* 텍스트(제목, 별점) 크기의 회색 박스 */
+.skeleton-text {
+  height: 20px;
+  margin-bottom: 6px;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/styles/thumbnail.css b/styles/thumbnail.css
index 44d578b86d..c081debbc1 100644
--- a/styles/thumbnail.css
+++ b/styles/thumbnail.css
@@ -9,9 +9,25 @@
 }
 
 .thumbnail {
-  width: 200px;
-  height: 300px;
+  width: 100%;
+  aspect-ratio: 2/3;
   border-radius: 8px;
+  object-fit: cover;
+  margin-bottom: 12px;
+}
+
+@media (max-width: 1024px) {
+  .thumbnail-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 360px) {
+  .thumbnail-list {
+    grid-template-columns: repeat(1, 1fr);
+    gap: 20px 15px;
+    padding: 0 15px;
+  }
 }
 
 .item {