좌측 패널에 매핑한 컬럼 나오도록 구현

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

@@ -373,10 +373,56 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       const itemId = item.id || item.ID || item[Object.keys(item)[0]] || index;
                       const isSelected =
                         selectedLeftItem && (selectedLeftItem.id === itemId || selectedLeftItem === item);
-                      // 첫 번째 2-3개 필드를 표시
-                      const keys = Object.keys(item).filter((k) => k !== "id" && k !== "ID");
-                      const displayTitle = item[keys[0]] || item.name || item.title || `항목 ${index + 1}`;
-                      const displaySubtitle = keys[1] ? item[keys[1]] : null;
+
+                      // 조인에 사용하는 leftColumn을 필수로 표시
+                      const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+                      let displayFields: { label: string; value: any }[] = [];
+
+                      // 디버그 로그
+                      if (index === 0) {
+                        console.log("🔍 좌측 패널 표시 로직:");
+                        console.log("  - leftColumn (조인 키):", leftColumn);
+                        console.log("  - item keys:", Object.keys(item));
+                      }
+
+                      if (leftColumn) {
+                        // 조인 모드: leftColumn 값을 첫 번째로 표시 (필수)
+                        displayFields.push({
+                          label: leftColumn,
+                          value: item[leftColumn],
+                        });
+
+                        // 추가로 다른 의미있는 필드 1-2개 표시 (name, title 등)
+                        const additionalKeys = Object.keys(item).filter(
+                          (k) => k !== "id" && k !== "ID" && k !== leftColumn && 
+                                 (k.includes("name") || k.includes("title") || k.includes("desc"))
+                        );
+                        
+                        if (additionalKeys.length > 0) {
+                          displayFields.push({
+                            label: additionalKeys[0],
+                            value: item[additionalKeys[0]],
+                          });
+                        }
+
+                        if (index === 0) {
+                          console.log("  ✅ 조인 키 기반 표시:", displayFields);
+                        }
+                      } else {
+                        // 상세 모드 또는 설정 없음: 자동으로 첫 2개 필드 표시
+                        const keys = Object.keys(item).filter((k) => k !== "id" && k !== "ID");
+                        displayFields = keys.slice(0, 2).map((key) => ({
+                          label: key,
+                          value: item[key],
+                        }));
+
+                        if (index === 0) {
+                          console.log("  ⚠️ 조인 키 없음, 자동 선택:", displayFields);
+                        }
+                      }
+
+                      const displayTitle = displayFields[0]?.value || item.name || item.title || `항목 ${index + 1}`;
+                      const displaySubtitle = displayFields[1]?.value || null;
 
                       return (
                         <div

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

@@ -268,6 +268,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             onCheckedChange={(checked) => updateLeftPanel({ showAdd: checked })}
           />
         </div>
+
       </div>
 
       {/* 우측 패널 설정 */}