[agent-pipeline] pipe-20260311104251-xw7c round-1

frontend/components/v2/config-panels/V2SelectConfigPanel.tsx

@@ -12,7 +12,7 @@ import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Separator } from "@/components/ui/separator";
-import { List, Code, Database, FolderTree, Settings, ChevronDown, Plus, Trash2, Loader2, Filter } from "lucide-react";
+import { List, Database, FolderTree, Settings, ChevronDown, Plus, Trash2, Loader2, Filter } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import type { V2SelectFilter } from "@/types/v2-components";
@@ -63,24 +63,18 @@ const SOURCE_CARDS = [
     description: "옵션을 직접 추가해요",
   },
   {
-    value: "code",
+    value: "category",
-    icon: Code,
+    icon: FolderTree,
-    title: "공통 코드",
+    title: "카테고리",
-    description: "등록된 코드를 사용해요",
+    description: "등록된 선택지를 사용해요",
   },
   {
     value: "entity",
     icon: Database,
-    title: "테이블 데이터",
+    title: "테이블 참조",
     description: "다른 테이블에서 가져와요",
     entityOnly: true,
   },
-  {
-    value: "category",
-    icon: FolderTree,
-    title: "카테고리",
-    description: "카테고리로 분류해요",
-  },
 ] as const;
 
 /**
@@ -389,7 +383,7 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
   }, []);
 
   useEffect(() => {
-    if (config.source === "category") {
+    if (config.source === "category" || config.source === "code") {
       const catTable = config.categoryTable || tableName;
       const catColumn = config.categoryColumn || columnName;
       if (catTable && catColumn) {
@@ -453,9 +447,12 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     updateConfig("options", newOptions);
   };
 
-  const effectiveSource = isCategoryType ? "category" : config.source || "static";
+  const effectiveSource = isCategoryType
+    ? "category"
+    : config.source === "code"
+      ? "category"
+      : config.source || "static";
 
-  // 표시할 소스 카드 결정
   const visibleCards = useMemo(() => {
     if (isCategoryType) {
       return SOURCE_CARDS.filter((c) => c.value === "category");
@@ -466,8 +463,7 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     });
   }, [isCategoryType, isEntityType]);
 
-  // 카드 그리드 열 수: 3개면 한 줄, 4개면 2x2
+  const gridCols = isEntityType ? "grid-cols-3" : "grid-cols-2";
-  const gridCols = visibleCards.length <= 3 ? "grid-cols-3" : "grid-cols-2";
 
   return (
     <div className="space-y-4">
@@ -568,36 +564,12 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
         </div>
       )}
 
-      {/* 공통 코드 (code) */}
+      {/* 테이블 참조 (entity) */}
-      {effectiveSource === "code" && (
-        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-          <div className="flex items-center gap-2">
-            <Code className="h-4 w-4 text-primary" />
-            <span className="text-sm font-medium">공통 코드</span>
-          </div>
-          {config.codeGroup ? (
-            <div className="rounded-md border bg-background p-3">
-              <p className="text-xs text-muted-foreground">코드 그룹</p>
-              <p className="mt-0.5 text-sm font-medium">{config.codeGroup}</p>
-              <p className="mt-1 text-[11px] text-muted-foreground">
-                테이블 컬럼에 설정된 코드 그룹이 자동으로 적용돼요
-              </p>
-            </div>
-          ) : (
-            <div className="rounded-md border-2 border-dashed p-4 text-center">
-              <p className="text-sm text-muted-foreground">코드 그룹이 설정되지 않았어요</p>
-              <p className="mt-1 text-xs text-muted-foreground">테이블 타입 관리에서 컬럼의 코드 그룹을 설정해주세요</p>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* 테이블 데이터 (entity) */}
       {effectiveSource === "entity" && (
         <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
           <div className="flex items-center gap-2">
             <Database className="h-4 w-4 text-primary" />
-            <span className="text-sm font-medium">테이블 데이터</span>
+            <span className="text-sm font-medium">테이블 참조</span>
           </div>
 
           <div className="rounded-md border bg-background p-3">
@@ -671,7 +643,7 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
         </div>
       )}
 
-      {/* 카테고리 (category) */}
+      {/* 카테고리 (category) - source="code" 하위 호환 포함 */}
       {effectiveSource === "category" && (
         <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
           <div className="flex items-center gap-2">
@@ -679,6 +651,16 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
             <span className="text-sm font-medium">카테고리</span>
           </div>
 
+          {config.source === "code" && config.codeGroup && (
+            <div className="rounded-md border bg-background p-3">
+              <p className="text-xs text-muted-foreground">코드 그룹</p>
+              <p className="mt-0.5 text-sm font-medium">{config.codeGroup}</p>
+              <p className="mt-1 text-[11px] text-muted-foreground">
+                테이블 컬럼에 설정된 코드 그룹이 자동으로 적용돼요
+              </p>
+            </div>
+          )}
+
           <div className="rounded-md border bg-background p-3">
             <div className="flex gap-6">
               <div>