diff --git a/frontend/src/components/common/Modal/Modal.stories.tsx b/frontend/src/components/common/Modal/Modal.stories.tsx
index 4b460de21..516b8a254 100644
--- a/frontend/src/components/common/Modal/Modal.stories.tsx
+++ b/frontend/src/components/common/Modal/Modal.stories.tsx
@@ -20,11 +20,14 @@ export const Default = () => {
     setIsOpen(true);
   };
 
+  const closeModal = () => {
+    if (isOpen === true) setIsOpen(false);
+  };
   return (
     <>
       <button onClick={openModal}>Open Modal</button>
       {isOpen && (
-        <Modal size="sm" onModalClose={setIsOpen}>
+        <Modal size="sm" onModalClose={closeModal}>
           <p>This is Default Modal</p>
         </Modal>
       )}
@@ -39,11 +42,15 @@ export const Wide = () => {
     setIsOpen(true);
   };
 
+  const closeModal = () => {
+    if (isOpen === true) setIsOpen(false);
+  };
+
   return (
     <>
       <button onClick={openModal}>Open Modal</button>
       {isOpen && (
-        <Modal size="lg" onModalClose={setIsOpen}>
+        <Modal size="lg" onModalClose={closeModal}>
           <p>This is Default Modal</p>
         </Modal>
       )}
@@ -66,7 +73,7 @@ export const WithCloseButton = () => {
     <>
       <button onClick={openModal}>Open Modal</button>
       {isOpen && (
-        <Modal size="sm" onModalClose={setIsOpen}>
+        <Modal size="sm" onModalClose={closeModal}>
           <>
             <S.Header>
               <p>Modal Title</p>
diff --git a/frontend/src/components/common/Modal/index.tsx b/frontend/src/components/common/Modal/index.tsx
index 191c63a62..b9d1a1d57 100644
--- a/frontend/src/components/common/Modal/index.tsx
+++ b/frontend/src/components/common/Modal/index.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, Dispatch } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { ModalSizeType } from '@type/modalSize';
 
 import * as S from './style';
 
 interface ModalProps {
-  onModalClose: Dispatch<React.SetStateAction<boolean>>;
+  onModalClose: () => void;
   children: React.JSX.Element;
   size: ModalSizeType;
 }
@@ -13,21 +13,17 @@ interface ModalProps {
 export default function Modal({ onModalClose, children, size }: ModalProps) {
   const BackDropRef = useRef<HTMLDivElement>(null);
 
-  const closeModal = () => {
-    onModalClose(false);
-  };
-
   useEffect(() => {
     const handler = (e: MouseEvent) => {
       if (e.target === BackDropRef.current) {
-        closeModal();
+        onModalClose();
       }
     };
 
     document.addEventListener('click', handler);
 
     return () => document.removeEventListener('click', handler);
-  }, [BackDropRef, closeModal]);
+  }, [BackDropRef, onModalClose]);
 
   return (
     <S.All>