dmdForm작업중

apps/wr/app/matMng/matDmd/page.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import {
+  toast
+} from "sonner"
+import {
+  useForm
+} from "react-hook-form"
+import {
+  zodResolver
+} from "@hookform/resolvers/zod"
+import * as z from "zod"
+import {
+  format
+} from "date-fns"
+
+import {
+  Calendar as CalendarIcon
+} from "lucide-react"
+import { Form, FormField, FormUi, SelectBox } from "@common/business_components/ui"
+import { Button, Input } from "@common/components/ui"
+
+const formSchema = z.object({
+  ctpv: z.string(),
+  sgg: z.string(),
+  coNm: z.string().min(1).min(0).max(20),
+  bznmNo: z.string().min(1).min(9).max(12),
+  name_5973331634: z.string().min(1).min(6).max(20),
+  telNo: z.string().min(8).max(12),
+  dmdSel: z.string().min(1).min(0),
+  dmdTmng: z.coerce.date(),
+  dmdWq: z.string().min(1).optional(),
+  useUsgCd: z.string(),
+  wntUntprc: z.string().min(1),
+  grssClfg: z.string().min(1),
+  tn: z.string().min(1).optional(),
+  combResdch: z.string().min(1),
+  tp: z.string().min(1),
+  trbt: z.string().min(1).optional(),
+  ph: z.string().min(1),
+  bod: z.string().min(1).optional(),
+  clIonQnt: z.string().min(1),
+  smll: z.string().min(1).optional(),
+  cdtnv: z.string().min(1).optional(),
+  crmty: z.string().min(1).optional(),
+  rmrk: z.string().min(1)
+});
+
+export default function MyForm() {
+
+  const form = useForm < z.infer < typeof formSchema >> ({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      "dmdTmng": new Date()
+    },
+  })
+
+  function onSubmit(values: z.infer < typeof formSchema > ) {
+    try {
+      console.log(values);
+      toast(
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
+        </pre>
+      );
+    } catch (error) {
+      console.error("Form submission error", error);
+      toast.error("Failed to submit the form. Please try again.");
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-3xl mx-auto py-10">
+        
+     
+       
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}

apps/wr/app/page.tsx

@@ -11,9 +11,11 @@ export default function Home() {
         <Link href="reuseFaciltyManage/reuseFacilityInsert/publicReuseFaciltyInsert"> 하수재이용 시설 등록</Link>
       </Button>
       <Button className='place-self-auto'> 
-        <Link href="reuseFaciltyManage/reuseFacilityInsert/rainReuseFaciltyInsert"> 물재이용 시설 등록</Link>
+        <Link href="reuseFaciltyManage/reuseFacilityInsert/rainReuseFaciltyInsert"> 빗물재이용 시설 등록</Link>
+      </Button>
+      <Button className='place-self-auto'> 
+        <Link href="reuseFaciltyManage/reuseFacilityInsert/rswtReuseFacilityInsert"> 중수도시설  등록</Link>
       </Button>
-      
       </div>
       </>  
   );

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

@@ -11,8 +11,8 @@ import { useWrStore } from '../../../store';
   const {pubFac} = useWrStore((state) => state);
   const {  pubFacHeadList, publicReuseFacilityData, selectLabel} = pubFac;
   console.log(pubFacHeadList)
-  const searchDiv = '시군구'
+  const searchDiv = '하수재이용시설 '
-  const selectBox = [{ text: '한양', val: "1" }, { text: '서울', val: "2" }, { text: '부산', val: "3" }]
+  const selectBox = [{ text: '서울하수처리시설', val: "1" }, { text: '서울1하수처리시설', val: "2" }, { text: '서울2하수처리시설', val: "3" }]
   const headName = () => {
     return (
       <h1 className="pl-3 text-xl">○공공 허수처리시설 등록</h1>

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

@@ -2,7 +2,7 @@
 import { useWrStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/rainReuseFacilityInsert"
 import { RainReuseFaciltyInsertForm } from "@/components/ui/rainReuseInsertForm";
-import { SearchDiv, SearchInput, UiTable } from "@common/business_components";
+import { ScrollArea, SearchDiv, SearchInput, UiTable } from "@common/business_components";
 import { Button, TableHead, TableRow } from "@common/components";
 
 
@@ -24,7 +24,6 @@ const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
 export default function Home() {
   const { rain } = useWrStore((state) => state);
   const nodeList = headMakeColSpan(rain.upHeadList);
-  const total = 100;
 
 
   const headName = () => {
@@ -34,28 +33,32 @@ export default function Home() {
   }
   return (
     <>
-      <div>
+    <div className="grid grid-cols-2 gap-4 ">
-        <h1 className="pl-3 text-2xl mr-2" >빗물이용시설 등록 </h1>
+       <div className='col-span-2'>
+        <h1 className="pl-3 text-2xl" >빗물이용시설 등록 </h1>
+        <div className="m-8">
         <SearchDiv   >
-          <div>
+          <div className='w-4/5 grid grid-cols-12 gap-1 mx-4'>
-            <SearchInput className="pl-3 mr-3" label="시군구" />
+            <SearchInput className='col-span-3 my-7' label="건물명" />
           </div>
-          <div>
+          <div className='w-1/5 flex items-center justify-end'>
-            <Button className='mr-2' size='sm'>조회</Button>
+            <Button className='mr-4 rounded-lg'>조회</Button>
-            <Button className='mr-2' size='sm'>저장</Button>
+            <Button className='mr-4 rounded-lg'>저장</Button>
-            <Button className='mr-2' size='sm'>신규등록</Button>
+            <Button className='mr-4 rounded-lg'>신규등록</Button>
           </div>
         </SearchDiv>
+        </div>
       </div>
-      <div className="grid grid-cols-2 gap-4">
 
-        <div className="colsapn-1 ">
+        <div className="colsapn-1 pl-11">
           <UiTable tableData={rain.rainOfObject} headlist={rain.upHeadList} pageSize={100} total={10} headName={headName()}>
             {nodeList}
           </UiTable>
         </div>
-        <div className="colsapn-1  ovreflow-y">
+        <div className="colsapn-1 pr-11   max-h-full ovreflow-y-scroll">
+        <ScrollArea>
           <RainReuseFaciltyInsertForm></RainReuseFaciltyInsertForm>
+          </ScrollArea>
         </div>
 
       </div>

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

@@ -1,8 +1,8 @@
 'use client'
 import { useWrStore } from "@/app/store";
-import type { TableUpperProps } from "@/app/store/publicReuseFaciltyInsert";
+import type { TableUpperProps } from "@/app/store/rainReuseFacilityInsert";
-import { RswtrReuseFaciltyInsertForm } from "@/components/ui/rswtrReuseFacilityInsetForm";
+import { RswtrReuseFaciltyInsertForm } from "@/components/ui/rswtrReuseInsetForm";
-import { SearchDiv, SearchInput, UiTable } from "@common/business_components";
+import { ScrollArea, SearchDiv, SearchInput, UiTable } from "@common/business_components";
 import { Button, TableHead, TableRow } from "@common/components";
 
 
@@ -22,9 +22,8 @@ const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
 
 
 export default function Home() {
-  const {pubFac} = useWrStore((state) => state);
+  const {rswt} = useWrStore((state) => state);
-  const {  upHeadList, publicReuseFacilityUper} = pubFac;
+  const nodeList = headMakeColSpan(rswt.upHeadList);
-  const nodeList = headMakeColSpan(upHeadList);
   const total = 100;
 
 
@@ -36,28 +35,32 @@ export default function Home() {
 
   return (
     <>
-      <div>
+       <div className="grid grid-cols-2 gap-4 ">
-        <h1 className="pl-3 text-2xl mr-2" >빗물이용시설 등록 </h1>
+       <div className='col-span-2'>
-        <SearchDiv>
+        <h1 className="pl-3 text-2xl" >중수도시설 등록 </h1>
-          <div className="w-9/10">
+        <div className="m-8">
-            <SearchInput className="pl-3 mr-3" label="시군구" />
+        <SearchDiv   >
+          <div className='w-4/5 grid grid-cols-6 gap-1 mx-4'>
+            <SearchInput className='col-span-1 my-7 text-2xl' label="건물명:" />
           </div>
-          <div className="flex items-center justify-end w-1/10">
+          <div className='w-1/5 flex items-center justify-end'>
-            <Button className='mr-2' size='sm'>조회</Button>
+            <Button className='mr-4 rounded-lg'>조회</Button>
-            <Button className='mr-2' size='sm'>저장</Button>
+            <Button className='mr-4 rounded-lg'>저장</Button>
-            <Button className='mr-2' size='sm'>신규등록</Button>
+            <Button className='mr-4 rounded-lg'>신규등록</Button>
           </div>
         </SearchDiv>
+        </div>
       </div>
-      <div className="grid grid-cols-2 gap-4">
 
-        <div className="colsapn-1">
+        <div className="colsapn-1 pl-11">
-          <UiTable publicReuseFacility={publicReuseFacilityUper} headlist={upHeadList} pageSize={100} total={total} headName={headName()}>
+          <UiTable tableData={rswt.rswtOfObject} headlist={rswt.upHeadList} pageSize={100} total={10} headName={headName()}>
             {nodeList}
           </UiTable>
         </div>
-        <div className="colsapn-1 h-full">
+        <div className="colsapn-1 pr-11 max-h-full ovreflow-y-scroll">
+        <ScrollArea>
           <RswtrReuseFaciltyInsertForm></RswtrReuseFaciltyInsertForm>
+          </ScrollArea>
         </div>
 
       </div>

apps/wr/app/store/rainReuseFacilityInsert/index.tsx

@@ -5,7 +5,7 @@ export type TableUpperProps = {
     upName?: string;
     upSequnce?: number;
 }
-type rainFacOfType = {
+export type rainFacOfType = {
         sido: string,
         sigungo: string,
         facilityName: string,
@@ -23,7 +23,7 @@ type rainFacOfType = {
         legalTargetYn:string,
 }
 
-const upHeadList:TableUpperProps[] = [
+export const upHeadList:TableUpperProps[] = [
     { id: "sido", title: "시도"},
     { id: "sigungo", title: "시군구"},
     { id: "facilityName", title: "시설명"},
@@ -80,7 +80,7 @@ const rainOfObject:rainFacOfType[] = [
 ]
 
 
-type selectArray ={
+export type selectArray ={
     text:string,
     val:string
     

apps/wr/app/store/rswtrReuseFaciltyInsert/index.tsx

@@ -0,0 +1,94 @@
+import { upHeadList, type rainFacOfType, type selectArray, type TableUpperProps } from "../rainReuseFacilityInsert";
+
+
+const rswtOfObject:rainFacOfType[] = [
+    { 
+        sido: "서울",
+        sigungo: "종로구",
+        facilityName: "그랑서울",
+        location: "종로 33",
+        locationgubun: "업무시설",
+        firstConstructionPermission : '2024-10-10',
+        buildingArea: "50",
+        facilityCapacity: "800,000",
+        reuse: "Y",
+        permissionDay:'2024-10-10',
+        register: "Y",
+        legalTargetYn:"Y"
+    },
+    { 
+        sido: "서울",
+        sigungo: "종로구",
+        facilityName: "그랑서울",
+        location: "종로 33",
+        locationgubun: "업무시설",
+        firstConstructionPermission : '2024-10-10',
+        buildingArea: "50",
+        facilityCapacity: "800,000",
+        reuse: "Y",
+        permissionDay:'2024-10-10',
+        register: "Y",
+        legalTargetYn:"Y"
+    },
+    { 
+        sido: "서울",
+        sigungo: "종로구",
+        facilityName: "그랑서울",
+        location: "종로 33",
+        locationgubun: "업무시설",
+        firstConstructionPermission : '2024-10-10',
+        buildingArea: "50",
+        facilityCapacity: "800,000",
+        reuse: "Y",
+        permissionDay:'2024-10-10',
+        register: "Y",
+        legalTargetYn:"Y"
+    },
+]
+
+
+const selectHomeWater = [
+    { text: '집수면', val: "1" },
+    { text: "종류", val: "2" },
+  ];
+
+  const selectYN= [
+    { text: 'Y', val: "1" },
+    { text: 'N', val: "2" },
+  ];
+
+export type rswtFacState ={ rswt:{
+    isInit: boolean;
+    upHeadList: TableUpperProps[];
+    rswtOfObject: rainFacOfType[];
+    selectHomeWater:selectArray[];
+    selectYN:selectArray[];
+}}
+type rswtFacSActions = {
+    decrementList: () => void
+}
+
+export type rswtFacType = rswtFacState & rswtFacSActions;
+
+export const rswtFacStateExport:rswtFacState= {rswt:{
+    isInit:false,
+    upHeadList: upHeadList,
+    rswtOfObject: rswtOfObject,
+    selectHomeWater:selectHomeWater,
+    selectYN:selectYN
+ 
+    
+}}
+export const rswtFacActionsExport:(set:any)=>rswtFacSActions=(set: any) => {
+    return {
+        decrementList:()=>set(
+            (state:rswtFacState) => {
+            return (
+            {rain:{ 
+                upHeadList: state.rswt.upHeadList, 
+                rainOfObject: 
+                state.rswt.rswtOfObject.slice(0, state.rswt.rswtOfObject.length - 1)
+             }})}
+        )
+    }
+}

apps/wr/app/store/store.tsx

@@ -1,18 +1,21 @@
 import { createStore } from 'zustand/vanilla';
 import { pubFacActionsExport, pubFacStateExport, type pubFacState } from './publicReuseFaciltyInsert/index';
 import { rainFacActionsExport, rainFacStateExport, type rainFacState, type rainFacType } from './rainReuseFacilityInsert';
+import { rswtFacActionsExport, rswtFacStateExport, type rswtFacState, type rswtFacType } from './rswtrReuseFaciltyInsert';
 
 
-export type WrStore = pubFacState & rainFacType;
+export type WrStore = pubFacState & rainFacType &rswtFacType;
-export const StoreZus = (initState: rainFacState& pubFacState = {
+export const StoreZus = (initState: rainFacState& pubFacState & rswtFacState= {
   ...pubFacStateExport, 
-  ...rainFacStateExport 
+  ...rainFacStateExport,
+  ...rswtFacStateExport 
 }) => {
   return createStore<WrStore>()((set) => {
     return {
       ...initState,
       ...pubFacActionsExport(set),
-      ...rainFacActionsExport(set)
+      ...rainFacActionsExport(set),
+      ...rswtFacActionsExport
     }
   })
 }

apps/wr/components/ui/matDmd/baseForm/component.tsx

@@ -0,0 +1,180 @@
+import { FormField, FormUi, SelectBox } from "@common/business_components";
+import { Input } from "@common/components";
+
+export function baseFrom(form:any){
+    
+
+    return(
+
+        <>
+           <FormField
+          control={form.control}
+          name="ctpv"
+          render={({ field }) => (
+                <FormUi label="시도">
+                <SelectBox selectClass={''} label={""} selectArray={rain.selectYN} onSelectValue={field.onChange} />
+                </FormUi>
+
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="sgg"
+          render={({ field }) => (
+            <FormUi label="시군구">
+            <SelectBox selectClass={''} label={""} selectArray={rain.selectYN} onSelectValue={field.onChange} />
+            </FormUi>
+         
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="coNm"
+          render={({ field }) => (
+            <FormUi label="회사명">
+                <Input placeholder="스타벅스" type="text"{...field} />
+            </FormUi>
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="bznmNo"
+          render={({ field }) => (
+            <FormUi label="사업자번호">
+                <Input 
+                placeholder="a0123456789"
+                type="text"
+                {...field} />
+            </FormUi>
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="name_5973331634"
+          render={({ field }) => (
+            <FormUi label="주소">
+                <Input 
+                placeholder="성북로24길 16"
+                
+                type=""
+                {...field} />
+            </FormUi>
+          )}
+        />
+        
+          <FormField
+            control={form.control}
+            name="telNo"
+            render={({ field }) => (
+                <FormUi label="전화번호">
+                <Input 
+                placeholder="01033332222"
+                
+                type=""
+                {...field} />
+            </FormUi>
+          
+            )}
+          />
+            
+        
+        <FormField
+          control={form.control}
+          name="dmdSel"
+          render={({ field }) => (
+            <FormUi label="수요처명">
+            <Input 
+            placeholder="수요처명 검색"
+            
+             type="text"
+            {...field} />
+        </FormUi>
+          )}
+        />
+        
+      <FormField
+      control={form.control}
+      name="dmdTmng"
+      render={({ field }) => (
+        <FormItem className="flex flex-col">
+          <FormLabel>요구시기</FormLabel>
+          <Popover>
+            <PopoverTrigger asChild>
+              <FormControl>
+                <Button
+                  variant={"outline"}
+                  className={cn(
+                    "w-[240px] pl-3 text-left font-normal",
+                    !field.value && "text-muted-foreground"
+                  )}
+                >
+                  {field.value ? (
+                    format(field.value, "PPP")
+                  ) : (
+                    <span>Pick a date</span>
+                  )}
+                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                </Button>
+              </FormControl>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={field.value}
+                onSelect={field.onChange}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+        </FormItem>
+      )}
+    />
+        
+        <FormField
+          control={form.control}
+          name="dmdWq"
+          render={({ field }) => (
+            <FormUi label="요구수질">
+            <Input 
+            placeholder="55.22"
+            
+            type="text"
+            {...field} />
+        </FormUi>
+           
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="useUsgCd"
+          render={({ field }) => (
+            <FormUi label="사용용도">
+            <SelectBox selectClass={''} label={""} selectArray={rain.selectYN} onSelectValue={field.onChange} />
+            </FormUi>
+           
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="wntUntprc"
+          render={({ field }) => (
+            <FormUi label="희망단가">
+            <Input 
+            placeholder="1000000000000000"
+            
+            type="text"
+            {...field} />
+            </FormUi>
+           
+          )}
+        />
+        
+        </>
+    )
+}

apps/wr/components/ui/matDmd/wqForm/component.tsx

@@ -0,0 +1,164 @@
+import { FormField, FormUi } from "@common/business_components";
+import { Input } from "@common/components";
+
+export function WqFrom(form: any) {
+  return (
+    <>
+      <div className="grid grid-cols-12 gap-4">
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="grssClfg"
+            render={({ field }) => (
+              <FormUi label="총대장균군">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="tn"
+            render={({ field }) => (
+              <FormUi label="총질소">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-4">
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="combResdch"
+            render={({ field }) => (
+              <FormUi label="결합잔류염소">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="tp"
+            render={({ field }) => (
+              <FormUi label="총인">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-4">
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="trbt"
+            render={({ field }) => (
+              <FormUi label="탁도">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="ph"
+            render={({ field }) => (
+              <FormUi label="수소이온농도">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-4">
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="bod"
+            render={({ field }) => (
+              <FormUi label="생물학적 산소요구량">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="clIonQnt"
+            render={({ field }) => (
+              <FormUi label="염화물">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-4">
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="smll"
+            render={({ field }) => (
+              <FormUi label="냄새">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="cdtnv"
+            render={({ field }) => (
+              <FormUi label="전기전도도">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-4">
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="crmty"
+            render={({ field }) => (
+              <FormUi label="색도">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+
+        <div className="col-span-6">
+          <FormField
+            control={form.control}
+            name="rmrk"
+            render={({ field }) => (
+              <FormUi label="비고">
+                <Input placeholder="10" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

apps/wr/components/ui/rainReuseInsertForm.tsx

@@ -2,19 +2,13 @@
 
 import {
   Form,
-  FormControl,
-  FormDescription,
   FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
   SelectBox,
 } from "@common/business_components/ui";
 import { Input } from "@common/components/ui";
 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";
 
@@ -26,7 +20,6 @@ const formSchema = z.object({
 
 export function RainReuseFaciltyInsertForm() {
   const { rain } = useWrStore((state) => state);
-  console.log( "building   selectHomeWater" + rain.selectHomeWater)
 
   const form = useForm<z.infer<typeof formSchema>>({
       resolver: zodResolver(formSchema),
@@ -46,7 +39,7 @@ export function RainReuseFaciltyInsertForm() {
       console.log(val)
 
   }
-
+  const selectClass ="w-full h-full text-2xl";
   return (
     <div className="">
       <Form  {...form}>
@@ -54,10 +47,13 @@ export function RainReuseFaciltyInsertForm() {
           {/* <div className="flex justify-between items-center mx-3"> */}
           <div>
             <div>
-              <h1 className="pl-3 text-xl ">○ 재이용시설 운영정보</h1>
+              <h1 className="pl-3 text-xl ">○ 빗물이용시설 운영정보</h1>
             </div>
           </div>
-          <div className="grid grid-cols-4 gap-2 mt-4">
+          <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4  ">
+            기본정보
+          </h1>
+          <div className="grid grid-cols-4 gap-2 mt-4 pl-6" >
             <div   className="col-span-2">
             <FormField
                   control={form.control}
@@ -83,21 +79,21 @@ export function RainReuseFaciltyInsertForm() {
             </div>
           </div>
           <div className=" my-4">
-            <h1 className="bg-gray-400 text-xl text-center border-2 p-2  mt-4">
+            <h1 className="bg-gray-400 text-xl text-center border-2 p-2  mt-4 pl-6" >
               빗물이용시설 정보
             </h1>
           </div>
           <div>
-            <h2 className="pl-3 text-l">✓ 1. 집수면</h2>
+            <h2 className="pl-3 text-xl">✓ 1. 집수면</h2>
           </div>
-          <div className="grid grid-cols-10 gap-1 mt-4">
+          <div className="grid grid-cols-10  gap-1 mt-4">
-              <div   className="col-span-5" >
+              <div   className="col-span-5 pl-6" >
                   <FormField
                     control={form.control}
                     name="name_9765724553"
                     render={({ field }) => (
                         <FormUi label="종류">
-                          <SelectBox className={""} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                          <SelectBox selectClass={selectClass} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
                         </FormUi>
                     )}
                   />
@@ -117,16 +113,16 @@ export function RainReuseFaciltyInsertForm() {
           </div>
             
           <div>
-            <h2 className="pl-3 text-l">✓ 2. 여과 등 처리시설</h2>
+            <h2 className="pl-3 text-xl">✓ 2. 여과 등 처리시설</h2>
           </div>
           <div className="grid grid-cols-12 gap-2 mt-4">
-              <div   className="col-span-4" >
+              <div   className="col-span-4 pl-6" >
                       <FormField
                         control={form.control}
                         name="name_9765724553"
                         render={({ field }) => (
                           <FormUi label="유무">
-                          <SelectBox className={""} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                          <SelectBox selectClass={selectClass} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
                         </FormUi>
                         )}
                       />
@@ -156,26 +152,26 @@ export function RainReuseFaciltyInsertForm() {
             
             </div>
           <div className=" my-2">
-            <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 ">
+            <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4  ">
               인센티브 정보
             </h1>
           </div>
           <div>
-            <h2 className="pl-3 text-l">✓ 1. 설치비 지원</h2>
+            <h2 className="pl-3 text-xl">✓ 1. 설치비 지원</h2>
           </div>
-          <div className="grid grid-cols-2 gap-2 mt-4">
+          <div className="grid grid-cols-10 gap-2 pl-6 mt-4">
-          <div   className="col-span-1" >
+          <div   className="col-span-5" >
                       <FormField
                         control={form.control}
                         name="name_9765724553"
                         render={({ field }) => (
-                          <FormUi label="여부">
+                          <FormUi label="설치비 지원 여부">
-                          <SelectBox className={""} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                          <SelectBox selectClass={selectClass}  label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
                           </FormUi>
                         )}
                       />
                 </div>
-                <div   className="col-span-1" >
+                <div   className="col-span-5" >
                       <FormField
                         control={form.control}
                         name="name_9765724553"
@@ -189,21 +185,21 @@ export function RainReuseFaciltyInsertForm() {
           </div>
             
           <div>
-            <h2 className="pl-3 text-l">✓ 2. 녹색건축물 인증</h2>
+            <h2 className="pl-3 text-xl">✓ 2. 녹색건축물 인증</h2>
           </div>
-          <div className="grid grid-cols-16 gap-2 mt-4">
+          <div className="grid grid-cols-6 gap-2 mt-4">
-                <div   className="col-span-1" >
+                <div   className="col-span-3 pl-6" >
                       <FormField
                         control={form.control}
                         name="name_9765724553"
                         render={({ field }) => (
                           <FormUi label="인증여부">
-                          <SelectBox className={""} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                          <SelectBox selectClass={selectClass}  label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue}  {...field}/>
                           </FormUi>
                         )}
                       />
                 </div>
-                <div   className="col-span-1" >
+                <div   className="col-span-3" >
                       <FormField
                         control={form.control}
                         name="name_9765724553"
@@ -214,7 +210,7 @@ export function RainReuseFaciltyInsertForm() {
                         )}
                       />
                 </div>
-                <div   className="col-span-1" >
+                <div   className="col-span-3 pl-6" >
                       <FormField
                         control={form.control}
                         name="name_9765724553"
@@ -225,7 +221,7 @@ export function RainReuseFaciltyInsertForm() {
                         )}
                       />
                 </div>
-                <div   className="col-span-1" >
+                <div   className="col-span-3" >
                       <FormField
                         control={form.control}
                         name="name_9765724553"

apps/wr/components/ui/rswtrReuseFacilityInsetForm.tsx

@@ -1,219 +0,0 @@
-"use client";
-
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  SelectBox,
-} from "@common/business_components/ui";
-import { Input } from "@common/components/ui";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { IteraterFrom } from "./IteratreForm";
-
-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 RswtrReuseFaciltyInsertForm() {
-  const total = 100;
-  
-  const form = useForm<z.infer<typeof formSchema>>({
-      resolver: zodResolver(formSchema),
-      defaultValues: {
-          username: "",
-        },
-    });
-    
-    // 2. Define a submit handler.
-    function onSubmit(values: z.infer<typeof formSchema>) {
-        // Do something with the form values.
-        // ✅ This will be type-safe and validated.
-        console.log(values);
-    }
-    const selectYNValue = [
-      { text: "Y", val: "1" },
-      { text: "N", val: "2" },
-    ];
-
-    let homeWaterData = [
-      {
-        labelName: "종류",
-        type: "check",
-        selectvlaue: undefined,
-        formName: "homeWaterData 1",
-        placeholder:'ooo'
-      },
-      {
-        labelName: "주요처리공정",
-        type: "input",
-        selectvlaue: undefined,
-        formName: "homeWaterData 2",
-         placeholder:'1,000,000'
-      },
-      {
-        labelName: "이용용도",
-        type: "check",
-        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'
-    },
-    {
-      labelName: "물사용량(m³)",
-      type: "input",
-      selectvlaue: undefined,
-      formName: " baseInfo 2",
-       placeholder:'10000000'
-    },
-    {
-      labelName: "의무대상 물사용량(m³)",
-      type: "input",
-      selectvlaue: undefined,
-      formName: " baseInfo 2",
-       placeholder:'10000000'
-    }
-    
-  ];
-
-  return (
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          {/* <div className="flex justify-between items-center mx-3"> */}
-          <div>
-            <div>
-              <h1 className="pl-3 text-xl">○ 중수도 시설현황 등록</h1>
-            </div>
-          </div>
-          <div>
-            {IteraterFrom(baseInfo,form,'1' )}
-          </div>
-          <div className=" my-4">
-            <h1 className="bg-gray-400 text-xl text-center border-2 p-2  mt-4">
-              중수도 시설 정보{" "}
-            </h1>
-          <div className="grid grid-cols-2 gap-4 mt-4">{IteraterFrom(homeWaterData,form,'3' )}</div>
-          </div>
-      
-            
-       
-          <div className=" my-2">
-            <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 ">
-              인센티브 정보
-            </h1>
-          </div>
-          <div>
-            <h2 className="pl-3 text-l">✓ 1. 설치비 지원</h2>
-          </div>
-          <div className="grid grid-cols-2 gap-4 mt-4">{IteraterFrom(filtrTrtmfct,form,'1' )}</div>
-            
-          <div>
-            <h2 className="pl-3 text-l">✓ 2. 녹색건축물 인증</h2>
-          </div>
-          <div className="grid grid-cols-12 gap-4 mt-4">{IteraterFrom(greenBuilding,form,'1' )}</div>
-
-
-        </form>
-      </Form>
-  );
-}

apps/wr/components/ui/rswtrReuseInsetForm.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormUi,
+  SelectBox,
+} from "@common/business_components/ui";
+import { Input } from "@common/components/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { useWrStore } from "@/app/store";
+
+const formSchema = z.object({
+  username: z.string().min(2).max(50),
+  facilityName: z.string().min(2).max(50),
+});
+
+
+export function RswtrReuseFaciltyInsertForm() {
+  const { rswt } = useWrStore((state) => state);
+  
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            username: "",
+          },
+      });
+      
+      // 2. Define a submit handler.
+      function onSubmit(values: z.infer<typeof formSchema>) {
+          // Do something with the form values.
+          // ✅ This will be type-safe and validated.
+          console.log(values);
+      }
+   
+    const onSelectValue=(val:string)=>{
+        console.log(val)
+  
+    }
+    const selectClass ="w-full h-full text-2xl";
+  return (
+    <div className="">
+      <Form  {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          {/* <div className="flex justify-between items-center mx-3"> */}
+          <div>
+            <div>
+              <h1 className="pl-3 text-xl ">○ 중수도 시설 운영정보</h1>
+            </div>
+          </div>
+          <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4  ">
+            기본정보
+          </h1>
+          <div className="grid grid-cols-4 gap-2 mt-4 pl-6" >
+            <div   className="col-span-2">
+            <FormField
+                  control={form.control}
+                  name="name_0211213336"
+                  render={({ field }) => (
+                    <FormUi label="설치완료일">
+                    <Input className="" placeholder="1,000,000" type="" {...field} />
+                    </FormUi>
+                  )}
+              />
+            </div>
+
+            <div   className="col-span-2" >
+              <FormField
+                control={form.control}
+                name="name_9765724553"
+                render={({ field }) => (
+                  <FormUi label="설치비">
+                   <Input className="" placeholder="1,000,000" type="" {...field} />
+                  </FormUi>
+                )}
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-4 gap-2 mt-4 pl-6" >
+            <div   className="col-span-2">
+            <FormField
+                  control={form.control}
+                  name="name_0211213336"
+                  render={({ field }) => (
+                    <FormUi label="물사용량(m³)">
+                    <Input className="" placeholder="1,000,000" type="" {...field} />
+                    </FormUi>
+                  )}
+              />
+            </div>
+
+            <div   className="col-span-2" >
+              <FormField
+                control={form.control}
+                name="name_9765724553"
+                render={({ field }) => (
+                  <FormUi label="의무대상 물사용량(m³)">
+                   <Input className="" placeholder="1,000,000" type="" {...field} />
+                  </FormUi>
+                )}
+              />
+            </div>
+          </div>
+          <div className=" my-4">
+            <h1 className="bg-gray-400 text-xl text-center border-2 p-2  mt-4 pl-6" >
+              중수도 시설 정보
+            </h1>
+          </div>
+        
+          <div className="grid grid-cols-10 gap-1 mt-4">
+              <div   className="col-span-5 pl-6" >
+                  <FormField
+                    control={form.control}
+                    name="name_9765724553"
+                    render={({ field }) => (
+                        <FormUi label="필수 종류">
+                          <SelectBox selectClass={selectClass}  selectArray={rswt.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                        </FormUi>
+                    )}
+                  />
+                </div>
+                <div   className="col-span-5" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                    
+                            <FormUi label="주요처리공정">
+                            <Input className="" placeholder="1,000,000" type="" {...field} />
+                           </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-5 pl-6" >
+                  <FormField
+                    control={form.control}
+                    name="name_9765724553"
+                    render={({ field }) => (
+                        <FormUi label="이용용도">
+                          <SelectBox selectClass={selectClass}label={""} selectArray={rswt.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                        </FormUi>
+                    )}
+                  />
+                </div>
+          </div>
+            
+          <div className=" my-2">
+            <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4  ">
+              인센티브 정보
+            </h1>
+          </div>
+          <div>
+            <h2 className="pl-3 text-xl">✓ 1. 설치비 지원</h2>
+          </div>
+          <div className="grid grid-cols-2 gap-2 mt-4">
+          <div   className="col-span-1 pl-6" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="설치비 지원여부">
+                          <SelectBox selectClass={selectClass} label={""} selectArray={rswt.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-xl">✓ 2. 녹색건축물 인증</h2>
+          </div>
+          <div className="grid grid-cols-6 gap-2 mt-4">
+                <div   className="col-span-3 pl-6" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="인증여부">
+                          <SelectBox selectClass={selectClass} label={""} selectArray={rswt.selectYN} onSelectValue={onSelectValue}  {...field}/>
+                          </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-3" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="인증년도">
+                          <Input className="" placeholder="2024" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-3 pl-6" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="인증번호">
+                          <Input className="" placeholder="ab1234678" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+                <div   className="col-span-3" >
+                      <FormField
+                        control={form.control}
+                        name="name_9765724553"
+                        render={({ field }) => (
+                          <FormUi label="인증등급">
+                          <Input className="" placeholder="A" type="" {...field} />
+                         </FormUi>
+                        )}
+                      />
+                </div>
+            </div>
+        </form>
+      </Form>
+      </div>
+  );
+}