// import ModalSimilarPage from "@/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page";
// import { useDmStore } from "@/app/store";
// import {
//   CANDIDATE,
//  // DatePicker,
//   FormField,
//   FormLabel,
//   FormUi,
//   SelectBox,
//   UiModal,
// } from "@common/business_components";
// import { Input } from "@common/components";
// import { Button, Label } from "@common/components/ui";
// import { useSearchParams } from "next/navigation";
// import { useCallback, useEffect, useState } from "react";
// import { AccessibleFormField } from "./AccessibleFormField";
// import {
//   type ControllerRenderProps,
//   type UseFormReturn,
//   type FieldError,
//   useWatch,
// } from "react-hook-form";
// import SearchInputText from "../common/searhDemandInput/component";
// import React from "react";
// import { formatDateToYMD, sanitizeInput } from "../common/utils/utils";
// import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
// import type { SdmInfoFormData } from "@/app/store/sdmMng";

// export interface SdmInfoRegFormProps {
//   form: UseFormReturn<SdmInfoFormData>;
//   onCheckboxChange?: (checked: boolean) => void;
//   facilityName?: string;
// }

// type FieldComponent = (
//   field: ControllerRenderProps<SdmInfoFormData, keyof SdmInfoFormData>
// ) => React.ReactElement<{ disabled?: boolean }>;

// export function SdmInfoRegForm({
//   form,
//   onCheckboxChange,
//   facilityName,
// }: SdmInfoRegFormProps) {
//   const { initializeCommonData, Sdm } = useDmStore((state) => state);
//   const { useTypesData, defaultRules, disableRules } = Sdm;
//   const searchParams = useSearchParams();

//   const [sdmNmValue, setSdmNmValue] = useState<string>(
//     searchParams.get("dmdCoNm") || ""
//   );

//   const [frontPHdata, setFrontPHdata] = useState("0");
//   const [backPHdata, setBackPHdata] = useState("0");
//   const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
//   const [isSimilarCase, setIsSimilarCase] = useState(false);
//   const [key, setKey] = useState(0);
//   // 후보지 팝업 오픈 상태

//   //모달 조회에 필요한 데이터
//   const [sply, setSply] = useState<number>(0);
//   const [usageCd, setUsageCd] = useState<string>("청소");
//   const [money, setMoney] = useState<number>(0);

//   useEffect(() => {
//     initializeCommonData();
//   }, [initializeCommonData]);

//   useEffect(() => {
//     console.log("candidateTitle ", form.getValues("candidateTitle"));
//   }, [form.getValues]);

//   useEffect(() => {
//     if (useTypesData && useTypesData.length > 0) {
//       setTimeout(() => {
//         form.setValue("usePurpose", useTypesData[0]?.val?.toString() || "");
//       }, 500);
//     }
//   }, [useTypesData, form.setValue, form]);

//   useEffect(() => {
//     if (facilityName) {
//       setSdmNmValue(facilityName);
//       form.setValue("sdmNm", facilityName);
//       setKey((prev) => prev + 1);
//     }
//   }, [facilityName, form.setValue, form]);

//   useEffect(() => {
//     if (searchParams.get("dmdCoNm")) {
//       form.setValue("sdmNm", searchParams.get("dmdCoNm") || "");
//       setSdmNmValue(searchParams.get("dmdCoNm") || "");
//       setKey((prev) => prev + 1);
//     }
//   }, [searchParams, form.setValue, form]);

//   const searchCandidate = (e: React.MouseEvent) => {
//     e.preventDefault();
//     e.stopPropagation();
//     const dmdInfoId = JSON.parse(
//       sessionStorage.getItem("user") || "{}"
//     )?.dmdInfoId?.toString();

//     const url = `/map/popup?dmdInfoId=${encodeURIComponent(dmdInfoId)}`;
//     const width = window.screen.availWidth;
//     const height = window.screen.availHeight;
//     const left = 0;
//     const top = 0;
//     const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
//     window.open(url, "candidatePopup", popupOptions);
//   };

//   const searchSimilarCase = (e: React.MouseEvent) => {
//     e.preventDefault();
//     e.stopPropagation();
//     setIsSimilarCase(true);
//   };

