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

devfront/src/features/clients/ClientDetailsPage.tsx

@@ -38,6 +38,7 @@ import {
 } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
+import { ClientDetailTabs } from "./ClientDetailTabs";
 
 function ClientDetailsPage() {
   const params = useParams();
@@ -253,32 +254,7 @@ function ClientDetailsPage() {
                 : t("msg.common.loading", "Loading...")}
           </Badge>
         </div>
-        <div className="flex gap-6 border-b border-border">
-          <Link
-            to={`/clients/${clientId}`}
-            className="border-b-2 border-primary pb-3 text-sm font-bold text-primary"
-          >
-            {t("ui.dev.clients.details.tab.connection", "Federation")}
-          </Link>
-          <Link
-            to={`/clients/${clientId}/consents`}
-            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
-          >
-            {t("ui.dev.clients.details.tab.consents", "Consent & Users")}
-          </Link>
-          <Link
-            to={`/clients/${clientId}/settings`}
-            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
-          >
-            {t("ui.dev.clients.details.tab.settings", "Settings")}
-          </Link>
-          <Link
-            to={`/clients/${clientId}/relationships`}
-            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
-          >
-            {t("ui.dev.clients.details.tab.relationships", "Relationships")}
-          </Link>
-        </div>
+        <ClientDetailTabs activeTab="connection" clientId={clientId} />
       </div>
 
       <div className="grid gap-8 lg:grid-cols-2">