devfront RP 상세 탭 i18n 및 순서 일관화

devfront/src/features/clients/ClientRelationsPage.tsx

@@ -30,6 +30,7 @@ import {
   removeClientRelation,
 } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
+import { ClientDetailTabs } from "./ClientDetailTabs";
 
 const relationOptions = [
   "admins",
@@ -48,9 +49,8 @@ function ClientRelationsPage() {
   const params = useParams();
   const queryClient = useQueryClient();
   const clientId = params.id ?? "";
-  const [relation, setRelation] = useState<(typeof relationOptions)[number]>(
-    "config_editor",
-  );
+  const [relation, setRelation] =
+    useState<(typeof relationOptions)[number]>("config_editor");
   const [userId, setUserId] = useState("");
 
   const { data: clientData } = useQuery({
@@ -86,7 +86,9 @@ function ClientRelationsPage() {
         userId: userId.trim(),
       }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["client-relations", clientId] });
+      queryClient.invalidateQueries({
+        queryKey: ["client-relations", clientId],
+      });
       setUserId("");
       toast(
         t(
@@ -115,7 +117,9 @@ function ClientRelationsPage() {
     mutationFn: (payload: { relation: string; subject: string }) =>
       removeClientRelation(clientId, payload.relation, payload.subject),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["client-relations", clientId] });
+      queryClient.invalidateQueries({
+        queryKey: ["client-relations", clientId],
+      });
       toast(
         t(
           "msg.dev.clients.relationships.removed",
@@ -191,10 +195,7 @@ function ClientRelationsPage() {
               <span>{clientData?.client?.name || clientId}</span>
               <span>/</span>
               <span className="text-foreground font-semibold">
-                {t(
-                  "ui.dev.clients.details.tab.relationships",
-                  "Relationships",
-                )}
+                {t("ui.dev.clients.details.tab.relationships", "Relationships")}
               </span>
             </nav>
             <div className="flex items-center gap-2">
@@ -231,29 +232,7 @@ function ClientRelationsPage() {
             </Badge>
           </div>
         </div>
-        <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
-          <Link
-            to={`/clients/${clientId}`}
-            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-          >
-            {t("ui.dev.clients.details.tab.connection", "Federation")}
-          </Link>
-          <Link
-            to={`/clients/${clientId}/consents`}
-            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-          >
-            {t("ui.dev.clients.details.tab.consents", "Consent & Users")}
-          </Link>
-          <Link
-            to={`/clients/${clientId}/settings`}
-            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-          >
-            {t("ui.dev.clients.details.tab.settings", "Settings")}
-          </Link>
-          <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
-            {t("ui.dev.clients.details.tab.relationships", "Relationships")}
-          </span>
-        </div>
+        <ClientDetailTabs activeTab="relationships" clientId={clientId} />
       </header>
 
       <Card className="glass-panel">