Merge pull request '공통코드관리 수정 시 에러 해결' (#80) from fix/commcode into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/80

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<CreateCategoryData>({
     resolver: zodResolver(createCategorySchema),
@@ -105,11 +66,54 @@ export function CodeCategoryFormModal({
     },
   });
 
+  // 필드 검증 상태 관리
+  const [validatedFields, setValidatedFields] = useState<Set<string>>(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 && (
                 <p className="text-sm text-red-600">{createForm.formState.errors.categoryCode.message}</p>
@@ -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 && (