프론트엔드 UI/UX를 전면 개편

adminfront/src/features/tenants/routes/TenantDetailPage.tsx

@@ -3,6 +3,7 @@ import { ArrowLeft } from "lucide-react";
 import { Link, Outlet, useLocation, useParams } from "react-router-dom";
 import { Badge } from "../../../components/ui/badge";
 import { fetchTenant } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
 
 function TenantDetailPage() {
   const params = useParams<{ tenantId: string }>();
@@ -17,88 +18,91 @@ function TenantDetailPage() {
 
   const isFederationTab = location.pathname.includes("/federation");
   const isAdminTab = location.pathname.includes("/admins");
-  const isUserGroupsTab = location.pathname.includes("/user-groups");
+  const isOrganizationTab = location.pathname.includes("/organization");
 
   return (
     <div className="space-y-8">
       <header className="flex flex-wrap items-start justify-between gap-4">
         <div className="space-y-2">
           <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
-            <Link to="/tenants" className="inline-flex items-center gap-2">
+            <Link to="/tenants" className="inline-flex items-center gap-2 hover:text-foreground transition-colors">
               <ArrowLeft size={14} />
-              Tenants
+              {t("ui.admin.tenants.detail.breadcrumb_list", "테넌트 목록")}
             </Link>
             <span>/</span>
-            <span className="text-foreground">Detail</span>
+            <span className="text-foreground">{t("ui.admin.tenants.detail.title", "상세")}</span>
           </div>
           <h2 className="text-3xl font-semibold">
-            {tenantQuery.data?.name ?? "Loading Tenant..."}
+            {tenantQuery.data?.name ?? t("ui.admin.tenants.detail.loading", "불러오는 중...")}
           </h2>
           <p className="text-sm text-[var(--color-muted)]">
-            Edit tenant information or manage federation settings.
+            {t("ui.admin.tenants.detail.header_subtitle", "테넌트 정보를 수정하거나 연동 설정을 관리합니다.")}
           </p>
         </div>
-        <Badge variant="muted">Admin only</Badge>
+        <Badge variant="muted">{t("ui.common.admin_only", "관리자 전용")}</Badge>
       </header>
 
       {/* Tabs */}
-      <div className="flex border-b">
+      <div className="flex border-b border-border">
         <Link
           to={`/tenants/${tenantId}`}
-          className={`px-4 py-2 text-sm font-medium ${
+          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
             !isFederationTab &&
             !isAdminTab &&
-            !location.pathname.includes("/schema")
-              ? "border-b-2 border-blue-500 text-blue-600"
-              : "text-gray-500 hover:text-gray-700"
+            !location.pathname.includes("/schema") &&
+            !isOrganizationTab
+              ? "text-primary border-b-2 border-primary"
+              : "text-muted-foreground hover:text-foreground"
           }`}
         >
-          Profile
+          {t("ui.admin.tenants.detail.tab_profile", "프로필")}
         </Link>
         <Link
           to={`/tenants/${tenantId}/federation`}
-          className={`px-4 py-2 text-sm font-medium ${
+          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
             isFederationTab
-              ? "border-b-2 border-blue-500 text-blue-600"
-              : "text-gray-500 hover:text-gray-700"
+              ? "text-primary border-b-2 border-primary"
+              : "text-muted-foreground hover:text-foreground"
           }`}
         >
-          Federation
+          {t("ui.admin.tenants.detail.tab_federation", "외부 연동")}
         </Link>
         <Link
           to={`/tenants/${tenantId}/admins`}
-          className={`px-4 py-2 text-sm font-medium ${
+          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
             isAdminTab
-              ? "border-b-2 border-blue-500 text-blue-600"
-              : "text-gray-500 hover:text-gray-700"
+              ? "text-primary border-b-2 border-primary"
+              : "text-muted-foreground hover:text-foreground"
           }`}
         >
-          Admins
+          {t("ui.admin.tenants.detail.tab_admins", "관리자 설정")}
         </Link>
         <Link
-          to={`/tenants/${tenantId}/user-groups`}
-          className={`px-4 py-2 text-sm font-medium ${
-            isUserGroupsTab
-              ? "border-b-2 border-blue-500 text-blue-600"
-              : "text-gray-500 hover:text-gray-700"
+          to={`/tenants/${tenantId}/organization`}
+          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
+            isOrganizationTab
+              ? "text-primary border-b-2 border-primary"
+              : "text-muted-foreground hover:text-foreground"
           }`}
         >
-          User Groups
+          {t("ui.admin.tenants.detail.tab_organization", "조직 관리")}
         </Link>
         <Link
           to={`/tenants/${tenantId}/schema`}
-          className={`px-4 py-2 text-sm font-medium ${
+          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
             location.pathname.includes("/schema")
-              ? "border-b-2 border-blue-500 text-blue-600"
-              : "text-gray-500 hover:text-gray-700"
+              ? "text-primary border-b-2 border-primary"
+              : "text-muted-foreground hover:text-foreground"
           }`}
         >
-          Schema
+          {t("ui.admin.tenants.detail.tab_schema", "사용자 스키마")}
         </Link>
       </div>
 
       {/* Outlet for nested routes */}
-      <Outlet />
+      <div className="animate-in fade-in duration-500">
+        <Outlet />
+      </div>
     </div>
   );
 }