kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

refactor: improve SplitPanelLayoutComponent for better responsiveness and layout handling 

- Removed unnecessary div wrappers to streamline the layout structure.
- Adjusted table minimum width calculations to ensure better responsiveness across different screen sizes.
- Enhanced column width handling to provide a more consistent and flexible user experience.

These changes aim to refine the overall layout and usability of the SplitPanelLayoutComponent, ensuring it adapts more effectively to varying content and screen dimensions.
This commit is contained in:
kmh 2026-03-18 16:25:13 +09:00
parent c8226b0ba6
commit 08ad2abdd1
1 changed files with 8 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3896,13 +3896,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
const canDragLeftGroupedColumns = !isDesignMode && columnsToShow.length > 1; const canDragLeftGroupedColumns = !isDesignMode && columnsToShow.length > 1;
if (groupedLeftData.length > 0) { if (groupedLeftData.length > 0) {
return ( return (
<div className="overflow-auto"> <>
{groupedLeftData.map((group, groupIdx) => ( {groupedLeftData.map((group, groupIdx) => (
<div key={groupIdx} className="mb-4"> <div key={groupIdx} className="mb-4">
<div className="bg-muted px-3 py-2 text-sm font-semibold"> <div className="bg-muted px-3 py-2 text-sm font-semibold">
{group.groupKey} ({group.count}개) {group.groupKey} ({group.count}개)
</div> </div>
<table className="divide-border min-w-full divide-y"> <table className="divide-border min-w-full divide-y" style={{ minWidth: `${Math.max(columnsToShow.length * 120, 400)}px` }}>
<thead className="bg-muted"> <thead className="bg-muted">
<tr> <tr>
{columnsToShow.map((col, idx) => { {columnsToShow.map((col, idx) => {
@ -4016,7 +4016,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
</table> </table>
</div> </div>
))} ))}
</div> </>
); );
} }
@ -4027,8 +4027,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
componentConfig.leftPanel?.showDelete !== false); componentConfig.leftPanel?.showDelete !== false);
const canDragLeftColumns = !isDesignMode && columnsToShow.length > 1; const canDragLeftColumns = !isDesignMode && columnsToShow.length > 1;
return ( return (
<div className="overflow-auto"> <table className="divide-border min-w-full divide-y" style={{ minWidth: `${Math.max(columnsToShow.length * 120, 400)}px` }}>
<table className="divide-border min-w-full divide-y">
<thead className="bg-muted sticky top-0 z-10"> <thead className="bg-muted sticky top-0 z-10">
<tr> <tr>
{columnsToShow.map((col, idx) => { {columnsToShow.map((col, idx) => {
@ -4135,7 +4134,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
})} })}
</tbody> </tbody>
</table> </table>
</div>
); );
})() })()
)} )}
@ -5189,19 +5187,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
columnsToShow = [...keyCols, ...applyRuntimeOrder(dataCols, "main")]; columnsToShow = [...keyCols, ...applyRuntimeOrder(dataCols, "main")];
} }
// 컬럼 너비 합계 계산 (작업 컬럼 제외, 100% 초과 시 스크롤)
const rightTotalColWidth = columnsToShow.reduce((sum, col) => {
const w = col.width && col.width <= 100 ? col.width : 0;
return sum + w;
}, 0);
const rightConfigColumnStart = columnsToShow.filter((c: any) => c._isKeyColumn).length; const rightConfigColumnStart = columnsToShow.filter((c: any) => c._isKeyColumn).length;
const canDragRightColumns = displayColumns.length > 0; const canDragRightColumns = displayColumns.length > 0;
return ( return (
<div className="flex h-full w-full flex-col"> <div className="flex h-full w-full flex-col">
<div className="min-h-0 flex-1 overflow-auto"> <div className="min-h-0 flex-1 overflow-auto">
<table className="min-w-full"> <table className="min-w-full" style={{ minWidth: `${Math.max(columnsToShow.length * 120, 400)}px` }}>
<thead className="sticky top-0 z-10"> <thead className="sticky top-0 z-10">
<tr className="border-border/60 border-b-2"> <tr className="border-border/60 border-b-2">
{columnsToShow.map((col, idx) => { {columnsToShow.map((col, idx) => {
@ -5221,7 +5213,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
isDragging && "opacity-50", isDragging && "opacity-50",
)} )}
style={{ style={{
width: col.width && col.width <= 100 ? `${col.width}%` : "auto", minWidth: col.width ? `${col.width}px` : "80px",
textAlign: col.align || "left", textAlign: col.align || "left",
}} }}
draggable={isDraggable} draggable={isDraggable}
@ -5387,14 +5379,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
return filteredData.length > 0 ? ( return filteredData.length > 0 ? (
<div className="flex h-full w-full flex-col"> <div className="flex h-full w-full flex-col">
<div className="min-h-0 flex-1 overflow-auto"> <div className="min-h-0 flex-1 overflow-auto">
<table className="min-w-full text-sm"> <table className="min-w-full text-sm" style={{ minWidth: `${Math.max(columnsToDisplay.length * 120, 400)}px` }}>
<thead className="bg-background sticky top-0 z-10"> <thead className="bg-background sticky top-0 z-10">
<tr className="border-border/60 border-b-2"> <tr className="border-border/60 border-b-2">
{columnsToDisplay.map((col) => ( {columnsToDisplay.map((col) => (
<th <th
key={col.name} key={col.name}
className="text-muted-foreground px-3 py-[7px] text-left text-[9px] font-bold tracking-[0.04em] whitespace-nowrap uppercase" className="text-muted-foreground px-3 py-[7px] text-left text-[9px] font-bold tracking-[0.04em] whitespace-nowrap uppercase"
style={{ width: col.width && col.width <= 100 ? `${col.width}%` : "auto" }} style={{ minWidth: col.width ? `${col.width}px` : "80px" }}
> >
{col.label} {col.label}
</th> </th>