feat: 모달에 esc 버튼 클릭 시 닫는 로직 추가

boostcampwm-2024 · Dec 1, 2024 · 22dd871 · 22dd871
1 parent 6d54411
commit 22dd871
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/packages/client/src/shared/ui/modal/index.tsx b/packages/client/src/shared/ui/modal/index.tsx
@@ -8,6 +8,18 @@ export default function Modal({ children, onClose }: ModalProps) {
   const [isMounted, setIsMounted] = useState(false);
   useEffect(() => {
     setIsMounted(true);
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    });
+    return () => {
+      document.removeEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      });
+    };
   }, []);
   if (!isMounted) return null;
   const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {