커스텀 훅 분리 및 react query 최적화

frontend/hooks/useFormValidation.ts

@@ -0,0 +1,89 @@
+import { useState } from "react";
+
+export interface ValidationState {
+  enabled: boolean;
+  value: string;
+}
+
+export interface ValidationStates {
+  [fieldName: string]: ValidationState;
+}
+
+export interface UseFormValidationProps {
+  fields: string[];
+  initialStates?: Partial<ValidationStates>;
+}
+
+export function useFormValidation({ fields, initialStates = {} }: UseFormValidationProps) {
+  // 검증 상태 초기화
+  const initValidationStates = (): ValidationStates => {
+    const states: ValidationStates = {};
+    fields.forEach((field) => {
+      states[field] = initialStates[field] || { enabled: false, value: "" };
+    });
+    return states;
+  };
+
+  const [validationStates, setValidationStates] = useState<ValidationStates>(initValidationStates);
+
+  // 특정 필드의 검증 상태 업데이트
+  const updateFieldValidation = (fieldName: string, value: string) => {
+    setValidationStates((prev) => ({
+      ...prev,
+      [fieldName]: { enabled: true, value: value.trim() },
+    }));
+  };
+
+  // onBlur 핸들러 생성
+  const createBlurHandler =
+    (fieldName: string) => (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const value = event.target.value.trim();
+      if (value) {
+        updateFieldValidation(fieldName, value);
+      }
+    };
+
+  // 모든 필수 필드가 검증되었는지 확인
+  const areAllFieldsValidated = (requiredFields?: string[]) => {
+    const fieldsToCheck = requiredFields || fields;
+    return fieldsToCheck.every((field) => validationStates[field]?.enabled);
+  };
+
+  // 검증 상태 초기화
+  const resetValidation = (newStates?: Partial<ValidationStates>) => {
+    if (newStates) {
+      setValidationStates((prev) => {
+        const updated = { ...prev };
+        Object.entries(newStates).forEach(([key, value]) => {
+          if (value !== undefined) {
+            updated[key] = value;
+          }
+        });
+        return updated;
+      });
+    } else {
+      setValidationStates(initValidationStates());
+    }
+  };
+
+  // 특정 필드 검증 상태 확인
+  const isFieldValidated = (fieldName: string) => validationStates[fieldName]?.enabled || false;
+
+  // 필드 값 가져오기
+  const getFieldValue = (fieldName: string) => validationStates[fieldName]?.value || "";
+
+  return {
+    // 상태
+    validationStates,
+
+    // 액션
+    updateFieldValidation,
+    resetValidation,
+
+    // 유틸리티
+    createBlurHandler,
+    areAllFieldsValidated,
+    isFieldValidated,
+    getFieldValue,
+  };
+}