테이블 데이터 필터링 기능 및 textarea컴포넌트 자동 매핑 삭제

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -257,6 +257,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         size: 100,
         search: filters, // 필터 조건 전달
         enableEntityJoin: true, // 엔티티 조인 활성화
+        dataFilter: componentConfig.leftPanel?.dataFilter, // 🆕 데이터 필터 전달
       });
       
       
@@ -314,6 +315,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               leftColumn,
               rightColumn,
               leftValue,
+              componentConfig.rightPanel?.dataFilter, // 🆕 데이터 필터 전달
             );
             setRightData(joinedData || []); // 모든 관련 레코드 (배열)
           }

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx

@@ -9,12 +9,13 @@ import { Slider } from "@/components/ui/slider";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+// Accordion 제거 - 단순 섹션으로 변경
 import { Check, ChevronsUpDown, ArrowRight, Plus, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { SplitPanelLayoutConfig } from "./types";
 import { TableInfo, ColumnInfo } from "@/types/screen";
 import { tableTypeApi } from "@/lib/api/screen";
+import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
 
 interface SplitPanelLayoutConfigPanelProps {
   config: SplitPanelLayoutConfig;
@@ -325,14 +326,9 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         </Select>
       </div>
 
-      {/* 좌측 패널 설정 (Accordion) */}
-      <Accordion type="single" collapsible defaultValue="left-panel" className="w-full">
-        <AccordionItem value="left-panel" className="border rounded-lg px-4">
-          <AccordionTrigger className="text-sm font-semibold hover:no-underline">
-            좌측 패널 설정 (마스터)
-          </AccordionTrigger>
-          <AccordionContent className="overflow-visible">
-            <div className="space-y-4 pt-2">
+      {/* 좌측 패널 설정 */}
+      <div className="space-y-4 border-t pt-4 mt-4">
+        <h3 className="text-sm font-semibold">좌측 패널 설정 (마스터)</h3>
 
         <div className="space-y-2">
           <Label>패널 제목</Label>
@@ -1018,19 +1014,30 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             </div>
           </div>
         )}
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      </div>
 
-      {/* 우측 패널 설정 (Accordion) */}
-      <Accordion type="single" collapsible defaultValue="right-panel" className="w-full">
-        <AccordionItem value="right-panel" className="border rounded-lg px-4">
-          <AccordionTrigger className="text-sm font-semibold hover:no-underline">
-            우측 패널 설정 ({relationshipType === "detail" ? "상세" : "조인"})
-          </AccordionTrigger>
-          <AccordionContent className="overflow-visible">
-            <div className="space-y-4 pt-2">
+      {/* 좌측 패널 데이터 필터링 */}
+      <div className="space-y-4 border-t pt-4 mt-4">
+        <h3 className="text-sm font-semibold">좌측 패널 데이터 필터링</h3>
+        <p className="text-xs text-muted-foreground">
+          특정 컬럼 값으로 좌측 패널 데이터를 필터링합니다
+        </p>
+              <DataFilterConfigPanel
+                tableName={config.leftPanel?.tableName || screenTableName}
+                columns={leftTableColumns.map((col) => ({
+                  columnName: col.columnName,
+                  columnLabel: col.columnLabel || col.columnName,
+                  dataType: col.dataType || "text",
+                  input_type: (col as any).input_type,
+                } as any))}
+                config={config.leftPanel?.dataFilter}
+                onConfigChange={(dataFilter) => updateLeftPanel({ dataFilter })}
+              />
+      </div>
+
+      {/* 우측 패널 설정 */}
+      <div className="space-y-4 border-t pt-4 mt-4">
+        <h3 className="text-sm font-semibold">우측 패널 설정 ({relationshipType === "detail" ? "상세" : "조인"})</h3>
 
         <div className="space-y-2">
           <Label>패널 제목</Label>
@@ -1672,19 +1679,29 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             </div>
           </div>
         )}
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      </div>
 
-      {/* 레이아웃 설정 (Accordion) */}
-      <Accordion type="single" collapsible className="w-full">
-        <AccordionItem value="layout" className="border rounded-lg px-4">
-          <AccordionTrigger className="text-sm font-semibold hover:no-underline">
-            레이아웃 설정
-          </AccordionTrigger>
-          <AccordionContent className="overflow-visible">
-            <div className="space-y-4 pt-2">
+      {/* 우측 패널 데이터 필터링 */}
+      <div className="space-y-4 border-t pt-4 mt-4">
+        <h3 className="text-sm font-semibold">우측 패널 데이터 필터링</h3>
+        <p className="text-xs text-muted-foreground">
+          특정 컬럼 값으로 우측 패널 데이터를 필터링합니다
+        </p>
+              <DataFilterConfigPanel
+                tableName={config.rightPanel?.tableName}
+                columns={rightTableColumns.map((col) => ({
+                  columnName: col.columnName,
+                  columnLabel: col.columnLabel || col.columnName,
+                  dataType: col.dataType || "text",
+                  input_type: (col as any).input_type,
+                } as any))}
+                config={config.rightPanel?.dataFilter}
+                onConfigChange={(dataFilter) => updateRightPanel({ dataFilter })}
+              />
+      </div>
+
+      {/* 레이아웃 설정 */}
+      <div className="space-y-4 border-t pt-4 mt-4">
 
         <div className="space-y-2">
           <Label>좌측 패널 너비: {config.splitRatio || 30}%</Label>
@@ -1712,10 +1729,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             onCheckedChange={(checked) => updateConfig({ autoLoad: checked })}
           />
         </div>
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      </div>
     </div>
   );
 };

frontend/lib/registry/components/split-panel-layout/types.ts

@@ -2,6 +2,8 @@
  * SplitPanelLayout 컴포넌트 타입 정의
  */
 
+import { DataFilterConfig } from "@/types/screen-management";
+
 export interface SplitPanelLayoutConfig {
   // 좌측 패널 설정
   leftPanel: {
@@ -52,6 +54,9 @@ export interface SplitPanelLayoutConfig {
       hoverable?: boolean; // 호버 효과
       stickyHeader?: boolean; // 헤더 고정
     };
+
+    // 🆕 컬럼 값 기반 데이터 필터링
+    dataFilter?: DataFilterConfig;
   };
 
   // 우측 패널 설정
@@ -105,6 +110,9 @@ export interface SplitPanelLayoutConfig {
       hoverable?: boolean; // 호버 효과
       stickyHeader?: boolean; // 헤더 고정
     };
+
+    // 🆕 컬럼 값 기반 데이터 필터링
+    dataFilter?: DataFilterConfig;
   };
 
   // 레이아웃 설정