총사업자등록번호 체크박스 추가

2025-05-26 16:38:22 +09:00
parent 1aea094798
commit cb5235864e
1 changed files with 50 additions and 15 deletions
@@ -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<HTMLDivElement> {
+  label?: string;
+  onCheckboxChange?: (checked: boolean) => void;
+  isDisabled?: boolean;
+}
+
+interface FormElementProps extends React.HTMLAttributes<HTMLElement> {
+  disabled?: boolean;
+}
+
+const FormUi = React.forwardRef<HTMLDivElement, FormUiProps>(
+  ({ 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<HTMLDivElement> & {label:string|undefined}
->(({children, label},ref)=>{
    return (
-        <FormItem ref={ref}>
-            {label?<FormLabel className="text-xl">{label}</FormLabel>:<></>}
-            <FormControl>
-            {children}
-            </FormControl>
-            <FormMessage />
-        </FormItem>
-    )
-})
+      <FormItem ref={ref}>
+        {label && <FormLabel className="text-xl">{label}</FormLabel>}
+        {label === '종사업자등록번호' && (
+          <div className="float-right">
+            <div className="flex items-center gap-2">
+              <Checkbox 
+                id="check" 
+                checked={isChecked}
+                onCheckedChange={handleCheckboxChange}
+              />
+              <label htmlFor="check">해당없음</label>
+            </div>
+          </div>
+        )}
+        <FormControl>
+          {React.isValidElement(children) && isDisabled
+            ? React.cloneElement(children, { 
+                disabled: true,
+                ...(children.props as FormElementProps)
+              })
+            : children}
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    );
+  }
+);
+
 FormUi.displayName = 'FormUi';
-export { FormUi };
+export { FormUi };