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={{
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);
}}