//   const handleCheckboxChange = (checked: boolean) => {
//     setIsBznmTotNoDisabled(checked);
//     onCheckboxChange?.(checked);
//   };

//   useEffect(() => {
//     const watchPH = form.getValues(`ph`);
//     if (watchPH && watchPH !== undefined) {
//       const [frontPH, backPH] = watchPH.split("~");
//       if (frontPH) {
//         setFrontPHdata(frontPH);
//       }
//       if (backPH) {
//         setBackPHdata(backPH);
//       }
//     } else {
//       setFrontPHdata("0");
//       setBackPHdata("0");
//     }
//   }, [form.getValues(`ph`)]);

//   const isSetPh = useCallback(
//     (typePHdata: string, index: number) => {
//       const PHdata = form.getValues("ph");
//       const isPH = PHdata?.split("~")[index] || "";
//       if (index == 0) {
//         form.setValue("ph", `${isPH}~${typePHdata}`);
//         setBackPHdata(typePHdata);
//       } else if (index == 1) {
//         form.setValue("ph", `${typePHdata}~${isPH}`);
//         setFrontPHdata(typePHdata);
//       }
//     },
//     [form]
//   );

//   const usePurpose = useWatch({ control: form.control, name: "usePurpose" });

//   useEffect(() => {
//     if (!usePurpose) return;

//     // Apply default values
//     const defaults = defaultRules[usePurpose];

//     if (defaults) {
//       Object.entries(defaults).forEach(([field, value]) => {
//         form.setValue(field as keyof SdmInfoFormData, value, {
//           shouldDirty: true,
//         });
//       });
//     }
//   }, [form.getValues("usePurpose")]);

//   // 시설 선택시 이벤트
//   const selectComp = useCallback(
//     (rtnData: DemandCompType[]) => {
//       const rtnCompData = rtnData?.[0];
//       form.setValue("sdmNm", rtnCompData?.dmdCoNm || "");
//     },
//     [form]
//   );

//   const formFields: Array<{
//     name: keyof SdmInfoFormData;
//     label: string;
//     component: FieldComponent | undefined;
//     formIndex: number;
//     required?: boolean;
//   }> = [
//     {
//       name: "sdmNm",
//       label: "수요처선택",
//       formIndex: 0,
//       required: true,
//       component: (field) => (
//         <div key={key}>
//           <SearchInputText
//             label="수요처명"
//             setValue={(val) => {
//               setSdmNmValue(val || "");
//               field.onChange(val || "");
//             }}
//             setRtnData={selectComp}
//             initValue={facilityName || sdmNmValue}
//             {...field}
//           />
//         </div>
//       ),
//     },
//     {
//       name: "demandYmd",
//       label: "요구시기",
//       formIndex: 0,
//       required: true,
//       component: (field) => (
//         <div className="relative w-64">
//           {/* <DatePicker
//             mode="single"
//             selected={field.value as Date}
//             onSelect={(date) => {
//               field.onChange(date as Date);
//             }}
//             className=""
//             //defaultMonth={field.value as Date}
//             field={{
//               value: field.value as Date,
//               onChange: (date: Date | undefined) => {
//                 field.onChange(date as Date);
//               },
//             }}
//             showOutsideDays={true}
//             selectClass={undefined}
//           /> */}
//             {/* 네이티브 input */}
//             <Input
//               className="w-full !text-xl text-right"
//               type="date"
//               onChange= {(e) => {
//                 const selectedDate = e.target.value ? new Date(e.target.value) : null;
//                 field.onChange(selectedDate);
//               }}
//               value={ formatDateToYMD(field.value as Date) }
//             />
//         </div>
//       ),
//     },
//     {
//       name: "demandQnty",
//       label: "요구수량(㎥/d)",
//       formIndex: 0,
//       required: true,
//       component: (field) => (
//         <Input
//           type="text"
//           className="!text-xl text-gray-600"
//           value={field.value as string}
//           onChange={(e) => {
//             field.onChange(e);
//             setSply(Number(e.target.value));
//           }}
//           onBlur={field.onBlur}
//           name={field.name}
//           ref={field.ref}
//         />
//       ),
//     },
//     {
//       name: "usePurpose",
//       label: "사용용도",
//       formIndex: 0,
//       required: true,
//       component: (field) => (
//         <SelectBox
//           selectClass={undefined}
//           label=""
//           selectArray={useTypesData}
//           onSelectValue={(val) => {
//             field.onChange(val.toString());
//             setUsageCd(val.toString());
//           }}
//           className=""
//           value={field.value as string}
//         />
//       ),
//     },
//     {
//       name: "money",
//       label: "희망단가(원)",
//       formIndex: 0,
//       required: true,
//       component: (field) => (
//         <FormUi
//           onCheckboxChange={handleCheckboxChange}
//           isDisabled={isBznmTotNoDisabled}
//         >
//           <Input
//             type="text"
//             className="!text-xl text-gray-600"
//             value={field.value as string}
//             onChange={(e) => {
//               field.onChange(e);
//               setMoney(Number(e.target.value));
//             }}
//             onBlur={field.onBlur}
//             name={field.name}
//             ref={field.ref}
//           />
//         </FormUi>
//       ),
//     },
//     {
//       name: "reqWaterQlty",
//       label: "요구수질",
//       formIndex: 0,
//       required: true,
//       component: undefined,
//     },

