diff options
| -rw-r--r-- | components/ship-vendor-document/revision-validation.tsx | 24 | ||||
| -rw-r--r-- | components/ui/dialog.tsx | 98 |
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 = ({ |