From 5d3e6658f236a083e35b59f68ddaa4e740cfe2dc Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 02:19:36 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20#43=20-=20useModalLogic=20=ED=9B=85?=
 =?UTF-8?q?=EC=97=90=20useCallback=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Modal/hooks/useModalLogic.ts       | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/common/Modal/hooks/useModalLogic.ts b/src/components/common/Modal/hooks/useModalLogic.ts
index 19c99fc9..36d1d126 100644
--- a/src/components/common/Modal/hooks/useModalLogic.ts
+++ b/src/components/common/Modal/hooks/useModalLogic.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 
 export interface useModalLogicProps {
   onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void
@@ -29,16 +29,22 @@ const useModalLogic = ({
     }
   }, [onClose, onConfirm])
 
-  const handleClickOverlay = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === modalRef.current) {
-      onClose()
-    }
-  }
+  const handleClickOverlay = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === modalRef.current) {
+        onClose()
+      }
+    },
+    [modalRef, onClose],
+  )
 
-  const handleClickConfirm = (e?: React.MouseEvent<HTMLButtonElement>) => {
-    onConfirm?.()
-    onClose()
-  }
+  const handleClickConfirm = useCallback(
+    (e?: React.MouseEvent<HTMLButtonElement>) => {
+      onConfirm?.()
+      onClose()
+    },
+    [onConfirm, onClose],
+  )
 
   return { handleClickOverlay, handleClickConfirm }
 }