chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

테이블 헤더 및 행 배경색 통일

Browse Source 
- 모든 테이블 헤더의 회색 배경 제거 (bg-muted/50 → bg-background)
- 모든 테이블 행의 홀수 행 회색 배경 제거 (모든 행을 흰색 배경으로 통일)
- 호버 시에만 회색 배경이 나타나도록 통일
- TableListComponent, SingleTableWithSticky, 모든 관리자 테이블 컴포넌트에 적용
- 테이블 구조 표준화 문서 업데이트
This commit is contained in:
kjs
2025-10-30 15:49:23 +09:00
parent 4010273d67
commit 21af6c5c17
11 changed files with 121 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/admin/ColumnDefinitionTable.tsx
View File

@@ -166,7 +166,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
<div className="overflow-hidden bg-card shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
<TableRow>
<TableHead className="h-12 w-[150px] text-sm font-semibold">
컬럼명 <span className="text-destructive">*</span>
</TableHead>

24
frontend/components/admin/CompanyTable.tsx
View File

@@ -52,7 +52,7 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
<div className="hidden bg-card shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
<TableRow>
{COMPANY_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} className="h-12 text-sm font-semibold">
{column.label}
@@ -131,17 +131,17 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
{/* 데스크톱 테이블 뷰 (lg 이상) */}
<div className="hidden bg-card shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
{COMPANY_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} className="h-12 text-sm font-semibold">
{column.label}
</TableHead>
))}
<TableHead className="h-12 text-sm font-semibold">디스크 사용량</TableHead>
<TableHead className="h-12 text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableHeader>
<TableRow>
{COMPANY_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} className="h-12 text-sm font-semibold">
{column.label}
</TableHead>
))}
<TableHead className="h-12 text-sm font-semibold">디스크 사용량</TableHead>
<TableHead className="h-12 text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{companies.map((company) => (
<TableRow key={company.regdate + company.company_code} className="transition-colors hover:bg-muted/50">

2
frontend/components/admin/MenuPermissionsTable.tsx
View File

@@ -282,7 +282,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
<div className="bg-card hidden shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
<TableRow>
<TableHead className="h-12 w-[40%] text-sm font-semibold">메뉴</TableHead>
<TableHead className="h-12 w-[15%] text-center text-sm font-semibold">
<div className="flex flex-col items-center gap-1">

18
frontend/components/admin/MenuTable.tsx
View File

