[2단계 - 상세 정보 & UI/UX 개선하기] 초코(강다빈) 미션 제출합니다.

src/components/Modal.ts

@@ -114,6 +114,8 @@ export default class Modal {
       this.#updateVoteText(voteForMovie);
     }
 
+    document.addEventListener('keydown', this.#handleKeyDown);
+
     this.#isOpen = true;
   }
 
@@ -142,9 +144,21 @@ export default class Modal {
     myVoteDescription.textContent = VOTE[voteForMovie];
   }
 
+  #handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.closeModal();
+    }
+  };
+
+  removeKeydownEventListener() {
+    document.removeEventListener('keydown', this.#handleKeyDown);
+  }
+
   closeModal() {
     if (!this.#isOpen) return;
 
+    this.removeKeydownEventListener();
+
     if (this.#modalElement) {
       this.#modalElement.remove();
       this.#modalElement = null;