feat: 분할 패널 내부 컴포넌트 선택 기능 추가

- RealtimePreviewDynamic, ScreenDesigner, DynamicComponentRenderer, SplitPanelLayoutComponent 및 관련 파일에서 분할 패널 내부 컴포넌트 선택 콜백 및 상태 관리 기능을 추가하였습니다.
- 커스텀 모드에서 패널 내부에 컴포넌트를 자유롭게 배치할 수 있는 기능을 구현하였습니다.
- 선택된 패널 컴포넌트의 상태를 관리하고, 관련 UI 요소를 업데이트하여 사용자 경험을 향상시켰습니다.
- 패널의 표시 모드에 'custom' 옵션을 추가하여 사용자 정의 배치 기능을 지원합니다.

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

@@ -11,7 +11,8 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 // Accordion 제거 - 단순 섹션으로 변경
-import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, Database, GripVertical } from "lucide-react";
+import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, Database, GripVertical, Move } from "lucide-react";
+import { PanelInlineComponent } from "./types";
 import { cn } from "@/lib/utils";
 import { SplitPanelLayoutConfig, AdditionalTabConfig } from "./types";
 import { TableInfo, ColumnInfo } from "@/types/screen";
@@ -1547,7 +1548,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <Label>표시 모드</Label>
           <Select
             value={config.leftPanel?.displayMode || "list"}
-            onValueChange={(value: "list" | "table") => updateLeftPanel({ displayMode: value })}
+            onValueChange={(value: "list" | "table" | "custom") => updateLeftPanel({ displayMode: value })}
           >
             <SelectTrigger className="bg-white">
               <SelectValue placeholder="표시 모드 선택" />
@@ -1565,11 +1566,75 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
+              <SelectItem value="custom">
+                <div className="flex flex-col">
+                  <span className="font-medium">커스텀 (CUSTOM)</span>
+                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                </div>
+              </SelectItem>
             </SelectContent>
           </Select>
+          {config.leftPanel?.displayMode === "custom" && (
+            <p className="text-xs text-amber-600">
+              화면 디자이너에서 좌측 패널에 컴포넌트를 드래그하여 배치하세요.
+            </p>
+          )}
         </div>
 
-        {/* 좌측 패널 표시 컬럼 설정 - 체크박스 방식 */}
+        {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
+        {config.leftPanel?.displayMode === "custom" && (
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+            {!config.leftPanel?.components || config.leftPanel.components.length === 0 ? (
+              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                <p className="text-muted-foreground text-xs">
+                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {config.leftPanel.components.map((comp: PanelInlineComponent) => (
+                  <div
+                    key={comp.id}
+                    className="flex items-center justify-between rounded-md border bg-background p-2"
+                  >
+                    <div className="flex-1">
+                      <p className="text-xs font-medium">
+                        {comp.label || comp.componentType}
+                      </p>
+                      <p className="text-muted-foreground text-[10px]">
+                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => {
+                        const updatedComponents = (config.leftPanel?.components || []).filter(
+                          (c: PanelInlineComponent) => c.id !== comp.id
+                        );
+                        onChange({
+                          ...config,
+                          leftPanel: {
+                            ...config.leftPanel,
+                            components: updatedComponents,
+                          },
+                        });
+                      }}
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 좌측 패널 표시 컬럼 설정 - 체크박스 방식 (커스텀 모드가 아닐 때만) */}
+        {config.leftPanel?.displayMode !== "custom" && (
         <div className="space-y-2">
           <Label className="text-xs font-medium">표시할 컬럼 선택</Label>
 
@@ -1731,6 +1796,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             </div>
           )}
         </div>
+        )}
       </div>
 
       {/* 좌측 패널 데이터 필터링 */}
@@ -1851,7 +1917,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <Label>표시 모드</Label>
           <Select
             value={config.rightPanel?.displayMode || "list"}
-            onValueChange={(value: "list" | "table") => updateRightPanel({ displayMode: value })}
+            onValueChange={(value: "list" | "table" | "custom") => updateRightPanel({ displayMode: value })}
           >
             <SelectTrigger className="bg-white">
               <SelectValue placeholder="표시 모드 선택" />
@@ -1869,11 +1935,74 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
+              <SelectItem value="custom">
+                <div className="flex flex-col">
+                  <span className="font-medium">커스텀 (CUSTOM)</span>
+                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                </div>
+              </SelectItem>
             </SelectContent>
           </Select>
+          {config.rightPanel?.displayMode === "custom" && (
+            <p className="text-xs text-amber-600">
+              화면 디자이너에서 우측 패널에 컴포넌트를 드래그하여 배치하세요.
+            </p>
+          )}
         </div>
 
-        {/* 요약 표시 설정 (LIST 모드에서만) */}
+        {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
+        {config.rightPanel?.displayMode === "custom" && (
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+            {!config.rightPanel?.components || config.rightPanel.components.length === 0 ? (
+              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                <p className="text-muted-foreground text-xs">
+                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {config.rightPanel.components.map((comp: PanelInlineComponent) => (
+                  <div
+                    key={comp.id}
+                    className="flex items-center justify-between rounded-md border bg-background p-2"
+                  >
+                    <div className="flex-1">
+                      <p className="text-xs font-medium">
+                        {comp.label || comp.componentType}
+                      </p>
+                      <p className="text-muted-foreground text-[10px]">
+                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => {
+                        const updatedComponents = (config.rightPanel?.components || []).filter(
+                          (c: PanelInlineComponent) => c.id !== comp.id
+                        );
+                        onChange({
+                          ...config,
+                          rightPanel: {
+                            ...config.rightPanel,
+                            components: updatedComponents,
+                          },
+                        });
+                      }}
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 요약 표시 설정 (LIST 모드에서만, 커스텀 모드가 아닐 때) */}
         {(config.rightPanel?.displayMode || "list") === "list" && (
           <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>