드래그앤 드랍 및 검색 및 핕터링 기능 구현

frontend/components/admin/CodeFormModal.tsx

@@ -63,18 +63,76 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
     setErrors({});
   }, [editingCodeValue, codes, isOpen]);
 
-  // 입력값 검증
+  // 실시간 필드 검증
+  const validateField = (fieldName: string, value: string) => {
+    const newErrors = { ...errors };
+
+    switch (fieldName) {
+      case "codeValue":
+        if (!value.trim()) {
+          newErrors.codeValue = "필수 입력 항목입니다.";
+        } else if (value.length > 50) {
+          newErrors.codeValue = "코드값은 50자 이하로 입력해주세요.";
+        } else if (!/^[A-Z0-9_]+$/.test(value)) {
+          newErrors.codeValue = "대문자, 숫자, 언더스코어(_)만 사용 가능합니다.";
+        } else {
+          delete newErrors.codeValue;
+        }
+        break;
+
+      case "codeName":
+        if (!value.trim()) {
+          newErrors.codeName = "필수 입력 항목입니다.";
+        } else if (value.length > 100) {
+          newErrors.codeName = "코드명은 100자 이하로 입력해주세요.";
+        } else {
+          delete newErrors.codeName;
+        }
+        break;
+
+      case "codeNameEng":
+        if (value && value.length > 100) {
+          newErrors.codeNameEng = "영문명은 100자 이하로 입력해주세요.";
+        } else {
+          delete newErrors.codeNameEng;
+        }
+        break;
+
+      case "description":
+        if (value && value.length > 500) {
+          newErrors.description = "설명은 500자 이하로 입력해주세요.";
+        } else {
+          delete newErrors.description;
+        }
+        break;
+    }
+
+    setErrors(newErrors);
+  };
+
+  // 전체 폼 검증
   const validateForm = () => {
     const newErrors: Record<string, string> = {};
 
+    // 필수 필드 검증
     if (!formData.codeValue.trim()) {
       newErrors.codeValue = "필수 입력 항목입니다.";
+    } else if (!/^[A-Z0-9_]+$/.test(formData.codeValue)) {
+      newErrors.codeValue = "대문자, 숫자, 언더스코어(_)만 사용 가능합니다.";
     }
 
     if (!formData.codeName.trim()) {
       newErrors.codeName = "필수 입력 항목입니다.";
     }
 
+    // 중복 검사 (신규 생성 시)
+    if (!editingCodeValue) {
+      const existingCode = codes.find((c) => c.code_value === formData.codeValue);
+      if (existingCode) {
+        newErrors.codeValue = "이미 존재하는 코드값입니다.";
+      }
+    }
+
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
@@ -117,13 +175,18 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
     }
   };
 
-  // 입력값 변경 핸들러
+  // 입력값 변경 핸들러 (실시간 검증 포함)
   const handleChange = (field: string, value: any) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
 
-    // 에러 제거
-    if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: "" }));
+    // 실시간 검증 (문자열 필드만)
+    if (typeof value === "string") {
+      validateField(field, value);
+    } else {
+      // 에러 제거 (숫자, 불린 필드)
+      if (errors[field]) {
+        setErrors((prev) => ({ ...prev, [field]: "" }));
+      }
     }
   };
 
@@ -141,9 +204,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
             <Input
               id="codeValue"
               value={formData.codeValue}
-              onChange={(e) => handleChange("codeValue", e.target.value)}
+              onChange={(e) => handleChange("codeValue", e.target.value.toUpperCase())}
               disabled={!!editingCodeValue || loading}
-              placeholder={"코드값을 입력하세요"}
+              placeholder={"코드값을 입력하세요 (예: USER_ACTIVE)"}
               className={errors.codeValue ? "border-red-500" : ""}
             />
             {errors.codeValue && <p className="text-sm text-red-600">{errors.codeValue}</p>}
@@ -172,7 +235,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
               onChange={(e) => handleChange("codeNameEng", e.target.value)}
               disabled={loading}
               placeholder={"코드 영문명을 입력하세요"}
+              className={errors.codeNameEng ? "border-red-500" : ""}
             />
+            {errors.codeNameEng && <p className="text-sm text-red-600">{errors.codeNameEng}</p>}
           </div>
 
           {/* 설명 */}
@@ -185,7 +250,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
               disabled={loading}
               placeholder={"설명을 입력하세요"}
               rows={3}
+              className={errors.description ? "border-red-500" : ""}
             />
+            {errors.description && <p className="text-sm text-red-600">{errors.description}</p>}
           </div>
 
           {/* 정렬 순서 */}
@@ -219,14 +286,16 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
             <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
               {"취소"}
             </Button>
-            <Button type="submit" disabled={loading}>
+            <Button type="submit" disabled={loading || Object.keys(errors).length > 0}>
               {loading ? (
                 <>
                   <LoadingSpinner size="sm" className="mr-2" />
-                  {"저장 중..."}
+                  {editingCodeValue ? "수정 중..." : "등록 중..."}
                 </>
+              ) : editingCodeValue ? (
+                "코드 수정"
               ) : (
-                "저장"
+                "코드 등록"
               )}
             </Button>
           </div>