fix: 컬럼 리사이즈 최소 너비 80px 적용 및 디버그 로그 제거

- CSS minWidth 제거 (table-layout: fixed와 충돌)
- JavaScript에서 Math.max(80, width)로 최소 너비 보장
- 드래그 중과 마우스 업 시 모두 80px 최소값 적용
- 모든 디버그 로그 제거
- 깔끔하고 부드러운 리사이즈 완성
This commit is contained in:
kjs 2025-11-03 12:06:57 +09:00
parent c8540b170e
commit 3ada095e43
1 changed files with 2 additions and 12 deletions

View File

@ -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);
}} }}