diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
new file mode 100644
index 0000000..ed64e99
--- /dev/null
+++ b/src/components/common/Modal.tsx
@@ -0,0 +1,38 @@
+import { AnimatePresence, motion } from "framer-motion";
+import type { FC, ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+};
+
+const Modal: FC<ModalProps> = ({ isOpen, onClose, children }) => {
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className="fixed inset-0 bg-gray100 bg-opacity-50 flex items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={onClose}
+        >
+          <motion.div
+            className="bg-offWhite010 p-4 rounded-20"
+            initial={{ scale: 0.5, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.5, opacity: 0 }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body,
+  );
+};
+
+export default Modal;