fix: 컬럼 리사이즈 최소 너비 80px 적용 및 디버그 로그 제거
- CSS minWidth 제거 (table-layout: fixed와 충돌) - JavaScript에서 Math.max(80, width)로 최소 너비 보장 - 드래그 중과 마우스 업 시 모두 80px 최소값 적용 - 모든 디버그 로그 제거 - 깔끔하고 부드러운 리사이즈 완성
This commit is contained in:
parent
c8540b170e
commit
3ada095e43
|
|
@ -1036,7 +1036,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
style={{
|
style={{
|
||||||
textAlign: column.align || "left",
|
textAlign: column.align || "left",
|
||||||
width: columnWidth ? `${columnWidth}px` : defaultWidth,
|
width: columnWidth ? `${columnWidth}px` : defaultWidth,
|
||||||
minWidth: '80px',
|
|
||||||
userSelect: 'none'
|
userSelect: 'none'
|
||||||
}}
|
}}
|
||||||
onClick={() => column.sortable && handleSort(column.columnName)}
|
onClick={() => column.sortable && handleSort(column.columnName)}
|
||||||
|
|
@ -1058,31 +1057,24 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
|
style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
|
||||||
onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
|
onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
|
||||||
onMouseDown={(e) => {
|
onMouseDown={(e) => {
|
||||||
console.log('🖱️ 마우스 다운!', column.columnName);
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
const thElement = columnRefs.current[column.columnName];
|
const thElement = columnRefs.current[column.columnName];
|
||||||
if (!thElement) {
|
if (!thElement) return;
|
||||||
console.error('❌ thElement를 찾을 수 없음!');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const startX = e.clientX;
|
const startX = e.clientX;
|
||||||
const startWidth = columnWidth || thElement.offsetWidth;
|
const startWidth = columnWidth || thElement.offsetWidth;
|
||||||
console.log('✅ 시작:', { startX, startWidth });
|
|
||||||
|
|
||||||
// 드래그 중 텍스트 선택 방지
|
// 드래그 중 텍스트 선택 방지
|
||||||
document.body.style.userSelect = 'none';
|
document.body.style.userSelect = 'none';
|
||||||
document.body.style.cursor = 'col-resize';
|
document.body.style.cursor = 'col-resize';
|
||||||
|
|
||||||
const handleMouseMove = (moveEvent: MouseEvent) => {
|
const handleMouseMove = (moveEvent: MouseEvent) => {
|
||||||
console.log('🐭 마우스 무브!', moveEvent.clientX);
|
|
||||||
moveEvent.preventDefault();
|
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);
|
||||||
console.log('📏 새 너비:', newWidth);
|
|
||||||
|
|
||||||
// 직접 DOM 스타일 변경 (리렌더링 없음)
|
// 직접 DOM 스타일 변경 (리렌더링 없음)
|
||||||
if (thElement) {
|
if (thElement) {
|
||||||
|
|
@ -1091,10 +1083,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMouseUp = () => {
|
const handleMouseUp = () => {
|
||||||
console.log('⬆️ 마우스 업!');
|
|
||||||
// 최종 너비를 state에 저장
|
// 최종 너비를 state에 저장
|
||||||
if (thElement) {
|
if (thElement) {
|
||||||
const finalWidth = thElement.offsetWidth;
|
const finalWidth = Math.max(80, thElement.offsetWidth);
|
||||||
setColumnWidths(prev => ({ ...prev, [column.columnName]: finalWidth }));
|
setColumnWidths(prev => ({ ...prev, [column.columnName]: finalWidth }));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1106,7 +1097,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
document.removeEventListener('mouseup', handleMouseUp);
|
document.removeEventListener('mouseup', handleMouseUp);
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log('👂 이벤트 리스너 등록');
|
|
||||||
document.addEventListener('mousemove', handleMouseMove);
|
document.addEventListener('mousemove', handleMouseMove);
|
||||||
document.addEventListener('mouseup', handleMouseUp);
|
document.addEventListener('mouseup', handleMouseUp);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue