폼 형식 컴포넌트화

apps/sn/app/components/ui/formSection.tsx

@@ -0,0 +1,24 @@
+import { FormField } from '@common/business_components/ui'
+import React, { type ReactElement } from 'react'
+
+interface FormSectionProps {
+    children:  ReactElement
+    titleNm: string
+    form: any
+    name: string
+}
+
+const FormSection = ({ children, titleNm, form, name }: FormSectionProps) => {
+    return (
+        <div className="grid grid-cols-[120px_1fr] items-center">
+            <div className="text-xl font-medium">{titleNm}</div>
+            <FormField
+                control={form.control}
+                name={name}
+                render={({ field }) => children}
+            />
+        </div>
+    )
+}
+
+export default FormSection

apps/sn/app/ii/ir/irsetting/page.tsx

@@ -6,9 +6,10 @@ import { DatePicker, Input } from '@common/components/ui'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import FormSection from '@/components/ui/formSection'
 const formSchema = z.object({
     region: z.string(),
-    suyeonga:z.number(),
+    suyeonga: z.number(),
     inputdate: z.coerce.date(),
     rtkSource: z.string(),
 })
@@ -18,7 +19,7 @@ const IrSetting = () => {
         resolver: zodResolver(formSchema),
         defaultValues: {
             region: "",
-            suyeonga:0,
+            suyeonga: 0,
             inputdate: new Date(),
             rtkSource: "",
         }
@@ -41,16 +42,7 @@ const IrSetting = () => {
     return (
         <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
             <div className="grid grid-cols-2 gap-4">
-                <div className="grid grid-cols-[120px_1fr] items-center">
-                    <div className="text-xl font-medium">○ 처리구역</div>
-                    <FormField
-                        control={form.control}
-                        name="region"
-                        render={({ field }) => (
-                            <SelectBox label='' selectArray={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' />
-                        )}
-                    />
-                </div>
+                <FormSection name='region' form={form} titleNm='○ 처리구역'><SelectBox label='' selectArray={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /></FormSection>
                 <div className="grid grid-cols-[120px_1fr] items-center">
                     <div className="text-xl font-medium">○ 오수 전환율</div>
                     <FormField