1 files changed, 77 insertions, 21 deletions
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 1647513e..975f3a39 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -2,10 +2,11 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import { X, Minus, Plus } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
+
 const Dialog = DialogPrimitive.Root
 
 const DialogTrigger = DialogPrimitive.Trigger
@@ -31,26 +32,81 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  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
-      )}
-      {...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>
-))
+  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>
+  )
+})
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({