빗물재이용 폼수정중

apps/wr/app/reuseFaciltyManage/reuseFacilityInsert/rainReuseFaciltyInsert/page.tsx

@@ -22,8 +22,8 @@ const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
 
 
 export default function Home() {
-  const { building } = useWrStore((state) => state);
+  const { rain } = useWrStore((state) => state);
-  const nodeList = headMakeColSpan(building.upHeadList);
+  const nodeList = headMakeColSpan(rain.upHeadList);
   const total = 100;
 
 
@@ -50,7 +50,7 @@ export default function Home() {
       <div className="grid grid-cols-2 gap-4">
 
         <div className="colsapn-1 ">
-          <UiTable tableData={building.buildingObject} headlist={building.upHeadList} pageSize={100} total={10} headName={headName()}>
+          <UiTable tableData={rain.rainOfObject} headlist={rain.upHeadList} pageSize={100} total={10} headName={headName()}>
             {nodeList}
           </UiTable>
         </div>

apps/wr/components/ui/IteratreForm.tsx

@@ -1,22 +1,38 @@
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, SelectBox } from "@common/business_components";
+import { FileUpload, FormControl, FormField, FormItem, FormLabel, FormMessage, SelectBox } from "@common/business_components";
+import { DatePicker } from "@common/components";
 import { Input } from "@common/components";
 
 
-type typeOfForm ={
+export type typeOfForm ={
   labelName: string;
   type: string;
-  selectvlaue?: { text: string; val: string }[];
+  placeholder:any;
-  placeholder:any
   formName: string;
+  selectValue:selectValue|undefined;
+}
+type onSelectValue = (val:string) => void;
+export type selectValue ={
+  label:string,
+  value:{ text: string; val: string }[],
+  fun:onSelectValue 
 }
 
-type onSelectValue = (val:string) => void;
 
+export function IteraterFrom(formData:typeOfForm[],form:any , formClass:string   ){
 
-
+  const formItem =(data:typeOfForm,field:any)=>{
-export function IteraterFrom(formData:typeOfForm[],form:any , formClass:string , onSelectValue:onSelectValue ){
+    let tag
-
+    if(data.type==='select'){
-    return (
+      tag= (data.selectValue ? <SelectBox className='' label={data.selectValue.label} selectArray={data.selectValue.value} onSelectValue={data.selectValue.fun}   >{...form}</SelectBox> : null)
+    }else if(data.type==='date'){
+      tag =(<DatePicker mode="single" {...field} />)
+    }else{
+      tag=(<Input className ='w-64'placeholder= {data.placeholder} type="" {...field} />)
+    }
+    return tag;
+  } 
+  
+  return (
         <>
           {formData.map((data: typeOfForm, index) => (
               <FormField key={`${index}+key`}
@@ -26,11 +42,7 @@ export function IteraterFrom(formData:typeOfForm[],form:any , formClass:string ,
                   <FormItem className={formClass} >
                     <FormLabel>{data.labelName}</FormLabel>
                     <FormControl>
-                      {data.selectvlaue == undefined ? (
+                      {formItem(data,field)} 
-                        <Input className ='w-64'placeholder= {data.placeholder} type="" {...field} />
-                      ) : (
-                        <SelectBox className='' label='' selectArray={data.selectvlaue} onSelectValue={onSelectValue}   ></SelectBox>
-                      )}
                     </FormControl>
                     <FormMessage />
                   </FormItem>

apps/wr/components/ui/rainReuseInsertForm.tsx

@@ -15,22 +15,19 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { IteraterFrom } from "./IteratreForm";
+import { FormUi } from "@common/business_components";
+import { useWrStore } from "@/app/store";
 
 const formSchema = z.object({
   username: z.string().min(2).max(50),
   facilityName: z.string().min(2).max(50),
 });
 
-type typeOfForm = {
-  labelName: string;
-  type: string;
-  selectvlaue?: { text: string; val: string }[];
-  formName: string;
-};
 
 export function RainReuseFaciltyInsertForm() {
-  const total = 100;
+  const { rain } = useWrStore((state) => state);
-  
+  console.log( "building   selectHomeWater" + rain.selectHomeWater)
+
   const form = useForm<z.infer<typeof formSchema>>({
       resolver: zodResolver(formSchema),
       defaultValues: {
@@ -44,118 +41,12 @@ export function RainReuseFaciltyInsertForm() {
         // ✅ This will be type-safe and validated.
         console.log(values);
     }
-    const selectYNValue = [
+ 
-      { text: "Y", val: "1" },
-      { text: "N", val: "2" },
-    ];
-
-  let homeWaterData = [
-    {
-      labelName: "종류",
-      type: "input",
-      selectvlaue: undefined,
-      formName: "homeWaterData 1",
-      placeholder:'ooo'
-    },
-    {
-      labelName: "면적(m³)",
-      type: "input",
-      selectvlaue: undefined,
-      formName: "homeWaterData 2",
-       placeholder:'1,000,000'
-    },
-  ];
-  let filtrTrtmfct = [
-    {
-      labelName: "유무",
-      type: "input",
-      selectvlaue: undefined,
-      formName: "filtrTrtmfct 1",
-      placeholder:'Y'
-    },
-    {
-      labelName: "용량",
-      type: "input",
-      selectvlaue: undefined,
-      formName: "filtrTrtmfct 2",
-      placeholder:100000
-    
-    },
-    {
-        labelName: "처리공정",
-        type: "input",
-        selectvlaue: undefined,
-        formName: "filtrTrtmfct 3",
-        placeholder:'원수취수'
-      },
-  ];
-  let instlCst = [
-    {
-      labelName: "지원여부",
-      type: "input",
-      selectvlaue: undefined,
-      formName: "instlCst 1",
-      placeholder:'Y'
-    },
-    {
-      labelName: "지원여부(원)",
-      type: "input",
-      selectvlaue: undefined,
-      formName: "instlCst 2",
-      placeholder:1000000
-    },
-  ];
-  let greenBuilding = [
-    {
-      labelName: "설치완료일",
-      type: "chek",
-      selectvlaue: selectYNValue ,
-      formName: "greenBuilding 1",
-       placeholder:'Y'
-    },
-    {
-      labelName: "인증년도",
-      type: "input",
-      selectvlaue: undefined,
-      formName: " greenBuilding 2",
-       placeholder:'2024'
-    },
-    {
-        labelName: "인증번호",
-        type: "input",
-        selectvlaue: undefined,
-        formName: "greenBuilding 3",
-        placeholder:'wr123456789'
-      },
-      {
-        labelName: "인증등급",
-        type: "input",
-        selectvlaue: undefined,
-        formName: "greenBuilding 4",
-        placeholder:'A'
-      },
-  ];
-  let baseInfo = [
-    {
-      labelName: "설치완료일",
-      type: "input",
-      selectvlaue: undefined ,
-      formName: "baseInfo 1",
-       placeholder:'2022-1010'
-    },
-    {
-      labelName: "설치비(월)",
-      type: "input",
-      selectvlaue: undefined,
-      formName: " baseInfo 2",
-       placeholder:'10000000'
-    },
-    
-  ];
   const onSelectValue=(val:string)=>{
       console.log(val)
 
   }
+
   return (
     <div className="">
       <Form  {...form}>
@@ -167,34 +58,26 @@ export function RainReuseFaciltyInsertForm() {
             </div>
           </div>
           <div className="grid grid-cols-4 gap-2 mt-4">
-            <div   className="col-span-1">
+            <div   className="col-span-2">
-              <FormField
+            <FormField
-                control={form.control}
+                  control={form.control}
-                name="name_5616382464"
+                  name="name_0211213336"
-                render={({ field }) => (
+                  render={({ field }) => (
-                  <FormItem>
+                    <FormUi label="설치완료일">
-                    <FormLabel>설치완료일</FormLabel>
+                    <Input className="" placeholder="1,000,000" type="" {...field} />
-                    <FormControl>
+                    </FormUi>
-                      <Input className="w-2/3" placeholder="2022.06.23" type="" {...field} />
+                  )}
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
               />
             </div>
 
-            <div   className="col-span-1" >
+            <div   className="col-span-2" >
               <FormField
                 control={form.control}
                 name="name_9765724553"
                 render={({ field }) => (
-                  <FormItem>
+                  <FormUi label="설치비">
-                    <FormLabel>설치비(월)</FormLabel>
+                   <Input className="" placeholder="1,000,000" type="" {...field} />
-                    <FormControl>
+                  </FormUi>
-                      <Input className="w-2/3" placeholder="1,000,000" type="" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
                 )}
               />
             </div>
@@ -207,12 +90,71 @@ export function RainReuseFaciltyInsertForm() {
           <div>
             <h2 className="pl-3 text-l">✓ 1. 집수면</h2>
           </div>
-          <div className="grid grid-cols-4 gap-2 mt-4">{IteraterFrom(homeWaterData,form,'2',onSelectValue)}</div>
+          <div className="grid grid-cols-10 gap-1 mt-4">
+              <div   className="col-span-5" >
+                  <FormField
+                    control={form.control}
+                    name="name_9765724553"
+                    render={({ field }) => (
+                        <FormUi label="종류">
+                          <SelectBox className={""} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                        </FormUi>
+                    )}
+                  />
+                </div>
+                <div   className="col-span-5" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                    
+                            <FormUi label="면적(m³)">
+                            <Input className="" placeholder="1,000,000" type="" {...field} />
+                           </FormUi>
+                        )}
+                      />
+                </div>
+          </div>
             
           <div>
             <h2 className="pl-3 text-l">✓ 2. 여과 등 처리시설</h2>
           </div>
-          <div className="grid grid-cols-12 gap-2 mt-4">{IteraterFrom(filtrTrtmfct,form,'2' ,onSelectValue)}</div>
+          <div className="grid grid-cols-12 gap-2 mt-4">
+              <div   className="col-span-4" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="유무">
+                          <SelectBox className={""} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                        </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-4" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="용량(m³/일)">
+                          <Input className="" placeholder="1,000,000" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-4" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="처리공정">
+                          <Input className="" placeholder="1,000,000" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+            
+            </div>
           <div className=" my-2">
             <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 ">
               인센티브 정보
@@ -221,14 +163,80 @@ export function RainReuseFaciltyInsertForm() {
           <div>
             <h2 className="pl-3 text-l">✓ 1. 설치비 지원</h2>
           </div>
-          <div className="grid grid-cols-2 gap-2 mt-4">{IteraterFrom(instlCst,form,'2' ,onSelectValue)}</div>
+          <div className="grid grid-cols-2 gap-2 mt-4">
+          <div   className="col-span-1" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="여부">
+                          <SelectBox className={""} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                          </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-1" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="지원금액(원)">
+                          <Input className="" placeholder="1,000,000" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+          </div>
             
           <div>
             <h2 className="pl-3 text-l">✓ 2. 녹색건축물 인증</h2>
           </div>
-          <div className="grid grid-cols-16 gap-2 mt-4">{IteraterFrom(greenBuilding,form,'2',onSelectValue)}</div>
+          <div className="grid grid-cols-16 gap-2 mt-4">
-
+                <div   className="col-span-1" >
-
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="인증여부">
+                          <SelectBox className={""} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                          </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-1" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="인증년도">
+                          <Input className="" placeholder="2024" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-1" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="인증번호">
+                          <Input className="" placeholder="ab1234678" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-1" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="인증등급">
+                          <Input className="" placeholder="A" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+            </div>
         </form>
       </Form>
       </div>