+ {/* 우측 패널 제목 */}
+
+
+ updateRightPanel({ title: e.target.value })}
+ placeholder="우측 패널 제목"
+ className="h-8 text-xs"
+ />
+
+
+ {/* 우측 테이블 선택 */}
+
+
+
+ updateRightPanel({ tableName, columns: [] })
+ }
+ />
+
+
+ {/* 표시 모드 */}
+
+
+
+ {DISPLAY_MODE_CARDS.map((card) => {
+ const Icon = card.icon;
+ const currentMode =
+ config.rightPanel?.displayMode || "list";
+ const isSelected = currentMode === card.value;
+ return (
+
+ );
+ })}
+
+
+
+ {/* 연결 키 설정 */}
+ {rightTableName && (
+
+
+
+ 테이블 연결 키
+
+
+ 좌측 패널과 우측 패널을 연결할 컬럼을 설정합니다
+
+
+ {/* 기존 키 목록 */}
+ {(config.rightPanel?.relation?.keys || []).map(
+ (key, idx) => (
+
+
+
+
+
+
+
+
+
+ )
+ )}
+
+ {/* 키가 없을 때 단일키 호환 */}
+ {(!config.rightPanel?.relation?.keys ||
+ config.rightPanel.relation.keys.length === 0) && (
+
+
+
+
+
+
+
+ )}
+
+
+
+ )}
+
+ {/* 우측 패널 기능 토글 */}
+
+
+ updateRightPanel({ showSearch: checked })
+ }
+ />
+
+ updateRightPanel({ showAdd: checked })
+ }
+ />
+
+ updateRightPanel({ showEdit: checked })
+ }
+ />
+
+ updateRightPanel({ showDelete: checked })
+ }
+ />
+
+
+ {/* 우측 패널 컬럼 설정 (접이식) */}
+ {config.rightPanel?.displayMode !== "custom" && (
+
+
+
+
+
+
+ {loadingColumns[rightTableName] ? (
+
+
+ 컬럼 로딩 중...
+
+ ) : rightTableColumns.length === 0 ? (
+
+ 테이블을 선택하면 컬럼이 표시됩니다
+
+ ) : (
+
+ updateRightPanel({ columns })
+ }
+ />
+ )}
+
+ )}
+
+ {/* 우측 패널 데이터 필터 (접이식) */}
+
+
+
+
+
+
+ ({
+ columnName: col.columnName,
+ columnLabel: col.columnLabel || col.columnName,
+ dataType: col.dataType,
+ input_type: (col as any).input_type,
+ }))}
+ config={config.rightPanel?.dataFilter}
+ onConfigChange={(dataFilter) =>
+ updateRightPanel({ dataFilter })
+ }
+ />
+
+
+
+
+ {/* 우측 패널 추가 설정 (접이식) */}
+
+
+
+
+
+
+ {/* 중복 제거 */}
+
+ updateRightPanel({
+ deduplication: {
+ ...config.rightPanel?.deduplication,
+ enabled: checked,
+ groupByColumn:
+ config.rightPanel?.deduplication?.groupByColumn ||
+ "",
+ keepStrategy:
+ config.rightPanel?.deduplication?.keepStrategy ||
+ "latest",
+ },
+ })
+ }
+ />
+
+ {config.rightPanel?.deduplication?.enabled && (
+
+
+
+ 기준 컬럼
+
+
+
+
+
+ 유지 전략
+
+
+
+
+
+
+ 모달 화면 ID
+
+
+ updateRightPanel({
+ editButton: {
+ ...config.rightPanel?.editButton!,
+ modalScreenId:
+ parseInt(e.target.value) || undefined,
+ },
+ })
+ }
+ placeholder="화면 ID"
+ className="h-7 w-[100px] text-xs"
+ />
+
+
+
+
+ 모달 화면 ID
+
+
+ updateRightPanel({
+ addButton: {
+ ...config.rightPanel?.addButton!,
+ modalScreenId:
+ parseInt(e.target.value) || undefined,
+ },
+ })
+ }
+ placeholder="화면 ID"
+ className="h-7 w-[100px] text-xs"
+ />
+
+
+
+ updateRightPanel({
+ deleteButton: {
+ ...config.rightPanel?.deleteButton!,
+ confirmMessage: e.target.value,
+ },
+ })
+ }
+ placeholder="삭제 확인 메시지"
+ className="h-7 text-xs"
+ />
+
+ )}
+
+
+
+ {/* 추가 시 대상 테이블 (N:M 관계) */}
+
+
+ 추가 대상 설정 (N:M)
+
+
+ 추가 버튼 클릭 시 실제 INSERT할 테이블을 지정합니다
+
+
+
+
+ 테이블 옵션
+
+
+ updateRightPanel({
+ tableConfig: {
+ ...config.rightPanel?.tableConfig,
+ showCheckbox: checked,
+ },
+ })
+ }
+ />
+
+ updateRightPanel({
+ tableConfig: {
+ ...config.rightPanel?.tableConfig,
+ showRowNumber: checked,
+ },
+ })
+ }
+ />
+
+ updateRightPanel({
+ tableConfig: {
+ ...config.rightPanel?.tableConfig,
+ striped: checked,
+ },
+ })
+ }
+ />
+
+ updateRightPanel({
+ tableConfig: {
+ ...config.rightPanel?.tableConfig,
+ stickyHeader: checked,
+ },
+ })
+ }
+ />
+
+
+ )}
+
+