feat(split-panel-layout2): 복수 검색 컬럼 지원 기능 추가

- SearchColumnConfig 타입 추가 (types.ts)
- 좌측/우측 패널 모두 여러 검색 컬럼 설정 가능
- ConfigPanel에 검색 컬럼 추가/삭제 UI 구현
- 검색 시 OR 조건으로 여러 컬럼 동시 검색
- 기존 searchColumn 단일 설정과 하위 호환성 유지

frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx

@@ -317,13 +317,20 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
   const filteredLeftData = useMemo(() => {
     if (!leftSearchTerm) return leftData;
 
-    const searchColumn = config.leftPanel?.searchColumn;
-    if (!searchColumn) return leftData;
+    // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
+    const searchColumns = config.leftPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
+    const legacyColumn = config.leftPanel?.searchColumn;
+    const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
+
+    if (columnsToSearch.length === 0) return leftData;
 
     const filterRecursive = (items: any[]): any[] => {
       return items.filter((item) => {
-        const value = String(item[searchColumn] || "").toLowerCase();
-        const matches = value.includes(leftSearchTerm.toLowerCase());
+        // 여러 컬럼 중 하나라도 매칭되면 포함
+        const matches = columnsToSearch.some((col) => {
+          const value = String(item[col] || "").toLowerCase();
+          return value.includes(leftSearchTerm.toLowerCase());
+        });
 
         if (item.children?.length > 0) {
           const filteredChildren = filterRecursive(item.children);
@@ -338,19 +345,26 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
     };
 
     return filterRecursive([...leftData]);
-  }, [leftData, leftSearchTerm, config.leftPanel?.searchColumn]);
+  }, [leftData, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
 
   const filteredRightData = useMemo(() => {
     if (!rightSearchTerm) return rightData;
 
-    const searchColumn = config.rightPanel?.searchColumn;
-    if (!searchColumn) return rightData;
+    // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
+    const searchColumns = config.rightPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
+    const legacyColumn = config.rightPanel?.searchColumn;
+    const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
+
+    if (columnsToSearch.length === 0) return rightData;
 
     return rightData.filter((item) => {
-      const value = String(item[searchColumn] || "").toLowerCase();
-      return value.includes(rightSearchTerm.toLowerCase());
+      // 여러 컬럼 중 하나라도 매칭되면 포함
+      return columnsToSearch.some((col) => {
+        const value = String(item[col] || "").toLowerCase();
+        return value.includes(rightSearchTerm.toLowerCase());
+      });
     });
-  }, [rightData, rightSearchTerm, config.rightPanel?.searchColumn]);
+  }, [rightData, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
 
   // 리사이즈 핸들러
   const handleResizeStart = useCallback((e: React.MouseEvent) => {
@@ -451,15 +465,19 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
     const isExpanded = expandedItems.has(String(itemId));
     const isSelected = selectedLeftItem && selectedLeftItem[idColumn] === item[idColumn];
 
-    // 표시할 컬럼 결정
+    // displayRow 설정에 따라 컬럼 분류
     const displayColumns = config.leftPanel?.displayColumns || [];
-    const primaryColumn = displayColumns[0];
-    const secondaryColumn = displayColumns[1];
+    const nameRowColumns = displayColumns.filter((col, idx) => 
+      col.displayRow === "name" || (!col.displayRow && idx === 0)
+    );
+    const infoRowColumns = displayColumns.filter((col, idx) => 
+      col.displayRow === "info" || (!col.displayRow && idx > 0)
+    );
 
-    const primaryValue = primaryColumn
-      ? item[primaryColumn.name]
+    // 이름 행의 첫 번째 값 (주요 표시 값)
+    const primaryValue = nameRowColumns[0]
+      ? item[nameRowColumns[0].name]
       : Object.values(item).find((v) => typeof v === "string" && v.length > 0);
-    const secondaryValue = secondaryColumn ? item[secondaryColumn.name] : null;
 
     return (
       <div key={itemId}>
@@ -496,12 +514,38 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
 
           {/* 내용 */}
           <div className="flex-1 min-w-0">
-            <div className="font-medium text-base truncate">
-              {primaryValue || "이름 없음"}
+            {/* 이름 행 (Name Row) */}
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-base truncate">
+                {primaryValue || "이름 없음"}
+              </span>
+              {/* 이름 행의 추가 컬럼들 (배지 스타일) */}
+              {nameRowColumns.slice(1).map((col, idx) => {
+                const value = item[col.name];
+                if (!value) return null;
+                return (
+                  <span key={idx} className="text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">
+                    {formatValue(value, col.format)}
+                  </span>
+                );
+              })}
             </div>
-            {secondaryValue && (
-              <div className="text-sm text-muted-foreground truncate">
-                {secondaryValue}
+            {/* 정보 행 (Info Row) */}
+            {infoRowColumns.length > 0 && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground truncate">
+                {infoRowColumns.map((col, idx) => {
+                  const value = item[col.name];
+                  if (!value) return null;
+                  return (
+                    <span key={idx}>
+                      {formatValue(value, col.format)}
+                    </span>
+                  );
+                }).filter(Boolean).reduce((acc: React.ReactNode[], curr, idx) => {
+                  if (idx > 0) acc.push(<span key={`sep-${idx}`} className="text-muted-foreground/50">|</span>);
+                  acc.push(curr);
+                  return acc;
+                }, [])}
               </div>
             )}
           </div>
@@ -521,53 +565,72 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
   const renderRightCard = (item: any, index: number) => {
     const displayColumns = config.rightPanel?.displayColumns || [];
 
-    // 첫 번째 컬럼을 이름으로 사용
-    const nameColumn = displayColumns[0];
-    const name = nameColumn ? item[nameColumn.name] : "이름 없음";
-
-    // 나머지 컬럼들
-    const otherColumns = displayColumns.slice(1);
+    // displayRow 설정에 따라 컬럼 분류
+    // displayRow가 "name"이면 이름 행, "info"이면 정보 행 (기본값: 첫 번째는 name, 나머지는 info)
+    const nameRowColumns = displayColumns.filter((col, idx) => 
+      col.displayRow === "name" || (!col.displayRow && idx === 0)
+    );
+    const infoRowColumns = displayColumns.filter((col, idx) => 
+      col.displayRow === "info" || (!col.displayRow && idx > 0)
+    );
 
     return (
-      <Card key={index} className="mb-3 hover:shadow-md transition-shadow">
-        <CardContent className="p-4">
+      <Card key={index} className="mb-2 py-0 hover:shadow-md transition-shadow">
+        <CardContent className="px-4 py-2">
           <div className="flex items-start justify-between">
             <div className="flex-1">
-              {/* 이름 */}
-              <div className="flex items-center gap-2 mb-2">
-                <span className="font-semibold text-lg">{name}</span>
-                {otherColumns[0] && (
-                  <span className="text-sm bg-muted px-2 py-0.5 rounded">
-                    {item[otherColumns[0].name]}
-                  </span>
-                )}
-              </div>
+              {/* 이름 행 (Name Row) */}
+              {nameRowColumns.length > 0 && (
+                <div className="flex items-center gap-2 mb-2">
+                  {nameRowColumns.map((col, idx) => {
+                    const value = item[col.name];
+                    if (!value && idx > 0) return null;
+                    
+                    // 첫 번째 컬럼은 굵게 표시
+                    if (idx === 0) {
+                      return (
+                        <span key={idx} className="font-semibold text-lg">
+                          {formatValue(value, col.format) || "이름 없음"}
+                        </span>
+                      );
+                    }
+                    // 나머지는 배지 스타일
+                    return (
+                      <span key={idx} className="text-sm bg-muted px-2 py-0.5 rounded">
+                        {formatValue(value, col.format)}
+                      </span>
+                    );
+                  })}
+                </div>
+              )}
 
-              {/* 상세 정보 */}
-              <div className="flex flex-wrap gap-x-4 gap-y-1 text-base text-muted-foreground">
-                {otherColumns.slice(1).map((col, idx) => {
-                  const value = item[col.name];
-                  if (!value) return null;
+              {/* 정보 행 (Info Row) */}
+              {infoRowColumns.length > 0 && (
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-base text-muted-foreground">
+                  {infoRowColumns.map((col, idx) => {
+                    const value = item[col.name];
+                    if (!value) return null;
 
-                  // 아이콘 결정
-                  let icon = null;
-                  const colName = col.name.toLowerCase();
-                  if (colName.includes("tel") || colName.includes("phone")) {
-                    icon = <span className="text-sm">tel</span>;
-                  } else if (colName.includes("email")) {
-                    icon = <span className="text-sm">@</span>;
-                  } else if (colName.includes("sabun") || colName.includes("id")) {
-                    icon = <span className="text-sm">ID</span>;
-                  }
+                    // 아이콘 결정
+                    let icon = null;
+                    const colName = col.name.toLowerCase();
+                    if (colName.includes("tel") || colName.includes("phone")) {
+                      icon = <span className="text-sm">tel</span>;
+                    } else if (colName.includes("email")) {
+                      icon = <span className="text-sm">@</span>;
+                    } else if (colName.includes("sabun") || colName.includes("id")) {
+                      icon = <span className="text-sm">ID</span>;
+                    }
 
-                  return (
-                    <span key={idx} className="flex items-center gap-1">
-                      {icon}
-                      {formatValue(value, col.format)}
-                    </span>
-                  );
-                })}
-              </div>
+                    return (
+                      <span key={idx} className="flex items-center gap-1">
+                        {icon}
+                        {formatValue(value, col.format)}
+                      </span>
+                    );
+                  })}
+                </div>
+              )}
             </div>
 
             {/* 액션 버튼 */}