[Feat/#51] useClickOutside 훅 구현 및 추가

src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.stories.tsx

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

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/SelectTag/TagSheet/TagSheet.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 import * as Dialog from "@radix-ui/react-dialog";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
@@ -10,6 +10,7 @@ import Icon from "@/components/ui/Icon/Icon";
 import Input from "@/components/ui/Input/Input";
 import Text from "@/components/ui/Text/Text";
 
+import useOnClickOutside from "@/hooks/common/useClickOutside";
 import { useFocus } from "@/hooks/common/useFocus";
 
 interface TagSheetProps {
@@ -36,11 +37,16 @@ const TagSheet = ({ isOpen, handleClose, handleTagAdd }: TagSheetProps) => {
     setNewTag(e.target.value);
   };
 
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(modalRef, handleClose);
+
   return (
     <Dialog.Root open={isOpen}>
       <Dialog.Portal>
         <Dialog.Overlay className={styles.DialogOverlay} />
         <Dialog.Content
+          ref={modalRef}
           className={classNames(styles.BottomSheet, {
             [styles.Open]: isOpen,
             [styles.Closed]: !isOpen,

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,
             })}

src/hooks/common/useClickOutside.ts

@@ -0,0 +1,21 @@
+import type { RefObject } from "react";
+import { useEffect } from "react";
+
+export default function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: (event: Event) => void,
+) {
+  useEffect(() => {
+    const listener = (event: Event) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler(event);
+    };
+
+    document.addEventListener("click", listener, true);
+    return () => {
+      document.removeEventListener("click", listener, true);
+    };
+  }, [ref, handler]);
+}