//     {
//       name: "candidateTitle",
//       label: CANDIDATE || "공급처 후보지 선택(필수아님)",
//       formIndex: 2,
//       component: () => (
//         <div>
//           <div className="-mt-14 float-right flex gap-10">
//             <Button
//               className="rounded-md"
//               color="sky"
//               size={"sm"}
//               onClick={searchCandidate}
//             >
//               후보지 조회
//             </Button>
//             <Button
//               className="rounded-md"
//               color="sky"
//               size={"sm"}
//               onClick={searchSimilarCase}
//             >
//               유사사례
//             </Button>
//           </div>
//           <div className="flex justify-center gap-10 mt-5">
//             {(form.getValues("candidateTitle") || []).map(
//               (candidate: any, index: number) => (
//                 <Input
//                   key={index}
//                   placeholder={`후보지${index + 1}`}
//                   type="text"
//                   className="!text-xl w-[130px] text-gray-600"
//                   value={candidate.ruseUtztnFcltNm}
//                   readOnly
//                 />
//               )
//             )}
//           </div>
//         </div>
//       ),
//     },
//   ];

//   const normalFields = formFields.filter(
//     (f) => f.formIndex === 0 && f.component
//   );

//   const candidateFields = formFields.filter(
//     (f) => f.formIndex === 2 && f.component
//   );

//   return (
//     <>
//       {normalFields.map(({ name, label, component, required }) =>
//         component ? (
//           <FormField
//             key={name}
//             control={form.control}
//             name={name}
//             render={({ field }) =>
//               name === "money" ? (
//                 <div>
//                   <Label className="text-black">희망단가(원)*</Label>
//                   {component(field)}
//                 </div>
//               ) : (
//                 // <FormUi label={label + "*"}>{component(field)}</FormUi>
//                 <AccessibleFormField
//                   field={field}
//                   label={label}
//                   required={required}
//                   error={
//                     typeof form.formState.errors[name]?.message === "string"
//                       ? (form.formState.errors[name] as FieldError)
//                       : undefined
//                   }
//                   inputComponent={component(field)}
//                 />
//               )
//             }
//           />
//         ) : null
//       )}

