From e239078c72e8ec527ce24d3609ad085e19373903 Mon Sep 17 00:00:00 2001
From: dongkyun-dev <thd6576@naver.com>
Date: Sat, 13 Jan 2024 13:21:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modal/components/ModalContainer.tsx       | 42 +++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/components/ModalContainer.tsx b/src/components/Modal/components/ModalContainer.tsx
index 0d28e839..0080f2cf 100644
--- a/src/components/Modal/components/ModalContainer.tsx
+++ b/src/components/Modal/components/ModalContainer.tsx
@@ -1,15 +1,51 @@
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren, useCallback, useEffect, useRef } from 'react';
 
+import Button from '@components/Button';
+import Icon from '@components/Icon';
 import { PORTAL_ID } from '@constants/portal';
+import { useModalStore } from '@stores/modal';
 
 import Portal from '../../Portal';
 import * as styles from '../style.css';
 
 const ModalContainer = ({ children }: PropsWithChildren<unknown>) => {
+  const dimmedRef = useRef<HTMLDivElement>(null);
+  const { closeModal } = useModalStore();
+
+  const onClickDimmed = useCallback(
+    (e: MouseEvent) => {
+      const isDimmedClick = dimmedRef.current && e.target === dimmedRef.current;
+      isDimmedClick && closeModal();
+    },
+    [dimmedRef, closeModal],
+  );
+
+  const handleEsc = useCallback(
+    (event: KeyboardEvent) => {
+      event.key === 'Escape' && closeModal();
+    },
+    [closeModal],
+  );
+
+  useEffect(() => {
+    document.addEventListener('click', onClickDimmed);
+    document.addEventListener('keydown', handleEsc);
+
+    return () => {
+      document.removeEventListener('click', onClickDimmed);
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [onClickDimmed, handleEsc]);
+
   return (
     <Portal id={PORTAL_ID.MODAL}>
-      <div className={styles.dimmed} />
-      <div className={styles.modalStyle}>{children}</div>
+      <div className={styles.dimmed} ref={dimmedRef} />
+      <div className={styles.modalStyle}>
+        <Button className={styles.closeButton} onClick={closeModal}>
+          <Icon icon="close" />
+        </Button>
+        {children}
+      </div>
     </Portal>
   );
 };