diff --git a/packages/common/business_components/src/ui/form_ui/index.tsx b/packages/common/business_components/src/ui/form_ui/index.tsx index bd9930c3c..8fab0118c 100644 --- a/packages/common/business_components/src/ui/form_ui/index.tsx +++ b/packages/common/business_components/src/ui/form_ui/index.tsx @@ -1,19 +1,54 @@ -import React from "react"; +import React, { useCallback, useState } from "react"; import { FormControl, FormItem, FormLabel, FormMessage } from "../form"; +import { Checkbox } from "@common/components/ui"; + +interface FormUiProps extends React.HTMLAttributes { + label?: string; + onCheckboxChange?: (checked: boolean) => void; + isDisabled?: boolean; +} + +interface FormElementProps extends React.HTMLAttributes { + disabled?: boolean; +} + +const FormUi = React.forwardRef( + ({ children, label, onCheckboxChange, isDisabled }, ref) => { + const [isChecked, setIsChecked] = useState(false); + + const handleCheckboxChange = useCallback((checked: boolean) => { + setIsChecked(checked); + onCheckboxChange?.(checked); + }, [onCheckboxChange]); -const FormUi = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes & {label:string|undefined} ->(({children, label},ref)=>{ return ( - - {label?{label}:<>} - - {children} - - - - ) -}) + + {label && {label}} + {label === '종사업자등록번호' && ( +
+
+ + +
+
+ )} + + {React.isValidElement(children) && isDisabled + ? React.cloneElement(children, { + disabled: true, + ...(children.props as FormElementProps) + }) + : children} + + +
+ ); + } +); + FormUi.displayName = 'FormUi'; -export { FormUi }; +export { FormUi }; \ No newline at end of file