From e53c9ffa351f87a00a617fe3c45132f0f0824583 Mon Sep 17 00:00:00 2001
From: Ye-Chan Kang <kyechan99@gmail.com>
Date: Thu, 7 Mar 2024 22:29:54 +0900
Subject: [PATCH] fix: check mouse is in HoverCard

---
 .../common/HoverCard/HoverCardToggle.tsx      |  9 ++++++++-
 .../common/HoverCard/useHoverWaiting.ts       | 19 +++++++++----------
 src/components/portal/PortalContent.tsx       |  2 +-
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/common/HoverCard/HoverCardToggle.tsx b/src/components/common/HoverCard/HoverCardToggle.tsx
index 97ec777..08eedd9 100644
--- a/src/components/common/HoverCard/HoverCardToggle.tsx
+++ b/src/components/common/HoverCard/HoverCardToggle.tsx
@@ -17,11 +17,18 @@ export const HoverCardToggle = React.forwardRef<HTMLDivElement, React.ComponentP
     const compRef = React.useRef<HTMLDivElement | null>(null);
     const { onOpen: onOpenWaiting, onClose } = useHoverWaiting();
 
-    const onOpen = () => {
+    React.useEffect(() => {
       if (compRef.current) {
         const rect = compRef.current;
         setToggleElment(rect);
       }
+    }, [setToggleElment]);
+
+    const onOpen = () => {
+      // if (compRef.current) {
+      //   const rect = compRef.current;
+      //   setToggleElment(rect);
+      // }
 
       onOpenWaiting();
     };
diff --git a/src/components/common/HoverCard/useHoverWaiting.ts b/src/components/common/HoverCard/useHoverWaiting.ts
index c8db2cc..3fec963 100644
--- a/src/components/common/HoverCard/useHoverWaiting.ts
+++ b/src/components/common/HoverCard/useHoverWaiting.ts
@@ -1,4 +1,5 @@
-// import * as React from 'react';
+import React from 'react';
+
 import { PortalContext } from '@/components/portal/PortalContext';
 import useContext from '@/hooks/useContext';
 
@@ -7,6 +8,7 @@ import HoverCardContext from './HoverCardContext';
 const useHoverWaiting = () => {
   const { timer, openDelay, closeDelay } = useContext(HoverCardContext);
   const { showModal, setShowModal } = useContext(PortalContext);
+  const [isIn, setIsIn] = React.useState<boolean>(false);
 
   const onOpen = () => {
     if (timer.current !== null) {
@@ -21,6 +23,8 @@ const useHoverWaiting = () => {
         timer.current = null;
       }, openDelay);
     }
+
+    setIsIn(true);
   };
 
   const onClose = () => {
@@ -30,18 +34,13 @@ const useHoverWaiting = () => {
 
         timer.current = null;
       }, closeDelay);
+    } else if (isIn && timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
     }
+    setIsIn(false);
   };
 
-  //   React.useEffect(() => {
-  //     return () => {
-  //       if (timer !== null) {
-  //         clearTimeout(timer);
-  //         timer = null;
-  //       }
-  //     };
-  //   }, []);
-
   return { onOpen, onClose };
 };
 export default useHoverWaiting;
diff --git a/src/components/portal/PortalContent.tsx b/src/components/portal/PortalContent.tsx
index f510296..c8a9a6b 100644
--- a/src/components/portal/PortalContent.tsx
+++ b/src/components/portal/PortalContent.tsx
@@ -30,7 +30,7 @@ export const PortalContent = ({ children, ref, width, disabledBG = false, ...pro
       {showModal &&
         createPortal(
           <>
-            {!disabledBG && <ModalBG onClick={close} className="bmates-modal-bg" />}
+            {!disabledBG && <ModalBG onClick={close} id="bmates-portal-bg" className="bmates-portal-bg" />}
             <Modal
               ref={composeRefs(modalRef, ref)}
               width={width || toggleElement?.getBoundingClientRect().width}