feat: SplitPanelLayout2 마스터-디테일 컴포넌트 구현

좌측 패널(마스터)-우측 패널(디테일) 분할 레이아웃 컴포넌트 추가
EditModal에 isCreateMode 플래그 추가하여 INSERT/UPDATE 분기 처리
dataFilter 기반 정확한 조인 필터링 구현
좌측 패널 선택 데이터를 모달로 자동 전달하는 dataTransferFields 설정 지원
ConfigPanel에서 테이블, 컬럼, 조인 설정 가능

frontend/components/screen/EditModal.tsx

@@ -118,7 +118,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
   // 전역 모달 이벤트 리스너
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
-      const { screenId, title, description, modalSize, editData, onSave, groupByColumns, tableName } = event.detail;
+      const { screenId, title, description, modalSize, editData, onSave, groupByColumns, tableName, isCreateMode } = event.detail;
 
       setModalState({
         isOpen: true,
@@ -134,7 +134,13 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
 
       // 편집 데이터로 폼 데이터 초기화
       setFormData(editData || {});
-      setOriginalData(editData || {});
+      // 🆕 isCreateMode가 true이면 originalData를 빈 객체로 설정 (INSERT 모드)
+      // originalData가 비어있으면 INSERT, 있으면 UPDATE로 처리됨
+      setOriginalData(isCreateMode ? {} : (editData || {}));
+      
+      if (isCreateMode) {
+        console.log("[EditModal] 생성 모드로 열림, 초기값:", editData);
+      }
     };
 
     const handleCloseEditModal = () => {
@@ -567,46 +573,77 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         return;
       }
 
-      // 기존 로직: 단일 레코드 수정
-      const changedData: Record<string, any> = {};
-      Object.keys(formData).forEach((key) => {
-        if (formData[key] !== originalData[key]) {
-          changedData[key] = formData[key];
-        }
-      });
+      // originalData가 비어있으면 INSERT, 있으면 UPDATE
+      const isCreateMode = Object.keys(originalData).length === 0;
+      
+      if (isCreateMode) {
+        // INSERT 모드
+        console.log("[EditModal] INSERT 모드 - 새 데이터 생성:", formData);
+        
+        const response = await dynamicFormApi.saveFormData({
+          screenId: modalState.screenId!,
+          tableName: screenData.screenInfo.tableName,
+          data: formData,
+        });
 
-      if (Object.keys(changedData).length === 0) {
-        toast.info("변경된 내용이 없습니다.");
-        handleClose();
-        return;
-      }
+        if (response.success) {
+          toast.success("데이터가 생성되었습니다.");
 
-      // 기본키 확인 (id 또는 첫 번째 키)
-      const recordId = originalData.id || Object.values(originalData)[0];
-
-      // UPDATE 액션 실행
-      const response = await dynamicFormApi.updateFormDataPartial(
-        recordId,
-        originalData,
-        changedData,
-        screenData.screenInfo.tableName,
-      );
-
-      if (response.success) {
-        toast.success("데이터가 수정되었습니다.");
-
-        // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
-        if (modalState.onSave) {
-          try {
-            modalState.onSave();
-          } catch (callbackError) {
-            console.error("⚠️ onSave 콜백 에러:", callbackError);
+          // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
+          if (modalState.onSave) {
+            try {
+              modalState.onSave();
+            } catch (callbackError) {
+              console.error("onSave 콜백 에러:", callbackError);
+            }
           }
+
+          handleClose();
+        } else {
+          throw new Error(response.message || "생성에 실패했습니다.");
+        }
+      } else {
+        // UPDATE 모드 - 기존 로직
+        const changedData: Record<string, any> = {};
+        Object.keys(formData).forEach((key) => {
+          if (formData[key] !== originalData[key]) {
+            changedData[key] = formData[key];
+          }
+        });
+
+        if (Object.keys(changedData).length === 0) {
+          toast.info("변경된 내용이 없습니다.");
+          handleClose();
+          return;
         }
 
-        handleClose();
-      } else {
-        throw new Error(response.message || "수정에 실패했습니다.");
+        // 기본키 확인 (id 또는 첫 번째 키)
+        const recordId = originalData.id || Object.values(originalData)[0];
+
+        // UPDATE 액션 실행
+        const response = await dynamicFormApi.updateFormDataPartial(
+          recordId,
+          originalData,
+          changedData,
+          screenData.screenInfo.tableName,
+        );
+
+        if (response.success) {
+          toast.success("데이터가 수정되었습니다.");
+
+          // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
+          if (modalState.onSave) {
+            try {
+              modalState.onSave();
+            } catch (callbackError) {
+              console.error("onSave 콜백 에러:", callbackError);
+            }
+          }
+
+          handleClose();
+        } else {
+          throw new Error(response.message || "수정에 실패했습니다.");
+        }
       }
     } catch (error: any) {
       console.error("❌ 수정 실패:", error);