(김준회) ui/dialog.tsx 롤백, 외부클릭 닫힘 이벤트만 중단처리

1 files changed, 23 insertions, 77 deletions

diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 975f3a39..ead9be5d 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -2,11 +2,10 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X, Minus, Plus } from "lucide-react"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-
 const Dialog = DialogPrimitive.Root
 
 const DialogTrigger = DialogPrimitive.Trigger
@@ -32,81 +31,28 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    opacityControl?: boolean
-  }
->(({ className, children, opacityControl = true, ...props }, ref) => {
-  const [opacity, setOpacity] = React.useState(1)
-
-  const increaseOpacity = () => setOpacity(prev => Math.min(1, prev + 0.1))
-  const decreaseOpacity = () => setOpacity(prev => Math.max(0.1, prev - 0.1))
-
-  return (
-    <DialogPortal>
-      <DialogOverlay style={{ opacity: opacity * 0.8 }} />
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          "fixed z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-          className
-        )}
-        style={{
-          opacity: opacity,
-        }}
-        onInteractOutside={(e) => e.preventDefault()} // 바깥 클릭으로 닫히는 기능 제거
-        {...props}
-      >
-        <div className="flex flex-col h-full max-h-[80vh]">
-          {/* 고정 헤더 영역 */}
-          <div className="flex items-center justify-between mb-2 pb-2 border-b flex-shrink-0">
-            {/* 왼쪽: 빈 공간 */}
-            <div className="flex items-center">
-              {/* 드래그 기능 제거됨 */}
-            </div>
-
-            {/* 중앙: 투명도 조절 */}
-            <div className="flex items-center">
-              {opacityControl && (
-                <div className="flex items-center gap-1">
-                  <button
-                    onClick={decreaseOpacity}
-                    className="h-6 w-6 rounded border hover:bg-accent flex items-center justify-center"
-                    type="button"
-                  >
-                    <Minus className="h-3 w-3" />
-                  </button>
-                  <span className="text-xs text-muted-foreground min-w-[40px] text-center">
-                    {Math.round(opacity * 100)}%
-                  </span>
-                  <button
-                    onClick={increaseOpacity}
-                    className="h-6 w-6 rounded border hover:bg-accent flex items-center justify-center"
-                    type="button"
-                  >
-                    <Plus className="h-3 w-3" />
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {/* 오른쪽: 닫기 버튼 */}
-            <div className="flex items-center">
-              <DialogPrimitive.Close className="h-8 w-8 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground flex items-center justify-center">
-                <X className="h-4 w-4" />
-                <span className="sr-only">Close</span>
-              </DialogPrimitive.Close>
-            </div>
-          </div>
-
-          {/* 스크롤 가능한 컨텐츠 영역 */}
-          <div className="flex-1 overflow-y-auto">
-            {children}
-          </div>
-        </div>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-})
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      // 외부클릭 닫힘 이벤트 중단
+      onInteractOutside={(e) => e.preventDefault()}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({