From c96b2600dd61bccb5cf914cd9f753cd8285abedf Mon Sep 17 00:00:00 2001 From: leedj312 Date: Thu, 6 Mar 2025 14:16:48 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=EA=B3=B5=EC=9E=AC=EC=9D=B4=EC=9A=A9?= =?UTF-8?q?=EC=8B=9C=EC=84=A4=20=EB=93=B1=EB=A1=9D=20=ED=8F=BC=20=EC=9E=91?= =?UTF-8?q?=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 | 308 +++++++++++++++++- apps/wr/app/page.tsx | 2 +- apps/wr/app/publicReuseFaciltyInsert/page.tsx | 61 +--- .../style/PublicReuseFaciltyInsert.module.css | 13 +- .../business_components/src/ui/form/index.tsx | 199 +++++++++-- 5 files changed, 487 insertions(+), 96 deletions(-) diff --git a/apps/wr/app/component/publicReuseInsertForm.tsx b/apps/wr/app/component/publicReuseInsertForm.tsx index 9853e39c6..3a19b163e 100644 --- a/apps/wr/app/component/publicReuseInsertForm.tsx +++ b/apps/wr/app/component/publicReuseInsertForm.tsx @@ -1,10 +1,312 @@ -export function PublicReuseFaciltyInsert(){ - +'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 { UiTable } from "@common/business_components/ui"; +import { useWrStore } from "../store"; +import Style from "../style/PublicReuseFaciltyInsert.module.css"; +import { SelectBox } from "@common/business_components"; + +const formSchema= z.object({ + username: z.string().min(2).max(50), + facilityName:z.string().min(2).max(50) +}) + +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 ( <> - +
+
+ + {/*
*/} +
+
+ ( + + 재이용시설 명 + + + + + + )} + /> +
+ +
+ +
+ +
+ + ( + + 계통도 + + + {/* + +
+ +

+ Click to upload +   or drag and drop +

+

+ SVG, PNG, JPG or GIF +

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

+ 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³/일) + + + + + + )} + /> +
+
+
+ + + + + +
+ {/* 차수별 등록 현호아 폼 */} +
+
+ + +
+
+

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

+
+
+ ( + + 등록 차수 + + + + )} + /> + +
+ + + + +
+
+ +
+ ); } \ No newline at end of file diff --git a/apps/wr/app/page.tsx b/apps/wr/app/page.tsx index d9c5d3f0e..5d51fdde3 100644 --- a/apps/wr/app/page.tsx +++ b/apps/wr/app/page.tsx @@ -1,4 +1,4 @@ -import PublicReuseFaciltyInsert from './publicReuseFaciltyInsert/page'; +import {PublicReuseFaciltyInsert} from './publicReuseFaciltyInsert/page'; import { StoreProvider } from './store'; diff --git a/apps/wr/app/publicReuseFaciltyInsert/page.tsx b/apps/wr/app/publicReuseFaciltyInsert/page.tsx index 33c82840b..c3fd3f953 100644 --- a/apps/wr/app/publicReuseFaciltyInsert/page.tsx +++ b/apps/wr/app/publicReuseFaciltyInsert/page.tsx @@ -1,16 +1,12 @@ 'use client' -import { zodResolver } from "@hookform/resolvers/zod" -import { useForm } from "react-hook-form" -import { z } from "zod" import {UiTable } from '@common/business_components'; -import {UiForm} from '@common/business_components'; -import { Input, TableRow } from '@common/components'; +import { TableRow } from '@common/components'; import { TableHead } from '@common/components'; -import { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "@common/business_components/ui/form/lib/form"; import Style from "../style/PublicReuseFaciltyInsert.module.css"; import { useWrStore } from '../store'; import type { TableUpperProps } from '../store/publicReuseFaciltyInsert'; +import { PublicReuseFaciltyFormInsert } from '../component/publicReuseInsertForm'; @@ -32,62 +28,25 @@ import type { TableUpperProps } from '../store/publicReuseFaciltyInsert'; - export default function PublicReuseFaciltyInsert() { + export function PublicReuseFaciltyInsert() { const { upHeadList, publicReuseFacilityUper} = useWrStore((state) => state); const nodeList= headMakeColSpan(upHeadList); const total = 100; - const formSchema= z.object({ - username: z.string().min(2).max(50), - }) - -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 formField = ()=>{ - return( - ( - - Username - - - - - This is your public display name. - - - - )} - /> - ) } - - const makeFromField= formField(); + return ( <> -
-
+
+
{nodeList}
-
- - -
+
+ +
+
diff --git a/apps/wr/app/style/PublicReuseFaciltyInsert.module.css b/apps/wr/app/style/PublicReuseFaciltyInsert.module.css index 60940678b..6fc6f75ee 100644 --- a/apps/wr/app/style/PublicReuseFaciltyInsert.module.css +++ b/apps/wr/app/style/PublicReuseFaciltyInsert.module.css @@ -1,10 +1,9 @@ -.table{ - width: 50%; - float:left; +.formInsideTitle{ + background-color: gray; + text-align: center; } -.form{ - width: 50%; - display:flex; - margin-left:10px; + + +.smallTitle{ } \ No newline at end of file diff --git a/packages/common/business_components/src/ui/form/index.tsx b/packages/common/business_components/src/ui/form/index.tsx index f7a468d59..d2f955244 100644 --- a/packages/common/business_components/src/ui/form/index.tsx +++ b/packages/common/business_components/src/ui/form/index.tsx @@ -1,43 +1,174 @@ +"use client" +import * as LabelPrimitive from "@radix-ui/react-label" +import { Slot } from "@radix-ui/react-slot" +import * as React from "react" +import { + Controller, + type ControllerProps, + type FieldPath, + type FieldValues, + FormProvider, + useFormContext, +} from "react-hook-form" -import { Button } from "@common/components" -import { Form } from "./lib/form" +import { cn } from "../../lib/utils" +import { Label } from "./lib/label" - interface UiFormProps { - onSubmit: object - form: any; - formField: React.ReactNode +const Form = FormProvider + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +> = { + name: TName +} + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue +) + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +>({ + ...props +}: ControllerProps) => { + return ( + + + + ) +} + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const { getFieldState, formState } = useFormContext() + + const fieldState = getFieldState(fieldContext.name, formState) + + if (!fieldContext) { + throw new Error("useFormField should be used within ") } - /* formField -> 예시 코드 - ( - - Username - - - - - This is your public display name. - - - - )} - />*/ + const { id } = itemContext -export function UiForm(uiFormProps: UiFormProps) { + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + } +} - const {onSubmit, form, formField} = uiFormProps; - return ( -
- - {formField} - -
- - ) - } +type FormItemContextValue = { + id: string +} +const FormItemContext = React.createContext( + {} as FormItemContextValue +) + +const FormItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const id = React.useId() + + return ( + +
+ + ) +}) +FormItem.displayName = "FormItem" + +const FormLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + const { error, formItemId } = useFormField() + + return ( +