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

devfront/src/features/clients/ClientDetailTabs.tsx

@@ -0,0 +1,54 @@
+import { Link } from "react-router-dom";
+import { t } from "../../lib/i18n";
+import { cn } from "../../lib/utils";
+
+type ClientDetailTab = "connection" | "consents" | "settings" | "relationships";
+
+interface ClientDetailTabsProps {
+  activeTab: ClientDetailTab;
+  clientId: string;
+}
+
+const tabOrder: Array<{
+  key: ClientDetailTab;
+  href: (clientId: string) => string;
+}> = [
+  { key: "connection", href: (clientId) => `/clients/${clientId}` },
+  { key: "consents", href: (clientId) => `/clients/${clientId}/consents` },
+  { key: "settings", href: (clientId) => `/clients/${clientId}/settings` },
+  {
+    key: "relationships",
+    href: (clientId) => `/clients/${clientId}/relationships`,
+  },
+];
+
+export function ClientDetailTabs({
+  activeTab,
+  clientId,
+}: ClientDetailTabsProps) {
+  return (
+    <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
+      {tabOrder.map((tab) => {
+        const isActive = tab.key === activeTab;
+        return isActive ? (
+          <span
+            key={tab.key}
+            className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary"
+          >
+            {t(`ui.dev.clients.details.tab.${tab.key}`)}
+          </span>
+        ) : (
+          <Link
+            key={tab.key}
+            to={tab.href(clientId)}
+            className={cn(
+              "whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {t(`ui.dev.clients.details.tab.${tab.key}`)}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}