버튼별로 데이터 필터링기능

frontend/components/screen/InteractiveDataTable.tsx

@@ -311,6 +311,41 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     };
   }, [currentPage, searchValues, loadData, component.tableName]);
 
+  // 🆕 RelatedDataButtons 선택 이벤트 리스너 (버튼 선택 시 테이블 필터링)
+  const [relatedButtonFilter, setRelatedButtonFilter] = useState<{
+    filterColumn: string;
+    filterValue: any;
+  } | null>(null);
+
+  useEffect(() => {
+    const handleRelatedButtonSelect = (event: CustomEvent) => {
+      const { targetTable, filterColumn, filterValue } = event.detail || {};
+      
+      // 이 테이블이 대상 테이블인지 확인
+      if (targetTable === component.tableName) {
+        console.log("📌 [InteractiveDataTable] RelatedDataButtons 필터 적용:", {
+          tableName: component.tableName,
+          filterColumn,
+          filterValue,
+        });
+        setRelatedButtonFilter({ filterColumn, filterValue });
+      }
+    };
+
+    window.addEventListener("related-button-select" as any, handleRelatedButtonSelect);
+
+    return () => {
+      window.removeEventListener("related-button-select" as any, handleRelatedButtonSelect);
+    };
+  }, [component.tableName]);
+
+  // relatedButtonFilter 변경 시 데이터 다시 로드
+  useEffect(() => {
+    if (relatedButtonFilter) {
+      loadData(1, searchValues);
+    }
+  }, [relatedButtonFilter]);
+
   // 카테고리 타입 컬럼의 값 매핑 로드
   useEffect(() => {
     const loadCategoryMappings = async () => {
@@ -705,10 +740,17 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           return;
         }
         
+        // 🆕 RelatedDataButtons 필터 적용
+        let relatedButtonFilterValues: Record<string, any> = {};
+        if (relatedButtonFilter) {
+          relatedButtonFilterValues[relatedButtonFilter.filterColumn] = relatedButtonFilter.filterValue;
+        }
+
         // 검색 파라미터와 연결 필터 병합
         const mergedSearchParams = {
           ...searchParams,
           ...linkedFilterValues,
+          ...relatedButtonFilterValues, // 🆕 RelatedDataButtons 필터 추가
         };
         
         console.log("🔍 데이터 조회 시작:", { 
@@ -716,6 +758,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           page, 
           pageSize,
           linkedFilterValues,
+          relatedButtonFilterValues,
           mergedSearchParams,
         });
         
@@ -822,7 +865,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         setLoading(false);
       }
     },
-    [component.tableName, pageSize, component.autoFilter, splitPanelContext?.selectedLeftData], // 🆕 autoFilter, 연결필터 추가
+    [component.tableName, pageSize, component.autoFilter, splitPanelContext?.selectedLeftData, relatedButtonFilter], // 🆕 autoFilter, 연결필터, RelatedDataButtons 필터 추가
   );
 
   // 현재 사용자 정보 로드

frontend/components/screen/SaveModal.tsx

@@ -101,6 +101,46 @@ export const SaveModal: React.FC<SaveModalProps> = ({
     };
   }, [onClose]);
 
+  // 필수 항목 검증
+  const validateRequiredFields = (): { isValid: boolean; missingFields: string[] } => {
+    const missingFields: string[] = [];
+
+    components.forEach((component) => {
+      // 컴포넌트의 required 속성 확인 (여러 위치에서 체크)
+      const isRequired = 
+        component.required === true || 
+        component.style?.required === true ||
+        component.componentConfig?.required === true;
+      
+      const columnName = component.columnName || component.style?.columnName;
+      const label = component.label || component.style?.label || columnName;
+
+      console.log("🔍 필수 항목 검증:", {
+        componentId: component.id,
+        columnName,
+        label,
+        isRequired,
+        "component.required": component.required,
+        "style.required": component.style?.required,
+        "componentConfig.required": component.componentConfig?.required,
+        value: formData[columnName || ""],
+      });
+
+      if (isRequired && columnName) {
+        const value = formData[columnName];
+        // 값이 비어있는지 확인 (null, undefined, 빈 문자열, 공백만 있는 문자열)
+        if (value === null || value === undefined || (typeof value === "string" && value.trim() === "")) {
+          missingFields.push(label || columnName);
+        }
+      }
+    });
+
+    return {
+      isValid: missingFields.length === 0,
+      missingFields,
+    };
+  };
+
   // 저장 핸들러
   const handleSave = async () => {
     if (!screenData || !screenId) return;
@@ -111,6 +151,13 @@ export const SaveModal: React.FC<SaveModalProps> = ({
       return;
     }
 
+    // ✅ 필수 항목 검증
+    const validation = validateRequiredFields();
+    if (!validation.isValid) {
+      toast.error(`필수 항목을 입력해주세요: ${validation.missingFields.join(", ")}`);
+      return;
+    }
+
     try {
       setIsSaving(true);
 

frontend/components/screen/config-panels/ButtonConfigPanel.tsx

@@ -645,6 +645,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <SelectItem value="navigate">페이지 이동</SelectItem>
             <SelectItem value="transferData">데이터 전달</SelectItem>
             <SelectItem value="openModalWithData">데이터 전달 + 모달 열기</SelectItem>
+            <SelectItem value="openRelatedModal">연관 데이터 버튼 모달 열기</SelectItem>
             <SelectItem value="modal">모달 열기</SelectItem>
             <SelectItem value="quickInsert">즉시 저장</SelectItem>
             <SelectItem value="control">제어 흐름</SelectItem>

frontend/components/screen/panels/UnifiedPropertiesPanel.tsx

@@ -943,6 +943,18 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
               <Label className="text-xs">읽기전용</Label>
             </div>
           )}
+          {/* 숨김 옵션 */}
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
+              onCheckedChange={(checked) => {
+                handleUpdate("hidden", checked);
+                handleUpdate("componentConfig.hidden", checked);
+              }}
+              className="h-4 w-4"
+            />
+            <Label className="text-xs">숨김</Label>
+          </div>
         </div>
       </div>
     );