//       <div className="mt-10">
//         <FormLabel className="text-xl">요구수질</FormLabel>
//         <div className="grid grid-cols-2 gap-x-10 gap-y-6 mt-3 mb-3">
//           <FormField
//             control={form.control}
//             name={`grssClfg`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi
//                   label={
//                     !isDisabled ? `총대장균군수(개/mg)*` : "총대장균군수(개/mg)"
//                   }
//                 >
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const inputValue = e.target.value.replace(
//                             /[^0-9]/g,
//                             ""
//                           ); // 정수만
//                           field.onChange(
//                             inputValue === "" ? null : Number(inputValue)
//                           );
//                         }}
//                         value={
//                           field.value !== undefined && field.value !== null
//                             ? `${field.value}`
//                             : "불검출"
//                         }
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       {/* TODO:  총대장균군수 확인 필요*/}
//                       {field.value !== null ? (
//                         <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                           이하
//                         </span>
//                       ) : (
//                         <></>
//                       )}
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`tn`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi
//                   label={
//                     !isDisabled ? `총질소(T-N)(mg/L)*` : "총질소(T-N)(mg/L)"
//                   }
//                 >
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const inputValue = e.target.value.replace(
//                             /[^0-9]/g,
//                             ""
//                           ); // 정수만
//                           field.onChange(
//                             inputValue === "" ? null : Number(inputValue)
//                           );
//                         }}
//                         value={
//                           field.value !== undefined && field.value !== null
//                             ? `${field.value}`
//                             : ""
//                         }
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                         이하
//                       </span>
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`combResdch`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi
//                   label={
//                     !isDisabled ? `결합잔류염소(mg/L)*` : "결합잔류염소(mg/L)"
//                   }
//                 >
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const cleanValue = sanitizeInput(
//                             e.target.value,
//                             true
//                           );
//                           field.onChange(
//                             cleanValue === "" ? null : Number(cleanValue)
//                           );
//                         }}
//                         value={field.value ?? ""}
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                         이상
//                       </span>
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`tph`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi
//                   label={!isDisabled ? `총인(T-P)(mg/L)*` : "총인(T-P)(mg/L)"}
//                 >
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const cleanValue = sanitizeInput(
//                             e.target.value,
//                             true
//                           );
//                           field.onChange(
//                             cleanValue === "" ? null : Number(cleanValue)
//                           );
//                         }}
//                         value={field.value ?? ""}
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                         이하
//                       </span>
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`trbt`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi label={!isDisabled ? `탁도(NTU)*` : "탁도(NTU)"}>
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const inputValue = e.target.value.replace(
//                             /[^0-9]/g,
//                             ""
//                           ); // 정수만
//                           field.onChange(
//                             inputValue === "" ? null : Number(inputValue)
//                           );
//                         }}
//                         value={
//                           field.value !== undefined && field.value !== null
//                             ? `${field.value}`
//                             : ""
//                         }
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                         이하
//                       </span>
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <div className="col-span-1">
//             <Label className="text-xl">수소이온농도(pH)</Label>
//             <div className="flex flex-row items-center gap-2">
//               <Input
//                 className="!text-xl w-36"
//                 placeholder=""
//                 type="text"
//                 onChange={(e) => {
//                   const cleanValue = sanitizeInput(e.target.value, true);
//                   isSetPh(cleanValue, 1);
//                 }}
//                 value={frontPHdata ?? ""}
//                 maxLength={5}
//               />
//               <span className="text-xl mx-2">~</span>
//               <Input
//                 className="!text-xl w-36 "
//                 placeholder=""
//                 type="text"
//                 onChange={(e) => {
//                   const cleanValue = sanitizeInput(e.target.value, true);
//                   isSetPh(cleanValue, 0);
//                 }}
//                 value={backPHdata ?? ""}
//                 maxLength={5}
//               />
//             </div>
//           </div>
//           <FormField
//             control={form.control}
//             name={`bod`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi
//                   label={
//                     !isDisabled
//                       ? `생물학적 산소요구량(BOD)(mg/L)*`
//                       : "생물학적 산소요구량(BOD)(mg/L)"
//                   }
//                 >
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const inputValue = e.target.value.replace(
//                             /[^0-9]/g,
//                             ""
//                           ); // 정수만
//                           field.onChange(
//                             inputValue === "" ? null : Number(inputValue)
//                           );
//                         }}
//                         value={
//                           field.value !== undefined && field.value !== null
//                             ? `${field.value}`
//                             : ""
//                         }
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                         이하
//                       </span>
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`clIonQnt`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi
//                   label={!isDisabled ? `염화물(mgCL/L)*` : "염화물(mgCL/L)"}
//                 >
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const inputValue = e.target.value.replace(
//                             /[^0-9]/g,
//                             ""
//                           ); // 정수만
//                           field.onChange(
//                             inputValue === "" ? null : Number(inputValue)
//                           );
//                         }}
//                         value={
//                           field.value !== undefined && field.value !== null
//                             ? `${field.value}`
//                             : ""
//                         }
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                         이하
//                       </span>
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`smll`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi label={!isDisabled ? `냄새*` : "냄새"}>
//                   <SelectBox
//                     className="!text-2xl rounded-md"
//                     label={""}
//                     selectClass={undefined}
//                     selectArray={[
//                       { text: "불쾌하지않을것", val: "불쾌하지않을것" },
//                       { text: "해당사항없음", val: "해당사항없음" },
//                     ]}
//                     onSelectValue={(val: string | number) => {
//                       field.onChange(val.toString());
//                     }}
//                     value={field.value}
//                     readOnly={isDisabled}
//                     onBlur={field.onBlur}
//                     ref={field.ref}
//                   />
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`cdtnv`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi
//                   label={
//                     !isDisabled ? `전기전도도(㎲/cm)*` : "전기전도도(㎲/cm)"
//                   }
//                 >
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const inputValue = e.target.value.replace(
//                             /[^0-9]/g,
//                             ""
//                           ); // 정수만
//                           field.onChange(
//                             inputValue === "" ? null : Number(inputValue)
//                           );
//                         }}
//                         value={
//                           field.value !== undefined && field.value !== null
//                             ? `${field.value}`
//                             : ""
//                         }
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                         이하
//                       </span>
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`crmty`}
//             render={({ field }) => {
//               const disabledFields = usePurpose ? disableRules[usePurpose] : [];
//               const isDisabled = disabledFields
//                 ? disabledFields.includes(field.name)
//                 : true;
//               return (
//                 <FormUi label={!isDisabled ? `색도(도)*` : "색도(도)"}>
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2 text-right rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           const inputValue = e.target.value.replace(
//                             /[^0-9]/g,
//                             ""
//                           ); // 정수만
//                           field.onChange(
//                             inputValue === "" ? null : Number(inputValue)
//                           );
//                         }}
//                         value={
//                           field.value !== undefined && field.value !== null
//                             ? `${field.value}`
//                             : ""
//                         }
//                         maxLength={6}
//                         disabled={isDisabled}
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                       <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
//                         이하
//                       </span>
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//           <FormField
//             control={form.control}
//             name={`rmrk`}
//             render={({ field }) => {
//               return (
//                 <FormUi label={"비고"}>
//                   <div className="flex items-center gap-2">
//                     <div className="relative flex-1 min-w-0">
//                       <Input
//                         type="text"
//                         className="w-full pr-16 border py-2  rounded-md"
//                         placeholder=""
//                         onChange={(e) => {
//                           field.onChange(e.target.value);
//                         }}
//                         value={
//                           field.value !== undefined && field.value !== ""
//                             ? `${field.value}`
//                             : ""
//                         }
//                         onBlur={field.onBlur}
//                         name={field.name}
//                         ref={field.ref}
//                       />
//                     </div>
//                   </div>
//                 </FormUi>
//               );
//             }}
//           />
//         </div>
//       </div>

//       {candidateFields.map(({ name, label, component, required }, index) =>
//         component ? (
//           <FormField
//             key={name + index}
//             control={form.control}
//             name={name}
//             render={({ field }) => (
//               // <FormUi label={label}>
//               //   {component(field)}
//               // </FormUi>
//               <AccessibleFormField
//                 field={field}
//                 label={label}
//                 required={required}
//                 error={
//                   typeof form.formState.errors[name]?.message === "string"
//                     ? (form.formState.errors[name] as FieldError)
//                     : undefined
//                 }
//                 inputComponent={component?.(field)}
//               />
//             )}
//           />
//         ) : null
//       )}

//       {isSimilarCase && (
//         <UiModal
//           body={
//             <ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />
//           }
//           bodyClass="sm:max-w-[100vw] w-[1400px] h-[100dvh] max-h-[900px] overflow-y-auto overflow-x-hidden"
//           open={isSimilarCase}
//           onOpenChange={(open) => !open && setIsSimilarCase(false)}
//           noHeaderYn="Y"
//           noFooterYn="Y"
//         />
//       )}
//     </>
//   );
// }