From 335b254a6099a40fa24d9fc235b308dca6e90db9 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 24 Jan 2026 11:19:24 +0700
Subject: [PATCH] feat: add onBackdropClick and position prop

---
 src/components/Modal.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 5a1dc806..caa07870 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -53,15 +53,25 @@ interface ModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   children?: ReactNode;
   closeOnBackdrop?: boolean;
+  onBackdropClick?: () => void;
+  position?: 'top' | 'middle' | 'bottom' | 'start' | 'end';
   className?: {
     modal?: string;
     modalBox?: string;
   };
 }
 
-const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
+const Modal = ({
+  ref,
+  children,
+  closeOnBackdrop,
+  onBackdropClick,
+  position = 'middle',
+  className,
+}: ModalProps) => {
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (closeOnBackdrop && e.target === ref.current) {
+      onBackdropClick?.();
       ref.current?.close();
     }
   };
@@ -69,7 +79,17 @@ const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
   return (
     <dialog
       ref={ref}
-      className={cn('modal', className?.modal)}
+      className={cn(
+        'modal',
+        {
+          'modal-top': position === 'top',
+          'modal-middle': position === 'middle',
+          'modal-bottom': position === 'bottom',
+          'modal-start': position === 'start',
+          'modal-end': position === 'end',
+        },
+        className?.modal
+      )}
       onClick={handleBackdropClick}
     >
       <div className={cn('modal-box', className?.modalBox)}>{children}</div>