feat: 홈이동 모달에 useOutsideClick훅 연결

Author: lgrin-byte

src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx

@@ -42,7 +42,7 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
   };
 
   return (
-    <Modal isOpen={isOpen}>
+    <Modal isOpen={isOpen} onClose={handleClose}>
       <div className={styles.Modal}>
         <Text variant="titleSm" color="primary" align="center" as="h2">
           홈으로 가시겠어요?

src/components/ui/Modal/Modal.tsx

@@ -1,16 +1,19 @@
 import type { PropsWithChildren } from "react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 import classNames from "classnames";
 
 import styles from "@/components/ui/Modal/Modal.module.scss";
 import Portal from "@/components/ui/Modal/Portal";
 
+import useClickOutside from "@/hooks/common/useClickOutside";
+
 interface ModalProps extends PropsWithChildren {
+  onClose: () => void;
   isOpen: boolean;
 }
 
-const Modal = ({ isOpen, children }: ModalProps) => {
+const Modal = ({ isOpen, children, onClose }: ModalProps) => {
   useEffect(() => {
     document.body.style.overflow = "hidden";
 
@@ -19,6 +22,10 @@ const Modal = ({ isOpen, children }: ModalProps) => {
     };
   }, []);
 
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(modalRef, onClose);
+
   return (
     <>
       {isOpen && (
@@ -30,6 +37,7 @@ const Modal = ({ isOpen, children }: ModalProps) => {
           />
 
           <div
+            ref={modalRef}
             className={classNames(styles.Modal, {
               [styles.Open]: isOpen,
             })}