우측 패널 조절 가능하도록 수정

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

@@ -534,12 +534,46 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       {filteredData.map((item, index) => {
                         const itemId = item.id || item.ID || index;
                         const isExpanded = expandedRightItems.has(itemId);
-                        const firstValues = Object.entries(item)
+                        
-                          .filter(([key]) => !key.toLowerCase().includes("id"))
+                        // 우측 패널 표시 컬럼 설정 확인
-                          .slice(0, 3);
+                        const rightColumns = componentConfig.rightPanel?.columns;
-                        const allValues = Object.entries(item).filter(
+                        let firstValues: [string, any][] = [];
-                          ([key, value]) => value !== null && value !== undefined && value !== "",
+                        let allValues: [string, any][] = [];
-                        );
+
+                        if (index === 0) {
+                          console.log("🔍 우측 패널 표시 로직:");
+                          console.log("  - rightColumns:", rightColumns);
+                          console.log("  - item keys:", Object.keys(item));
+                        }
+
+                        if (rightColumns && rightColumns.length > 0) {
+                          // 설정된 컬럼만 표시
+                          firstValues = rightColumns
+                            .slice(0, 3)
+                            .map((col) => [col.name, item[col.name]] as [string, any])
+                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+                          
+                          allValues = rightColumns
+                            .map((col) => [col.name, item[col.name]] as [string, any])
+                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+
+                          if (index === 0) {
+                            console.log("  ✅ 설정된 컬럼 사용:", rightColumns.map(c => c.name));
+                          }
+                        } else {
+                          // 설정 없으면 모든 컬럼 표시 (기존 로직)
+                          firstValues = Object.entries(item)
+                            .filter(([key]) => !key.toLowerCase().includes("id"))
+                            .slice(0, 3);
+                          
+                          allValues = Object.entries(item).filter(
+                            ([key, value]) => value !== null && value !== undefined && value !== "",
+                          );
+
+                          if (index === 0) {
+                            console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
+                          }
+                        }
 
                         return (
                           <div
@@ -611,21 +645,39 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 })()
               ) : (
                 // 상세 모드: 단일 객체를 상세 정보로 표시
-                <div className="space-y-2">
+                (() => {
-                  {Object.entries(rightData).map(([key, value]) => {
+                  const rightColumns = componentConfig.rightPanel?.columns;
-                    // null, undefined, 빈 문자열 제외
+                  let displayEntries: [string, any][] = [];
-                    if (value === null || value === undefined || value === "") return null;
 
-                    return (
+                  if (rightColumns && rightColumns.length > 0) {
-                      <div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
+                    // 설정된 컬럼만 표시
-                        <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
+                    displayEntries = rightColumns
-                          {key}
+                      .map((col) => [col.name, rightData[col.name]] as [string, any])
-                        </div>
+                      .filter(([_, value]) => value !== null && value !== undefined && value !== "");
-                        <div className="text-sm">{String(value)}</div>
+                    
-                      </div>
+                    console.log("🔍 상세 모드 표시 로직:");
+                    console.log("  ✅ 설정된 컬럼 사용:", rightColumns.map(c => c.name));
+                  } else {
+                    // 설정 없으면 모든 컬럼 표시
+                    displayEntries = Object.entries(rightData).filter(
+                      ([_, value]) => value !== null && value !== undefined && value !== ""
                     );
-                  })}
+                    console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
-                </div>
+                  }
+
+                  return (
+                    <div className="space-y-2">
+                      {displayEntries.map(([key, value]) => (
+                        <div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
+                          <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
+                            {getColumnLabel(key)}
+                          </div>
+                          <div className="text-sm">{String(value)}</div>
+                        </div>
+                      ))}
+                    </div>
+                  );
+                })()
               )
             ) : selectedLeftItem && isDesignMode ? (
               // 디자인 모드: 샘플 데이터

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

@@ -9,7 +9,7 @@ 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 { Check, ChevronsUpDown, ArrowRight } from "lucide-react";
+import { Check, ChevronsUpDown, ArrowRight, Plus, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { SplitPanelLayoutConfig } from "./types";
 import { TableInfo, ColumnInfo } from "@/types/screen";
@@ -468,6 +468,115 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             onCheckedChange={(checked) => updateRightPanel({ showAdd: checked })}
           />
         </div>
+
+        {/* 우측 패널 표시 컬럼 설정 */}
+        <div className="space-y-3 rounded-lg border border-green-200 bg-green-50 p-3">
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-semibold">표시할 컬럼 선택</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                const currentColumns = config.rightPanel?.columns || [];
+                const newColumns = [
+                  ...currentColumns,
+                  { name: "", label: "", width: 100 },
+                ];
+                updateRightPanel({ columns: newColumns });
+              }}
+              className="h-7 text-xs"
+              disabled={!config.rightPanel?.tableName}
+            >
+              <Plus className="mr-1 h-3 w-3" />
+              컬럼 추가
+            </Button>
+          </div>
+          <p className="text-xs text-gray-600">
+            우측 패널에 표시할 컬럼을 선택하세요. 선택하지 않으면 모든 컬럼이 표시됩니다.
+          </p>
+
+          {/* 선택된 컬럼 목록 */}
+          <div className="space-y-2">
+            {(config.rightPanel?.columns || []).length === 0 ? (
+              <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
+                <p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
+                <p className="mt-1 text-[10px] text-gray-400">
+                  컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다
+                </p>
+              </div>
+            ) : (
+              (config.rightPanel?.columns || []).map((col, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-2 rounded-md border bg-white p-2"
+                >
+                  <div className="flex-1">
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className="h-8 w-full justify-between text-xs"
+                        >
+                          {col.name || "컬럼 선택"}
+                          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-full p-0">
+                        <Command>
+                          <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                          <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                          <CommandGroup className="max-h-[200px] overflow-auto">
+                            {rightTableColumns.map((column) => (
+                              <CommandItem
+                                key={column.columnName}
+                                value={column.columnName}
+                                onSelect={(value) => {
+                                  const newColumns = [...(config.rightPanel?.columns || [])];
+                                  newColumns[index] = {
+                                    ...newColumns[index],
+                                    name: value,
+                                    label: column.columnLabel || value,
+                                  };
+                                  updateRightPanel({ columns: newColumns });
+                                }}
+                                className="text-xs"
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-3 w-3",
+                                    col.name === column.columnName ? "opacity-100" : "opacity-0"
+                                  )}
+                                />
+                                {column.columnLabel || column.columnName}
+                                <span className="ml-2 text-[10px] text-gray-500">
+                                  ({column.columnName})
+                                </span>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => {
+                      const newColumns = (config.rightPanel?.columns || []).filter(
+                        (_, i) => i !== index
+                      );
+                      updateRightPanel({ columns: newColumns });
+                    }}
+                    className="h-8 w-8 p-0"
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
       </div>
 
       {/* 레이아웃 설정 */}