From 0e02de8054e94b160b76b2db93dc73944c7b8a52 Mon Sep 17 00:00:00 2001
From: Athena <125889247+AthanaD@users.noreply.github.com>
Date: Fri, 8 Mar 2024 18:26:36 +0800
Subject: [PATCH] Update PopupModal.tsx

---
 src/components/PopupModal/PopupModal.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/PopupModal/PopupModal.tsx b/src/components/PopupModal/PopupModal.tsx
index dbe91a3..b1b7093 100644
--- a/src/components/PopupModal/PopupModal.tsx
+++ b/src/components/PopupModal/PopupModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -36,6 +36,22 @@ const PopupModal = ({
     else _handleClose();
   };
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      if (handleClickBackdrop) handleClickBackdrop();
+      else handleClose ? handleClose() : setIsModalOpen(false);
+    } else if (event.key === 'Enter') {
+      if (handleConfirm) handleConfirm();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleConfirm, handleClose, handleClickBackdrop]);
+
   if (modalRoot) {
     return ReactDOM.createPortal(
       <div className='fixed top-0 left-0 z-[999] w-full p-4 overflow-x-hidden overflow-y-auto h-full flex justify-center items-center'>