- {console.log("🔍 [DetailSettingsPanel] widget 타입:", selectedComponent?.type, "autoFill:", widget.autoFill)}
- {/* 🆕 자동 입력 섹션 */}
-
+ {/* 조건부 표시 설정 */}
+
+ {
+ onUpdateProperty(widget.id, "conditional", newConfig);
+ }}
+ availableFields={components
+ .filter((c) => c.id !== widget.id && (c.type === "widget" || c.type === "component"))
+ .map((c) => ({
+ id: c.id,
+ label: (c as any).label || (c as any).columnName || c.id,
+ type: (c as any).widgetType || (c as any).componentConfig?.webType,
+ options: (c as any).webTypeConfig?.options || [],
+ }))}
+ currentComponentId={widget.id}
+ />
+
+
+
+
+ {/* 자동 입력 섹션 */}
+
🔥 테이블 데이터 자동 입력 (테스트)
diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
index ad34df9a..b8ec467a 100644
--- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
+++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
@@ -62,6 +62,8 @@ import StyleEditor from "../StyleEditor";
import ResolutionPanel from "./ResolutionPanel";
import { Slider } from "@/components/ui/slider";
import { Grid3X3, Eye, EyeOff, Zap } from "lucide-react";
+import { ConditionalConfigPanel } from "@/components/unified/ConditionalConfigPanel";
+import { ConditionalConfig } from "@/types/unified-components";
interface UnifiedPropertiesPanelProps {
selectedComponent?: ComponentData;
@@ -313,6 +315,51 @@ export const UnifiedPropertiesPanel: React.FC = ({
selectedComponent.componentConfig?.id ||
(selectedComponent.type === "component" ? selectedComponent.id : null); // 🆕 독립 컴포넌트 (table-search-widget 등)
+ // 🆕 Unified 컴포넌트 직접 감지 및 설정 패널 렌더링
+ if (componentId?.startsWith("unified-")) {
+ const unifiedConfigPanels: Record void }>> = {
+ "unified-input": require("@/components/unified/config-panels/UnifiedInputConfigPanel").UnifiedInputConfigPanel,
+ "unified-select": require("@/components/unified/config-panels/UnifiedSelectConfigPanel").UnifiedSelectConfigPanel,
+ "unified-date": require("@/components/unified/config-panels/UnifiedDateConfigPanel").UnifiedDateConfigPanel,
+ "unified-list": require("@/components/unified/config-panels/UnifiedListConfigPanel").UnifiedListConfigPanel,
+ "unified-layout": require("@/components/unified/config-panels/UnifiedLayoutConfigPanel").UnifiedLayoutConfigPanel,
+ "unified-group": require("@/components/unified/config-panels/UnifiedGroupConfigPanel").UnifiedGroupConfigPanel,
+ "unified-media": require("@/components/unified/config-panels/UnifiedMediaConfigPanel").UnifiedMediaConfigPanel,
+ "unified-biz": require("@/components/unified/config-panels/UnifiedBizConfigPanel").UnifiedBizConfigPanel,
+ "unified-hierarchy": require("@/components/unified/config-panels/UnifiedHierarchyConfigPanel").UnifiedHierarchyConfigPanel,
+ };
+
+ const UnifiedConfigPanel = unifiedConfigPanels[componentId];
+ if (UnifiedConfigPanel) {
+ const currentConfig = selectedComponent.componentConfig || {};
+ const handleUnifiedConfigChange = (newConfig: any) => {
+ onUpdateProperty(selectedComponent.id, "componentConfig", { ...currentConfig, ...newConfig });
+ };
+
+ const unifiedNames: Record = {
+ "unified-input": "통합 입력",
+ "unified-select": "통합 선택",
+ "unified-date": "통합 날짜",
+ "unified-list": "통합 목록",
+ "unified-layout": "통합 레이아웃",
+ "unified-group": "통합 그룹",
+ "unified-media": "통합 미디어",
+ "unified-biz": "통합 비즈니스",
+ "unified-hierarchy": "통합 계층",
+ };
+
+ return (
+
+
+
+
{unifiedNames[componentId] || componentId} 설정
+
+
+
{configPanel}
;
+ }
+ }
+
// 4. 새로운 컴포넌트 시스템 (button, card 등)
const componentType = selectedComponent.componentConfig?.type || selectedComponent.type;
const hasNewConfigPanel =
@@ -1468,6 +1527,36 @@ export const UnifiedPropertiesPanel: React.FC = ({
{renderDetailTab()}
+ {/* 조건부 표시 설정 */}
+ {selectedComponent && (
+ <>
+
+
+
+
+
조건부 표시
+
+
+ {
+ handleUpdate("conditional", newConfig);
+ }}
+ availableFields={
+ allComponents
+ ?.filter((c) => c.type === "widget" && c.id !== selectedComponent.id)
+ .map((c) => ({
+ id: (c as any).columnName || c.id,
+ label: (c as any).label || c.id,
+ type: (c as any).widgetType || "text",
+ })) || []
+ }
+ />
+
+
+ (값 입력 불필요)
+
+ );
+ }
+
+ // 선택된 필드에 옵션이 있으면 Select로 표시
+ if (selectedField?.options && selectedField.options.length > 0) {
+ return (
+
+ );
+ }
+
+ // 체크박스 타입이면 true/false Select
+ if (selectedField?.type === "checkbox" || selectedField?.type === "boolean") {
+ return (
+
+ );
+ }
+
+ // 숫자 타입
+ if (selectedField?.type === "number") {
+ return (
+ handleValueChange(e.target.value)}
+ placeholder="숫자 입력"
+ className="h-8 text-xs"
+ />
+ );
+ }
+
+ // 기본: 텍스트 입력
+ return (
+ handleValueChange(e.target.value)}
+ placeholder="값 입력"
+ className="h-8 text-xs"
+ />
+ );
+ };
+
+ return (
+
+ {/* 헤더 */}
+
+
+ {/* 조건 설정 영역 */}
+ {enabled && (
+
+ {/* 조건 필드 선택 */}
+
+
+
+
+ 이 필드의 값에 따라 조건이 적용됩니다
+
+
+
+ {/* 연산자 선택 */}
+
+
+
+
+
+ {/* 값 입력 */}
+
+
+ {renderValueInput()}
+
+
+ {/* 동작 선택 */}
+
+
+
+
+ 조건이 만족되면 이 필드를 {ACTIONS.find(a => a.value === action)?.label}합니다
+
+
+
+ {/* 미리보기 */}
+ {field && (
+
+
설정 요약:
+
+ "{selectableFields.find(f => f.id === field)?.label || field}" 필드가{" "}
+
+ {operator === "isEmpty" ? "비어있으면" :
+ operator === "isNotEmpty" ? "값이 있으면" :
+ `"${value}"${operator === "=" ? "이면" :
+ operator === "!=" ? "이 아니면" :
+ operator === ">" ? "보다 크면" :
+ operator === "<" ? "보다 작으면" :
+ operator === "in" ? "에 포함되면" : "에 포함되지 않으면"}`}
+ {" "}
+ → 이 필드를{" "}
+
+ {action === "show" ? "표시" :
+ action === "hide" ? "숨김" :
+ action === "enable" ? "활성화" : "비활성화"}
+
+
+
+ )}
+
+ )}
+