fix: table-layout fixed로 컬럼 리사이즈 활성화
- tableLayout: 'fixed' 추가로 컬럼 너비가 DOM 스타일로 제어 가능하도록 설정 - table-layout: auto(기본값)에서는 브라우저가 자동으로 너비를 재조정하여 무시됨 - fixed 모드에서는 설정한 너비가 정확하게 적용됨
This commit is contained in:
parent
97ce6d3691
commit
c8540b170e
|
|
@ -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);
|
||||
}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue