backend-node/src/services/dynamicFormService.ts

@@ -937,11 +937,17 @@ export class DynamicFormService {
         })
         .join(", ");
 
-      // 🆕 JSONB 타입 값은 JSON 문자열로 변환
+      // 🆕 JSONB 타입 값은 JSON 문자열로 변환, 빈 문자열은 null로 변환
       const values: any[] = Object.keys(changedFields).map((key) => {
         const value = changedFields[key];
         const dataType = columnTypes[key];
 
+        // 🔧 빈 문자열은 null로 변환 (날짜 필드 등에서 값을 지울 때 필요)
+        if (value === "" || value === undefined) {
+          console.log(`🔄 빈 값 → null 변환: ${key}`);
+          return null;
+        }
+
         // JSONB/JSON 타입이고 배열/객체인 경우 JSON 문자열로 변환
         if (
           (dataType === "jsonb" || dataType === "json") &&

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -951,23 +951,43 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             // 추가 dataFilter 적용
             let filteredData = result.data || [];
             const dataFilter = componentConfig.rightPanel?.dataFilter;
-            if (dataFilter?.enabled && dataFilter.conditions?.length > 0) {
+            // 🔧 filters 또는 conditions 배열 모두 지원
+            const filterConditions = dataFilter?.filters || dataFilter?.conditions || [];
+            if (dataFilter?.enabled && filterConditions.length > 0) {
+              console.log(`🔍 [기본탭] dataFilter 설정:`, JSON.stringify(dataFilter, null, 2));
+              console.log(`🔍 [기본탭] 필터 전 데이터 수:`, filteredData.length);
               filteredData = filteredData.filter((item: any) => {
-                return dataFilter.conditions.every((cond: any) => {
+                return filterConditions.every((cond: any) => {
-                  const value = item[cond.column];
+                  // 🔧 columnName 또는 column 필드 모두 지원
+                  const columnName = cond.columnName || cond.column;
+                  const value = item[columnName];
                   const condValue = cond.value;
+                  let result = true;
                   switch (cond.operator) {
                     case "equals":
-                      return value === condValue;
+                      result = value === condValue;
+                      break;
                     case "notEquals":
-                      return value !== condValue;
+                      result = value !== condValue;
+                      break;
                     case "contains":
-                      return String(value).includes(String(condValue));
+                      result = String(value).includes(String(condValue));
+                      break;
+                    case "is_null":
+                    case "NULL":
+                      result = value === null || value === undefined || value === "";
+                      break;
+                    case "is_not_null":
+                    case "NOT NULL":
+                      result = value !== null && value !== undefined && value !== "";
+                      break;
                     default:
-                      return true;
+                      result = true;
                   }
+                  return result;
                 });
               });
+              console.log(`🔍 [기본탭] 필터 후 데이터 수:`, filteredData.length);
             }
 
             setRightData(filteredData);
@@ -1080,23 +1100,48 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
         // 데이터 필터 적용
         const dataFilter = tabConfig.dataFilter;
-        if (dataFilter?.enabled && dataFilter.conditions?.length > 0) {
+        console.log(`🔍 [추가탭 ${tabIndex}] dataFilter 설정:`, JSON.stringify(dataFilter, null, 2));
+        // 🔧 filters 또는 conditions 배열 모두 지원 (DataFilterConfigPanel은 filters 사용)
+        const filterConditions = dataFilter?.filters || dataFilter?.conditions || [];
+        console.log(`🔍 [추가탭 ${tabIndex}] filterConditions:`, filterConditions);
+        console.log(`🔍 [추가탭 ${tabIndex}] 필터 전 데이터 수:`, resultData.length);
+        if (dataFilter?.enabled && filterConditions.length > 0) {
+          const beforeCount = resultData.length;
           resultData = resultData.filter((item: any) => {
-            return dataFilter.conditions.every((cond: any) => {
+            return filterConditions.every((cond: any) => {
-              const value = item[cond.column];
+              // 🔧 columnName 또는 column 필드 모두 지원
+              const columnName = cond.columnName || cond.column;
+              const value = item[columnName];
               const condValue = cond.value;
+              let result = true;
               switch (cond.operator) {
                 case "equals":
-                  return value === condValue;
+                  result = value === condValue;
+                  break;
                 case "notEquals":
-                  return value !== condValue;
+                  result = value !== condValue;
+                  break;
                 case "contains":
-                  return String(value).includes(String(condValue));
+                  result = String(value).includes(String(condValue));
+                  break;
+                case "is_null":
+                case "NULL":
+                  result = value === null || value === undefined || value === "";
+                  break;
+                case "is_not_null":
+                case "NOT NULL":
+                  result = value !== null && value !== undefined && value !== "";
+                  break;
                 default:
-                  return true;
+                  result = true;
               }
+              console.log(`🔍 [필터 체크] ${columnName}=${JSON.stringify(value)}, operator=${cond.operator}, result=${result}`);
+              return result;
             });
           });
+          console.log(`🔍 [추가탭 ${tabIndex}] 필터 후 데이터 수: ${beforeCount} → ${resultData.length}`);
+        } else {
+          console.log(`🔍 [추가탭 ${tabIndex}] 필터 비활성화 또는 조건 없음 (enabled=${dataFilter?.enabled}, conditions=${filterConditions.length})`);
         }
 
         // 중복 제거 적용
@@ -1557,6 +1602,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   // 추가 버튼 핸들러
   const handleAddClick = useCallback(
     (panel: "left" | "right") => {
+      console.log("🆕 [추가모달] handleAddClick 호출:", { panel, activeTabIndex });
       setAddModalPanel(panel);
 
       // 우측 패널 추가 시, 좌측에서 선택된 항목의 조인 컬럼 값을 자동으로 채움
@@ -1567,16 +1613,19 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         componentConfig.rightPanel?.rightColumn
       ) {
         const leftColumnValue = selectedLeftItem[componentConfig.leftPanel.leftColumn];
-        setAddModalFormData({
+        const initialData = {
           [componentConfig.rightPanel.rightColumn]: leftColumnValue,
-        });
+        };
+        console.log("🆕 [추가모달] 초기 데이터 설정:", initialData);
+        setAddModalFormData(initialData);
       } else {
+        console.log("🆕 [추가모달] 빈 데이터로 초기화");
         setAddModalFormData({});
       }
 
       setShowAddModal(true);
     },
-    [selectedLeftItem, componentConfig],
+    [selectedLeftItem, componentConfig, activeTabIndex],
   );
 
   // 수정 버튼 핸들러
@@ -1681,10 +1730,44 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       // 기존 자동 편집 모드 (인라인 편집 모달)
       setEditModalPanel(panel);
       setEditModalItem(item);
-      setEditModalFormData({ ...item });
+
+      // 🔧 우측 패널(추가탭 포함) 수정 시 selectedLeftItem의 FK 값 병합
+      let mergedItem = { ...item };
+      if (panel === "right" && selectedLeftItem) {
+        // 현재 활성 탭의 relation 설정 가져오기
+        const currentTabConfig =
+          activeTabIndex === 0
+            ? componentConfig.rightPanel
+            : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1];
+
+        const relationKeys = currentTabConfig?.relation?.keys;
+        const leftColumn = currentTabConfig?.relation?.leftColumn;
+        const rightColumn = currentTabConfig?.relation?.foreignKey || currentTabConfig?.relation?.rightColumn;
+
+        if (relationKeys && relationKeys.length > 0) {
+          // 복합키인 경우
+          relationKeys.forEach((key: any) => {
+            if (key.leftColumn && key.rightColumn && selectedLeftItem[key.leftColumn] !== undefined) {
+              // item에 해당 FK 값이 없거나 빈 값이면 selectedLeftItem에서 가져옴
+              if (mergedItem[key.rightColumn] === undefined || mergedItem[key.rightColumn] === null || mergedItem[key.rightColumn] === "") {
+                mergedItem[key.rightColumn] = selectedLeftItem[key.leftColumn];
+              }
+            }
+          });
+        } else if (leftColumn && rightColumn) {
+          // 단일키인 경우
+          if (selectedLeftItem[leftColumn] !== undefined) {
+            if (mergedItem[rightColumn] === undefined || mergedItem[rightColumn] === null || mergedItem[rightColumn] === "") {
+              mergedItem[rightColumn] = selectedLeftItem[leftColumn];
+            }
+          }
+        }
+      }
+
+      setEditModalFormData(mergedItem);
       setShowEditModal(true);
     },
-    [componentConfig],
+    [componentConfig, selectedLeftItem, activeTabIndex],
   );
 
   // 수정 모달 저장