Merge branch 'iipbs/common/main' into iipbs/wr/gis

packages/common/business_components/src/ui/date_picker/index.tsx

@@ -12,37 +12,39 @@ import { FormControl } from "../form";
 import { ko } from "date-fns/locale";
 import { useState } from "react";
 
-type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void  } ,selectClass:string|undefined   };
-
-
-export function DatePicker({ field, selectClass }: DatePickerProps) {
+type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void }, selectClass: string | undefined, readOnly?: boolean };
 
 
+export function DatePicker({ field, selectClass, readOnly = false, ...props }: DatePickerProps) {
     const [open, setOpen] = useState(false);
 
     const handleSelect = (date: Date | undefined) => {
-        field.onChange(date);      // React Hook Form 업데이트
-        setOpen(false);         
-      };
+        if (!readOnly) { // readOnly가 아닐 때만 변경 허용
+            field.onChange(date);      // React Hook Form 업데이트
+            setOpen(false);
+        }
+    };
+
     return (
-        <Popover open={open} onOpenChange={setOpen}>
+        <Popover open={open && !readOnly} onOpenChange={readOnly ? undefined : setOpen}>
             <PopoverTrigger asChild>
                 <FormControl>
                     <Button
                         color="white"
                         variant={"outline"}
-                        className={!selectClass? cn(
+                        disabled={readOnly} // readOnly일 때 버튼 비활성화
+                        className={!selectClass ? cn(
                             "w-[240px] pl-3 text-left font-normal",
                             !field?.value && "text-muted-foreground",
-                            
-                        ):selectClass}
+                            readOnly && "opacity-60 cursor-not-allowed" // readOnly 스타일 추가
+                        ) : cn(selectClass, readOnly && "opacity-60 cursor-not-allowed")}
                     >
                         {field?.value ? (
                             format(
                                 field.value instanceof Date && !isNaN(field.value.getTime())
-                                ? field.value
-                                : new Date()
-                                
+                                    ? field.value
+                                    : new Date()
+
                                 , "PPP", { locale: ko })
                         ) : (
                             <span>Pick a date</span>