UX/UI 개선 및 CRUD 즉시 반영 개선

frontend/components/admin/CodeFormModal.tsx

@@ -7,20 +7,32 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import { useCommonCode } from "@/hooks/useCommonCode";
+// import { useCommonCode } from "@/hooks/useCommonCode"; // 제거: 상태 공유 문제 해결
 // import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
+import { CodeInfo, CreateCodeRequest, UpdateCodeRequest } from "@/types/commonCode";
 
 interface CodeFormModalProps {
   isOpen: boolean;
   onClose: () => void;
   categoryCode: string;
-  editingCodeValue?: string;
+  editingCode?: CodeInfo | null; // 수정할 코드 객체 (null이면 새 코드)
+  codes: CodeInfo[];
+  onCreateCode: (categoryCode: string, data: CreateCodeRequest) => Promise<void>;
+  onUpdateCode: (categoryCode: string, codeValue: string, data: UpdateCodeRequest) => Promise<void>;
 }
 
-export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue }: CodeFormModalProps) {
+export function CodeFormModal({
+  isOpen,
+  onClose,
+  categoryCode,
+  editingCode,
+  codes,
+  onCreateCode,
+  onUpdateCode,
+}: CodeFormModalProps) {
   // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
-  const { codes, createCode, updateCode } = useCommonCode();
+  // const { codes, createCode, updateCode } = useCommonCode(); // 제거: props로 전달받음
 
   // 폼 상태
   const [formData, setFormData] = useState({
@@ -28,40 +40,49 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
     codeName: "",
     codeNameEng: "",
     description: "",
-    sortOrder: 0,
+    sortOrder: 1,
     isActive: true,
   });
 
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
 
-  // 수정 모드일 때 기존 데이터 로드
+  // 모달 열릴 때 데이터 초기화
   useEffect(() => {
-    if (editingCodeValue && codes.length > 0) {
-      const code = codes.find((c) => c.code_value === editingCodeValue);
-      if (code) {
+    console.log("🚀 CodeFormModal useEffect 실행:", {
+      isOpen,
+      editingCode,
+      categoryCode,
+    });
+
+    if (isOpen) {
+      if (editingCode) {
+        // 수정 모드: 전달받은 코드 데이터 사용
+        console.log("🔄 수정 모드 - 기존 데이터 로드:", editingCode);
         setFormData({
-          codeValue: code.code_value,
-          codeName: code.code_name,
-          codeNameEng: code.code_name_eng || "",
-          description: code.description || "",
-          sortOrder: code.sort_order,
-          isActive: code.is_active === "Y",
+          codeValue: editingCode.code_value,
+          codeName: editingCode.code_name,
+          codeNameEng: editingCode.code_name_eng || "",
+          description: editingCode.description || "",
+          sortOrder: editingCode.sort_order,
+          isActive: editingCode.is_active === "Y",
+        });
+      } else {
+        // 새 코드 모드: 초기값 설정
+        const maxSortOrder = codes.length > 0 ? Math.max(...codes.map((c) => c.sort_order)) : 0;
+        console.log("✨ 새 코드 모드 - 초기값 설정, 다음 순서:", maxSortOrder + 1);
+        setFormData({
+          codeValue: "",
+          codeName: "",
+          codeNameEng: "",
+          description: "",
+          sortOrder: maxSortOrder + 1,
+          isActive: true,
         });
       }
-    } else {
-      // 새 코드일 때 초기값
-      setFormData({
-        codeValue: "",
-        codeName: "",
-        codeNameEng: "",
-        description: "",
-        sortOrder: 0,
-        isActive: true,
-      });
+      setErrors({});
     }
-    setErrors({});
-  }, [editingCodeValue, codes, isOpen]);
+  }, [isOpen, editingCode, codes, categoryCode]);
 
   // 실시간 필드 검증
   const validateField = (fieldName: string, value: string) => {
@@ -126,7 +147,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
     }
 
     // 중복 검사 (신규 생성 시)
-    if (!editingCodeValue) {
+    if (!editingCode) {
       const existingCode = codes.find((c) => c.code_value === formData.codeValue);
       if (existingCode) {
         newErrors.codeValue = "이미 존재하는 코드값입니다.";
@@ -146,9 +167,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
     setLoading(true);
 
     try {
-      if (editingCodeValue) {
+      if (editingCode) {
         // 수정
-        await updateCode(categoryCode, editingCodeValue, {
+        await onUpdateCode(categoryCode, editingCode.code_value, {
           codeName: formData.codeName,
           codeNameEng: formData.codeNameEng,
           description: formData.description,
@@ -157,7 +178,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
         });
       } else {
         // 생성
-        await createCode(categoryCode, {
+        await onCreateCode(categoryCode, {
           codeValue: formData.codeValue,
           codeName: formData.codeName,
           codeNameEng: formData.codeNameEng,
@@ -176,7 +197,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
   };
 
   // 입력값 변경 핸들러 (실시간 검증 포함)
-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: string, value: string | number | boolean) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
 
     // 실시간 검증 (문자열 필드만)
@@ -194,7 +215,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>{editingCodeValue ? "코드 수정" : "새 코드"}</DialogTitle>
+          <DialogTitle>{editingCode ? "코드 수정" : "새 코드"}</DialogTitle>
         </DialogHeader>
 
         <form onSubmit={handleSubmit} className="space-y-4">
@@ -205,7 +226,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
               id="codeValue"
               value={formData.codeValue}
               onChange={(e) => handleChange("codeValue", e.target.value.toUpperCase())}
-              disabled={!!editingCodeValue || loading}
+              disabled={!!editingCode || loading}
               placeholder={"코드값을 입력하세요 (예: USER_ACTIVE)"}
               className={errors.codeValue ? "border-red-500" : ""}
             />
@@ -269,7 +290,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
           </div>
 
           {/* 활성 상태 (수정 시에만) */}
-          {editingCodeValue && (
+          {editingCode && (
             <div className="flex items-center space-x-2">
               <Switch
                 id="isActive"
@@ -290,9 +311,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue
               {loading ? (
                 <>
                   <LoadingSpinner size="sm" className="mr-2" />
-                  {editingCodeValue ? "수정 중..." : "등록 중..."}
+                  {editingCode ? "수정 중..." : "등록 중..."}
                 </>
-              ) : editingCodeValue ? (
+              ) : editingCode ? (
                 "코드 수정"
               ) : (
                 "코드 등록"