From 0ae16305914ac6ea8fffc199e51e8890f6926dfa Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Fri, 23 Aug 2024 11:47:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20ContentModal=20=EC=97=90=20isCloseOnBac?=
 =?UTF-8?q?kground=20props=20=EC=B6=94=EA=B0=80=20(#533)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 추후에 배경화면 클릭과 esc를 통한 닫기 기능을 막는 작업을 분리해서 할 수 있도록 해야할 것 같아요.
---
 .../components/common/modals/ContentModal/index.tsx    | 10 ++++++++--
 .../components/common/modals/ModalBackground/index.tsx |  2 +-
 .../ReviewZonePage/components/PasswordModal/index.tsx  |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/modals/ContentModal/index.tsx b/frontend/src/components/common/modals/ContentModal/index.tsx
index 64733c4e2..37806241d 100644
--- a/frontend/src/components/common/modals/ContentModal/index.tsx
+++ b/frontend/src/components/common/modals/ContentModal/index.tsx
@@ -9,12 +9,18 @@ import * as S from './styles';
 interface ContentModalProps {
   title?: string;
   handleClose: () => void;
+  isClosableOnBackground?: boolean;
 }
 
-const ContentModal = ({ title, handleClose, children }: EssentialPropsWithChildren<ContentModalProps>) => {
+const ContentModal = ({
+  title,
+  handleClose,
+  children,
+  isClosableOnBackground = true,
+}: EssentialPropsWithChildren<ContentModalProps>) => {
   return (
     <ModalPortal>
-      <ModalBackground closeModal={handleClose}>
+      <ModalBackground closeModal={isClosableOnBackground ? handleClose : null}>
         <S.ContentModalContainer>
           <S.ContentModalHeader>
             <S.Title>{title}</S.Title>
diff --git a/frontend/src/components/common/modals/ModalBackground/index.tsx b/frontend/src/components/common/modals/ModalBackground/index.tsx
index 25fa8fd0c..39a50df18 100644
--- a/frontend/src/components/common/modals/ModalBackground/index.tsx
+++ b/frontend/src/components/common/modals/ModalBackground/index.tsx
@@ -7,7 +7,7 @@ import * as S from './styles';
 interface ModalBackgroundProps {
   closeModal: (() => void) | null;
 }
-
+// TODO: 배경, ESC를 통한 모달 닫히는 기능을 불리해야함
 const ModalBackground: React.FC<PropsWithChildren<ModalBackgroundProps>> = ({ children, closeModal }) => {
   const modalBackgroundRef = useRef<HTMLDivElement>(null);
   useModalClose({ closeModal, modalBackgroundRef });
diff --git a/frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx b/frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx
index 6e3424839..508d032ae 100644
--- a/frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx
+++ b/frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx
@@ -55,7 +55,7 @@ const PasswordModal = ({ closeModal, reviewRequestCode }: PasswordModalProps) =>
   };
 
   return (
-    <ContentModal title={REVIEW_PASSWORD_INPUT_MESSAGE} handleClose={closeModal}>
+    <ContentModal title={REVIEW_PASSWORD_INPUT_MESSAGE} handleClose={closeModal} isClosableOnBackground={false}>
       <S.PasswordModal>
         <S.InputContainer>
           <S.PasswordInputContainer>