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

devfront/src/features/clients/ClientDetailsPage.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 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 { Link, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
@@ -183,26 +183,39 @@ function ClientDetailsPage() {
   return (
     <div className="space-y-8">
       <div className="space-y-3">
-        <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-          <Link to="/clients" className="text-primary hover:underline">
-            {t("ui.dev.clients.details.breadcrumb.section", "Connected Applications")}
+        <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+          <Link to="/" className="hover:text-primary">
+            {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
           </Link>
           <span>/</span>
-          <span className="text-foreground">
-            {t("ui.dev.clients.details.breadcrumb.current", "App Details")}
+          <Link to="/clients" className="hover:text-primary">
+            {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>
-        </div>
+        </nav>
         <div className="flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <h1 className="text-4xl font-black leading-tight tracking-tight">
-              {data.client.name || data.client.id}
-            </h1>
-            <p className="text-muted-foreground">
-              {t(
-                "msg.dev.clients.details.subtitle",
-                "Manage OIDC credentials and endpoints.",
-              )}
-            </p>
+          <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>
+              <h1 className="text-4xl font-black leading-tight tracking-tight">
+                {data.client.name || data.client.id}
+              </h1>
+              <p className="text-muted-foreground">
+                {t(
+                  "msg.dev.clients.details.subtitle",
+                  "Manage OIDC credentials and endpoints.",
+                )}
+              </p>
+            </div>
           </div>
           <Badge
             variant={data.client.status === "active" ? "info" : "muted"}

devfront/src/features/clients/ClientGeneralPage.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 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 { Link, useNavigate, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
@@ -261,18 +261,37 @@ function ClientGeneralPage() {
       <header className="space-y-4">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div className="space-y-2">
-            <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-              <Link to="/clients" className="text-primary hover:underline">
-                {t("ui.dev.clients.general.breadcrumb.section", "Connected Applications")}
+            <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+              <Link to="/" className="hover:text-primary">
+                {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
               </Link>
               <span>/</span>
-              <span className="text-foreground">{displayName}</span>
+              <Link to="/clients" className="hover:text-primary">
+                {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">
+                {isCreate
+                  ? t("ui.dev.clients.general.title_create", "Create Client")
+                  : t("ui.dev.clients.general.title_edit", "Client Settings")}
+              </h1>
             </div>
-            <h1 className="text-3xl font-black leading-tight">
-              {isCreate
-                ? t("ui.dev.clients.general.title_create", "Create Client")
-                : t("ui.dev.clients.general.title_edit", "Client Settings")}
-            </h1>
           </div>
           {!isCreate && (
             <Badge