fix: 컬럼 리사이즈 중 텍스트 선택 방지
- 컬럼 헤더에 select-none, userSelect: 'none' 추가 - 드래그 중 document.body.userSelect = 'none'으로 전역 텍스트 선택 차단 - 드래그 완료 후 userSelect 복원 - 드래그 중 cursor를 col-resize로 고정하여 UX 개선
This commit is contained in:
parent
b40e3d4b8b
commit
a3a4664bb0
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue