Merge commit 'cc414c62113fb64883dee492d0e3dc4928d854a3' into iipbs/wr/form_fuction

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>

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

@@ -16,14 +16,15 @@ const SelectBox = React.forwardRef<
     className:string, 
     selectArray:SelectBox1[], 
     onSelectValue:(val:string|number)=>void,
-    value?: string|number
+    value?: string|number,
+    readOnly?: boolean // readOnly 속성 추가
   }
->(({ label, className, selectClass, selectArray, onSelectValue, value }, ref)=>{
+>(({ label, className, selectClass, selectArray, onSelectValue, value, readOnly = false }, ref)=>{
   const placeHolder = selectArray?.[0]?.text ?? "";
 
   return (
     <div className={className+" flex items-center"} ref={ref}>
-      {label && <Label className="w-20 text-xl text-gray-600">{label}</Label>}
+      {label && <Label className="whitespace-nowrap w-20 text-xl text-gray-600">{label}</Label>}
       <Select onValueChange={onSelectValue} value={value !== undefined ? String(value) : undefined}>
         <SelectTrigger className={selectClass?selectClass:"flex-1 p-2 border rounded"}>
           <SelectValue placeholder={placeHolder} />