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

frontend/components/admin/CodeDetailPanel.tsx

@@ -109,7 +109,8 @@ function SortableCodeItem({ code, onEdit, onDelete }: SortableCodeItemProps) {
 
 export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
-  const { codes, setCodes, codesLoading, codesError, fetchCodes, deleteCode, reorderCodes } = useCommonCode();
+  const { codes, setCodes, codesLoading, codesError, fetchCodes, createCode, updateCode, deleteCode, reorderCodes } =
+    useCommonCode();
 
   // 드래그앤드롭 센서 설정
   const sensors = useSensors(
@@ -131,10 +132,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   const [searchTerm, setSearchTerm] = useState("");
   const [showActiveOnly, setShowActiveOnly] = useState(false); // 활성 필터 상태
   const [showFormModal, setShowFormModal] = useState(false);
-  const [editingCode, setEditingCode] = useState<{ categoryCode: string; codeValue: string }>({
-    categoryCode: "",
-    codeValue: "",
-  });
+  const [editingCode, setEditingCode] = useState<any>(null); // 전체 코드 객체 저장
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deletingCode, setDeletingCode] = useState<{ categoryCode: string; codeValue: string }>({
     categoryCode: "",
@@ -158,13 +156,16 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   const handleCreateCode = () => {
     if (!categoryCode) return;
 
-    setEditingCode({ categoryCode: "", codeValue: "" });
+    setEditingCode(null); // 새 코드 모드
     setShowFormModal(true);
   };
 
   // 코드 수정 핸들러
   const handleEditCode = (codeValue: string) => {
-    setEditingCode({ categoryCode, codeValue });
+    console.log("🔧 코드 수정 핸들러 호출:", { categoryCode, codeValue });
+    const codeToEdit = codes.find((code) => code.code_value === codeValue);
+    console.log("📋 수정할 코드 데이터:", codeToEdit);
+    setEditingCode(codeToEdit || null); // 전체 코드 객체 전달
     setShowFormModal(true);
   };
 
@@ -330,9 +331,15 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
       {showFormModal && (
         <CodeFormModal
           isOpen={showFormModal}
-          onClose={() => setShowFormModal(false)}
+          onClose={() => {
+            setShowFormModal(false);
+            setEditingCode(null); // 모달 닫을 때 편집 상태 초기화
+          }}
           categoryCode={categoryCode}
-          editingCodeValue={editingCode.codeValue}
+          editingCode={editingCode} // 전체 코드 객체 전달
+          codes={codes} // 현재 코드 목록 전달
+          onCreateCode={createCode} // 코드 생성 함수 전달
+          onUpdateCode={updateCode} // 코드 수정 함수 전달
         />
       )}
 
@@ -342,11 +349,10 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
           isOpen={showDeleteModal}
           onClose={() => setShowDeleteModal(false)}
           onConfirm={handleConfirmDelete}
+          type="error"
           title="삭제 확인"
           message="이 코드를 삭제하시겠습니까?"
           confirmText="삭제"
-          cancelText="취소"
-          variant="destructive"
         />
       )}
     </div>