From dd1e28c91cde32138d46278c65441330baf4cfa1 Mon Sep 17 00:00:00 2001
From: Nangkyeong Lim <57815133+nangkyeonglim@users.noreply.github.com>
Date: Fri, 4 Aug 2023 02:00:48 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20feat:=20=EA=B8=80=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EC=A4=91=EC=97=90=EB=8A=94=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EC=9D=B4=20=EB=8B=AB=ED=9E=88=EC=A7=80=20=EC=95=8A=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=20(#193)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: `Modal` 컴포넌트에 close 옵션들 추가

* feat: 파일을 업로드 중일 때는 모달을 닫을 수 없도록 수정
---
 .../src/components/@common/Modal/Modal.tsx    | 37 +++++++++++++++----
 .../FileUploadModal/FileUploadModal.tsx       |  8 +++-
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/@common/Modal/Modal.tsx b/frontend/src/components/@common/Modal/Modal.tsx
index e2a8fb3e0..18dcf85c9 100644
--- a/frontend/src/components/@common/Modal/Modal.tsx
+++ b/frontend/src/components/@common/Modal/Modal.tsx
@@ -6,10 +6,21 @@ import { CloseIcon } from 'assets/icons';
 
 type Props = {
   isOpen: boolean;
+  canBackdropClose?: boolean;
+  canEscKeyClose?: boolean;
+  hasCloseButton?: boolean;
   closeModal: () => void;
 } & ComponentPropsWithoutRef<'dialog'>;
 
-const Modal = ({ isOpen = true, closeModal, children, ...rest }: Props) => {
+const Modal = ({
+  isOpen = true,
+  canBackdropClose = true,
+  canEscKeyClose = true,
+  hasCloseButton = true,
+  closeModal,
+  children,
+  ...rest
+}: Props) => {
   const onKeyDownEscape = useCallback(
     (event: KeyboardEvent) => {
       if (event.key !== 'Escape') return;
@@ -20,25 +31,35 @@ const Modal = ({ isOpen = true, closeModal, children, ...rest }: Props) => {
 
   useEffect(() => {
     if (isOpen) {
-      window.addEventListener('keydown', onKeyDownEscape);
       document.body.style.overflow = 'hidden';
     }
 
     return () => {
-      window.removeEventListener('keydown', onKeyDownEscape);
       document.body.style.overflow = 'auto';
     };
-  }, [isOpen, onKeyDownEscape]);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen && canEscKeyClose) {
+      window.addEventListener('keydown', onKeyDownEscape);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDownEscape);
+    };
+  }, [isOpen, canEscKeyClose, onKeyDownEscape]);
 
   return createPortal(
     <S.ModalWrapper>
       {isOpen && (
         <>
-          <S.Backdrop onClick={closeModal} />
+          <S.Backdrop onClick={canBackdropClose ? closeModal : undefined} />
           <S.Content {...rest}>
-            <S.CloseButton type='button' onClick={closeModal}>
-              <CloseIcon width={24} height={24} />
-            </S.CloseButton>
+            {hasCloseButton && (
+              <S.CloseButton type='button' onClick={closeModal}>
+                <CloseIcon width={24} height={24} />
+              </S.CloseButton>
+            )}
             {children}
           </S.Content>
         </>
diff --git a/frontend/src/components/FileUploadModal/FileUploadModal.tsx b/frontend/src/components/FileUploadModal/FileUploadModal.tsx
index d7639134b..935bb9943 100644
--- a/frontend/src/components/FileUploadModal/FileUploadModal.tsx
+++ b/frontend/src/components/FileUploadModal/FileUploadModal.tsx
@@ -18,7 +18,13 @@ const FileUploadModal = ({ isOpen, closeModal }: Props) => {
     useFileUploadModal({ closeModal, categoryId });
 
   return (
-    <Modal isOpen={isOpen} closeModal={closeModal}>
+    <Modal
+      isOpen={isOpen}
+      canBackdropClose={!isLoading}
+      canEscKeyClose={!isLoading}
+      hasCloseButton={!isLoading}
+      closeModal={closeModal}
+    >
       <S.Container>
         <S.Title>글 가져오기</S.Title>
         {isLoading ? (