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

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>
 
       {/* 레이아웃 설정 */}