Hotfix: 스와이프 코치마크의 백드랍을 클릭하여도 모달이 닫히지 않도록 수정 (#447)

* feat: canCloseByBackDrop 속성을 추가하여 backdrop 클릭으로 모달닫기 여부 적용

* fix: 스와이프 코치마크 모달은 백드랍 클릭시 닫히지 않도록 수정

frontend/src/pages/SongDetailListPage.tsx

@@ -95,7 +95,12 @@ const SongDetailListPage = () => {
   return (
     <>
       {onboarding && (
-        <Modal isOpen={isOpen} closeModal={closeCoachMark} css={{ backgroundColor: 'transparent' }}>
+        <Modal
+          isOpen={isOpen}
+          closeModal={closeCoachMark}
+          css={{ backgroundColor: 'transparent' }}
+          canCloseByBackDrop={false}
+        >
           <Spacing direction="vertical" size={170} />
           <img src={swipeUpDown} width="100px" />
           <Spacing direction="vertical" size={30} />

frontend/src/shared/components/Modal/Modal.tsx

@@ -9,9 +9,16 @@ interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   closeModal: () => void;
   children: ReactElement | ReactElement[];
   css?: CSSProp;
+  canCloseByBackDrop?: boolean;
 }
 
-const Modal = ({ isOpen, closeModal, children, css }: PropsWithChildren<ModalProps>) => {
+const Modal = ({
+  canCloseByBackDrop = true,
+  isOpen,
+  closeModal,
+  children,
+  css,
+}: PropsWithChildren<ModalProps>) => {
   const closeByEsc = useCallback(
     ({ key }: KeyboardEvent) => {
       if (key === 'Escape') {
@@ -21,6 +28,12 @@ const Modal = ({ isOpen, closeModal, children, css }: PropsWithChildren<ModalPro
     [closeModal]
   );
 
+  const closeModalByBackDrop = () => {
+    if (!canCloseByBackDrop) return;
+
+    closeModal();
+  };
+
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = 'hidden';
@@ -37,7 +50,7 @@ const Modal = ({ isOpen, closeModal, children, css }: PropsWithChildren<ModalPro
     <>
       {isOpen && (
         <Wrapper>
-          <Backdrop role="backdrop" onClick={closeModal} aria-hidden="true" />
+          <Backdrop role="backdrop" onClick={closeModalByBackDrop} aria-hidden="true" />
           <Container role="dialog" $css={css}>
             {children}
           </Container>