@@ -148,9 +148,9 @@ export const MenuTable: React.FC<MenuTableProps> = ({
<div className="bg-card shadow-sm">
<div className="max-h-[calc(100vh-350px)] overflow-auto">
<Table noWrapper>
<TableHeader className="sticky top-0 z-20 bg-muted/50 shadow-sm">
<TableRow className="bg-muted/50 hover:bg-muted/50">
<TableHead className="h-12 w-12 bg-muted/50 text-sm font-semibold">
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
<TableRow>
<TableHead className="h-12 w-12 text-sm font-semibold">
<input
type="checkbox"
checked={
@@ -161,22 +161,22 @@ export const MenuTable: React.FC<MenuTableProps> = ({
className="h-4 w-4"
/>
</TableHead>
<TableHead className="h-12 w-1/3 bg-muted/50 text-sm font-semibold">
<TableHead className="h-12 w-1/3 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_NAME)}
</TableHead>
<TableHead className="h-12 w-16 bg-muted/50 text-sm font-semibold">
<TableHead className="h-12 w-16 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_SEQUENCE)}
</TableHead>
<TableHead className="h-12 w-24 bg-muted/50 text-sm font-semibold">
<TableHead className="h-12 w-24 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_COMPANY)}
</TableHead>
<TableHead className="h-12 w-48 bg-muted/50 text-sm font-semibold">
<TableHead className="h-12 w-48 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_URL)}
</TableHead>
<TableHead className="h-12 w-20 bg-muted/50 text-sm font-semibold">
<TableHead className="h-12 w-20 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_STATUS)}
</TableHead>
<TableHead className="h-12 w-32 bg-muted/50 text-sm font-semibold">
<TableHead className="h-12 w-32 text-sm font-semibold">
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_ACTIONS)}
</TableHead>
</TableRow>

2
frontend/components/admin/RestApiConnectionList.tsx
View File

@@ -265,7 +265,7 @@ export function RestApiConnectionList() {
<div className="bg-card shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
<TableRow>
<TableHead className="h-12 text-sm font-semibold">연결명</TableHead>
<TableHead className="h-12 text-sm font-semibold">기본 URL</TableHead>
<TableHead className="h-12 text-sm font-semibold">인증 타입</TableHead>

4
frontend/components/admin/UserAuthTable.tsx
View File

@@ -78,7 +78,7 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
<div className="bg-card hidden shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50">
<TableRow>
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
@@ -136,7 +136,7 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
<div className="bg-card hidden shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
<TableRow>
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>

22
frontend/components/admin/UserTable.tsx
View File

@@ -111,7 +111,7 @@ export function UserTable({
<div className="bg-card hidden shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50">
<TableRow>
{USER_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
{column.label}
@@ -188,16 +188,16 @@ export function UserTable({
{/* 데스크톱 테이블 뷰 (lg 이상) */}
<div className="bg-card hidden shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
{USER_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
{column.label}
</TableHead>
))}
<TableHead className="h-12 w-[200px] text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableHeader>
<TableRow>
{USER_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
{column.label}
</TableHead>
))}
<TableHead className="h-12 w-[200px] text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{users.map((user, index) => (
<TableRow key={`${user.userId}-${index}`} className="hover:bg-muted/50 transition-colors">

10
frontend/components/screen/widgets/FlowWidget.tsx
View File

@@ -853,7 +853,7 @@ export function FlowWidget({
<TableHeader>
<TableRow className="hover:bg-muted/50">
{allowDataMove && (
<TableHead className="bg-background sticky top-0 left-0 z-20 w-12 border-b px-3 py-2 text-center shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
<TableHead className="bg-background sticky top-0 left-0 z-20 w-12 border-b px-6 py-3 text-center shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
<Checkbox
checked={selectedRows.size === stepData.length && stepData.length > 0}
onCheckedChange={toggleAllRows}
@@ -863,7 +863,7 @@ export function FlowWidget({
{stepDataColumns.map((col) => (
<TableHead
key={col}
className="bg-background sticky top-0 z-10 border-b px-3 py-2 text-xs font-semibold whitespace-nowrap shadow-[0_1px_0_0_rgb(0,0,0,0.1)] sm:text-sm"
className="bg-background sticky top-0 z-10 border-b px-6 py-3 text-sm font-semibold whitespace-nowrap shadow-[0_1px_0_0_rgb(0,0,0,0.1)]"
>
{columnLabels[col] || col}
</TableHead>
@@ -876,10 +876,10 @@ export function FlowWidget({
return (
<TableRow
key={actualIndex}
className={`hover:bg-muted/50 ${selectedRows.has(actualIndex) ? "bg-primary/5" : ""}`}
className={`h-16 transition-colors hover:bg-muted/50 ${selectedRows.has(actualIndex) ? "bg-primary/5" : ""}`}
>
{allowDataMove && (
<TableCell className="bg-background sticky left-0 z-10 border-b px-3 py-2 text-center">
<TableCell className="bg-background sticky left-0 z-10 border-b px-6 py-3 text-center">
<Checkbox
checked={selectedRows.has(actualIndex)}
onCheckedChange={() => toggleRowSelection(actualIndex)}
@@ -887,7 +887,7 @@ export function FlowWidget({
</TableCell>
)}
{stepDataColumns.map((col) => (
<TableCell key={col} className="border-b px-3 py-2 text-xs whitespace-nowrap sm:text-sm">
<TableCell key={col} className="h-16 border-b px-6 py-3 text-sm whitespace-nowrap">
{row[col] !== null && row[col] !== undefined ? (
String(row[col])
) : (