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

View File

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