depromeet · donghunee · Jul 8, 2024 · Jul 6, 2024 · Jul 6, 2024 · Jul 6, 2024
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <script type="module" src="/src/app.tsx"></script>
   </body>
 </html>
diff --git a/src/app/MainPage.tsx b/src/app/MainPage.tsx
@@ -2,14 +2,22 @@
 import { useAtom } from "jotai";
 
 import { messageAtom } from "@/store/messageAtom.tsx";
+import Modal from "@/component/common/modal/Modal";
+import useModal from "@/hooks/useModal";
 
 function MainPage() {
   const [message] = useAtom(messageAtom);
+  const { open, close, isOpen } = useModal();
   return (
-    <div>
-      <span>welcome to layer 🎇</span>
-      <div>{message}</div>
-    </div>
+    <>
+      <div>
+        <span>welcome to layer 🎇</span>
+        <div onClick={open}>{message}</div>
+      </div>
+      <Modal onClose={close} isModalOpen={isOpen}>
+        <div>냠냠</div>
+      </Modal>
-      <Modal onClose={close} isModalOpen={isOpen}>
-        <div>냠냠</div>
-      </Modal>
+      {isOpen &&
+        <Modal onClose={close}>
+          <div>냠냠</div>
+        </Modal>
+      }
-      <Modal onClose={close} isModalOpen={isOpen}>
-        <div>냠냠</div>
-      </Modal>
+      {isOpen &&
+        <Modal onClose={close}>
+          <div>냠냠</div>
+        </Modal>
+      }
+    </>
   );
 }
 

diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx
@@ -0,0 +1,69 @@
+import ModalPortal from "@/component/common/modal/ModalPortal";
+import { css } from "@emotion/react";
+import { PropsWithChildren, useEffect, useRef } from "react";
+
+type Props = PropsWithChildren<{
+  isModalOpen: boolean;
+  onClose: () => void;
+}>;
+
+function Modal({ onClose, isModalOpen, children }: Props) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  // 모달 오픈 시 스크롤 방지
+  useEffect(() => {
+    document.body.style.overflow = isModalOpen ? "hidden" : "auto";
+  }, [isModalOpen]);
+
+  // 모달 영역 이외 클릭 시 모달 닫기
+  useEffect(() => {
+    const listener = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+    };
+  }, [onClose, modalRef]);
+
+  if (!isModalOpen) return null;
+
+  return (
+    // FIXME: 추후 디자인 토큰 연동 후 컬러 값 변경
+    <ModalPortal>
+      <div
+        css={css`
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.4);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        `}
+      >
+        <div
+          ref={modalRef}
+          css={css`
+            padding: 2rem;
+            min-width: 30rem;
+            min-height: 10rem;
+            background-color: #ffffff;
+            border: 1px solid #cbcbcb;
+            border-radius: 1rem;
+          `}
+        >
+          {children}
+        </div>
+      </div>
+    </ModalPortal>
+  );
+}
+
+export default Modal;
diff --git a/src/component/common/modal/ModalPortal.tsx b/src/component/common/modal/ModalPortal.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import ReactDom from "react-dom";
+
+type Props = {
+  children: ReactNode;
+};
+
+const ModalPortal = ({ children }: Props) => {
+  const el = document.getElementById("modal-root") as HTMLElement;
+  return ReactDom.createPortal(children, el);
+};
+
+export default ModalPortal;
diff --git a/src/hooks/useModal.ts b/src/hooks/useModal.ts
@@ -0,0 +1,21 @@
+import { useCallback, useState } from "react";
+
+const useModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  return {
+    open,
+    close,
+    isOpen,
+  };
+};
+
+export default useModal;