From ff7bd16a6e5ed5b322b201dd95aa324900b55a77 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Thu, 6 Mar 2025 18:03:37 +0900 Subject: [PATCH] =?UTF-8?q?input=20=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/component/publicReuseInsertForm.tsx | 816 ++++++++++++------ 1 file changed, 567 insertions(+), 249 deletions(-) diff --git a/apps/wr/app/component/publicReuseInsertForm.tsx b/apps/wr/app/component/publicReuseInsertForm.tsx index 3a19b163e..55eb23ff9 100644 --- a/apps/wr/app/component/publicReuseInsertForm.tsx +++ b/apps/wr/app/component/publicReuseInsertForm.tsx @@ -1,87 +1,170 @@ -'use client' -import { zodResolver } from "@hookform/resolvers/zod" -import { useForm } from "react-hook-form" -import { z } from "zod" +"use client"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; import { Button, FileSearch, Input } from "@common/components"; -import {Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "@common/business_components/ui/form"; +import { + Form, + FormField, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, +} from "@common/business_components/ui/form"; import { UiTable } from "@common/business_components/ui"; import { useWrStore } from "../store"; import Style from "../style/PublicReuseFaciltyInsert.module.css"; import { SelectBox } from "@common/business_components"; +import { DatePicker } from "@common/components"; -const formSchema= z.object({ +const formSchema = z.object({ username: z.string().min(2).max(50), - facilityName:z.string().min(2).max(50) -}) + facilityName: z.string().min(2).max(50), +}); + + +type typeOfForm = { + labelName: string; + type: string; + selectvlaue?: { text: string; val: string }[]; +} +export function PublicReuseFaciltyFormInsert() { + const { upHeadList, publicReuseFacilityUper } = useWrStore((state) => state); + const total = 100; -export function PublicReuseFaciltyFormInsert(){ - const { upHeadList, publicReuseFacilityUper} = useWrStore((state) => state); - const total = 100; - const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { username: "", }, - }) - - // 2. Define a submit handler. - function onSubmit(values: z.infer) { - // Do something with the form values. - // ✅ This will be type-safe and validated. - console.log(values) - } - + }); - const selectboxValue=[ - {text:'1치', - val:'1'}, - {text:'2차', - val:'2' - } - ] - - - return ( - <> -
-
- - {/*
*/} -
-
- ( - - 재이용시설 명 - - - - - - )} - /> -
- -
+ // 2. Define a submit handler. + function onSubmit(values: z.infer) { + // Do something with the form values. + // ✅ This will be type-safe and validated. + console.log(values); + } -
+ const selectboxValue = [ + { text: "1치", val: "1" }, + { text: "2차", val: "2" }, + ]; + const selectboxDivValue = [ + { text: "신규", val: "1" }, + { text: "진행", val: "2" }, + ]; + const selectboxBuisValue = [ + { text: "재정", val: "1" }, + { text: "만루", val: "2" }, + ]; + const selectboxReuseMethodValue = [ + { text: "물리적처리", val: "1" }, + { text: "생물학적처리", val: "2" }, + ]; + const selectboxMethodValue = [ + { text: "처리장연계", val: "1" }, + { text: "자쳬처리", val: "2" }, + { text: "자쳬+연계", val: "3" }, + ]; + +let formData =[ + {labelName:'농축수발생량(m³/일)', type:'input',selectvlaue:undefined}, + {labelName:'농축수연계지점',type:'input',selectvlaue:undefined}, + {labelName:'시설용량(m³/일)',type:'input',selectvlaue:undefined}, + {labelName:'농축수 처리방식',type:'check', selectvlaue:selectboxMethodValue}, + {labelName:'농축수 처리공법',type:'input',selectvlaue:undefined}, +] + + + +const formIter = (formData: typeOfForm[] ) => { + return ( + <> + {formData.map((data:typeOfForm) =>{ -
- - + ( + + data.name + + {data.type==='input'? : } + + + + )} + /> +
+ } )} + + ) + } + + const filedForm = formIter(formData); + + + + + + return ( + <> +
+ + + {/*
*/} +
+
+

○ 재이용시설 운영정보

+
+ +
+ ( + + + + + + + )} + /> +
+
+ +
+
+ +
+
+ ( + + 계통도 + + + + + + )} + /> + {/* ( 계통도 - - - {/* + ))} - */} + )} - /> -
- -
-
- - ( - - 평면도 - - - {/* - -
- -

- Click to upload -   or drag and drop -

-

- SVG, PNG, JPG or GIF -

-
- - - {files && - files.length > 0 && - files.map((file, i) => ( - - - {file.name} - - ))} - - */} - - - - )} - /> -
- -
+ /> */} +
+
+ ( + + 평면도 + + + + + + )} + /> +
+
+
+

○ 재이용시설 운영정보

+ +
+
+ +
+
+

○ 재이용수 공급 가능량

+
+
+ ( + + 시설용량(m³/일) + + + + + + )} + /> +
-
-

○ 재이용시설 운영정보

- -
-
- -
-
-

○ 재이용수 공급 가능량

-
- -
- - ( - - 시설용량(m³/일) - - - - - - )} - /> -
- -
- - ( - - 하수처리량(m³/일) - - - - - - )} - /> -
- -
- - ( - - 재이용량(m³/일) - - - - - - )} - /> -
-
- - ( - - 공급여유량(m³/일) - - - - - - )} - /> -
-
-
+
+ ( + + 하수처리량(m³/일) + + + + + + )} + /> +
- - +
+ ( + + 재이용량(m³/일) + + + + + + )} + /> +
+
+ ( + + 공급여유량(m³/일) + + + + + + )} + /> +
+
+
- + +
+ {/* 차수별 등록 현황 폼 */} +
+
+ +
+
+

+ ○ 차수별 하수처리수 재이용 시설 현황 +

+
+
+ ( + + 등록 차수 + + + + )} + /> + +
+
+
+

♦︎하수처리수 재이용 시설 현황

+

+ 사업개요{" "} +

+

1. 현황

- {/* 차수별 등록 현호아 폼 */} -
- - -
-
-

○ 하수처리수 재이용 시설 현황

-
-
- ( - - 등록 차수 - - - - )} - /> - -
- - - - -
- - +
+
+ ( + + 구분 + + + )} + /> +
+ +
+ ( + + 사업방식 + + + )} + /> +
+ +
+ ( + + 설치승인인가일 + + + + + + )} + /> +
+
+ ( + + 사업준공일 + + + + + + )} + /> +
- - - ); -} \ No newline at end of file +

2. 사업비

+
+
+ ( + + 국고 + + + + + + + )} + /> +
+ +
+ ( + + 지방비 + + + + + + + )} + /> +
+ +
+ ( + + 민간투자비 + + + + + + + )} + /> +
+
+ ( + + 원인자부담금 + + + + + + + )} + /> +
+
+ ( + + 기타 + + + + + + + )} + /> +
+
+ ( + + 합계 + + + + + + + )} + /> +
+
+

+ 재처리시설{" "} +

+
+
+ ( + + 시설용량(m³/일) + + + + + + + )} + /> +
+ +
+ ( + + 주처리공법 + + + + + + + )} + /> +
+ +
+ ( + + 위치(주소) + + + + + + + )} + /> +
+
+ +
+
+ ( + + 재처리방식 + + + + + + )} + /> +
+ +
+ ( + + 위치(처리장 내외) + + + + + + + )} + /> +
+ +
+ ( + + 메인공급펌프 용량 + + + + + + + )} + /> +
+
+ + + + + + +

+ 농축수관리{" "} +

+ + { filedForm} + + + + +
+ + ); +}