From 76920c4ec0b20b31735f97f66fd4087e802719d7 Mon Sep 17 00:00:00 2001 From: chpark Date: Tue, 24 Dec 2024 11:07:18 +0900 Subject: [PATCH] =?UTF-8?q?=ED=95=84=EC=88=98=20=EC=B2=B4=ED=81=AC=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/oemmng/components/OemMngForm.tsx | 115 ++++++------------ .../src/app/(admin)/common/oemmng/page.tsx | 1 + plm-app/src/components/ui/form.tsx | 34 +++++- plm-app/src/lib/utils.ts | 37 +----- 4 files changed, 68 insertions(+), 119 deletions(-) diff --git a/plm-app/src/app/(admin)/common/oemmng/components/OemMngForm.tsx b/plm-app/src/app/(admin)/common/oemmng/components/OemMngForm.tsx index 49274b2..b057c92 100644 --- a/plm-app/src/app/(admin)/common/oemmng/components/OemMngForm.tsx +++ b/plm-app/src/app/(admin)/common/oemmng/components/OemMngForm.tsx @@ -1,23 +1,9 @@ import React from "react"; import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import * as z from "zod"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -import { - Select, - SelectTrigger, - SelectContent, - SelectItem, - SelectValue, -} from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; -import { api } from "@/lib/api"; -import { useQuery } from "@tanstack/react-query"; -import { oemMng, Role } from "@/types/common/oemmng/oemmng"; -import { useAuthStore } from "@/stores/auth"; -import { AxiosError } from "axios"; -import { useToast } from "@/hooks/use-toast"; +import { oemMng} from "@/types/common/oemmng/oemmng"; import { Form, FormControl, @@ -27,19 +13,6 @@ import { FormMessage, } from "@/components/ui/form"; -import { createValidationSchema } from "@/lib/utils"; // createValidationSchema 함수 임포트 - -const fields = [ - { name: 'oem_code', required: true, type: 'string' }, - { name: 'oem_name', required: true, type: 'string' }, - { name: 'oem_no', required: true, type: 'string' }, - { name: 'isActive', required: false, type: 'boolean' }, -]; - -const formSchema = createValidationSchema(fields); - -type FormSchema = z.infer; - interface OemFormProps { initialData?: Partial; onSubmit: (data: Partial) => void; @@ -51,12 +24,7 @@ export const OemMngForm: React.FC = ({ onSubmit, onCancel, }) => { - //const { token, user } = useAuthStore(); - const { toast } = useToast(); - - // Initialize the form with react-hook-form and zod resolver - const form = useForm({ - resolver: zodResolver(formSchema), + const form = useForm({ defaultValues: { oem_code: initialData?.oem_code || "", oem_name: initialData?.oem_name || "", @@ -65,58 +33,39 @@ export const OemMngForm: React.FC = ({ }, }); - // Reset form when initialData changes - React.useEffect(() => { - if (initialData) { - form.reset({ - oem_code: initialData.oem_code || "", - oem_name: initialData.oem_name || "", - oem_no: initialData.oem_no || "", - isActive: initialData.isActive || false, - }); - } - }, [initialData, form]); - - const handleSubmit = async (data: FormSchema) => { - try { - await onSubmit(data); - } catch (error) { - const err = error as AxiosError; - toast({ - title: "에러", - description: - (err.response?.data as { message: string })?.message || - "에러가 발생했습니다.", - variant: "destructive", - }); - } - }; - return (
- + ( - OEM_CODE + OEM 코드 - + )} /> - + ( - OEM_NAME + OEM 이름 - + @@ -126,11 +75,15 @@ export const OemMngForm: React.FC = ({ ( - 고객사번호 + OEM 번호 - + @@ -141,24 +94,28 @@ export const OemMngForm: React.FC = ({ control={form.control} name="isActive" render={({ field }) => ( - - - - - 활성화 여부 + +
+ 활성화 + + + +
)} /> -
+
- +
diff --git a/plm-app/src/app/(admin)/common/oemmng/page.tsx b/plm-app/src/app/(admin)/common/oemmng/page.tsx index ce90677..c63c2b4 100644 --- a/plm-app/src/app/(admin)/common/oemmng/page.tsx +++ b/plm-app/src/app/(admin)/common/oemmng/page.tsx @@ -155,6 +155,7 @@ const OemMngPage = () => { { accessorKey: "oem_code", header: "업체명/고객사", + size: 120, }, { accessorKey: "oem_name", diff --git a/plm-app/src/components/ui/form.tsx b/plm-app/src/components/ui/form.tsx index ce264ae..4e95d8a 100644 --- a/plm-app/src/components/ui/form.tsx +++ b/plm-app/src/components/ui/form.tsx @@ -28,18 +28,44 @@ const FormFieldContext = React.createContext( {} as FormFieldContextValue ) + +// 유효성 검사 규칙 타입 정의 +type FormFieldRules = { + required?: boolean | string; + maxLength?: number | { value: number; message: string }; + minLength?: number | { value: number; message: string }; + pattern?: RegExp | { value: RegExp; message: string }; +}; + +// FormField 컴포넌트 수정 const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath >({ + validation, ...props -}: ControllerProps) => { +}: ControllerProps & { + validation?: FormFieldRules; +}) => { + // 기존 rules와 새로운 validation 규칙 병합 + const combinedRules = { + ...props.rules, + ...(validation && { + required: typeof validation.required === 'string' + ? { value: true, message: validation.required } + : validation.required, + maxLength: validation.maxLength, + minLength: validation.minLength, + pattern: validation.pattern, + }), + }; + return ( - + - ) -} + ); +}; const useFormField = () => { const fieldContext = React.useContext(FormFieldContext) diff --git a/plm-app/src/lib/utils.ts b/plm-app/src/lib/utils.ts index aa28ff4..039d88d 100644 --- a/plm-app/src/lib/utils.ts +++ b/plm-app/src/lib/utils.ts @@ -1,6 +1,5 @@ import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; -import { z, ZodTypeAny } from 'zod'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); @@ -8,38 +7,4 @@ export function cn(...inputs: ClassValue[]) { export function formatNumber(num: number): string { return new Intl.NumberFormat("ko-KR").format(num); -} - -interface Field { - name: string; - required: boolean; - type: 'string' | 'number' | 'email' | 'phone' | 'boolean'; -} - -export const createValidationSchema = (fields: Field[]) => { - const schema: Record = {}; - - fields.forEach((field) => { - switch (field.type) { - case 'string': - schema[field.name] = z.string().min(field.required ? 1 : 0, `${field.name}은 필수입니다.`); - break; - case 'number': - schema[field.name] = z.number().min(field.required ? 1 : 0, `${field.name}은 필수입니다.`); - break; - case 'email': - schema[field.name] = z.string().email(`${field.name}은 유효한 이메일 형식이어야 합니다.`); - break; - case 'phone': - schema[field.name] = z.string().regex(/^[0-9-]+$/, `${field.name}은 올바른 전화번호 형식이어야 합니다.`); - break; - case 'boolean': - schema[field.name] = z.boolean(); - break; - default: - throw new Error(`Unsupported field type: ${field.type}`); - } - }); - - return z.object(schema); -}; \ No newline at end of file +} \ No newline at end of file