kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

style: make page headers sticky and improve table header contrast/visibility

Browse Source
This commit is contained in:
조찬영
2026-03-19 13:23:02 +09:00
parent 926c26b1ad
commit aff21f195b
12 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
adminfront/src/components/ui/table.tsx
View File

@@ -69,7 +69,7 @@ const TableHead = React.forwardRef<
<th <th
ref={ref} ref={ref}
className={cn( className={cn(
"h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-muted-foreground align-middle", "h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-foreground align-middle",
className, className,
)} )}
{...props} {...props}

4
adminfront/src/features/api-keys/ApiKeyListPage.tsx
View File

@@ -64,7 +64,7 @@ function ApiKeyListPage() {
return ( return (
<div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]"> <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
<header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0"> <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]"> <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
<span> <span>
@@ -129,7 +129,7 @@ function ApiKeyListPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead> <TableHead>
{t("ui.admin.api_keys.list.table.name", "NAME")} {t("ui.admin.api_keys.list.table.name", "NAME")}

4
adminfront/src/features/audit/AuditLogsPage.tsx
View File

@@ -159,7 +159,7 @@ function AuditLogsPage() {
return ( return (
<div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]"> <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
<header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0"> <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
<div> <div>
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]"> <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
<span>{t("ui.admin.audit.breadcrumb.section", "Audit")}</span> <span>{t("ui.admin.audit.breadcrumb.section", "Audit")}</span>
@@ -267,7 +267,7 @@ function AuditLogsPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table className="table-fixed"> <Table className="table-fixed">
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead className="w-[140px]"> <TableHead className="w-[140px]">
{t("ui.admin.audit.table.time", "TIME")} {t("ui.admin.audit.table.time", "TIME")}

4
adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
View File

@@ -236,7 +236,7 @@ export function TenantAdminsAndOwnersTab() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead className="w-[250px] font-bold"> <TableHead className="w-[250px] font-bold">
{t("ui.admin.tenants.owners.table_name", "이름")} {t("ui.admin.tenants.owners.table_name", "이름")}
@@ -365,7 +365,7 @@ export function TenantAdminsAndOwnersTab() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead className="w-[250px] font-bold"> <TableHead className="w-[250px] font-bold">
{t("ui.admin.tenants.admins.table_name", "이름")} {t("ui.admin.tenants.admins.table_name", "이름")}

4
adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
View File

@@ -462,7 +462,7 @@ function TenantGroupsPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead> <TableHead>
{t("ui.admin.groups.table.name", "NAME")} {t("ui.admin.groups.table.name", "NAME")}
@@ -559,7 +559,7 @@ function TenantGroupsPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead> <TableHead>
{t("ui.admin.groups.members.table.name", "이름")} {t("ui.admin.groups.members.table.name", "이름")}

4
adminfront/src/features/tenants/routes/TenantListPage.tsx
View File

@@ -117,7 +117,7 @@ function TenantListPage() {
return ( return (
<div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]"> <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
<header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0"> <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]"> <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
<span>{t("ui.admin.tenants.breadcrumb.section", "Tenants")}</span> <span>{t("ui.admin.tenants.breadcrumb.section", "Tenants")}</span>
@@ -182,7 +182,7 @@ function TenantListPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead> <TableHead>
{t("ui.admin.tenants.table.name", "NAME")} {t("ui.admin.tenants.table.name", "NAME")}

2
adminfront/src/features/tenants/routes/TenantSubTenantsPage.tsx
View File

@@ -61,7 +61,7 @@ function TenantSubTenantsPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead> <TableHead>
{t("ui.admin.tenants.sub.table.name", "NAME")} {t("ui.admin.tenants.sub.table.name", "NAME")}

2
adminfront/src/features/tenants/routes/TenantUsersPage.tsx
View File

@@ -55,7 +55,7 @@ function TenantUsersPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead> <TableHead>
{t("ui.admin.tenants.members.table.name", "NAME")} {t("ui.admin.tenants.members.table.name", "NAME")}

4
adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
View File

@@ -36,7 +36,7 @@ export default function GlobalUserGroupListPage() {
return ( return (
<div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]"> <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
<header className="flex items-start justify-between flex-shrink-0"> <header className="flex items-start justify-between flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
<div className="space-y-1"> <div className="space-y-1">
<h2 className="text-3xl font-bold tracking-tight">User Groups</h2> <h2 className="text-3xl font-bold tracking-tight">User Groups</h2>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
@@ -87,7 +87,7 @@ function TenantGroupCard({ tenant }: { tenant: TenantSummary }) {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar max-h-[400px]"> <div className="flex-1 overflow-auto relative custom-scrollbar max-h-[400px]">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead className="w-[250px]">그룹명</TableHead> <TableHead className="w-[250px]">그룹명</TableHead>
<TableHead>설명</TableHead> <TableHead>설명</TableHead>

4
adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
View File

@@ -228,7 +228,7 @@ const MemberTable: React.FC<{
}> = ({ members, isLoading, onRefresh, showTenant }) => ( }> = ({ members, isLoading, onRefresh, showTenant }) => (
<div className="border rounded-md overflow-hidden"> <div className="border rounded-md overflow-hidden">
<Table> <Table>
<TableHeader className="bg-muted/30"> <TableHeader className="bg-secondary/100 shadow-sm z-10">
<TableRow> <TableRow>
<TableHead className="h-9"> <TableHead className="h-9">
{t("ui.admin.users.table.name", "NAME")} {t("ui.admin.users.table.name", "NAME")}
@@ -1106,7 +1106,7 @@ function TenantUserGroupsTab() {
<div className="flex-1 rounded-md border-0 overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border-0 overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead className="pl-6 w-[40%]"> <TableHead className="pl-6 w-[40%]">
{t("ui.admin.tenants.table.name", "NAME")} {t("ui.admin.tenants.table.name", "NAME")}

6
adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
View File

@@ -212,7 +212,7 @@ export function UserGroupDetailPage() {
return ( return (
<div className="space-y-8 flex flex-col h-[calc(100vh-theme(spacing.32))]"> <div className="space-y-8 flex flex-col h-[calc(100vh-theme(spacing.32))]">
<header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0"> <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<Link <Link
@@ -351,7 +351,7 @@ export function UserGroupDetailPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead className="font-bold"> <TableHead className="font-bold">
{t("ui.admin.users.list.table.name_email", "사용자")} {t("ui.admin.users.list.table.name_email", "사용자")}
@@ -536,7 +536,7 @@ export function UserGroupDetailPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead className="font-bold"> <TableHead className="font-bold">
{t("ui.admin.users.detail.form.tenant", "대상 테넌트")} {t("ui.admin.users.detail.form.tenant", "대상 테넌트")}

4
adminfront/src/features/users/UserListPage.tsx
View File

@@ -255,7 +255,7 @@ function UserListPage() {
return ( return (
<div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]"> <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
<header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0"> <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]"> <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
<span>{t("ui.admin.users.list.breadcrumb.section", "Users")}</span> <span>{t("ui.admin.users.list.breadcrumb.section", "Users")}</span>
@@ -420,7 +420,7 @@ function UserListPage() {
<div className="flex-1 rounded-md border overflow-hidden flex flex-col"> <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
<div className="flex-1 overflow-auto relative custom-scrollbar"> <div className="flex-1 overflow-auto relative custom-scrollbar">
<Table> <Table>
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm"> <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
<TableRow> <TableRow>
<TableHead className="w-12"> <TableHead className="w-12">
<input <input