modify: useOutsideClick 훅 callback 사용성 개선

CoolPeace-yanolza · Jan 19, 2024 · 0fc1c46 · 0fc1c46
1 parent 0e6769d
commit 0fc1c46
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx
@@ -22,7 +22,7 @@ const CouponExpose = () => {
     setIsRoomList(!isRoomList);
   };
 
-  useOutsideClick(roomListRef, setIsRoomList);
+  useOutsideClick(roomListRef, () => setIsRoomList(false));
 
   return (
     <CouponContainer $isToggle={isToggle}>

diff --git a/src/components/common/Layout/Header/User/UserModal/index.tsx b/src/components/common/Layout/Header/User/UserModal/index.tsx
@@ -7,12 +7,11 @@ import { getCookies } from '@utils/lib/cookies';
 import theme from '@styles/theme';
 
 const UserModal = ({ isOpen, setIsUserModalOpen }: UserModal) => {
+  const modalRef = useRef<HTMLDivElement>(null);
   const userName = getCookies('userName');
   const userEmail = getCookies('userEmail');
 
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useOutsideClick(modalRef, setIsUserModalOpen);
+  useOutsideClick(modalRef, () => setIsUserModalOpen(false));
 
   return (
     <Modal

diff --git a/src/hooks/lib/useOutsideClick.ts b/src/hooks/lib/useOutsideClick.ts
@@ -2,11 +2,11 @@ import { RefObject, useEffect } from 'react';
 
 const useOutsideClick = <T extends HTMLElement>(
   ref: RefObject<T>,
-  setter: React.Dispatch<React.SetStateAction<boolean>>
+  setter: () => void
 ): void => {
   const handleClickOutside = (e: MouseEvent) => {
     if (ref.current && !ref.current.contains(e.target as Node)) {
-      setter(false);
+      setter();
     }
   };
 
@@ -33,7 +33,7 @@ const YourComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
   const modalRef = useRef(null);
 
-  useOutsideClick(modalRef, setIsOpen);
+  useOutsideClick(modalRef, () => setIsOpen(boolean));
 
   // ...