From ef598eb608a5a81c52000811c451443b7225c52f Mon Sep 17 00:00:00 2001
From: LEE BO HYUN <92661884+frombozztoang@users.noreply.github.com>
Date: Thu, 22 Feb 2024 20:44:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:#9=20ModalPortal=20util=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/ModalPortal.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/utils/ModalPortal.tsx

diff --git a/src/utils/ModalPortal.tsx b/src/utils/ModalPortal.tsx
new file mode 100644
index 0000000..f7290da
--- /dev/null
+++ b/src/utils/ModalPortal.tsx
@@ -0,0 +1,18 @@
+"use client";
+import React, { ReactNode, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+
+const ModalPortal: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const el = document.getElementById("modal");
+    setContainer(el);
+  }, []);
+
+  if (!container) return null;
+
+  return ReactDOM.createPortal(children, container);
+};
+
+export default ModalPortal;