fix: table-layout fixed로 컬럼 리사이즈 활성화

- tableLayout: 'fixed' 추가로 컬럼 너비가 DOM 스타일로 제어 가능하도록 설정
- table-layout: auto(기본값)에서는 브라우저가 자동으로 너비를 재조정하여 무시됨
- fixed 모드에서는 설정한 너비가 정확하게 적용됨
This commit is contained in:
kjs 2025-11-03 12:01:47 +09:00
parent 97ce6d3691
commit c8540b170e
1 changed files with 11 additions and 5 deletions

View File

@ -1013,6 +1013,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
style={{
borderCollapse: "collapse",
width: "100%",
tableLayout: "fixed",
}}
>
{/* 헤더 (sticky) */}
@ -1057,26 +1058,31 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
onMouseDown={(e) => {
console.log('🖱️ 리사이즈 핸들 마우스다운', column.columnName);
console.log('🖱️ 마우스 다운!', column.columnName);
e.preventDefault();
e.stopPropagation();
const thElement = columnRefs.current[column.columnName];
if (!thElement) return;
if (!thElement) {
console.error('❌ thElement를 찾을 수 없음!');
return;
}
const startX = e.clientX;
const startWidth = columnWidth || thElement.offsetWidth;
console.log('시작 너비:', startWidth);
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) {
@ -1085,8 +1091,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
};
const handleMouseUp = () => {
console.log('마우스 업!');
console.log('⬆️ 마우스 업!');
// 최종 너비를 state에 저장
if (thElement) {
const finalWidth = thElement.offsetWidth;
@ -1101,6 +1106,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
document.removeEventListener('mouseup', handleMouseUp);
};
console.log('👂 이벤트 리스너 등록');
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}}