[agent-pipeline] pipe-20260311052455-y968 round-4

frontend/lib/registry/components/common/ConfigPanelBuilder.tsx

@@ -1,47 +1,18 @@
 "use client";
 
 import React from "react";
-import { ConfigPanelBuilderProps } from "./ConfigPanelTypes";
+import { ConfigPanelBuilderProps, ConfigSectionDefinition } from "./ConfigPanelTypes";
 import { ConfigSection } from "./ConfigSection";
 import { ConfigField } from "./ConfigField";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
-export function ConfigPanelBuilder<T extends Record<string, any>>({
+function renderSections<T extends Record<string, any>>(
-  config,
+  sections: ConfigSectionDefinition<T>[],
-  onChange,
+  config: T,
-  sections,
+  onChange: (key: string, value: any) => void,
-  presets,
+  tableColumns?: any[],
-  tableColumns,
+) {
-  children,
+  return sections.map((section) => {
-}: ConfigPanelBuilderProps<T>) {
-  return (
-    <div className="space-y-3">
-      {/* 프리셋 버튼 */}
-      {presets && presets.length > 0 && (
-        <div className="border-b pb-3">
-          <h4 className="mb-2 text-xs font-medium text-muted-foreground">
-            빠른 설정
-          </h4>
-          <div className="flex flex-wrap gap-1">
-            {presets.map((preset, idx) => (
-              <button
-                key={idx}
-                onClick={() => {
-                  Object.entries(preset.values).forEach(([key, value]) => {
-                    onChange(key, value);
-                  });
-                }}
-                className="rounded-full bg-muted px-2.5 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-primary hover:text-primary-foreground"
-                title={preset.description}
-              >
-                {preset.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* 섹션 렌더링 */}
-      {sections.map((section) => {
     if (section.condition && !section.condition(config)) {
       return null;
     }
@@ -67,9 +38,107 @@ export function ConfigPanelBuilder<T extends Record<string, any>>({
         ))}
       </ConfigSection>
     );
-      })}
+  });
+}
 
-      {/* 커스텀 children */}
+export function ConfigPanelBuilder<T extends Record<string, any>>({
+  config,
+  onChange,
+  onConfigChange,
+  sections,
+  presets,
+  tableColumns,
+  children,
+  mode = "flat",
+  context,
+}: ConfigPanelBuilderProps<T>) {
+  const effectiveTableColumns = tableColumns || context?.tableColumns;
+
+  const presetSection = presets && presets.length > 0 && (
+    <div className="border-b border-border/40 pb-2.5">
+      <h4 className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+        빠른 설정
+      </h4>
+      <div className="flex flex-wrap gap-1">
+        {presets.map((preset, idx) => (
+          <button
+            key={idx}
+            onClick={() => {
+              Object.entries(preset.values).forEach(([key, value]) => {
+                onChange(key, value);
+              });
+              if (onConfigChange) {
+                onConfigChange({ ...config, ...preset.values } as Record<string, any>);
+              }
+            }}
+            className="rounded border border-border bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:border-primary hover:text-primary"
+            title={preset.description}
+          >
+            {preset.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+
+  if (mode === "tabs") {
+    const groupMap = new Map<string, ConfigSectionDefinition<T>[]>();
+    const ungrouped: ConfigSectionDefinition<T>[] = [];
+
+    for (const section of sections) {
+      if (section.group) {
+        const existing = groupMap.get(section.group) || [];
+        existing.push(section);
+        groupMap.set(section.group, existing);
+      } else {
+        ungrouped.push(section);
+      }
+    }
+
+    const tabGroups = Array.from(groupMap.entries());
+
+    if (tabGroups.length === 0) {
+      return (
+        <div className="space-y-1">
+          {presetSection}
+          {renderSections(sections, config, onChange, effectiveTableColumns)}
+          {children}
+        </div>
+      );
+    }
+
+    const defaultTab = tabGroups[0]?.[0] || "general";
+
+    return (
+      <div className="space-y-1">
+        {presetSection}
+
+        {ungrouped.length > 0 && renderSections(ungrouped, config, onChange, effectiveTableColumns)}
+
+        <Tabs defaultValue={defaultTab} className="w-full">
+          <TabsList className="h-7 w-full">
+            {tabGroups.map(([groupName]) => (
+              <TabsTrigger key={groupName} value={groupName} className="h-6 text-xs">
+                {groupName}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {tabGroups.map(([groupName, groupSections]) => (
+            <TabsContent key={groupName} value={groupName} className="mt-1">
+              {renderSections(groupSections, config, onChange, effectiveTableColumns)}
+            </TabsContent>
+          ))}
+        </Tabs>
+
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      {presetSection}
+      {renderSections(sections, config, onChange, effectiveTableColumns)}
       {children}
     </div>
   );

frontend/lib/registry/components/common/ConfigPanelTypes.ts

@@ -48,6 +48,7 @@ export interface ConfigSectionDefinition<T = any> {
 export interface ConfigPanelBuilderProps<T = any> {
   config: T;
   onChange: (key: string, value: any) => void;
+  onConfigChange?: (config: Record<string, any>) => void;
   sections: ConfigSectionDefinition<T>[];
   presets?: Array<{
     label: string;
@@ -56,6 +57,8 @@ export interface ConfigPanelBuilderProps<T = any> {
   }>;
   tableColumns?: ConfigOption[];
   children?: React.ReactNode;
+  mode?: "flat" | "tabs";
+  context?: ConfigPanelContext;
 }
 
 /**