diff --git a/frontend/components/admin/CodeCategoryFormModal.tsx b/frontend/components/admin/CodeCategoryFormModal.tsx index d5c6806e..8a6fbd34 100644 --- a/frontend/components/admin/CodeCategoryFormModal.tsx +++ b/frontend/components/admin/CodeCategoryFormModal.tsx @@ -14,7 +14,7 @@ import { ValidationMessage } from "@/components/common/ValidationMessage"; import { useCreateCategory, useUpdateCategory } from "@/hooks/queries/useCategories"; import type { CodeCategory } from "@/types/commonCode"; import { useCheckCategoryDuplicate } from "@/hooks/queries/useValidation"; -import { useFormValidation } from "@/hooks/useFormValidation"; +import { useState } from "react"; import { createCategorySchema, updateCategorySchema, @@ -41,45 +41,6 @@ export function CodeCategoryFormModal({ const isEditing = !!editingCategoryCode; const editingCategory = categories.find((c) => c.category_code === editingCategoryCode); - // 검증 상태 관리 - const formValidation = useFormValidation({ - fields: ["categoryCode", "categoryName", "categoryNameEng", "description"], - }); - - // 중복 검사 훅들 - const categoryCodeCheck = useCheckCategoryDuplicate( - "categoryCode", - formValidation.getFieldValue("categoryCode"), - isEditing ? editingCategoryCode : undefined, - formValidation.isFieldValidated("categoryCode"), - ); - - const categoryNameCheck = useCheckCategoryDuplicate( - "categoryName", - formValidation.getFieldValue("categoryName"), - isEditing ? editingCategoryCode : undefined, - formValidation.isFieldValidated("categoryName"), - ); - - const categoryNameEngCheck = useCheckCategoryDuplicate( - "categoryNameEng", - formValidation.getFieldValue("categoryNameEng"), - isEditing ? editingCategoryCode : undefined, - formValidation.isFieldValidated("categoryNameEng"), - ); - - // 중복 검사 결과 확인 (수정 시에는 카테고리 코드 검사 제외) - const hasDuplicateErrors = - (!isEditing && categoryCodeCheck.data?.isDuplicate && formValidation.isFieldValidated("categoryCode")) || - (categoryNameCheck.data?.isDuplicate && formValidation.isFieldValidated("categoryName")) || - (categoryNameEngCheck.data?.isDuplicate && formValidation.isFieldValidated("categoryNameEng")); - - // 중복 검사 로딩 중인지 확인 (수정 시에는 카테고리 코드 검사 제외) - const isDuplicateChecking = - (!isEditing && categoryCodeCheck.isLoading) || categoryNameCheck.isLoading || categoryNameEngCheck.isLoading; - - // 필수 필드들이 모두 검증되었는지 확인 (생성 시에만 적용) - // 생성과 수정을 위한 별도 폼 설정 const createForm = useForm({ resolver: zodResolver(createCategorySchema), @@ -105,11 +66,54 @@ export function CodeCategoryFormModal({ }, }); + // 필드 검증 상태 관리 + const [validatedFields, setValidatedFields] = useState>(new Set()); + + // 필드 검증 처리 함수 + const handleFieldBlur = (fieldName: string) => { + setValidatedFields((prev) => new Set(prev).add(fieldName)); + }; + + // 중복 검사 훅들 + const categoryCodeCheck = useCheckCategoryDuplicate( + "categoryCode", + isEditing ? "" : createForm.watch("categoryCode"), + isEditing ? editingCategoryCode : undefined, + validatedFields.has("categoryCode"), + ); + + const categoryNameCheck = useCheckCategoryDuplicate( + "categoryName", + isEditing ? updateForm.watch("categoryName") : createForm.watch("categoryName"), + isEditing ? editingCategoryCode : undefined, + validatedFields.has("categoryName"), + ); + + const categoryNameEngCheck = useCheckCategoryDuplicate( + "categoryNameEng", + isEditing ? updateForm.watch("categoryNameEng") : createForm.watch("categoryNameEng"), + isEditing ? editingCategoryCode : undefined, + validatedFields.has("categoryNameEng"), + ); + + // 중복 검사 결과 확인 (수정 시에는 카테고리 코드 검사 제외) + const hasDuplicateErrors = + (!isEditing && categoryCodeCheck.data?.isDuplicate && validatedFields.has("categoryCode")) || + (categoryNameCheck.data?.isDuplicate && validatedFields.has("categoryName")) || + (categoryNameEngCheck.data?.isDuplicate && validatedFields.has("categoryNameEng")); + + // 중복 검사 로딩 중인지 확인 (수정 시에는 카테고리 코드 검사 제외) + const isDuplicateChecking = + (!isEditing && categoryCodeCheck.isLoading) || categoryNameCheck.isLoading || categoryNameEngCheck.isLoading; + // 폼은 조건부로 직접 사용 // 편집 모드일 때 기존 데이터 로드 useEffect(() => { if (isOpen) { + // 검증 상태 초기화 + setValidatedFields(new Set()); + if (isEditing && editingCategory) { // 수정 모드: 기존 데이터 로드 updateForm.reset({ @@ -132,7 +136,7 @@ export function CodeCategoryFormModal({ }); } } - }, [isOpen, isEditing, editingCategory, categories]); + }, [isOpen, isEditing, editingCategory, categories, createForm, updateForm]); const handleSubmit = isEditing ? updateForm.handleSubmit(async (data) => { @@ -177,7 +181,7 @@ export function CodeCategoryFormModal({ disabled={isLoading} placeholder="카테고리 코드를 입력하세요" className={createForm.formState.errors.categoryCode ? "border-red-500" : ""} - onBlur={formValidation.createBlurHandler("categoryCode")} + onBlur={() => handleFieldBlur("categoryCode")} /> {createForm.formState.errors.categoryCode && (

{createForm.formState.errors.categoryCode.message}

@@ -218,7 +222,7 @@ export function CodeCategoryFormModal({ ? "border-red-500" : "" } - onBlur={formValidation.createBlurHandler("categoryName")} + onBlur={() => handleFieldBlur("categoryName")} /> {isEditing ? updateForm.formState.errors.categoryName && ( @@ -253,7 +257,7 @@ export function CodeCategoryFormModal({ ? "border-red-500" : "" } - onBlur={formValidation.createBlurHandler("categoryNameEng")} + onBlur={() => handleFieldBlur("categoryNameEng")} /> {isEditing ? updateForm.formState.errors.categoryNameEng && ( @@ -291,7 +295,7 @@ export function CodeCategoryFormModal({ ? "border-red-500" : "" } - onBlur={formValidation.createBlurHandler("description")} + onBlur={() => handleFieldBlur("description")} /> {isEditing ? updateForm.formState.errors.description && (