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

애플리케이션 브레드크럼 경로 개선

Browse Source
This commit is contained in:
김용연
2026-02-27 12:38:04 +09:00
parent c584c28f1a
commit 6482e8d3e0
2 changed files with 59 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
devfront/src/features/clients/ClientDetailsPage.tsx
View File

@@ -1,6 +1,6 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios"; import type { AxiosError } from "axios";
import { Eye, EyeOff, Link2, RefreshCw, Save, Shield } from "lucide-react"; import { ArrowLeft, Eye, EyeOff, Link2, RefreshCw, Save, Shield } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
@@ -183,16 +183,28 @@ function ClientDetailsPage() {
return ( return (
<div className="space-y-8"> <div className="space-y-8">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground"> <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
<Link to="/clients" className="text-primary hover:underline"> <Link to="/" className="hover:text-primary">
{t("ui.dev.clients.details.breadcrumb.section", "Connected Applications")} {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
</Link> </Link>
<span>/</span> <span>/</span>
<span className="text-foreground"> <Link to="/clients" className="hover:text-primary">
{t("ui.dev.clients.details.breadcrumb.current", "App Details")} {t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
</Link>
<span>/</span>
<span>{data.client.name || clientId}</span>
<span>/</span>
<span className="text-foreground font-semibold">
{t("ui.dev.clients.details.tab.connection", "Federation")}
</span> </span>
</div> </nav>
<div className="flex flex-wrap items-start justify-between gap-3"> <div className="flex flex-wrap items-start justify-between gap-3">
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon" asChild>
<Link to="/clients">
<ArrowLeft className="h-4 w-4" />
</Link>
</Button>
<div> <div>
<h1 className="text-4xl font-black leading-tight tracking-tight"> <h1 className="text-4xl font-black leading-tight tracking-tight">
{data.client.name || data.client.id} {data.client.name || data.client.id}
@@ -204,6 +216,7 @@ function ClientDetailsPage() {
)} )}
</p> </p>
</div> </div>
</div>
<Badge <Badge
variant={data.client.status === "active" ? "info" : "muted"} variant={data.client.status === "active" ? "info" : "muted"}
className="px-3 py-1 text-xs uppercase" className="px-3 py-1 text-xs uppercase"

31
devfront/src/features/clients/ClientGeneralPage.tsx
View File

@@ -1,6 +1,6 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios"; import type { AxiosError } from "axios";
import { Plus, Save, Shield, Sparkles, Trash2, Upload } from "lucide-react"; import { ArrowLeft, Plus, Save, Shield, Sparkles, Trash2, Upload } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom"; import { Link, useNavigate, useParams } from "react-router-dom";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
@@ -261,19 +261,38 @@ function ClientGeneralPage() {
<header className="space-y-4"> <header className="space-y-4">
<div className="flex flex-wrap items-start justify-between gap-4"> <div className="flex flex-wrap items-start justify-between gap-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground"> <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
<Link to="/clients" className="text-primary hover:underline"> <Link to="/" className="hover:text-primary">
{t("ui.dev.clients.general.breadcrumb.section", "Connected Applications")} {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
</Link> </Link>
<span>/</span> <span>/</span>
<span className="text-foreground">{displayName}</span> <Link to="/clients" className="hover:text-primary">
</div> {t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
</Link>
<span>/</span>
<span>{displayName}</span>
{!isCreate && (
<>
<span>/</span>
<span className="text-foreground font-semibold">
{t("ui.dev.clients.details.tab.settings", "Settings")}
</span>
</>
)}
</nav>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon" asChild>
<Link to={isCreate ? "/clients" : `/clients/${clientId}`}>
<ArrowLeft className="h-4 w-4" />
</Link>
</Button>
<h1 className="text-3xl font-black leading-tight"> <h1 className="text-3xl font-black leading-tight">
{isCreate {isCreate
? t("ui.dev.clients.general.title_create", "Create Client") ? t("ui.dev.clients.general.title_create", "Create Client")
: t("ui.dev.clients.general.title_edit", "Client Settings")} : t("ui.dev.clients.general.title_edit", "Client Settings")}
</h1> </h1>
</div> </div>
</div>
{!isCreate && ( {!isCreate && (
<Badge <Badge
variant={status === "active" ? "info" : "muted"} variant={status === "active" ? "info" : "muted"}