1
0
forked from baron/baron-sso

상태 뱃지 스타일(UI) 통일

This commit is contained in:
2026-02-27 11:23:06 +09:00
parent f6647230f7
commit c584c28f1a
5 changed files with 15 additions and 13 deletions

View File

@@ -17,6 +17,8 @@ const badgeVariants = cva(
"border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300", "border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300",
warning: warning:
"border-transparent bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200", "border-transparent bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200",
info:
"border-transparent bg-blue-500 text-white hover:bg-blue-500/90",
}, },
}, },
defaultVariants: { defaultVariants: {

View File

@@ -185,11 +185,11 @@ function ClientDetailsPage() {
<div className="space-y-3"> <div className="space-y-3">
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground"> <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
<Link to="/clients" className="text-primary hover:underline"> <Link to="/clients" className="text-primary hover:underline">
{t("ui.dev.clients.details.breadcrumb.section", "Apps")} {t("ui.dev.clients.details.breadcrumb.section", "Connected Applications")}
</Link> </Link>
<span>/</span> <span>/</span>
<span className="text-foreground"> <span className="text-foreground">
{t("ui.dev.clients.details.breadcrumb.current", "클라이언트 상세")} {t("ui.dev.clients.details.breadcrumb.current", "App Details")}
</span> </span>
</div> </div>
<div className="flex flex-wrap items-start justify-between gap-3"> <div className="flex flex-wrap items-start justify-between gap-3">
@@ -200,12 +200,12 @@ function ClientDetailsPage() {
<p className="text-muted-foreground"> <p className="text-muted-foreground">
{t( {t(
"msg.dev.clients.details.subtitle", "msg.dev.clients.details.subtitle",
"OIDC 자격 증명과 엔드포인트를 관리합니다.", "Manage OIDC credentials and endpoints.",
)} )}
</p> </p>
</div> </div>
<Badge <Badge
variant={data.client.status === "active" ? "success" : "muted"} variant={data.client.status === "active" ? "info" : "muted"}
className="px-3 py-1 text-xs uppercase" className="px-3 py-1 text-xs uppercase"
> >
{data.client.status === "active" {data.client.status === "active"
@@ -241,7 +241,7 @@ function ClientDetailsPage() {
<h2 className="text-xl font-bold"> <h2 className="text-xl font-bold">
{t( {t(
"ui.dev.clients.details.credentials.title", "ui.dev.clients.details.credentials.title",
"클라이언트 자격 증명", "Client Credentials",
)} )}
</h2> </h2>
<Card className="glass-panel"> <Card className="glass-panel">

View File

@@ -263,7 +263,7 @@ function ClientGeneralPage() {
<div className="space-y-2"> <div className="space-y-2">
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground"> <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
<Link to="/clients" className="text-primary hover:underline"> <Link to="/clients" className="text-primary hover:underline">
{t("ui.dev.clients.general.breadcrumb.section", "Applications")} {t("ui.dev.clients.general.breadcrumb.section", "Connected Applications")}
</Link> </Link>
<span>/</span> <span>/</span>
<span className="text-foreground">{displayName}</span> <span className="text-foreground">{displayName}</span>
@@ -276,7 +276,7 @@ function ClientGeneralPage() {
</div> </div>
{!isCreate && ( {!isCreate && (
<Badge <Badge
variant={status === "active" ? "success" : "muted"} variant={status === "active" ? "info" : "muted"}
className="px-3 py-1 text-xs uppercase" className="px-3 py-1 text-xs uppercase"
> >
{status === "active" {status === "active"
@@ -292,7 +292,7 @@ function ClientGeneralPage() {
to={`/clients/${clientId}`} to={`/clients/${clientId}`}
className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground" className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
> >
{t("ui.dev.clients.details.tab.connection", "Connection")} {t("ui.dev.clients.details.tab.connection", "Federation")}
</Link> </Link>
<Link <Link
to={`/clients/${clientId}/consents`} to={`/clients/${clientId}/consents`}

View File

@@ -81,7 +81,7 @@ function ClientsPage() {
const stats: StatItem[] = [ const stats: StatItem[] = [
{ {
labelKey: "ui.dev.clients.stats.total", labelKey: "ui.dev.clients.stats.total",
labelFallback: "총 애플리케이션", labelFallback: "Total Applications",
value: totalClients.toString(), value: totalClients.toString(),
deltaKey: "ui.dev.clients.stats.realtime", deltaKey: "ui.dev.clients.stats.realtime",
deltaFallback: "Realtime", deltaFallback: "Realtime",
@@ -89,7 +89,7 @@ function ClientsPage() {
}, },
{ {
labelKey: "ui.dev.clients.stats.active_sessions", labelKey: "ui.dev.clients.stats.active_sessions",
labelFallback: "활성 세션", labelFallback: "Active Sessions",
value: activeClients.toString(), value: activeClients.toString(),
deltaKey: "ui.dev.clients.stats.realtime", deltaKey: "ui.dev.clients.stats.realtime",
deltaFallback: "Realtime", deltaFallback: "Realtime",
@@ -97,7 +97,7 @@ function ClientsPage() {
}, },
{ {
labelKey: "ui.dev.clients.stats.auth_failures", labelKey: "ui.dev.clients.stats.auth_failures",
labelFallback: "인증 실패 (24h)", labelFallback: "Auth Failures (24h)",
value: "0", value: "0",
deltaKey: "ui.dev.clients.stats.stable", deltaKey: "ui.dev.clients.stats.stable",
deltaFallback: "Stable", deltaFallback: "Stable",
@@ -364,7 +364,7 @@ function ClientsPage() {
</TableCell> </TableCell>
<TableCell> <TableCell>
<Badge <Badge
variant={client.status === "active" ? "success" : "muted"} variant={client.status === "active" ? "info" : "muted"}
className="px-3 py-1 text-xs uppercase" className="px-3 py-1 text-xs uppercase"
> >
{client.status === "active" {client.status === "active"

View File

@@ -267,7 +267,7 @@ export function ClientFederationPage() {
<span <span
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${ className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${
config.status === "active" config.status === "active"
? "bg-emerald-500/10 text-emerald-500" ? "bg-blue-500 text-white"
: "bg-muted text-muted-foreground" : "bg-muted text-muted-foreground"
}`} }`}
> >