diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index dff4ee3a..dbb99963 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -160,6 +160,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         // searchTerm 제거 - 클라이언트 사이드에서 필터링
       });
       
+      // 가나다순 정렬 (좌측 패널의 표시 컬럼 기준)
+      const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+      if (leftColumn && result.data.length > 0) {
+        result.data.sort((a, b) => {
+          const aValue = String(a[leftColumn] || '');
+          const bValue = String(b[leftColumn] || '');
+          return aValue.localeCompare(bValue, 'ko-KR');
+        });
+      }
+      
       // 계층 구조 빌드
       const hierarchicalData = buildHierarchy(result.data);
       setLeftData(hierarchicalData);
@@ -173,7 +183,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     } finally {
       setIsLoadingLeft(false);
     }
-  }, [componentConfig.leftPanel?.tableName, isDesignMode, toast, buildHierarchy]);
+  }, [componentConfig.leftPanel?.tableName, componentConfig.rightPanel?.relation?.leftColumn, isDesignMode, toast, buildHierarchy]);
 
   // 우측 데이터 로드
   const loadRightData = useCallback(
@@ -293,9 +303,19 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   // 추가 버튼 핸들러
   const handleAddClick = useCallback((panel: "left" | "right") => {
     setAddModalPanel(panel);
-    setAddModalFormData({});
+    
+    // 우측 패널 추가 시, 좌측에서 선택된 항목의 조인 컬럼 값을 자동으로 채움
+    if (panel === "right" && selectedLeftItem && componentConfig.leftPanel?.leftColumn && componentConfig.rightPanel?.rightColumn) {
+      const leftColumnValue = selectedLeftItem[componentConfig.leftPanel.leftColumn];
+      setAddModalFormData({
+        [componentConfig.rightPanel.rightColumn]: leftColumnValue
+      });
+    } else {
+      setAddModalFormData({});
+    }
+    
     setShowAddModal(true);
-  }, []);
+  }, [selectedLeftItem, componentConfig]);
 
   // 수정 버튼 핸들러
   const handleEditClick = useCallback((panel: "left" | "right", item: any) => {
@@ -1316,10 +1336,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               
               return modalColumns?.map((col, index) => {
               // 항목별 추가 버튼으로 열렸을 때, parentColumn은 미리 채워져 있고 수정 불가
-              const isPreFilled = addModalPanel === "left-item" 
+              const isItemAddPreFilled = addModalPanel === "left-item" 
                 && componentConfig.leftPanel?.itemAddConfig?.parentColumn === col.name 
                 && addModalFormData[col.name];
               
+              // 우측 패널 추가 시, 조인 컬럼(rightColumn)은 미리 채워져 있고 수정 불가
+              const isRightJoinPreFilled = addModalPanel === "right"
+                && componentConfig.rightPanel?.rightColumn === col.name
+                && addModalFormData[col.name];
+              
+              const isPreFilled = isItemAddPreFilled || isRightJoinPreFilled;
+              
               return (
                 <div key={index}>
                   <Label htmlFor={col.name} className="text-xs sm:text-sm">
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index bce30f8f..35e711fa 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -9,6 +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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Check, ChevronsUpDown, ArrowRight, Plus, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { SplitPanelLayoutConfig } from "./types";
@@ -284,7 +285,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
   console.log("  - availableRightTables:", availableRightTables.length, "개");
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
       {/* 관계 타입 선택 */}
       <div className="space-y-3">
         <h3 className="text-sm font-semibold">패널 관계 타입</h3>
@@ -324,9 +325,14 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         </Select>
       </div>
 
-      {/* 좌측 패널 설정 (마스터) */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-semibold">좌측 패널 설정 (마스터)</h3>
+      {/* 좌측 패널 설정 (Accordion) */}
+      <Accordion type="single" collapsible defaultValue="left-panel" className="w-full">
+        <AccordionItem value="left-panel" className="border rounded-lg px-4">
+          <AccordionTrigger className="text-sm font-semibold hover:no-underline">
+            좌측 패널 설정 (마스터)
+          </AccordionTrigger>
+          <AccordionContent className="overflow-visible">
+            <div className="space-y-4 pt-2">
 
         <div className="space-y-2">
           <Label>패널 제목</Label>
@@ -807,11 +813,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             </div>
           </div>
         )}
-      </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
 
-      {/* 우측 패널 설정 */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-semibold">우측 패널 설정 ({relationshipType === "detail" ? "상세" : "조인"})</h3>
+      {/* 우측 패널 설정 (Accordion) */}
+      <Accordion type="single" collapsible defaultValue="right-panel" className="w-full">
+        <AccordionItem value="right-panel" className="border rounded-lg px-4">
+          <AccordionTrigger className="text-sm font-semibold hover:no-underline">
+            우측 패널 설정 ({relationshipType === "detail" ? "상세" : "조인"})
+          </AccordionTrigger>
+          <AccordionContent className="overflow-visible">
+            <div className="space-y-4 pt-2">
 
         <div className="space-y-2">
           <Label>패널 제목</Label>
@@ -1357,11 +1371,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             </div>
           </div>
         )}
-      </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
 
-      {/* 레이아웃 설정 */}
-      <div className="space-y-4">
-        <h3 className="text-sm font-semibold">레이아웃 설정</h3>
+      {/* 레이아웃 설정 (Accordion) */}
+      <Accordion type="single" collapsible className="w-full">
+        <AccordionItem value="layout" className="border rounded-lg px-4">
+          <AccordionTrigger className="text-sm font-semibold hover:no-underline">
+            레이아웃 설정
+          </AccordionTrigger>
+          <AccordionContent className="overflow-visible">
+            <div className="space-y-4 pt-2">
 
         <div className="space-y-2">
           <Label>좌측 패널 너비: {config.splitRatio || 30}%</Label>
@@ -1389,7 +1411,10 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             onCheckedChange={(checked) => updateConfig({ autoLoad: checked })}
           />
         </div>
-      </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </div>
   );
 };