upd

client/src/components/ModalContainer.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { Transition } from "react-transition-group";
 import useModalStore from "../stores/useModalStore";
+import { useEffect } from "react";
 
 function ModalContainer() {
   const [modal, setModal] = useModalStore((state) => [
@@ -7,6 +9,20 @@ function ModalContainer() {
     state.setModal,
   ]);
 
+  useEffect(() => {
+    function handleKeyUp(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        setModal(null);
+      }
+    }
+
+    document.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
   return (
     <Transition
       in={modal ? true : false}
@@ -16,12 +32,9 @@ function ModalContainer() {
     >
       {(state) => (
         <div
-          onClick={() => setModal(null)}
-          className={`min-h-screen p-8 absolute z-20 top-0 left-0 w-full flex justify-center items-center bg-black bg-opacity-30 overflow-auto cursor-pointer transition-opacity ${state}`}
+          className={`min-h-screen p-8 absolute z-20 top-0 left-0 w-full flex justify-center items-center bg-black bg-opacity-30 overflow-auto transition-opacity ${state}`}
         >
-          <div onClick={(e) => e.stopPropagation()} className="cursor-default">
-            {modal}
-          </div>
+          {modal}
         </div>
       )}
     </Transition>