fix: 체크박스 컬럼 패딩 제거 및 중앙 정렬

- 체크박스 컬럼에서 px 패딩 제거 (px-0)
- 체크박스 컬럼 중앙 정렬 (textAlign: center)
- 일반 컬럼은 기존 패딩 유지
- 체크박스와 다른 컬럼의 시각적 구분 명확화
- 불필요한 공간 제거로 깔끔한 UI
This commit is contained in:
kjs 2025-11-03 12:28:30 +09:00
parent 6aa25fa852
commit 5376d7198d
1 changed files with 6 additions and 4 deletions

View File

@ -1062,11 +1062,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
key={column.columnName}
ref={(el) => (columnRefs.current[column.columnName] = el)}
className={cn(
"relative h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
"relative h-10 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:text-sm sm:whitespace-nowrap",
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3",
column.sortable && "cursor-pointer"
)}
style={{
textAlign: column.align || "left",
textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
@ -1194,10 +1195,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<td
key={column.columnName}
className={cn(
"h-14 px-2 py-2 text-xs text-foreground overflow-hidden text-ellipsis sm:h-16 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap"
"h-14 text-xs text-foreground overflow-hidden text-ellipsis sm:h-16 sm:text-sm sm:whitespace-nowrap",
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
)}
style={{
textAlign: column.align || "left",
textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,