fix

src/components/ui/Modal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, type PropsWithChildren, type ReactNode } from 'react';
+import { useState, useEffect, useCallback, useRef, type PropsWithChildren, type ReactNode } from 'react';
 import { IconX } from './icons';
 
 interface ModalProps {
@@ -14,22 +14,51 @@ const CLOSE_ANIMATION_DURATION = 350;
 export function Modal({ open, title, onClose, footer, width = 520, children }: PropsWithChildren<ModalProps>) {
   const [isVisible, setIsVisible] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const startClose = useCallback(
+    (notifyParent: boolean) => {
+      if (closeTimerRef.current !== null) return;
+      setIsClosing(true);
+      closeTimerRef.current = window.setTimeout(() => {
+        setIsVisible(false);
+        setIsClosing(false);
+        closeTimerRef.current = null;
+        if (notifyParent) {
+          onClose();
+        }
+      }, CLOSE_ANIMATION_DURATION);
+    },
+    [onClose]
+  );
 
   useEffect(() => {
     if (open) {
+      if (closeTimerRef.current !== null) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
       setIsVisible(true);
       setIsClosing(false);
+      return;
     }
-  }, [open]);
+
+    if (isVisible) {
+      startClose(false);
+    }
+  }, [open, isVisible, startClose]);
 
   const handleClose = useCallback(() => {
-    setIsClosing(true);
+    startClose(true);
-    setTimeout(() => {
+  }, [startClose]);
-      setIsVisible(false);
+
-      setIsClosing(false);
+  useEffect(() => {
-      onClose();
+    return () => {
-    }, CLOSE_ANIMATION_DURATION);
+      if (closeTimerRef.current !== null) {
-  }, [onClose]);
+        window.clearTimeout(closeTimerRef.current);
+      }
+    };
+  }, []);
 
   if (!open && !isVisible) return null;