From eeae338cd4d7303323dccbbbd61f067e4b731964 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Tue, 28 Oct 2025 18:41:45 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EC=A0=95=EB=A6=AC?=
 =?UTF-8?q?=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../config-panels/ButtonConfigPanel.tsx       |   58 +-
 .../FlowVisibilityConfigPanel.tsx             |   19 +-
 .../table-list/SingleTableWithSticky.tsx      |   47 +-
 .../table-list/TableListComponent.tsx         |   28 +-
 .../table-list/TableListConfigPanel.tsx       | 1197 +++++------------
 5 files changed, 457 insertions(+), 892 deletions(-)

diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index bfa4fd14..cd7aa8d3 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -61,6 +61,24 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
   const [displayColumnSearch, setDisplayColumnSearch] = useState("");
 
+  // 🎯 플로우 위젯이 화면에 있는지 확인
+  const hasFlowWidget = useMemo(() => {
+    const found = allComponents.some((comp: any) => {
+      // ScreenDesigner에서 저장하는 componentType 속성 확인!
+      const compType = comp.componentType || comp.widgetType || "";
+
+      // "flow-widget" 체크
+      const isFlow = compType === "flow-widget" || compType?.toLowerCase().includes("flow");
+
+      if (isFlow) {
+        console.log("✅ 플로우 위젯 발견!", { id: comp.id, componentType: comp.componentType });
+      }
+      return isFlow;
+    });
+    console.log("🎯 플로우 위젯 존재 여부:", found);
+    return found;
+  }, [allComponents]);
+
   // 컴포넌트 prop 변경 시 로컬 상태 동기화 (Input만)
   useEffect(() => {
     const latestConfig = component.componentConfig || {};
@@ -298,7 +316,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   variant="outline"
                   role="combobox"
                   aria-expanded={modalScreenOpen}
-                  className="h-6 w-full px-2 py-0 justify-between" style={{ fontSize: "12px" }}
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                   disabled={screensLoading}
                 >
                   {config.action?.targetScreenId
@@ -372,7 +391,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   variant="outline"
                   role="combobox"
                   aria-expanded={modalScreenOpen}
-                  className="h-6 w-full px-2 py-0 justify-between" style={{ fontSize: "12px" }}
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                   disabled={screensLoading}
                 >
                   {config.action?.targetScreenId
@@ -526,7 +546,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   variant="outline"
                   role="combobox"
                   aria-expanded={displayColumnOpen}
-                  className="mt-2 h-8 w-full justify-between text-xs" style={{ fontSize: "12px" }}
+                  className="mt-2 h-8 w-full justify-between text-xs"
+                  style={{ fontSize: "12px" }}
                   disabled={columnsLoading || tableColumns.length === 0}
                 >
                   {columnsLoading
@@ -543,7 +564,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 <Command>
                   <CommandInput placeholder="컬럼 검색..." className="text-xs" style={{ fontSize: "12px" }} />
                   <CommandList>
-                    <CommandEmpty className="text-xs" style={{ fontSize: "12px" }}>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandEmpty className="text-xs" style={{ fontSize: "12px" }}>
+                      컬럼을 찾을 수 없습니다.
+                    </CommandEmpty>
                     <CommandGroup>
                       {tableColumns.map((column) => (
                         <CommandItem
@@ -553,7 +576,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                             onUpdateProperty("componentConfig.action.historyDisplayColumn", currentValue);
                             setDisplayColumnOpen(false);
                           }}
-                          className="text-xs" style={{ fontSize: "12px" }}
+                          className="text-xs"
+                          style={{ fontSize: "12px" }}
                         >
                           <Check
                             className={cn(
@@ -586,7 +610,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   variant="outline"
                   role="combobox"
                   aria-expanded={navScreenOpen}
-                  className="h-6 w-full px-2 py-0 justify-between" style={{ fontSize: "12px" }}
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                   disabled={screensLoading}
                 >
                   {config.action?.targetScreenId
@@ -659,7 +684,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 setLocalInputs((prev) => ({ ...prev, targetUrl: newValue }));
                 onUpdateProperty("componentConfig.action.targetUrl", newValue);
               }}
-              className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
             />
             <p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
           </div>
@@ -671,14 +697,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
       </div>
 
-      {/* 🆕 플로우 단계별 표시 제어 섹션 */}
-      <div className="mt-8 border-t border-gray-200 pt-6">
-        <FlowVisibilityConfigPanel
-          component={component}
-          allComponents={allComponents}
-          onUpdateProperty={onUpdateProperty}
-        />
-      </div>
+      {/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */}
+      {hasFlowWidget && (
+        <div className="mt-8 border-t border-gray-200 pt-6">
+          <FlowVisibilityConfigPanel
+            component={component}
+            allComponents={allComponents}
+            onUpdateProperty={onUpdateProperty}
+          />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx b/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
index d583a065..c9ae4e6a 100644
--- a/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
@@ -9,6 +9,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Input } from "@/components/ui/input";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
 import { Workflow, Info, CheckCircle, XCircle, Loader2, ArrowRight, ArrowDown } from "lucide-react";
 import { ComponentData } from "@/types/screen";
 import { FlowVisibilityConfig } from "@/types/control-management";
@@ -344,7 +345,11 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                               checked={isChecked}
                               onCheckedChange={() => toggleStep(step.id)}
                             />
-                            <Label htmlFor={`step-${step.id}`} className="flex flex-1 items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
+                            <Label
+                              htmlFor={`step-${step.id}`}
+                              className="flex flex-1 items-center gap-2 text-xs"
+                              style={{ fontSize: "12px" }}
+                            >
                               <Badge variant="outline" className="text-xs">
                                 Step {step.stepOrder}
                               </Badge>
@@ -403,7 +408,8 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                         value={groupId}
                         onChange={(e) => setGroupId(e.target.value)}
                         placeholder="group-1"
-                        className="h-6 text-xs sm:h-9 sm:text-xs" style={{ fontSize: "12px" }}
+                        className="h-6 text-xs sm:h-9 sm:text-xs"
+                        style={{ fontSize: "12px" }}
                       />
                       <p className="text-muted-foreground text-[10px]">
                         같은 그룹 ID를 가진 버튼들이 하나의 그룹으로 묶입니다
@@ -453,7 +459,8 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                             setGroupGap(Number(e.target.value));
                             setTimeout(() => applyConfig(), 0);
                           }}
-                          className="h-6 text-xs sm:h-9 sm:text-xs" style={{ fontSize: "12px" }}
+                          className="h-6 text-xs sm:h-9 sm:text-xs"
+                          style={{ fontSize: "12px" }}
                         />
                         <Badge variant="outline" className="text-xs">
                           {groupGap}px
@@ -473,7 +480,11 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                           setTimeout(() => applyConfig(), 0);
                         }}
                       >
-                        <SelectTrigger id="group-align" className="h-6 text-xs sm:h-9 sm:text-xs" style={{ fontSize: "12px" }}>
+                        <SelectTrigger
+                          id="group-align"
+                          className="h-6 text-xs sm:h-9 sm:text-xs"
+                          style={{ fontSize: "12px" }}
+                        >
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
diff --git a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
index a0d78ad8..5f1e3f3c 100644
--- a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
@@ -20,7 +20,7 @@ interface SingleTableWithStickyProps {
   handleSelectAll: (checked: boolean) => void;
   handleRowClick: (row: any) => void;
   renderCheckboxCell: (row: any, index: number) => React.ReactNode;
-  formatCellValue: (value: any, format?: string, columnName?: string) => string;
+  formatCellValue: (value: any, format?: string, columnName?: string, rowData?: Record<string, any>) => string;
   getColumnWidth: (column: ColumnConfig) => number;
   containerWidth?: string; // 컨테이너 너비 설정
 }
@@ -63,7 +63,13 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
           boxSizing: "border-box",
         }}
       >
-        <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40" : "bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40"}>
+        <TableHeader
+          className={
+            tableConfig.stickyHeader
+              ? "sticky top-0 z-20 border-b border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm"
+              : "border-b border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm"
+          }
+        >
           <TableRow className="border-b border-gray-200/40">
             {visibleColumns.map((column, colIndex) => {
               // 왼쪽 고정 컬럼들의 누적 너비 계산
@@ -86,12 +92,14 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                   className={cn(
                     column.columnName === "__checkbox__"
                       ? "h-12 border-0 px-6 py-4 text-center align-middle"
-                      : "h-12 cursor-pointer border-0 px-6 py-4 text-left align-middle font-semibold whitespace-nowrap text-gray-700 select-none transition-all duration-200 hover:text-gray-900",
+                      : "h-12 cursor-pointer border-0 px-6 py-4 text-left align-middle font-semibold whitespace-nowrap text-gray-700 transition-all duration-200 select-none hover:text-gray-900",
                     `text-${column.align}`,
                     column.sortable && "hover:bg-orange-200/70",
                     // 고정 컬럼 스타일
-                    column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
-                    column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
+                    column.fixed === "left" &&
+                      "sticky z-10 border-r border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
+                    column.fixed === "right" &&
+                      "sticky z-10 border-l border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
                     // 숨김 컬럼 스타일 (디자인 모드에서만)
                     isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
                   )}
@@ -112,7 +120,12 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                   <div className="flex items-center gap-2">
                     {column.columnName === "__checkbox__" ? (
                       checkboxConfig.selectAll && (
-                        <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" style={{ zIndex: 1 }} />
+                        <Checkbox
+                          checked={isAllSelected}
+                          onCheckedChange={handleSelectAll}
+                          aria-label="전체 선택"
+                          style={{ zIndex: 1 }}
+                        />
                       )
                     ) : (
                       <>
@@ -144,11 +157,18 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                 <div className="flex flex-col items-center justify-center space-y-3">
                   <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-gray-100 to-gray-200">
                     <svg className="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                      />
                     </svg>
                   </div>
                   <span className="text-sm font-medium text-gray-500">데이터가 없습니다</span>
-                  <span className="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">조건을 변경하여 다시 검색해보세요</span>
+                  <span className="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-400">
+                    조건을 변경하여 다시 검색해보세요
+                  </span>
                 </div>
               </TableCell>
             </TableRow>
@@ -158,7 +178,8 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                 key={`row-${index}`}
                 className={cn(
                   "h-12 cursor-pointer border-b border-gray-100/40 leading-none transition-all duration-200",
-                  tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
+                  tableConfig.tableStyle?.hoverEffect &&
+                    "hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
                   tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/30",
                 )}
                 style={{ minHeight: "48px", height: "48px", lineHeight: "1" }}
@@ -186,8 +207,10 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                         "h-12 px-6 py-4 align-middle text-sm whitespace-nowrap text-gray-600 transition-all duration-200",
                         `text-${column.align}`,
                         // 고정 컬럼 스타일
-                        column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-white/90 backdrop-blur-sm",
-                        column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-white/90 backdrop-blur-sm",
+                        column.fixed === "left" &&
+                          "sticky z-10 border-r border-gray-200/40 bg-white/90 backdrop-blur-sm",
+                        column.fixed === "right" &&
+                          "sticky z-10 border-l border-gray-200/40 bg-white/90 backdrop-blur-sm",
                       )}
                       style={{
                         minHeight: "48px",
@@ -207,7 +230,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     >
                       {column.columnName === "__checkbox__"
                         ? renderCheckboxCell(row, index)
-                        : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
+                        : formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0"}
                     </TableCell>
                   );
                 })}
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index a4557c8e..a60334e3 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -620,9 +620,29 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   };
 
   const formatCellValue = useCallback(
-    (value: any, column: ColumnConfig) => {
+    (value: any, column: ColumnConfig, rowData?: Record<string, any>) => {
       if (value === null || value === undefined) return "-";
 
+      // 🎯 엔티티 컬럼 표시 설정이 있는 경우
+      if (column.entityDisplayConfig && rowData) {
+        // displayColumns 또는 selectedColumns 둘 다 체크
+        const displayColumns = column.entityDisplayConfig.displayColumns || column.entityDisplayConfig.selectedColumns;
+        const separator = column.entityDisplayConfig.separator;
+
+        if (displayColumns && displayColumns.length > 0) {
+          // 선택된 컬럼들의 값을 구분자로 조합
+          const values = displayColumns
+            .map((colName) => {
+              const cellValue = rowData[colName];
+              if (cellValue === null || cellValue === undefined) return "";
+              return String(cellValue);
+            })
+            .filter((v) => v !== ""); // 빈 값 제외
+
+          return values.join(separator || " - ");
+        }
+      }
+
       const meta = columnMeta[column.columnName];
       if (meta?.webType && meta?.codeCategory) {
         const convertedValue = optimizedConvertCode(value, meta.codeCategory);
@@ -908,9 +928,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             columnLabels={columnLabels}
             renderCheckboxHeader={renderCheckboxHeader}
             renderCheckboxCell={renderCheckboxCell}
-            formatCellValue={(value: any, format?: string, columnName?: string) => {
+            formatCellValue={(value: any, format?: string, columnName?: string, rowData?: Record<string, any>) => {
               const column = visibleColumns.find((c) => c.columnName === columnName);
-              return column ? formatCellValue(value, column) : String(value);
+              return column ? formatCellValue(value, column, rowData) : String(value);
             }}
             getColumnWidth={getColumnWidth}
             containerWidth={calculatedWidth}
@@ -1091,7 +1111,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           >
                             {column.columnName === "__checkbox__"
                               ? renderCheckboxCell(row, index)
-                              : formatCellValue(cellValue, column)}
+                              : formatCellValue(cellValue, column, row)}
                           </td>
                         );
                       })}
diff --git a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
index 325bfa59..6b977155 100644
--- a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
@@ -4,15 +4,15 @@ import React, { useState, useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { TableListConfig, ColumnConfig } from "./types";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { tableTypeApi } from "@/lib/api/screen";
-import { Plus, Trash2, ArrowUp, ArrowDown, Settings, Columns, Filter } from "lucide-react";
+import { Plus, Trash2, ArrowUp, ArrowDown, ChevronsUpDown, Check } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { cn } from "@/lib/utils";
 
 export interface TableListConfigPanelProps {
   config: TableListConfig;
@@ -234,6 +234,23 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
     fetchEntityJoinColumns();
   }, [config.selectedTable, screenTableName]);
 
+  // 🎯 엔티티 컬럼 자동 로드
+  useEffect(() => {
+    const entityColumns = config.columns?.filter((col) => col.isEntityJoin && col.entityDisplayConfig);
+
+    if (!entityColumns || entityColumns.length === 0) return;
+
+    // 각 엔티티 컬럼에 대해 자동으로 loadEntityDisplayConfig 호출
+    entityColumns.forEach((column) => {
+      // 이미 로드된 경우 스킵
+      if (entityDisplayConfigs[column.columnName]) {
+        return;
+      }
+
+      loadEntityDisplayConfig(column);
+    });
+  }, [config.columns]);
+
   const handleChange = (key: keyof TableListConfig, value: any) => {
     onChange({ [key]: value });
   };
@@ -444,31 +461,16 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
   // 🎯 엔티티 컬럼의 표시 컬럼 정보 로드
   const loadEntityDisplayConfig = async (column: ColumnConfig) => {
-    console.log("🔍 loadEntityDisplayConfig 시작:", {
-      columnName: column.columnName,
-      isEntityJoin: column.isEntityJoin,
-      entityJoinInfo: column.entityJoinInfo,
-      entityDisplayConfig: column.entityDisplayConfig,
-      configSelectedTable: config.selectedTable,
-    });
-
     if (!column.isEntityJoin || !column.entityJoinInfo) {
-      console.log("⚠️ 엔티티 컬럼 조건 불만족:", {
-        isEntityJoin: column.isEntityJoin,
-        entityJoinInfo: column.entityJoinInfo,
-      });
       return;
     }
 
     // entityDisplayConfig가 없으면 초기화
     if (!column.entityDisplayConfig) {
-      console.log("🔧 entityDisplayConfig 초기화:", column.columnName);
-
       // sourceTable을 결정: entityJoinInfo -> config.selectedTable -> screenTableName 순서
       const initialSourceTable = column.entityJoinInfo?.sourceTable || config.selectedTable || screenTableName;
 
       if (!initialSourceTable) {
-        console.warn("⚠️ sourceTable을 결정할 수 없어서 초기화 실패:", column.columnName);
         return;
       }
 
@@ -492,16 +494,12 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
         // 업데이트된 컬럼으로 다시 시도
         const updatedColumn = updatedColumns.find((col) => col.columnName === column.columnName);
         if (updatedColumn) {
-          console.log("🔄 업데이트된 컬럼으로 재시도:", updatedColumn.entityDisplayConfig);
           return loadEntityDisplayConfig(updatedColumn);
         }
       }
       return;
     }
 
-    console.log("🔍 entityDisplayConfig 전체 구조:", column.entityDisplayConfig);
-    console.log("🔍 entityDisplayConfig 키들:", Object.keys(column.entityDisplayConfig));
-
     // sourceTable 결정 우선순위:
     // 1. entityDisplayConfig.sourceTable
     // 2. entityJoinInfo.sourceTable
@@ -517,28 +515,17 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
     // sourceTable이 여전히 비어있으면 에러
     if (!sourceTable) {
-      console.error("❌ sourceTable이 비어있어서 처리 불가:", {
-        columnName: column.columnName,
-        entityDisplayConfig: column.entityDisplayConfig,
-        entityJoinInfo: column.entityJoinInfo,
-        configSelectedTable: config.selectedTable,
-        screenTableName,
-      });
       return;
     }
 
-    console.log("✅ sourceTable 결정됨:", sourceTable);
-
     if (!joinTable && sourceTable) {
       // joinTable이 없으면 tableTypeApi로 조회해서 설정
       try {
-        console.log("🔍 joinTable이 없어서 tableTypeApi로 조회:", sourceTable);
         const columnList = await tableTypeApi.getColumns(sourceTable);
         const columnInfo = columnList.find((col: any) => (col.column_name || col.columnName) === column.columnName);
 
         if (columnInfo?.reference_table || columnInfo?.referenceTable) {
           joinTable = columnInfo.reference_table || columnInfo.referenceTable;
-          console.log("✅ tableTypeApi에서 조인 테이블 정보 찾음:", joinTable);
 
           // entityDisplayConfig 업데이트
           const updatedConfig = {
@@ -608,11 +595,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
           if (updatedColumns) {
             handleChange("columns", updatedColumns);
           }
-        } else {
-          console.log("⚠️ tableTypeApi에서도 referenceTable을 찾을 수 없음:", {
-            columnName: column.columnName,
-            columnInfo: columnInfo,
-          });
         }
       } catch (error) {
         console.error("tableTypeApi 컬럼 정보 조회 실패:", error);
@@ -621,7 +603,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
     // sourceTable과 joinTable이 모두 있어야 로드
     if (!sourceTable || !actualJoinTable) {
-      console.log("⚠️ sourceTable 또는 joinTable이 비어있어서 로드 스킵:", { sourceTable, joinTable: actualJoinTable });
       return;
     }
 
@@ -684,11 +665,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
     if (updatedColumns) {
       handleChange("columns", updatedColumns);
-      console.log("🎯 엔티티 표시 컬럼 설정 업데이트:", {
-        columnName,
-        selectedColumns: newSelectedColumns,
-        updatedColumn: updatedColumns.find((col) => col.columnName === columnName),
-      });
     }
   };
 
@@ -723,11 +699,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
     if (updatedColumns) {
       handleChange("columns", updatedColumns);
-      console.log("🎯 엔티티 표시 구분자 설정 업데이트:", {
-        columnName,
-        separator,
-        updatedColumn: updatedColumns.find((col) => col.columnName === columnName),
-      });
     }
   };
 
@@ -751,854 +722,366 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
     handleChange("columns", columns);
   };
 
-  // 필터 추가
-  const addFilter = (columnName: string) => {
-    const existingFilter = config.filter?.filters?.find((f) => f.columnName === columnName);
-    if (existingFilter) return;
-
-    const column = availableColumns.find((col) => col.columnName === columnName);
-    if (!column) return;
-
-    // tableColumns에서 해당 컬럼의 메타정보 찾기
-    const tableColumn = tableColumns?.find((tc) => tc.columnName === columnName);
-
-    // 컬럼의 데이터 타입과 웹타입에 따라 위젯 타입 결정
-    const inferWidgetType = (dataType: string, webType?: string): string => {
-      // 웹타입이 있으면 우선 사용
-      if (webType) {
-        return webType;
-      }
-
-      // 데이터 타입으로 추론
-      const type = dataType.toLowerCase();
-      if (type.includes("int") || type.includes("numeric") || type.includes("decimal")) return "number";
-      if (type.includes("date") || type.includes("timestamp")) return "date";
-      if (type.includes("bool")) return "boolean";
-      return "text";
-    };
-
-    const widgetType = inferWidgetType(column.dataType, tableColumn?.webType || tableColumn?.web_type);
-
-    const newFilter = {
-      columnName,
-      widgetType,
-      label: column.label || column.columnName,
-      gridColumns: 3,
-      numberFilterMode: "range" as const,
-      // 코드 타입인 경우 코드 카테고리 추가
-      ...(widgetType === "code" && {
-        codeCategory: tableColumn?.codeCategory || tableColumn?.code_category,
-      }),
-      // 엔티티 타입인 경우 참조 정보 추가
-      ...(widgetType === "entity" && {
-        referenceTable: tableColumn?.referenceTable || tableColumn?.reference_table,
-        referenceColumn: tableColumn?.referenceColumn || tableColumn?.reference_column,
-        displayColumn: tableColumn?.displayColumn || tableColumn?.display_column,
-      }),
-    };
-
-    console.log("🔍 필터 추가:", newFilter);
-
-    const currentFilters = config.filter?.filters || [];
-    handleNestedChange("filter", "filters", [...currentFilters, newFilter]);
-  };
-
-  // 필터 제거
-  const removeFilter = (index: number) => {
-    const currentFilters = config.filter?.filters || [];
-    const updatedFilters = currentFilters.filter((_, i) => i !== index);
-    handleNestedChange("filter", "filters", updatedFilters);
-  };
-
-  // 필터 업데이트
-  const updateFilter = (index: number, key: string, value: any) => {
-    const currentFilters = config.filter?.filters || [];
-    const updatedFilters = currentFilters.map((filter, i) => (i === index ? { ...filter, [key]: value } : filter));
-    handleNestedChange("filter", "filters", updatedFilters);
-  };
-
   return (
     <div className="space-y-4">
       <div className="text-sm font-medium">테이블 리스트 설정</div>
 
-      <Tabs defaultValue="basic" className="w-full">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="basic" className="flex items-center gap-1">
-            <Settings className="h-3 w-3" />
-            기본
-          </TabsTrigger>
-          <TabsTrigger value="columns" className="flex items-center gap-1">
-            <Columns className="h-3 w-3" />
-            컬럼
-          </TabsTrigger>
-          <TabsTrigger value="join-columns" className="flex items-center gap-1">
-            <Plus className="h-3 w-3" />
-            조인
-          </TabsTrigger>
-          <TabsTrigger value="filter" className="flex items-center gap-1">
-            <Filter className="h-3 w-3" />
-            필터
-          </TabsTrigger>
-        </TabsList>
+      <div className="space-y-6">
+        {/* 가로 스크롤 및 컬럼 고정 */}
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">가로 스크롤 및 컬럼 고정</h3>
+          </div>
+          <hr className="border-border" />
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="horizontalScrollEnabled"
+              checked={config.horizontalScroll?.enabled}
+              onCheckedChange={(checked) => handleNestedChange("horizontalScroll", "enabled", checked)}
+            />
+            <Label htmlFor="horizontalScrollEnabled">가로 스크롤 사용</Label>
+          </div>
 
-        {/* 기본 설정 탭 */}
-        <TabsContent value="basic" className="space-y-4">
-          <div className="space-y-6">
-            {/* 가로 스크롤 및 컬럼 고정 */}
+          {config.horizontalScroll?.enabled && (
             <div className="space-y-3">
-              <div>
-                <h3 className="text-sm font-semibold">가로 스크롤 및 컬럼 고정</h3>
-                <p className="text-muted-foreground text-xs">
-                  컬럼이 많을 때 가로 스크롤과 컬럼 고정 기능을 설정하세요
-                </p>
-              </div>
-              <hr className="border-border" />
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="horizontalScrollEnabled"
-                  checked={config.horizontalScroll?.enabled}
-                  onCheckedChange={(checked) => handleNestedChange("horizontalScroll", "enabled", checked)}
+              <div className="space-y-1">
+                <Label htmlFor="maxVisibleColumns" className="text-sm">
+                  최대 표시 컬럼 수
+                </Label>
+                <Input
+                  id="maxVisibleColumns"
+                  type="number"
+                  value={config.horizontalScroll?.maxVisibleColumns || 8}
+                  onChange={(e) =>
+                    handleNestedChange("horizontalScroll", "maxVisibleColumns", parseInt(e.target.value) || 8)
+                  }
+                  min={3}
+                  max={20}
+                  placeholder="8"
+                  className="h-8"
                 />
-                <Label htmlFor="horizontalScrollEnabled">가로 스크롤 사용</Label>
+                <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
               </div>
-
-              {config.horizontalScroll?.enabled && (
-                <div className="space-y-3">
-                  <div className="space-y-1">
-                    <Label htmlFor="maxVisibleColumns" className="text-sm">
-                      최대 표시 컬럼 수
-                    </Label>
-                    <Input
-                      id="maxVisibleColumns"
-                      type="number"
-                      value={config.horizontalScroll?.maxVisibleColumns || 8}
-                      onChange={(e) =>
-                        handleNestedChange("horizontalScroll", "maxVisibleColumns", parseInt(e.target.value) || 8)
-                      }
-                      min={3}
-                      max={20}
-                      placeholder="8"
-                      className="h-8"
-                    />
-                    <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-2">
-                    <div className="space-y-1">
-                      <Label htmlFor="minColumnWidth" className="text-sm">
-                        최소 너비 (px)
-                      </Label>
-                      <Input
-                        id="minColumnWidth"
-                        type="number"
-                        value={config.horizontalScroll?.minColumnWidth || 100}
-                        onChange={(e) =>
-                          handleNestedChange("horizontalScroll", "minColumnWidth", parseInt(e.target.value) || 100)
-                        }
-                        min={50}
-                        max={500}
-                        placeholder="100"
-                        className="h-8"
-                      />
-                    </div>
-
-                    <div className="space-y-1">
-                      <Label htmlFor="maxColumnWidth" className="text-sm">
-                        최대 너비 (px)
-                      </Label>
-                      <Input
-                        id="maxColumnWidth"
-                        type="number"
-                        value={config.horizontalScroll?.maxColumnWidth || 300}
-                        onChange={(e) =>
-                          handleNestedChange("horizontalScroll", "maxColumnWidth", parseInt(e.target.value) || 300)
-                        }
-                        min={100}
-                        max={800}
-                        placeholder="300"
-                        className="h-8"
-                      />
-                    </div>
-                  </div>
-                </div>
-              )}
             </div>
-          </div>
-        </TabsContent>
+          )}
+        </div>
 
-        {/* 컬럼 설정 탭 */}
-        <TabsContent value="columns" className="space-y-4">
-          <div className="space-y-6">
-            {/* 🎯 엔티티 컬럼 표시 설정 섹션 */}
-            {config.columns?.some((col) => col.isEntityJoin) && (
-              <div className="space-y-3">
-                <div>
-                  <h3 className="text-sm font-semibold">🎯 엔티티 컬럼 표시 설정</h3>
-                  <p className="text-muted-foreground text-xs">
-                    엔티티 타입 컬럼의 표시할 컬럼들을 조합하여 설정하세요
-                  </p>
-                </div>
-                <hr className="border-border" />
-                {config.columns
-                  ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig)
-                  .map((column) => (
-                    <div key={column.columnName} className="space-y-3 rounded-lg border bg-orange-50 p-3">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2">
-                          <Badge variant="outline" className="border-orange-300 text-orange-600">
-                            {column.columnName}
-                          </Badge>
-                          <span className="text-sm font-medium">{column.displayName}</span>
-                        </div>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => {
-                            // sourceTable 정보가 있는지 확인
-                            const hasSourceTable =
-                              column.entityDisplayConfig?.sourceTable ||
-                              column.entityJoinInfo?.sourceTable ||
-                              config.selectedTable ||
-                              screenTableName;
-
-                            if (!hasSourceTable) {
-                              console.error("❌ sourceTable 정보를 찾을 수 없어서 컬럼 로드 불가:", {
-                                columnName: column.columnName,
-                                entityDisplayConfig: column.entityDisplayConfig,
-                                entityJoinInfo: column.entityJoinInfo,
-                                configSelectedTable: config.selectedTable,
-                                screenTableName,
-                              });
-                              alert("컬럼 정보를 로드할 수 없습니다. 테이블 정보가 없습니다.");
-                              return;
-                            }
-
-                            loadEntityDisplayConfig(column);
-                          }}
-                          disabled={
-                            !column.entityDisplayConfig?.sourceTable &&
-                            !column.entityJoinInfo?.sourceTable &&
-                            !config.selectedTable &&
-                            !screenTableName
-                          }
-                          className="h-6 text-xs"
-                        >
-                          <Plus className="mr-1 h-3 w-3" />
-                          컬럼 로드
-                        </Button>
-                      </div>
-
-                      {entityDisplayConfigs[column.columnName] && (
-                        <div className="space-y-3">
-                          {/* 구분자 설정 */}
-                          <div className="space-y-1">
-                            <Label className="text-xs">구분자</Label>
-                            <Input
-                              value={entityDisplayConfigs[column.columnName].separator}
-                              onChange={(e) => updateEntityDisplaySeparator(column.columnName, e.target.value)}
-                              className="h-7 text-xs"
-                              placeholder=" - "
-                            />
-                          </div>
-
-                          {/* 기본 테이블 컬럼 */}
-                          <div className="space-y-1">
-                            <Label className="text-xs text-blue-600">
-                              기본 테이블: {column.entityDisplayConfig?.sourceTable}
-                            </Label>
-                            <div className="grid max-h-20 grid-cols-2 gap-1 overflow-y-auto">
-                              {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
-                                <div key={col.columnName} className="flex items-center space-x-1">
-                                  <Checkbox
-                                    id={`source-${column.columnName}-${col.columnName}`}
-                                    checked={entityDisplayConfigs[column.columnName].selectedColumns.includes(
-                                      col.columnName,
-                                    )}
-                                    onCheckedChange={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
-                                    className="h-3 w-3"
-                                  />
-                                  <Label
-                                    htmlFor={`source-${column.columnName}-${col.columnName}`}
-                                    className="flex-1 cursor-pointer text-xs"
-                                  >
-                                    {col.displayName}
-                                  </Label>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-
-                          {/* 조인 테이블 컬럼 */}
-                          <div className="space-y-1">
-                            <Label className="text-xs text-green-600">
-                              조인 테이블: {column.entityDisplayConfig?.joinTable}
-                            </Label>
-                            <div className="grid max-h-20 grid-cols-2 gap-1 overflow-y-auto">
-                              {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
-                                <div key={col.columnName} className="flex items-center space-x-1">
-                                  <Checkbox
-                                    id={`join-${column.columnName}-${col.columnName}`}
-                                    checked={entityDisplayConfigs[column.columnName].selectedColumns.includes(
-                                      col.columnName,
-                                    )}
-                                    onCheckedChange={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
-                                    className="h-3 w-3"
-                                  />
-                                  <Label
-                                    htmlFor={`join-${column.columnName}-${col.columnName}`}
-                                    className="flex-1 cursor-pointer text-xs"
-                                  >
-                                    {col.displayName}
-                                  </Label>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-
-                          {/* 선택된 컬럼 미리보기 */}
-                          {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
-                            <div className="space-y-1">
-                              <Label className="text-xs">미리보기</Label>
-                              <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
-                                {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
-                                  <React.Fragment key={colName}>
-                                    <Badge variant="secondary" className="text-xs">
-                                      {colName}
-                                    </Badge>
-                                    {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
-                                      <span className="text-gray-400">
-                                        {entityDisplayConfigs[column.columnName].separator}
-                                      </span>
-                                    )}
-                                  </React.Fragment>
-                                ))}
-                              </div>
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-              </div>
-            )}
-
-            {!screenTableName ? (
-              <div className="space-y-3">
-                <div className="text-center text-gray-500">
-                  <p>테이블이 연결되지 않았습니다.</p>
-                  <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</p>
-                </div>
-              </div>
-            ) : availableColumns.length === 0 ? (
-              <div className="space-y-3">
-                <div className="text-center text-gray-500">
-                  <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
-                  <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
-                  <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
-                </div>
-              </div>
-            ) : (
-              <>
-                <div className="space-y-3">
-                  <div>
-                    <h3 className="text-sm font-semibold">컬럼 추가 - {screenTableName}</h3>
-                    <p className="text-muted-foreground text-xs">
-                      {availableColumns.length > 0
-                        ? `${availableColumns.length}개의 사용 가능한 컬럼에서 선택하세요`
-                        : "컬럼 정보를 불러오는 중..."}
-                    </p>
+        {/* 컬럼 설정 */}
+        {/* 🎯 엔티티 컬럼 표시 설정 섹션 */}
+        {config.columns?.some((col) => col.isEntityJoin) && (
+          <div className="space-y-3">
+            {config.columns
+              ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig)
+              .map((column) => (
+                <div key={column.columnName} className="space-y-2">
+                  <div className="mb-2">
+                    <span className="truncate text-xs font-medium" style={{ fontSize: "12px" }}>
+                      {column.displayName || column.columnName}
+                    </span>
                   </div>
-                  <hr className="border-border" />
-                  {availableColumns.length > 0 ? (
-                    <div className="flex flex-wrap gap-2">
-                      {availableColumns
-                        .filter((col) => !config.columns?.find((c) => c.columnName === col.columnName))
-                        .map((column) => (
-                          <Button
-                            key={column.columnName}
-                            variant="outline"
-                            size="sm"
-                            onClick={() => addColumn(column.columnName)}
-                            className="flex items-center gap-1"
-                          >
-                            <Plus className="h-3 w-3" />
-                            {column.label || column.columnName}
-                            <Badge variant="secondary" className="text-xs">
-                              {column.dataType}
-                            </Badge>
-                          </Button>
-                        ))}
-                    </div>
-                  ) : (
-                    <div className="py-4 text-center text-gray-500">
-                      <p>컬럼 정보를 불러오는 중입니다...</p>
-                    </div>
-                  )}
-                </div>
-              </>
-            )}
 
-            {screenTableName && (
-              <div className="space-y-3">
-                <div>
-                  <h3 className="text-sm font-semibold">컬럼 설정</h3>
-                  <p className="text-muted-foreground text-xs">선택된 컬럼들의 표시 옵션을 설정하세요</p>
-                </div>
-                <hr className="border-border" />
-                <div className="space-y-3">
-                  {config.columns?.map((column, index) => (
-                    <div key={column.columnName} className="space-y-3 rounded-lg border p-3">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center space-x-2">
-                          <Checkbox
-                            checked={column.visible}
-                            onCheckedChange={(checked) =>
-                              updateColumn(column.columnName, { visible: checked as boolean })
-                            }
-                          />
-                          <span className="font-medium">
-                            {availableColumns.find((col) => col.columnName === column.columnName)?.label ||
-                              column.displayName ||
-                              column.columnName}
-                          </span>
-                        </div>
-
-                        <div className="flex items-center space-x-1">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => moveColumn(column.columnName, "up")}
-                            disabled={index === 0}
-                          >
-                            <ArrowUp className="h-3 w-3" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => moveColumn(column.columnName, "down")}
-                            disabled={index === (config.columns?.length || 0) - 1}
-                          >
-                            <ArrowDown className="h-3 w-3" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => removeColumn(column.columnName)}
-                            className="text-red-500 hover:text-red-600"
-                          >
-                            <Trash2 className="h-3 w-3" />
-                          </Button>
-                        </div>
+                  {entityDisplayConfigs[column.columnName] ? (
+                    <div className="space-y-2">
+                      {/* 구분자 설정 */}
+                      <div className="space-y-1">
+                        <Label className="text-xs">구분자</Label>
+                        <Input
+                          value={entityDisplayConfigs[column.columnName].separator}
+                          onChange={(e) => updateEntityDisplaySeparator(column.columnName, e.target.value)}
+                          className="h-6 w-full text-xs"
+                          style={{ fontSize: "12px" }}
+                          placeholder=" - "
+                        />
                       </div>
 
-                      {column.visible && (
-                        <div className="grid grid-cols-2 gap-3">
-                          <div className="space-y-1">
-                            <Label className="text-xs">표시명</Label>
-                            <Input
-                              value={
-                                availableColumns.find((col) => col.columnName === column.columnName)?.label ||
-                                column.displayName ||
-                                column.columnName
-                              }
-                              onChange={(e) => updateColumn(column.columnName, { displayName: e.target.value })}
-                              className="h-8"
-                            />
-                          </div>
-
-                          {/* 엔티티 타입 컬럼 표시 */}
-                          {column.isEntityJoin && (
-                            <div className="col-span-2">
-                              <div className="flex items-center gap-2 rounded bg-orange-50 p-2">
-                                <Badge variant="outline" className="border-orange-300 text-orange-600">
-                                  엔티티 타입
-                                </Badge>
-                                <span className="text-xs text-orange-600">
-                                  표시 컬럼 설정은 상단의 "🎯 엔티티 컬럼 표시 설정" 섹션에서 하세요
-                                </span>
-                              </div>
-                            </div>
-                          )}
-
-                          <div className="space-y-1">
-                            <Label className="text-xs">정렬</Label>
-                            <Select
-                              value={column.align}
-                              onValueChange={(value: "left" | "center" | "right") =>
-                                updateColumn(column.columnName, { align: value })
-                              }
+                      {/* 표시 컬럼 선택 (다중 선택) */}
+                      <div className="space-y-1">
+                        <Label className="text-xs">표시할 컬럼 선택</Label>
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="outline"
+                              className="h-6 w-full justify-between text-xs"
+                              style={{ fontSize: "12px" }}
                             >
-                              <SelectTrigger className="h-8">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="left">왼쪽</SelectItem>
-                                <SelectItem value="center">가운데</SelectItem>
-                                <SelectItem value="right">오른쪽</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          <div className="space-y-1">
-                            <Label className="text-xs">형식</Label>
-                            <Select
-                              value={column.format}
-                              onValueChange={(value: "text" | "number" | "date" | "currency" | "boolean") =>
-                                updateColumn(column.columnName, { format: value })
-                              }
-                            >
-                              <SelectTrigger className="h-8">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="text">텍스트</SelectItem>
-                                <SelectItem value="number">숫자</SelectItem>
-                                <SelectItem value="date">날짜</SelectItem>
-                                <SelectItem value="currency">통화</SelectItem>
-                                <SelectItem value="boolean">불린</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          <div className="space-y-1">
-                            <Label className="text-xs">너비 (px)</Label>
-                            <Input
-                              type="number"
-                              value={column.width || ""}
-                              onChange={(e) =>
-                                updateColumn(column.columnName, {
-                                  width: e.target.value ? parseInt(e.target.value) : undefined,
-                                })
-                              }
-                              placeholder="자동"
-                              className="h-8"
-                            />
-                          </div>
-
-                          <div className="space-y-1">
-                            <Label className="text-xs">컬럼 고정</Label>
-                            <Select
-                              value={column.fixed === false ? "none" : column.fixed || "none"}
-                              onValueChange={(value: string) => {
-                                const fixedValue = value === "none" ? false : (value as "left" | "right");
-                                updateColumn(column.columnName, {
-                                  fixed: fixedValue,
-                                  fixedOrder: fixedValue ? column.fixedOrder || 0 : undefined,
-                                });
-                              }}
-                            >
-                              <SelectTrigger className="h-8">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="none">고정 안함</SelectItem>
-                                <SelectItem value="left">왼쪽 고정</SelectItem>
-                                <SelectItem value="right">오른쪽 고정</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          {(column.fixed === "left" || column.fixed === "right") && (
-                            <div className="space-y-1">
-                              <Label className="text-xs">고정 순서</Label>
-                              <Input
-                                type="number"
-                                value={column.fixedOrder || 0}
-                                onChange={(e) =>
-                                  updateColumn(column.columnName, {
-                                    fixedOrder: parseInt(e.target.value) || 0,
-                                  })
-                                }
-                                placeholder="0"
-                                className="h-8"
-                                min="0"
-                              />
-                            </div>
-                          )}
-
-                          <div className="flex items-center space-x-4">
-                            <div className="flex items-center space-x-1">
-                              <Checkbox
-                                checked={column.sortable}
-                                onCheckedChange={(checked) =>
-                                  updateColumn(column.columnName, { sortable: checked as boolean })
-                                }
-                              />
-                              <Label className="text-xs">정렬 가능</Label>
-                            </div>
-                            <div className="flex items-center space-x-1">
-                              <Checkbox
-                                checked={column.searchable}
-                                onCheckedChange={(checked) =>
-                                  updateColumn(column.columnName, { searchable: checked as boolean })
-                                }
-                              />
-                              <Label className="text-xs">검색 가능</Label>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </TabsContent>
-
-        {/* Entity 조인 컬럼 추가 탭 */}
-        <TabsContent value="join-columns" className="space-y-4">
-          <div className="space-y-6">
-            <div className="space-y-3">
-              <div>
-                <h3 className="text-sm font-semibold">Entity 조인 컬럼 추가</h3>
-                <p className="text-muted-foreground text-xs">
-                  Entity 조인된 테이블의 다른 컬럼들을 추가로 표시할 수 있습니다.
-                </p>
-              </div>
-              <hr className="border-border" />
-              {loadingEntityJoins ? (
-                <div className="text-muted-foreground py-4 text-center">조인 정보를 가져오는 중...</div>
-              ) : entityJoinColumns.joinTables.length === 0 ? (
-                <div className="text-muted-foreground py-8 text-center">
-                  <div className="text-sm">Entity 조인이 설정된 컬럼이 없습니다.</div>
-                  <div className="mt-1 text-xs">
-                    먼저 컬럼의 웹타입을 'entity'로 설정하고 참조 테이블을 지정해주세요.
-                  </div>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  {/* 조인 테이블별 그룹 */}
-                  {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
-                    <div key={tableIndex} className="space-y-3 rounded-lg border-l-4 border-l-blue-500 bg-blue-50 p-3">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium">📊 {joinTable.tableName}</span>
-                        <Badge variant="outline" className="text-xs">
-                          현재: {joinTable.currentDisplayColumn}
-                        </Badge>
-                      </div>
-                      {joinTable.availableColumns.length === 0 ? (
-                        <div className="text-muted-foreground py-2 text-sm">추가할 수 있는 컬럼이 없습니다.</div>
-                      ) : (
-                        <div className="grid gap-2">
-                          {joinTable.availableColumns.map((column, colIndex) => {
-                            const matchingJoinColumn = entityJoinColumns.availableColumns.find(
-                              (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
-                            );
-
-                            const isAlreadyAdded = config.columns?.some(
-                              (col) => col.columnName === matchingJoinColumn?.joinAlias,
-                            );
-
-                            return (
-                              <div key={colIndex} className="flex items-center justify-between rounded border p-2">
-                                <div className="flex-1">
-                                  <div className="text-sm font-medium">{column.columnLabel}</div>
-                                  <div className="text-muted-foreground text-xs">
-                                    {column.columnName} ({column.dataType})
-                                  </div>
-                                  {column.description && (
-                                    <div className="text-muted-foreground mt-1 text-xs">{column.description}</div>
-                                  )}
-                                </div>
-                                <div className="flex items-center gap-2">
-                                  {isAlreadyAdded ? (
-                                    <Badge variant="secondary" className="text-xs">
-                                      추가됨
-                                    </Badge>
-                                  ) : (
-                                    matchingJoinColumn && (
-                                      <Button
-                                        size="sm"
-                                        variant="outline"
-                                        onClick={() => addEntityColumn(matchingJoinColumn)}
+                              {entityDisplayConfigs[column.columnName].selectedColumns.length > 0
+                                ? `${entityDisplayConfigs[column.columnName].selectedColumns.length}개 선택됨`
+                                : "컬럼 선택"}
+                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-full p-0" align="start">
+                            <Command>
+                              <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                              <CommandList>
+                                <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                {entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
+                                  <CommandGroup heading={`기본: ${column.entityDisplayConfig?.sourceTable}`}>
+                                    {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
+                                      <CommandItem
+                                        key={`source-${col.columnName}`}
+                                        onSelect={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
                                         className="text-xs"
                                       >
-                                        <Plus className="mr-1 h-3 w-3" />
-                                        추가
-                                      </Button>
-                                    )
-                                  )}
-                                </div>
-                              </div>
-                            );
-                          })}
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            entityDisplayConfigs[column.columnName].selectedColumns.includes(
+                                              col.columnName,
+                                            )
+                                              ? "opacity-100"
+                                              : "opacity-0",
+                                          )}
+                                        />
+                                        {col.displayName}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                                {entityDisplayConfigs[column.columnName].joinColumns.length > 0 && (
+                                  <CommandGroup heading={`조인: ${column.entityDisplayConfig?.joinTable}`}>
+                                    {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
+                                      <CommandItem
+                                        key={`join-${col.columnName}`}
+                                        onSelect={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
+                                        className="text-xs"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            entityDisplayConfigs[column.columnName].selectedColumns.includes(
+                                              col.columnName,
+                                            )
+                                              ? "opacity-100"
+                                              : "opacity-0",
+                                          )}
+                                        />
+                                        {col.displayName}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+
+                      {/* 선택된 컬럼 미리보기 */}
+                      {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
+                        <div className="space-y-1">
+                          <Label className="text-xs">미리보기</Label>
+                          <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                            {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
+                              <React.Fragment key={colName}>
+                                <Badge variant="secondary" className="text-xs">
+                                  {colName}
+                                </Badge>
+                                {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
+                                  <span className="text-gray-400">
+                                    {entityDisplayConfigs[column.columnName].separator}
+                                  </span>
+                                )}
+                              </React.Fragment>
+                            ))}
+                          </div>
                         </div>
                       )}
                     </div>
-                  ))}
-
-                  {/* 전체 사용 가능한 컬럼 요약 */}
-                  {entityJoinColumns.availableColumns.length > 0 && (
-                    <div className="bg-muted space-y-3 rounded-lg p-3">
-                      <h4 className="text-sm font-medium">📋 추가 가능한 컬럼 요약</h4>
-                      <div className="text-muted-foreground mb-2 text-sm">
-                        총 {entityJoinColumns.availableColumns.length}개의 컬럼을 추가할 수 있습니다.
-                      </div>
-                      <div className="flex flex-wrap gap-1">
-                        {entityJoinColumns.availableColumns.map((column, index) => {
-                          const isAlreadyAdded = config.columns?.some((col) => col.columnName === column.joinAlias);
-
-                          return (
-                            <Badge
-                              key={index}
-                              variant={isAlreadyAdded ? "secondary" : "outline"}
-                              className="cursor-pointer text-xs"
-                              onClick={() => !isAlreadyAdded && addEntityColumn(column)}
-                            >
-                              {column.columnLabel}
-                              {!isAlreadyAdded && <Plus className="ml-1 h-2 w-2" />}
-                            </Badge>
-                          );
-                        })}
-                      </div>
-                    </div>
+                  ) : (
+                    <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
                   )}
                 </div>
-              )}
+              ))}
+          </div>
+        )}
+
+        {!screenTableName ? (
+          <div className="space-y-3">
+            <div className="text-center text-gray-500">
+              <p>테이블이 연결되지 않았습니다.</p>
+              <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</p>
             </div>
           </div>
-        </TabsContent>
-
-        {/* 필터 설정 탭 */}
-        <TabsContent value="filter" className="space-y-4">
-          <div className="space-y-6">
-            {/* 필터 기능 활성화 */}
-            <div className="space-y-3">
+        ) : availableColumns.length === 0 ? (
+          <div className="space-y-3">
+            <div className="text-center text-gray-500">
+              <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
+              <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
+              <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2">
               <div>
-                <h3 className="text-sm font-semibold">필터 설정</h3>
-                <p className="text-muted-foreground text-xs">테이블에서 사용할 검색 필터를 설정하세요</p>
+                <h3 className="text-sm font-semibold">컬럼 추가</h3>
               </div>
               <hr className="border-border" />
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="filterEnabled"
-                  checked={config.filter?.enabled || false}
-                  onCheckedChange={(checked) => handleNestedChange("filter", "enabled", checked)}
-                />
-                <Label htmlFor="filterEnabled">필터 기능 사용</Label>
-              </div>
+              {availableColumns.length > 0 ? (
+                <div className="space-y-1">
+                  {availableColumns
+                    .filter((col) => !config.columns?.find((c) => c.columnName === col.columnName))
+                    .map((column) => (
+                      <Button
+                        key={column.columnName}
+                        variant="outline"
+                        size="sm"
+                        onClick={() => addColumn(column.columnName)}
+                        className="h-6 w-full justify-start px-2 text-xs"
+                        style={{ fontSize: "12px" }}
+                      >
+                        <Plus className="mr-1 h-3 w-3 shrink-0" />
+                        <span className="truncate">{column.label || column.columnName}</span>
+                      </Button>
+                    ))}
+                </div>
+              ) : (
+                <div className="text-muted-foreground py-2 text-center text-xs">컬럼 정보를 불러오는 중...</div>
+              )}
             </div>
 
-            {/* 필터 목록 */}
-            {config.filter?.enabled && (
-              <div className="space-y-3">
+            {/* Entity 조인 컬럼 추가 */}
+            {entityJoinColumns.joinTables.length > 0 && (
+              <div className="space-y-2">
                 <div>
-                  <h3 className="text-sm font-semibold">사용할 필터</h3>
-                  <p className="text-muted-foreground text-xs">검색에 사용할 컬럼 필터를 추가하고 설정하세요</p>
+                  <h3 className="text-sm font-semibold">Entity 조인 컬럼 추가</h3>
                 </div>
                 <hr className="border-border" />
-                {/* 필터 추가 버튼 */}
-                {availableColumns.length > 0 && (
-                  <div className="flex flex-wrap gap-2">
-                    {availableColumns
-                      .filter((col) => !config.filter?.filters?.find((f) => f.columnName === col.columnName))
-                      .map((column) => (
-                        <Button
-                          key={column.columnName}
-                          variant="outline"
-                          size="sm"
-                          onClick={() => addFilter(column.columnName)}
-                          className="flex items-center gap-1"
-                        >
-                          <Plus className="h-3 w-3" />
-                          {column.label || column.columnName}
-                          <Badge variant="secondary" className="text-xs">
-                            {column.dataType}
-                          </Badge>
-                        </Button>
-                      ))}
-                  </div>
-                )}
+                <div className="space-y-3">
+                  {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
+                    <div key={tableIndex} className="space-y-1">
+                      <div className="flex items-center gap-2 px-2">
+                        <span className="text-xs font-medium">{joinTable.tableName}</span>
+                        <Badge variant="outline" className="text-[10px]">
+                          {joinTable.currentDisplayColumn}
+                        </Badge>
+                      </div>
+                      {joinTable.availableColumns.map((column, colIndex) => {
+                        const matchingJoinColumn = entityJoinColumns.availableColumns.find(
+                          (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                        );
 
-                {/* 설정된 필터 목록 */}
-                {config.filter?.filters && config.filter.filters.length > 0 && (
-                  <div className="space-y-3">
-                    <h4 className="text-sm font-medium">설정된 필터</h4>
-                    {config.filter.filters.map((filter, index) => (
-                      <div key={filter.columnName} className="space-y-3 rounded-lg border p-4">
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-2">
-                            <Badge variant="outline">{filter.widgetType}</Badge>
-                            <span className="font-medium">{filter.label}</span>
-                          </div>
+                        const isAlreadyAdded = config.columns?.some(
+                          (col) => col.columnName === matchingJoinColumn?.joinAlias,
+                        );
+
+                        return matchingJoinColumn && !isAlreadyAdded ? (
                           <Button
+                            key={colIndex}
                             variant="outline"
                             size="sm"
-                            onClick={() => removeFilter(index)}
-                            className="text-red-600 hover:text-red-700"
+                            onClick={() => addEntityColumn(matchingJoinColumn)}
+                            className="h-6 w-full justify-start px-2 text-xs"
+                            style={{ fontSize: "12px" }}
                           >
-                            <Trash2 className="h-3 w-3" />
+                            <Plus className="mr-1 h-3 w-3 shrink-0" />
+                            <span className="truncate">{column.columnLabel}</span>
                           </Button>
-                        </div>
-
-                        <div className="grid grid-cols-2 gap-3">
-                          <div>
-                            <Label className="text-xs">표시명</Label>
-                            <Input
-                              value={filter.label}
-                              onChange={(e) => updateFilter(index, "label", e.target.value)}
-                              placeholder="필터 라벨"
-                            />
-                          </div>
-                          <div>
-                            <Label className="text-xs">그리드 컬럼</Label>
-                            <Select
-                              value={filter.gridColumns.toString()}
-                              onValueChange={(value) => updateFilter(index, "gridColumns", parseInt(value))}
-                            >
-                              <SelectTrigger>
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="2">2칸</SelectItem>
-                                <SelectItem value="3">3칸</SelectItem>
-                                <SelectItem value="4">4칸</SelectItem>
-                                <SelectItem value="6">6칸</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          {/* 숫자 타입인 경우 검색 모드 선택 */}
-                          {(filter.widgetType === "number" || filter.widgetType === "decimal") && (
-                            <div>
-                              <Label className="text-xs">검색 모드</Label>
-                              <Select
-                                value={filter.numberFilterMode || "range"}
-                                onValueChange={(value) => updateFilter(index, "numberFilterMode", value)}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  <SelectItem value="exact">정확한 값</SelectItem>
-                                  <SelectItem value="range">범위 검색</SelectItem>
-                                </SelectContent>
-                              </Select>
-                            </div>
-                          )}
-
-                          {/* 코드 타입인 경우 코드 카테고리 */}
-                          {filter.widgetType === "code" && (
-                            <div>
-                              <Label className="text-xs">코드 카테고리</Label>
-                              <Input
-                                value={filter.codeCategory || ""}
-                                onChange={(e) => updateFilter(index, "codeCategory", e.target.value)}
-                                placeholder="코드 카테고리"
-                              />
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                )}
+                        ) : null;
+                      })}
+                    </div>
+                  ))}
+                </div>
               </div>
             )}
+          </>
+        )}
+
+        {screenTableName && (
+          <div className="space-y-3">
+            <div>
+              <h3 className="text-sm font-semibold">컬럼 설정</h3>
+              <p className="text-muted-foreground text-xs">컬럼별 표시 옵션을 설정하세요</p>
+            </div>
+            <hr className="border-border" />
+
+            {/* 간결한 리스트 형식 컬럼 설정 */}
+            <div className="space-y-1">
+              {config.columns?.map((column, index) => (
+                <div
+                  key={column.columnName}
+                  className="hover:bg-muted/30 flex h-6 items-center justify-between rounded border px-2"
+                >
+                  {/* 컬럼명 */}
+                  <span className="flex-1 truncate text-xs" style={{ fontSize: "12px" }}>
+                    {availableColumns.find((col) => col.columnName === column.columnName)?.label ||
+                      column.displayName ||
+                      column.columnName}
+                  </span>
+
+                  {/* 필터 체크박스 + 순서 변경 + 삭제 버튼 */}
+                  <div className="flex shrink-0 items-center gap-1">
+                    <Checkbox
+                      checked={config.filter?.filters?.some((f) => f.columnName === column.columnName) || false}
+                      onCheckedChange={(checked) => {
+                        const currentFilters = config.filter?.filters || [];
+                        const columnLabel =
+                          availableColumns.find((col) => col.columnName === column.columnName)?.label ||
+                          column.displayName ||
+                          column.columnName;
+
+                        if (checked) {
+                          // 필터 추가
+                          handleChange("filter", {
+                            ...config.filter,
+                            enabled: true,
+                            filters: [
+                              ...currentFilters,
+                              {
+                                columnName: column.columnName,
+                                label: columnLabel,
+                                type: "text",
+                              },
+                            ],
+                          });
+                        } else {
+                          // 필터 제거
+                          handleChange("filter", {
+                            ...config.filter,
+                            filters: currentFilters.filter((f) => f.columnName !== column.columnName),
+                          });
+                        }
+                      }}
+                      className="h-3 w-3"
+                    />
+                  </div>
+
+                  {/* 순서 변경 + 삭제 버튼 */}
+                  <div className="flex shrink-0 items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => moveColumn(column.columnName, "up")}
+                      disabled={index === 0}
+                      className="h-6 w-6 p-0"
+                    >
+                      <ArrowUp className="h-3 w-3" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => moveColumn(column.columnName, "down")}
+                      disabled={index === (config.columns?.length || 0) - 1}
+                      className="h-6 w-6 p-0"
+                    >
+                      <ArrowDown className="h-3 w-3" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeColumn(column.columnName)}
+                      className="h-6 w-6 p-0 text-red-500 hover:text-red-600"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
           </div>
-        </TabsContent>
-      </Tabs>
+        )}
+      </div>
     </div>
   );
 };