kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 리스트 헤더 스타일 개선 - 그라데이션 배경, 굵은 테두리, 호버 효과 추가

This commit is contained in:
kjs 2025-11-03 13:33:13 +09:00
parent f9bd7bbcb3
commit 40efb391ea
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/screen/InteractiveDataTable.tsx
View File

@ -1954,7 +1954,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<>
<div className="overflow-hidden rounded-lg border border-gray-200/60 bg-white shadow-sm">
<Table style={{ tableLayout: 'fixed' }}>
<TableHeader>
<TableHeader className="bg-gradient-to-b from-muted/50 to-muted border-b-2 border-primary/20">
<TableRow>
{/* 체크박스 컬럼 (삭제 기능이 활성화된 경우) */}
{component.enableDelete && (
@ -1975,7 +1975,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<TableHead
key={column.id}
ref={(el) => (columnRefs.current[column.id] = el)}
className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none text-center"
className="relative px-4 font-bold text-foreground/90 select-none text-center hover:bg-muted/70 transition-colors"
style={{
width: columnWidth ? `${columnWidth}px` : undefined,
userSelect: 'none'

8
frontend/lib/registry/components/table-list/TableListComponent.tsx
View File

@ -1052,9 +1052,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
>
{/* 헤더 (sticky) */}
<thead
className="sticky top-0 z-10 bg-background"
className="sticky top-0 z-10"
>
<tr className="h-10 border-b border-border sm:h-12">
<tr className="h-10 border-b-2 border-primary/20 bg-gradient-to-b from-muted/50 to-muted sm:h-12">
{visibleColumns.map((column, columnIndex) => {
const columnWidth = columnWidths[column.columnName];
@ -1063,9 +1063,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
key={column.columnName}
ref={(el) => (columnRefs.current[column.columnName] = el)}
className={cn(
"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",
"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",
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3",
column.sortable && "cursor-pointer"
column.sortable && "cursor-pointer hover:bg-muted/70 transition-colors"
)}
style={{
textAlign: column.columnName === "__checkbox__" ? "center" : "center",