optimization

src/components/common/Modal.tsx

@@ -0,0 +1,78 @@
+import { ReactNode, useEffect } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+type ModalProps = {
+    isOpen: boolean
+    onClose: () => void
+    title?: string
+    children: ReactNode
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+    className?: string
+    showCloseButton?: boolean
+}
+
+const sizeStyles = {
+    sm: 'max-w-md',
+    md: 'max-w-2xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-6xl',
+    full: 'max-w-full',
+}
+
+export function Modal({
+    isOpen,
+    onClose,
+    title,
+    children,
+    size = 'md',
+    className,
+    showCloseButton = true
+}: ModalProps) {
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden'
+        } else {
+            document.body.style.overflow = ''
+        }
+        return () => {
+            document.body.style.overflow = ''
+        }
+    }, [isOpen])
+
+    if (!isOpen) return null
+
+    return (
+        <div
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+            onClick={onClose}
+        >
+            <div
+                className={cn(
+                    'bg-white rounded-2xl shadow-2xl w-full max-h-[90vh] overflow-y-auto',
+                    sizeStyles[size],
+                    className
+                )}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {title && (
+                    <div className="flex items-center justify-between p-6 border-b border-gray-200 sticky top-0 bg-white z-10">
+                        <h2 className="text-xl font-bold text-gray-900">{title}</h2>
+                        {showCloseButton && (
+                            <button
+                                onClick={onClose}
+                                className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                            >
+                                <X className="w-5 h-5" />
+                            </button>
+                        )}
+                    </div>
+                )}
+                <div className={cn(title ? 'p-6' : 'p-6', className)}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}
+