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

perf: requestAnimationFrame으로 리사이즈 성능 최적화 

- 드래그 중 과도한 리렌더링 방지
- requestAnimationFrame으로 throttling 적용
- 초당 60프레임으로 제한하여 부드러운 리사이즈
- cancelAnimationFrame으로 중복 업데이트 방지
This commit is contained in:
kjs 2025-11-03 11:55:45 +09:00
parent 9f501aa839
commit 48cacf0409
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/lib/registry/components/table-list/TableListComponent.tsx
View File

@ -1067,16 +1067,30 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
document.body.style.userSelect = 'none';
document.body.style.cursor = 'col-resize';
let rafId: number | null = null;
const handleMouseMove = (moveEvent: MouseEvent) => {
moveEvent.preventDefault();
const diff = moveEvent.clientX - startX;
const newWidth = Math.max(80, startWidth + diff);
console.log('드래그 중:', { diff, newWidth });
setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
if (rafId) {
cancelAnimationFrame(rafId);
}
rafId = requestAnimationFrame(() => {
const diff = moveEvent.clientX - startX;
const newWidth = Math.max(80, startWidth + diff);
console.log('드래그 중:', { diff, newWidth });
setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
});
};
const handleMouseUp = () => {
console.log('마우스 업!');
if (rafId) {
cancelAnimationFrame(rafId);
}
// 텍스트 선택 복원
document.body.style.userSelect = '';
document.body.style.cursor = '';