fix: 텍스트 줄바꿈 문제 방지 - 모든 셀에 whitespace-nowrap 적용

- 테이블 헤더와 데이터 셀 모두에 whitespace-nowrap 적용
- 모바일에서도 텍스트가 2줄로 깨지지 않음
- overflow-hidden + text-ellipsis로 긴 텍스트 처리
- TableListComponent와 InteractiveDataTable 모두 적용

이제 화면을 줄여도 텍스트가 항상 1줄로 유지됨
This commit is contained in:
kjs 2025-11-03 13:34:02 +09:00
parent 40efb391ea
commit 714511c3cf
2 changed files with 3 additions and 3 deletions

View File

@ -2080,7 +2080,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return (
<TableCell
key={column.id}
className="px-4 text-sm font-medium text-gray-900"
className="px-4 text-sm font-medium text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis"
style={{ textAlign: isNumeric ? 'right' : 'left' }}
>
{formatCellValue(row[column.columnName], column, row)}

View File

@ -1063,7 +1063,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
key={column.columnName}
ref={(el) => (columnRefs.current[column.columnName] = el)}
className={cn(
"relative h-10 text-xs font-bold text-foreground/90 overflow-hidden text-ellipsis select-none sm:h-12 sm:text-sm sm:whitespace-nowrap",
"relative h-10 text-xs font-bold text-foreground/90 overflow-hidden text-ellipsis whitespace-nowrap select-none sm:h-12 sm:text-sm",
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3",
column.sortable && "cursor-pointer hover:bg-muted/70 transition-colors"
)}
@ -1210,7 +1210,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<td
key={column.columnName}
className={cn(
"h-14 text-xs text-foreground overflow-hidden text-ellipsis sm:h-16 sm:text-sm sm:whitespace-nowrap",
"h-14 text-xs text-foreground overflow-hidden text-ellipsis whitespace-nowrap sm:h-16 sm:text-sm",
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
)}
style={{