[FE] feat: 글 업로드 중에는 모달이 닫히지 않도록 수정 (#193)

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

* feat: 파일을 업로드 중일 때는 모달을 닫을 수 없도록 수정

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>
         </>

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 ? (