jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

반응형 및 테이블 리스트 컴포넌트 오류 수정

Browse Source
This commit is contained in:
kjs
2025-10-17 15:31:23 +09:00
parent 54e9f45823
commit 2a8081a253
21 changed files with 886 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,9 +55,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
// 컴포넌트 스타일
const componentStyle: React.CSSProperties = isPreview
? {
// 반응형 모드: position relative, width/height 100%
// 반응형 모드: position relative, 그리드 컨테이너가 제공하는 크기 사용
position: "relative",
width: "100%",
// width 제거 - 그리드 컬럼이 결정
height: `${component.style?.height || 600}px`,
border: "1px solid #e5e7eb",
}
@@ -257,19 +257,27 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
return (
<div
ref={containerRef}
style={componentStyle}
style={
isPreview
? {
position: "relative",
height: `${component.style?.height || 600}px`,
border: "1px solid #e5e7eb",
}
: componentStyle
}
onClick={(e) => {
if (isDesignMode) {
e.stopPropagation();
onClick?.(e);
}
}}
className="flex overflow-hidden rounded-lg bg-white shadow-sm"
className={`flex overflow-hidden rounded-lg bg-white shadow-sm ${isPreview ? "w-full" : ""}`}
>
{/* 좌측 패널 */}
<div
style={{ width: `${leftWidth}%`, minWidth: `${minLeftWidth}px` }}
className="flex flex-col border-r border-gray-200"
style={{ width: `${leftWidth}%`, minWidth: isPreview ? "0" : `${minLeftWidth}px` }}
className="flex flex-shrink-0 flex-col border-r border-gray-200"
>
<Card className="flex h-full flex-col border-0 shadow-none">
<CardHeader className="border-b border-gray-100 pb-3">
@@ -404,7 +412,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
)}
{/* 우측 패널 */}
<div style={{ width: `${100 - leftWidth}%`, minWidth: `${minRightWidth}px` }} className="flex flex-col">
<div
style={{ width: `${100 - leftWidth}%`, minWidth: isPreview ? "0" : `${minRightWidth}px` }}
className="flex flex-shrink-0 flex-col"
>
<Card className="flex h-full flex-col border-0 shadow-none">
<CardHeader className="border-b border-gray-100 pb-3">
<div className="flex items-center justify-between">

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

@@ -28,7 +28,7 @@ interface SplitPanelLayoutConfigPanelProps {
export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelProps> = ({
config,
onChange,
tables = [], // 기본값 빈 배열
tables = [], // 기본값 빈 배열 (현재 화면 테이블만)
screenTableName, // 현재 화면의 테이블명
}) => {
const [rightTableOpen, setRightTableOpen] = useState(false);
@@ -36,6 +36,32 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
const [rightColumnOpen, setRightColumnOpen] = useState(false);
const [loadedTableColumns, setLoadedTableColumns] = useState<Record<string, ColumnInfo[]>>({});
const [loadingColumns, setLoadingColumns] = useState<Record<string, boolean>>({});
const [allTables, setAllTables] = useState<any[]>([]); // 조인 모드용 전체 테이블 목록
// 관계 타입
const relationshipType = config.rightPanel?.relation?.type || "detail";
// 조인 모드일 때만 전체 테이블 목록 로드
useEffect(() => {
if (relationshipType === "join") {
const loadAllTables = async () => {
try {
const { tableManagementApi } = await import("@/lib/api/tableManagement");
const response = await tableManagementApi.getTableList();
if (response.success && response.data) {
console.log("✅ 분할패널 조인 모드: 전체 테이블 목록 로드", response.data.length, "개");
setAllTables(response.data);
}
} catch (error) {
console.error("❌ 전체 테이블 목록 로드 실패:", error);
}
};
loadAllTables();
} else {
// 상세 모드일 때는 기본 테이블만 사용
setAllTables([]);
}
}, [relationshipType]);
// screenTableName이 변경되면 좌측 패널 테이블을 항상 화면 테이블로 설정
useEffect(() => {
@@ -155,8 +181,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
);
}
// 관계 타입에 따라 우측 테이블을 자동으로 설정
const relationshipType = config.rightPanel?.relation?.type || "detail";
// 조인 모드에서 우측 테이블 선택 시 사용할 테이블 목록
const availableRightTables = relationshipType === "join" ? allTables : tables;
console.log("📊 분할패널 테이블 목록 상태:");
console.log(" - relationshipType:", relationshipType);
console.log(" - allTables:", allTables.length, "개");
console.log(" - availableRightTables:", availableRightTables.length, "개");
return (
<div className="space-y-6">
@@ -285,7 +316,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
<CommandInput placeholder="테이블 검색..." />
<CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup className="max-h-[200px] overflow-auto">
{tables.map((table) => (
{availableRightTables.map((table) => (
<CommandItem
key={table.tableName}
value={table.tableName}
@@ -300,8 +331,8 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
config.rightPanel?.tableName === table.tableName ? "opacity-100" : "opacity-0",
)}
/>
{table.tableName}
<span className="ml-2 text-xs text-gray-500">({table.tableLabel || ""})</span>
{table.displayName || table.tableName}
{table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
</CommandItem>
))}
</CommandGroup>

2
frontend/lib/registry/components/split-panel-layout/index.ts
View File

@@ -41,7 +41,7 @@ export const SplitPanelLayoutDefinition = createComponentDefinition({
autoLoad: true,
syncSelection: true,
} as SplitPanelLayoutConfig,
defaultSize: { width: 1000, height: 600 },
defaultSize: { width: 800, height: 600 },
configPanel: SplitPanelLayoutConfigPanel,
icon: "PanelLeftRight",
tags: ["분할", "마스터", "디테일", "레이아웃"],