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

fix: 컬럼 리사이즈 중 텍스트 선택 방지 

- 컬럼 헤더에 select-none, userSelect: 'none' 추가
- 드래그 중 document.body.userSelect = 'none'으로 전역 텍스트 선택 차단
- 드래그 완료 후 userSelect 복원
- 드래그 중 cursor를 col-resize로 고정하여 UX 개선
This commit is contained in:
kjs 2025-11-03 10:49:09 +09:00
parent b40e3d4b8b
commit a3a4664bb0
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/components/screen/InteractiveDataTable.tsx
View File

@ -1940,10 +1940,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return ( return (
<TableHead <TableHead
key={column.id} key={column.id}
className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700" className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none"
style={{ style={{
width: columnWidth ? `${columnWidth}px` : defaultWidth, width: columnWidth ? `${columnWidth}px` : defaultWidth,
minWidth: '80px' minWidth: '80px',
userSelect: 'none'
}} }}
> >
{column.label} {column.label}
@ -1956,13 +1957,22 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
const startX = e.clientX; const startX = e.clientX;
const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100); const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
// 드래그 중 텍스트 선택 방지
document.body.style.userSelect = 'none';
document.body.style.cursor = 'col-resize';
const handleMouseMove = (moveEvent: MouseEvent) => { const handleMouseMove = (moveEvent: MouseEvent) => {
moveEvent.preventDefault();
const diff = moveEvent.clientX - startX; const diff = moveEvent.clientX - startX;
const newWidth = Math.max(80, startWidth + diff); const newWidth = Math.max(80, startWidth + diff);
setColumnWidths(prev => ({ ...prev, [column.id]: newWidth })); setColumnWidths(prev => ({ ...prev, [column.id]: newWidth }));
}; };
const handleMouseUp = () => { const handleMouseUp = () => {
// 텍스트 선택 복원
document.body.style.userSelect = '';
document.body.style.cursor = '';
document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp); document.removeEventListener('mouseup', handleMouseUp);
}; };