(김준회) 돌체: 리비전 R00 입력가능하도록 변경, dialog 외부클릭 종료기능 제거하고 투명도조절기능 추가

2 files changed, 89 insertions, 33 deletions

diff --git a/components/ship-vendor-document/revision-validation.tsx b/components/ship-vendor-document/revision-validation.tsx
index 4ff621a0..96067400 100644
--- a/components/ship-vendor-document/revision-validation.tsx
+++ b/components/ship-vendor-document/revision-validation.tsx
@@ -11,7 +11,7 @@ export const MAX_FILE_SIZE = 1024 * 1024 * 1024 // 1GB
 export const validateB3Revision = (value: string) => {
   // B3 리비전 패턴: 단일 알파벳(A-Z) 또는 R01-R99
   const alphabetPattern = /^[A-Z]$/
-  const numericPattern = /^R(0[1-9]|[1-9][0-9])$/
+  const numericPattern = /^R(0[0-9]|[1-9][0-9])$/
 
   return alphabetPattern.test(value) || numericPattern.test(value)
 }
@@ -19,7 +19,7 @@ export const validateB3Revision = (value: string) => {
 // B4 리비전 검증 함수
 export const validateB4Revision = (value: string) => {
   // B4 리비전 패턴: R01-R99
-  const numericPattern = /^R(0[1-9]|[1-9][0-9])$/
+  const numericPattern = /^R(0[0-9]|[1-9][0-9])$/
   return numericPattern.test(value)
 }
 
@@ -46,14 +46,14 @@ export const createEditRevisionSchema = (drawingKind: string) => {
         .max(3, "Revision must be 3 characters or less")
         .refine(
           validateB3Revision,
-          "Invalid format. Use A-Z or R01-R99"
+          "Invalid format. Use A-Z or R00-R99"
         )
     : z.string()
         .min(1, "Please enter a revision")
         .max(3, "Revision must be 3 characters or less")
         .refine(
           validateB4Revision,
-          "Invalid format. Use R01-R99"
+          "Invalid format. Use R00-R99"
         )
 
   // B3인 경우에만 usageType 필드 추가
@@ -93,14 +93,14 @@ export const createUploadRevisionSchema = (drawingKind: string) => {
         .max(3, "Revision must be 3 characters or less")
         .refine(
           validateB3Revision,
-          "Invalid format. Use A-Z or R01-R99"
+          "Invalid format. Use A-Z or R00-R99"
         )
     : z.string()
         .min(1, "Please enter a revision")
         .max(3, "Revision must be 3 characters or less")
         .refine(
           validateB4Revision,
-          "Invalid format. Use R01-R99"
+          "Invalid format. Use R00-R99"
         )
 
   // B3인 경우에만 usageType 필드 추가
@@ -172,18 +172,18 @@ export const getUsageTypeOptions = (usage: string) => {
 export const getRevisionGuide = (drawingKind: string) => {
   if (drawingKind === 'B3') {
     return {
-      placeholder: "e.g., A, B, C or R01, R02",
-      helpText: "Use single letter (A-Z) or R01-R99 format",
+      placeholder: "e.g., A, B, C or R00, R01 ...",
+      helpText: "Use single letter (A-Z) or R00-R99 format",
       examples: [
         "A, B, C, ... Z (alphabetic revisions)",
-        "R01, R02, ... R99 (numeric revisions)"
+        "R00, R01, ... R99 (numeric revisions)"
       ]
     }
   }
   return {
-    placeholder: "e.g., R01, R02, R03",
-    helpText: "Enter in R01, R02, R03... format",
-    examples: ["R01, R02, R03, ... R99"]
+    placeholder: "e.g., R00, R01, R02, R03",
+    helpText: "Enter in R00, R01, R02, R03... format",
+    examples: ["R00, R01, R02, R03, ... R99"]
   }
 }
 
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 = ({