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={{
|
||||
textAlign: column.align || "left",
|
||||
width: columnWidth ? `${columnWidth}px` : defaultWidth,
|
||||
minWidth: '80px',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
onClick={() => column.sortable && handleSort(column.columnName)}
|
||||
|
|
@ -1058,31 +1057,24 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
|
||||
onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
|
||||
onMouseDown={(e) => {
|
||||
console.log('🖱️ 마우스 다운!', column.columnName);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const thElement = columnRefs.current[column.columnName];
|
||||
if (!thElement) {
|
||||
console.error('❌ thElement를 찾을 수 없음!');
|
||||
return;
|
||||
}
|
||||
if (!thElement) return;
|
||||
|
||||
const startX = e.clientX;
|
||||
const startWidth = columnWidth || thElement.offsetWidth;
|
||||
console.log('✅ 시작:', { startX, startWidth });
|
||||
|
||||
// 드래그 중 텍스트 선택 방지
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.cursor = 'col-resize';
|
||||
|
||||
const handleMouseMove = (moveEvent: MouseEvent) => {
|
||||
console.log('🐭 마우스 무브!', moveEvent.clientX);
|
||||
moveEvent.preventDefault();
|
||||
|
||||
const diff = moveEvent.clientX - startX;
|
||||
const newWidth = Math.max(80, startWidth + diff);
|
||||
console.log('📏 새 너비:', newWidth);
|
||||
|
||||
// 직접 DOM 스타일 변경 (리렌더링 없음)
|
||||
if (thElement) {
|
||||
|
|
@ -1091,10 +1083,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
console.log('⬆️ 마우스 업!');
|
||||
// 최종 너비를 state에 저장
|
||||
if (thElement) {
|
||||
const finalWidth = thElement.offsetWidth;
|
||||
const finalWidth = Math.max(80, thElement.offsetWidth);
|
||||
setColumnWidths(prev => ({ ...prev, [column.columnName]: finalWidth }));
|
||||
}
|
||||
|
||||
|
|
@ -1106,7 +1097,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
console.log('👂 이벤트 리스너 등록');
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue