Merge branch 'dev' into feature/i18n

2026-02-13 12:06:37 +09:00
parent 4178152e29 a8a219d7ef
commit 485bbafe71
74 changed files with 34674 additions and 343 deletions
@@ -3,9 +3,18 @@ import AppLayout from "../components/layout/AppLayout";
 import ApiKeyCreatePage from "../features/api-keys/ApiKeyCreatePage";
 import ApiKeyListPage from "../features/api-keys/ApiKeyListPage";
 import AuditLogsPage from "../features/audit/AuditLogsPage";
+import AuthCallbackPage from "../features/auth/AuthCallbackPage";
 import AuthPage from "../features/auth/AuthPage";
+import LoginPage from "../features/auth/LoginPage";
 import DashboardPage from "../features/dashboard/DashboardPage";
 import GlobalOverviewPage from "../features/overview/GlobalOverviewPage";
+import TenantGroupAdminsTab from "../features/tenant-groups/routes/TenantGroupAdminsTab";
+import TenantGroupCreatePage from "../features/tenant-groups/routes/TenantGroupCreatePage";
+import TenantGroupDetailPage from "../features/tenant-groups/routes/TenantGroupDetailPage";
+import TenantGroupListPage from "../features/tenant-groups/routes/TenantGroupListPage";
+import TenantGroupProfileTab from "../features/tenant-groups/routes/TenantGroupProfileTab";
+import TenantGroupTenantsTab from "../features/tenant-groups/routes/TenantGroupTenantsTab";
+import TenantAdminsTab from "../features/tenants/routes/TenantAdminsTab";
 import TenantCreatePage from "../features/tenants/routes/TenantCreatePage";
 import TenantDetailPage from "../features/tenants/routes/TenantDetailPage";
 import TenantListPage from "../features/tenants/routes/TenantListPage";
@@ -17,6 +26,14 @@ import UserListPage from "../features/users/UserListPage";

 export const router = createBrowserRouter(
  [
+    {
+      path: "/login",
+      element: <LoginPage />,
+    },
+    {
+      path: "/auth/callback",
+      element: <AuthCallbackPage />,
+    },
    {
      path: "/",
      element: <AppLayout />,
@@ -30,11 +47,23 @@ export const router = createBrowserRouter(
        { path: "users/:id", element: <UserDetailPage /> },
        { path: "tenants", element: <TenantListPage /> },
        { path: "tenants/new", element: <TenantCreatePage /> },
+        { path: "tenant-groups", element: <TenantGroupListPage /> },
+        { path: "tenant-groups/new", element: <TenantGroupCreatePage /> },
+        {
+          path: "tenant-groups/:id",
+          element: <TenantGroupDetailPage />,
+          children: [
+            { index: true, element: <TenantGroupProfileTab /> },
+            { path: "tenants", element: <TenantGroupTenantsTab /> },
+            { path: "admins", element: <TenantGroupAdminsTab /> },
+          ],
+        },
        {
          path: "tenants/:tenantId",
          element: <TenantDetailPage />,
          children: [
            { index: true, element: <TenantProfilePage /> },
+            { path: "admins", element: <TenantAdminsTab /> },
            { path: "schema", element: <TenantSchemaPage /> },
          ],
        },
@@ -29,7 +29,6 @@ const navItems = [
  { label: "ui.admin.nav.audit_logs", to: "/audit-logs", icon: NotebookTabs },
  { label: "ui.admin.nav.auth_guard", to: "/auth", icon: KeyRound },
 ];
-
 function AppLayout() {
  const [theme, setTheme] = useState<"light" | "dark">(() => {
    const stored = window.localStorage.getItem("admin_theme");
@@ -26,7 +26,8 @@ const badgeVariants = cva(
 );

 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

 function Badge({ className, variant, ...props }: BadgeProps) {
@@ -34,7 +34,8 @@ const buttonVariants = cva(
 );

 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
 }
@@ -1,8 +1,7 @@
 import * as React from "react";
 import { cn } from "../../lib/utils";

-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

 const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
@@ -1,8 +1,7 @@
 import * as React from "react";
 import { cn } from "../../lib/utils";

-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
@@ -0,0 +1,43 @@
+import { ShieldHalf } from "lucide-react";
+import { useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+
+function AuthCallbackPage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const token = searchParams.get("token");
+    if (token) {
+      window.localStorage.setItem("admin_session", token);
+
+      // 만약 팝업창에서 실행 중이라면 부모 창에 알리고 닫기
+      if (window.opener) {
+        window.opener.postMessage({ type: "LOGIN_SUCCESS", token }, "*");
+        window.close();
+      } else {
+        // 일반 리다이렉트 방식인 경우 홈으로 이동
+        navigate("/", { replace: true });
+      }
+    } else {
+      console.error("No token found in callback URL");
+      navigate("/login", { replace: true });
+    }
+  }, [navigate, searchParams]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/15 text-primary shadow-lg animate-pulse">
+          <ShieldHalf size={32} />
+        </div>
+        <div className="text-lg font-semibold">인증 완료 중...</div>
+        <p className="text-sm text-muted-foreground">
+          세션을 동기화하고 있습니다.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default AuthCallbackPage;
@@ -0,0 +1,132 @@
+import { ExternalLink, LogIn, ShieldHalf } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+
+function LoginPage() {
+  const navigate = useNavigate();
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+
+  useEffect(() => {
+    // Listen for login success message from the popup
+    const handleMessage = (event: MessageEvent) => {
+      // Security check: In production, verify event.origin
+      if (event.data?.type === "LOGIN_SUCCESS" && event.data?.token) {
+        window.localStorage.setItem("admin_session", event.data.token);
+        setIsLoggingIn(false);
+        navigate("/");
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [navigate]);
+
+  const handleSSOLogin = () => {
+    const userfrontUrl = import.meta.env.USERFRONT_URL || "https://sso.hmac.kr";
+    const callbackUrl = `${window.location.origin}/auth/callback`;
+
+    // 항상 redirect_uri를 포함하여 로그인이 성공하면 콜백 페이지로 오도록 함
+    const loginUrl = `${userfrontUrl}/signin?source=adminfront&redirect_uri=${encodeURIComponent(callbackUrl)}`;
+
+    const width = 500;
+    const height = 700;
+    const left = window.screen.width / 2 - width / 2;
+    const top = window.screen.height / 2 - height / 2;
+
+    const popup = window.open(
+      loginUrl,
+      "BaronSSOLogin",
+      `width=${width},height=${height},top=${top},left=${left},status=no,menubar=no,toolbar=no`,
+    );
+
+    if (popup) {
+      setIsLoggingIn(true);
+      const timer = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(timer);
+          setIsLoggingIn(false);
+        }
+      }, 1000);
+    } else {
+      alert("팝업 차단이 설정되어 있습니다. 팝업 허용 후 다시 시도해 주세요.");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background">
+      <div className="w-full max-w-md space-y-8">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/15 text-primary shadow-[0_20px_50px_rgba(54,211,153,0.3)]">
+            <ShieldHalf size={32} />
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold tracking-tight">Baron SSO</h1>
+            <p className="text-sm text-muted-foreground uppercase tracking-[0.2em]">
+              Admin Control Plane
+            </p>
+          </div>
+        </div>
+
+        <Card className="border-primary/20 bg-card/50 backdrop-blur-xl shadow-2xl">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl flex items-center gap-2">
+              <LogIn size={20} className="text-primary" />
+              관리자 로그인
+            </CardTitle>
+            <CardDescription>
+              Baron 통합 인증(SSO)을 통해 관리자 페이지에 접속합니다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="pt-4 pb-8 space-y-3">
+            <Button
+              onClick={handleSSOLogin}
+              className="w-full h-14 text-lg font-semibold flex gap-3 shadow-lg"
+              disabled={isLoggingIn}
+            >
+              {isLoggingIn ? (
+                <>
+                  <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  로그인 진행 중...
+                </>
+              ) : (
+                <>
+                  <ShieldHalf size={22} />
+                  SSO 계정으로 로그인
+                  <ExternalLink size={16} className="opacity-50" />
+                </>
+              )}
+            </Button>
+
+            <p className="mt-6 text-xs text-center text-muted-foreground leading-relaxed">
+              관리자 전역 세션은 보안을 위해 15분간 유지됩니다.
+              <br />
+              민감한 작업 시 재인증을 요구할 수 있습니다.
+            </p>
+          </CardContent>
+        </Card>
+
+        <div className="flex justify-center gap-4">
+          <div className="h-1 w-1 rounded-full bg-primary/30" />
+          <div className="h-1 w-1 rounded-full bg-primary/30" />
+          <div className="h-1 w-1 rounded-full bg-primary/30" />
+        </div>
+
+        <p className="px-8 text-center text-sm text-muted-foreground">
+          인증 정보가 없거나 로그인이 되지 않는 경우
+          <br />
+          시스템 관리자에게 문의하세요.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;
@@ -216,6 +216,8 @@ function GlobalOverviewPage() {
          </CardContent>
        </Card>
      </div>
+
+      <PermissionChecker />
    </div>
  );
 }
@@ -0,0 +1,142 @@
+import { useMutation } from "@tanstack/react-query";
+import { CheckCircle2, Search, ShieldAlert, XCircle } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import apiClient from "../../../lib/apiClient";
+
+type CheckPermissionResponse = {
+  allowed: boolean;
+  query: {
+    namespace: string;
+    object: string;
+    relation: string;
+    subject: string;
+  };
+};
+
+function PermissionChecker() {
+  const [namespace, setNamespace] = useState("Tenant");
+  const [object, setObject] = useState("");
+  const [relation, setRelation] = useState("manage");
+  const [subject, setSubject] = useState("");
+
+  const checkMutation = useMutation({
+    mutationFn: async () => {
+      const { data } = await apiClient.get<CheckPermissionResponse>(
+        "/v1/admin/debug/check-permission",
+        {
+          params: { namespace, object, relation, subject },
+        },
+      );
+      return data;
+    },
+  });
+
+  const result = checkMutation.data;
+
+  return (
+    <Card className="bg-[var(--color-panel)] border-primary/20">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ShieldAlert size={20} className="text-primary" />
+          ReBAC 권한 검증 도구
+        </CardTitle>
+        <CardDescription>
+          특정 주체(Subject)가 특정 리소스(Object)에 대해 권한이 있는지 Ory
+          Keto를 통해 실시간으로 확인합니다.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <div className="space-y-2">
+            <Label>Namespace</Label>
+            <select
+              value={namespace}
+              onChange={(e) => setNamespace(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              <option value="Tenant">Tenant</option>
+              <option value="TenantGroup">TenantGroup</option>
+              <option value="RelyingParty">RelyingParty</option>
+              <option value="System">System</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label>Relation</Label>
+            <Input
+              placeholder="view, manage, admins..."
+              value={relation}
+              onChange={(e) => setRelation(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Object ID</Label>
+            <Input
+              placeholder="Tenant UUID 등"
+              value={object}
+              onChange={(e) => setObject(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Subject (User:ID)</Label>
+            <Input
+              placeholder="User:uuid 또는 Namespace:ID#Relation"
+              value={subject}
+              onChange={(e) => setSubject(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-center">
+          <Button
+            onClick={() => checkMutation.mutate()}
+            disabled={!object || !subject || checkMutation.isPending}
+            className="w-full md:w-auto px-12"
+          >
+            {checkMutation.isPending ? "검증 중..." : "권한 확인 실행"}
+          </Button>
+        </div>
+
+        {checkMutation.isSuccess && (
+          <div
+            className={`p-6 rounded-xl border-2 flex flex-col items-center justify-center gap-3 animate-in zoom-in duration-300 ${
+              result.allowed
+                ? "bg-green-500/10 border-green-500/50 text-green-600"
+                : "bg-destructive/10 border-destructive/50 text-destructive"
+            }`}
+          >
+            {result.allowed ? (
+              <>
+                <CheckCircle2 size={48} />
+                <div className="text-xl font-bold">Access ALLOWED</div>
+                <p className="text-sm opacity-80 text-center">
+                  해당 사용자는 요청한 리소스에 대해 권한이 있습니다. (상속
+                  포함)
+                </p>
+              </>
+            ) : (
+              <>
+                <XCircle size={48} />
+                <div className="text-xl font-bold">Access DENIED</div>
+                <p className="text-sm opacity-80 text-center">
+                  해당 사용자는 요청한 리소스에 대해 권한이 없습니다.
+                </p>
+              </>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default PermissionChecker;
@@ -0,0 +1,215 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plus, Search, ShieldCheck, Trash2, UserPlus } from "lucide-react";
+import { useState } from "react";
+import { useOutletContext } from "react-router-dom";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import {
+  type TenantGroupSummary,
+  addGroupAdmin,
+  fetchGroupAdmins,
+  fetchUsers,
+  removeGroupAdmin,
+} from "../../../lib/adminApi";
+
+function TenantGroupAdminsTab() {
+  const { group } = useOutletContext<{
+    group: TenantGroupSummary;
+  }>();
+  const queryClient = useQueryClient();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // 현재 관리자 목록
+  const adminsQuery = useQuery({
+    queryKey: ["tenant-group-admins", group.id],
+    queryFn: () => fetchGroupAdmins(group.id),
+    enabled: !!group.id,
+  });
+
+  // 전체 사용자 목록 (관리자 추가용)
+  const usersQuery = useQuery({
+    queryKey: ["users", { limit: 100, search: searchTerm }],
+    queryFn: () => fetchUsers(100, 0, searchTerm),
+    enabled: searchTerm.length > 1, // 2글자 이상 입력 시 검색
+  });
+
+  const addMutation = useMutation({
+    mutationFn: (userId: string) => addGroupAdmin(group.id, userId),
+    onSuccess: () => {
+      adminsQuery.refetch();
+      setSearchTerm("");
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (userId: string) => removeGroupAdmin(group.id, userId),
+    onSuccess: () => {
+      adminsQuery.refetch();
+    },
+  });
+
+  const handleAddAdmin = (userId: string) => {
+    addMutation.mutate(userId);
+  };
+
+  const handleRemoveAdmin = (userId: string, userName: string) => {
+    if (window.confirm(`${userName} 사용자의 관리자 권한을 회수할까요?`)) {
+      removeMutation.mutate(userId);
+    }
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-2">
+      {/* 현재 그룹 관리자 */}
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <ShieldCheck size={18} className="text-primary" />
+            그룹 관리자
+          </CardTitle>
+          <CardDescription>
+            이 그룹과 소속 테넌트를 관리할 수 있는 권한을 가진 사용자들입니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>이름</TableHead>
+                <TableHead>이메일</TableHead>
+                <TableHead className="text-right">회수</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {adminsQuery.data?.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={3}
+                    className="text-center py-8 text-muted-foreground"
+                  >
+                    등록된 관리자가 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {adminsQuery.data?.map((admin) => (
+                <TableRow key={admin.id}>
+                  <TableCell className="font-medium">
+                    {admin.name || "Unknown"}
+                  </TableCell>
+                  <TableCell className="text-xs">{admin.email}</TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRemoveAdmin(admin.id, admin.name)}
+                      disabled={removeMutation.isPending}
+                    >
+                      <Trash2 size={14} className="text-destructive" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* 사용자 검색 및 추가 */}
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <UserPlus size={18} className="text-primary" />
+              관리자 추가
+            </CardTitle>
+          </div>
+          <CardDescription>
+            관리자로 추가할 사용자를 검색하세요 (이름 또는 이메일).
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="사용자 검색 (최소 2자)..."
+              className="pl-10"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>사용자</TableHead>
+                <TableHead className="text-right">추가</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {searchTerm.length < 2 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={2}
+                    className="text-center py-8 text-muted-foreground"
+                  >
+                    사용자 이름을 입력하여 검색하세요.
+                  </TableCell>
+                </TableRow>
+              )}
+              {searchTerm.length >= 2 &&
+                usersQuery.data?.items.length === 0 && (
+                  <TableRow>
+                    <TableCell
+                      colSpan={2}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      검색 결과가 없습니다.
+                    </TableCell>
+                  </TableRow>
+                )}
+              {usersQuery.data?.items
+                .filter((u) => !adminsQuery.data?.some((a) => a.id === u.id))
+                .map((user) => (
+                  <TableRow key={user.id}>
+                    <TableCell>
+                      <div className="font-medium">{user.name}</div>
+                      <div className="text-[10px] text-muted-foreground">
+                        {user.email}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleAddAdmin(user.id)}
+                        disabled={addMutation.isPending}
+                      >
+                        <Plus size={14} />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default TenantGroupAdminsTab;
@@ -0,0 +1,144 @@
+import { useMutation } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { LayoutGrid, Sparkles } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import { createTenantGroup } from "../../../lib/adminApi";
+
+function TenantGroupCreatePage() {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [description, setDescription] = useState("");
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      createTenantGroup({
+        name,
+        slug: slug || name.toLowerCase().replace(/ /g, "-"),
+        description: description || undefined,
+      }),
+    onSuccess: () => {
+      navigate("/tenant-groups");
+    },
+  });
+
+  const errorMsg = (mutation.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+
+  return (
+    <div className="space-y-8">
+      <header className="space-y-2">
+        <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
+          <span>Tenants</span>
+          <span>/</span>
+          <span>Groups</span>
+          <span>/</span>
+          <span className="text-foreground">Create</span>
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h2 className="text-3xl font-semibold">테넌트 그룹 추가</h2>
+            <p className="text-sm text-[var(--color-muted)]">
+              여러 테넌트를 논리적으로 묶어 관리하기 위한 그룹을 생성합니다.
+            </p>
+          </div>
+          <Badge variant="muted">Super Admin only</Badge>
+        </div>
+      </header>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <LayoutGrid size={18} className="text-primary" />
+            Group Profile
+          </CardTitle>
+          <CardDescription>
+            그룹 이름과 식별자(Slug)를 입력합니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">
+              Group Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="예: 바론소프트웨어 통합그룹"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Slug</Label>
+            <Input
+              value={slug}
+              onChange={(e) => setSlug(e.target.value)}
+              placeholder="baron-group"
+            />
+            <p className="text-xs text-muted-foreground">
+              URL이나 API에서 사용될 고유 식별자입니다. 비워두면 이름 기반으로
+              자동 생성됩니다.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Description</Label>
+            <Textarea
+              rows={3}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="그룹에 대한 설명을 입력하세요."
+            />
+          </div>
+
+          {errorMsg && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Sparkles size={18} />
+            권한 상속 안내
+          </CardTitle>
+          <CardDescription>
+            테넌트 그룹의 관리자는 소속된 모든 테넌트에 대한 관리 권한을
+            자동으로 가집니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="text-sm text-[var(--color-muted)]">
+          생성 후 상세 페이지에서 테넌트를 이 그룹에 할당할 수 있습니다.
+        </CardContent>
+      </Card>
+
+      <div className="flex items-center justify-end gap-3">
+        <Button variant="outline" onClick={() => navigate("/tenant-groups")}>
+          취소
+        </Button>
+        <Button
+          onClick={() => mutation.mutate()}
+          disabled={mutation.isPending || name.trim() === ""}
+        >
+          생성
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default TenantGroupCreatePage;
@@ -0,0 +1,94 @@
+import { useQuery } from "@tanstack/react-query";
+import { ArrowLeft, LayoutGrid } from "lucide-react";
+import { Link, Outlet, useLocation, useParams } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import { fetchTenantGroup } from "../../../lib/adminApi";
+
+function TenantGroupDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const location = useLocation();
+
+  const groupQuery = useQuery({
+    queryKey: ["tenant-group", id],
+    queryFn: () => fetchTenantGroup(id!),
+    enabled: !!id,
+  });
+
+  const isTenantsTab = location.pathname.endsWith("/tenants");
+  const isAdminTab = location.pathname.endsWith("/admins");
+
+  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="/tenant-groups"
+              className="inline-flex items-center gap-2 hover:text-foreground"
+            >
+              <ArrowLeft size={14} />
+              Groups
+            </Link>
+            <span>/</span>
+            <span className="text-foreground">Detail</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <LayoutGrid size={24} className="text-primary" />
+            </div>
+            <h2 className="text-3xl font-semibold">
+              {groupQuery.data?.name ?? "Loading Group..."}
+            </h2>
+          </div>
+          <p className="text-sm text-[var(--color-muted)]">
+            {groupQuery.data?.description ||
+              "그룹 정보를 관리하고 소속 테넌트를 구성합니다."}
+          </p>
+        </div>
+        <Badge variant="muted">Super Admin only</Badge>
+      </header>
+
+      {/* Tabs */}
+      <div className="flex border-b border-border">
+        <Link
+          to={`/tenant-groups/${id}`}
+          className={`px-6 py-3 text-sm font-medium transition-colors ${
+            !isTenantsTab && !isAdminTab
+              ? "border-b-2 border-primary text-primary"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          기본 정보
+        </Link>
+        <Link
+          to={`/tenant-groups/${id}/tenants`}
+          className={`px-6 py-3 text-sm font-medium transition-colors ${
+            isTenantsTab
+              ? "border-b-2 border-primary text-primary"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          소속 테넌트 ({groupQuery.data?.tenants?.length ?? 0})
+        </Link>
+        <Link
+          to={`/tenant-groups/${id}/admins`}
+          className={`px-6 py-3 text-sm font-medium transition-colors ${
+            isAdminTab
+              ? "border-b-2 border-primary text-primary"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          관리자
+        </Link>
+      </div>
+
+      <div className="mt-6">
+        <Outlet
+          context={{ group: groupQuery.data, refetch: groupQuery.refetch }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default TenantGroupDetailPage;
@@ -0,0 +1,172 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { LayoutGrid, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { deleteTenantGroup, fetchTenantGroups } from "../../../lib/adminApi";
+
+function TenantGroupListPage() {
+  const navigate = useNavigate();
+  const query = useQuery({
+    queryKey: ["tenant-groups", { limit: 50, offset: 0 }],
+    queryFn: () => fetchTenantGroups(50, 0),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (groupId: string) => deleteTenantGroup(groupId),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+  const fallbackError =
+    !errorMsg && query.isError ? "테넌트 그룹 목록 조회에 실패했습니다." : null;
+
+  const items = query.data?.items ?? [];
+
+  const handleDelete = (groupId: string, groupName: string) => {
+    if (!window.confirm(`테넌트 그룹 "${groupName}"를 삭제할까요?`)) {
+      return;
+    }
+    deleteMutation.mutate(groupId);
+  };
+
+  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)]">
+            <span>Tenants</span>
+            <span>/</span>
+            <span className="text-foreground">Groups</span>
+          </div>
+          <h2 className="text-3xl font-semibold">테넌트 그룹 목록</h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            여러 테넌트를 하나의 그룹으로 묶어 관리합니다.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            onClick={() => query.refetch()}
+            disabled={query.isFetching}
+          >
+            <RefreshCw size={16} />
+            새로고침
+          </Button>
+          <Button asChild>
+            <Link to="/tenant-groups/new">
+              <Plus size={16} />
+              그룹 추가
+            </Link>
+          </Button>
+        </div>
+      </header>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <LayoutGrid size={20} className="text-primary" />
+              Tenant Group Registry
+            </CardTitle>
+            <CardDescription>
+              총 {query.data?.total ?? 0}개 그룹
+            </CardDescription>
+          </div>
+          <Badge variant="muted">Super Admin only</Badge>
+        </CardHeader>
+        <CardContent>
+          {(errorMsg || fallbackError) && (
+            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg ?? fallbackError}
+            </div>
+          )}
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>NAME</TableHead>
+                <TableHead>SLUG</TableHead>
+                <TableHead>TENANTS</TableHead>
+                <TableHead>CREATED</TableHead>
+                <TableHead className="text-right">ACTIONS</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {query.isLoading && (
+                <TableRow>
+                  <TableCell colSpan={5}>로딩 중...</TableCell>
+                </TableRow>
+              )}
+              {!query.isLoading && items.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={5}>
+                    아직 등록된 테넌트 그룹이 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {items.map((group) => (
+                <TableRow key={group.id}>
+                  <TableCell className="font-semibold">{group.name}</TableCell>
+                  <TableCell>{group.slug}</TableCell>
+                  <TableCell>
+                    <Badge variant="secondary">
+                      {group.tenants?.length ?? 0}개
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {group.createdAt
+                      ? new Date(group.createdAt).toLocaleDateString("ko-KR")
+                      : "-"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => navigate(`/tenant-groups/${group.id}`)}
+                      >
+                        <Pencil size={14} />
+                        관리
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDelete(group.id, group.name)}
+                        disabled={deleteMutation.isPending}
+                      >
+                        <Trash2 size={14} />
+                        삭제
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default TenantGroupListPage;
@@ -0,0 +1,104 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { useState } from "react";
+import { useOutletContext } from "react-router-dom";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import {
+  type TenantGroupSummary,
+  updateTenantGroup,
+} from "../../../lib/adminApi";
+
+function TenantGroupProfileTab() {
+  const { group, refetch } = useOutletContext<{
+    group: TenantGroupSummary;
+    refetch: () => void;
+  }>();
+  const queryClient = useQueryClient();
+
+  const [name, setName] = useState(group?.name ?? "");
+  const [description, setDescription] = useState(group?.description ?? "");
+
+  const mutation = useMutation({
+    mutationFn: () => updateTenantGroup(group.id, { name, description }),
+    onSuccess: () => {
+      refetch();
+      queryClient.invalidateQueries({ queryKey: ["tenant-groups"] });
+    },
+  });
+
+  const errorMsg = (mutation.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+
+  if (!group) return null;
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle>그룹 정보 수정</CardTitle>
+          <CardDescription>
+            그룹의 기본 이름과 설명을 변경할 수 있습니다. 식별자(Slug)는 변경할
+            수 없습니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>그룹 ID (고유 식별자)</Label>
+            <Input value={group.id} disabled className="bg-muted" />
+          </div>
+          <div className="space-y-2">
+            <Label>Slug</Label>
+            <Input value={group.slug} disabled className="bg-muted" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="groupName">Group Name</Label>
+            <Input
+              id="groupName"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="groupDesc">Description</Label>
+            <Textarea
+              id="groupDesc"
+              rows={4}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+
+          {errorMsg && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg}
+            </div>
+          )}
+
+          <div className="flex justify-end pt-4">
+            <Button
+              onClick={() => mutation.mutate()}
+              disabled={
+                mutation.isPending ||
+                (name === group.name && description === group.description)
+              }
+            >
+              {mutation.isPending ? "저장 중..." : "변경사항 저장"}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default TenantGroupProfileTab;
@@ -0,0 +1,210 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Building2, Plus, Search, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useOutletContext } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import {
+  type TenantGroupSummary,
+  addTenantToGroup,
+  fetchTenants,
+  removeTenantFromGroup,
+} from "../../../lib/adminApi";
+
+function TenantGroupTenantsTab() {
+  const { group, refetch } = useOutletContext<{
+    group: TenantGroupSummary;
+    refetch: () => void;
+  }>();
+  const queryClient = useQueryClient();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // 전체 테넌트 목록 (할당용)
+  const tenantsQuery = useQuery({
+    queryKey: ["tenants", { limit: 100 }],
+    queryFn: () => fetchTenants(100, 0),
+  });
+
+  const addMutation = useMutation({
+    mutationFn: (tenantId: string) => addTenantToGroup(group.id, tenantId),
+    onSuccess: () => {
+      refetch();
+      queryClient.invalidateQueries({ queryKey: ["tenant-group", group.id] });
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (tenantId: string) => removeTenantFromGroup(group.id, tenantId),
+    onSuccess: () => {
+      refetch();
+      queryClient.invalidateQueries({ queryKey: ["tenant-group", group.id] });
+    },
+  });
+
+  const handleAddTenant = (tenantId: string) => {
+    addMutation.mutate(tenantId);
+  };
+
+  const handleRemoveTenant = (tenantId: string) => {
+    if (window.confirm("이 테넌트를 그룹에서 제외할까요?")) {
+      removeMutation.mutate(tenantId);
+    }
+  };
+
+  const availableTenants =
+    tenantsQuery.data?.items.filter(
+      (t) => !group.tenants?.some((gt) => gt.id === t.id),
+    ) || [];
+
+  const filteredAvailable = availableTenants.filter(
+    (t) =>
+      t.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      t.slug.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-2">
+      {/* 현재 소속 테넌트 */}
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Building2 size={18} className="text-primary" />
+            소속 테넌트
+          </CardTitle>
+          <CardDescription>
+            현재 이 그룹에 포함된 테넌트 목록입니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>이름</TableHead>
+                <TableHead>Slug</TableHead>
+                <TableHead className="text-right">제외</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {group.tenants?.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={3}
+                    className="text-center py-8 text-muted-foreground"
+                  >
+                    소속된 테넌트가 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {group.tenants?.map((t) => (
+                <TableRow key={t.id}>
+                  <TableCell className="font-medium">{t.name}</TableCell>
+                  <TableCell className="text-xs">{t.slug}</TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRemoveTenant(t.id)}
+                      disabled={removeMutation.isPending}
+                    >
+                      <Trash2 size={14} className="text-destructive" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* 추가 가능한 테넌트 */}
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <Plus size={18} className="text-primary" />
+              테넌트 추가
+            </CardTitle>
+            <div className="relative w-48">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="검색..."
+                className="pl-8 h-9"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+          </div>
+          <CardDescription>
+            다른 그룹에 속하지 않았거나 이동이 필요한 테넌트를 선택하세요.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>이름</TableHead>
+                <TableHead>상태</TableHead>
+                <TableHead className="text-right">추가</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredAvailable.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={3}
+                    className="text-center py-8 text-muted-foreground"
+                  >
+                    추가할 수 있는 테넌트가 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {filteredAvailable.map((t) => (
+                <TableRow key={t.id}>
+                  <TableCell>
+                    <div className="font-medium">{t.name}</div>
+                    <div className="text-[10px] text-muted-foreground">
+                      {t.slug}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="text-[10px]">
+                      {t.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleAddTenant(t.id)}
+                      disabled={addMutation.isPending}
+                    >
+                      <Plus size={14} />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default TenantGroupTenantsTab;
@@ -0,0 +1,214 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plus, Search, ShieldCheck, Trash2, UserPlus } from "lucide-react";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import {
+  addTenantAdmin,
+  fetchTenantAdmins,
+  fetchUsers,
+  removeTenantAdmin,
+} from "../../../lib/adminApi";
+
+function TenantAdminsTab() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const queryClient = useQueryClient();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  if (!tenantId) return null;
+
+  // 현재 관리자 목록
+  const adminsQuery = useQuery({
+    queryKey: ["tenant-admins", tenantId],
+    queryFn: () => fetchTenantAdmins(tenantId),
+    enabled: !!tenantId,
+  });
+
+  // 전체 사용자 목록 (관리자 추가용)
+  const usersQuery = useQuery({
+    queryKey: ["users", { limit: 100, search: searchTerm }],
+    queryFn: () => fetchUsers(100, 0, searchTerm),
+    enabled: searchTerm.length > 1,
+  });
+
+  const addMutation = useMutation({
+    mutationFn: (userId: string) => addTenantAdmin(tenantId, userId),
+    onSuccess: () => {
+      adminsQuery.refetch();
+      setSearchTerm("");
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (userId: string) => removeTenantAdmin(tenantId, userId),
+    onSuccess: () => {
+      adminsQuery.refetch();
+    },
+  });
+
+  const handleAddAdmin = (userId: string) => {
+    addMutation.mutate(userId);
+  };
+
+  const handleRemoveAdmin = (userId: string, userName: string) => {
+    if (window.confirm(`${userName} 사용자의 관리자 권한을 회수할까요?`)) {
+      removeMutation.mutate(userId);
+    }
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-2 mt-6">
+      {/* 현재 테넌트 관리자 */}
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <ShieldCheck size={18} className="text-primary" />
+            테넌트 관리자
+          </CardTitle>
+          <CardDescription>
+            이 테넌트의 자원을 관리할 수 있는 권한을 가진 사용자들입니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>이름</TableHead>
+                <TableHead>이메일</TableHead>
+                <TableHead className="text-right">회수</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {adminsQuery.data?.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={3}
+                    className="text-center py-8 text-muted-foreground"
+                  >
+                    등록된 관리자가 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {adminsQuery.data?.map((admin) => (
+                <TableRow key={admin.id}>
+                  <TableCell className="font-medium">
+                    {admin.name || "Unknown"}
+                  </TableCell>
+                  <TableCell className="text-xs">{admin.email}</TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRemoveAdmin(admin.id, admin.name)}
+                      disabled={removeMutation.isPending}
+                    >
+                      <Trash2 size={14} className="text-destructive" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* 사용자 검색 및 추가 */}
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <UserPlus size={18} className="text-primary" />
+              관리자 추가
+            </CardTitle>
+          </div>
+          <CardDescription>
+            관리자로 추가할 사용자를 검색하세요 (이름 또는 이메일).
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="사용자 검색 (최소 2자)..."
+              className="pl-10"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>사용자</TableHead>
+                <TableHead className="text-right">추가</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {searchTerm.length < 2 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={2}
+                    className="text-center py-8 text-muted-foreground"
+                  >
+                    사용자 이름을 입력하여 검색하세요.
+                  </TableCell>
+                </TableRow>
+              )}
+              {searchTerm.length >= 2 &&
+                usersQuery.data?.items.length === 0 && (
+                  <TableRow>
+                    <TableCell
+                      colSpan={2}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      검색 결과가 없습니다.
+                    </TableCell>
+                  </TableRow>
+                )}
+              {usersQuery.data?.items
+                .filter((u) => !adminsQuery.data?.some((a) => a.id === u.id))
+                .map((user) => (
+                  <TableRow key={user.id}>
+                    <TableCell>
+                      <div className="font-medium">{user.name}</div>
+                      <div className="text-[10px] text-muted-foreground">
+                        {user.email}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleAddAdmin(user.id)}
+                        disabled={addMutation.isPending}
+                      >
+                        <Plus size={14} />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default TenantAdminsTab;
@@ -16,6 +16,7 @@ function TenantDetailPage() {
  });

  const isFederationTab = location.pathname.includes("/federation");
+  const isAdminTab = location.pathname.includes("/admins");

  return (
    <div className="space-y-8">
@@ -44,7 +45,9 @@ function TenantDetailPage() {
        <Link
          to={`/tenants/${tenantId}`}
          className={`px-4 py-2 text-sm font-medium ${
-            !isFederationTab
+            !isFederationTab &&
+            !isAdminTab &&
+            !location.pathname.includes("/schema")
              ? "border-b-2 border-blue-500 text-blue-600"
              : "text-gray-500 hover:text-gray-700"
          }`}
@@ -61,6 +64,16 @@ function TenantDetailPage() {
        >
          Federation
        </Link>
+        <Link
+          to={`/tenants/${tenantId}/admins`}
+          className={`px-4 py-2 text-sm font-medium ${
+            isAdminTab
+              ? "border-b-2 border-blue-500 text-blue-600"
+              : "text-gray-500 hover:text-gray-700"
+          }`}
+        >
+          Admins
+        </Link>
        <Link
          to={`/tenants/${tenantId}/schema`}
          className={`px-4 py-2 text-sm font-medium ${
@@ -18,6 +18,7 @@ import {
  approveTenant,
  deleteTenant,
  fetchTenant,
+  fetchTenantGroups,
  updateTenant,
 } from "../../../lib/adminApi";

@@ -35,11 +36,17 @@ export function TenantProfilePage() {
    queryFn: () => fetchTenant(tenantId),
  });

+  const groupsQuery = useQuery({
+    queryKey: ["tenant-groups", { limit: 100 }],
+    queryFn: () => fetchTenantGroups(100, 0),
+  });
+
  const [name, setName] = useState("");
  const [slug, setSlug] = useState("");
  const [description, setDescription] = useState("");
  const [status, setStatus] = useState("active");
  const [domains, setDomains] = useState("");
+  const [tenantGroupId, setTenantGroupId] = useState("");

  useEffect(() => {
    if (tenantQuery.data) {
@@ -48,6 +55,7 @@ export function TenantProfilePage() {
      setDescription(tenantQuery.data.description ?? "");
      setStatus(tenantQuery.data.status);
      setDomains(tenantQuery.data.domains?.join(", ") ?? "");
+      setTenantGroupId(tenantQuery.data.tenantGroupId ?? "");
    }
  }, [tenantQuery.data]);

@@ -58,6 +66,7 @@ export function TenantProfilePage() {
        slug,
        description: description || undefined,
        status,
+        tenantGroupId: tenantGroupId || undefined,
        domains: domains
          .split(",")
          .map((d) => d.trim())
@@ -136,6 +145,25 @@ export function TenantProfilePage() {
              onChange={(e) => setDescription(e.target.value)}
            />
          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Tenant Group</Label>
+            <select
+              value={tenantGroupId}
+              onChange={(e) => setTenantGroupId(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value="">그룹 없음</option>
+              {groupsQuery.data?.items.map((group) => (
+                <option key={group.id} value={group.id}>
+                  {group.name} ({group.slug})
+                </option>
+              ))}
+            </select>
+            <p className="text-xs text-muted-foreground">
+              테넌트가 속할 그룹을 지정합니다. 그룹 관리자는 소속 테넌트에 대한
+              접근 권한을 가집니다.
+            </p>
+          </div>
          <div className="space-y-2">
            <Label className="text-sm font-semibold">
              Allowed Domains (Comma separated)
@@ -54,7 +54,8 @@

  body {
    @apply min-h-screen bg-background font-sans text-foreground antialiased;
-    background-image: radial-gradient(
+    background-image:
+      radial-gradient(
        circle at 10% 18%,
        rgba(54, 211, 153, 0.16),
        transparent 28%
@@ -371,3 +371,33 @@ export async function updateRelyingParty(id: string, payload: HydraClientReq) {
 export async function deleteRelyingParty(id: string) {
  await apiClient.delete(`/v1/admin/relying-parties/${id}`);
 }
+
+export type RPOwner = {
+  subject: string;
+
+  name?: string;
+
+  email?: string;
+
+  type: string;
+};
+
+export async function fetchRPOwners(clientId: string) {
+  const { data } = await apiClient.get<RPOwner[]>(
+    `/v1/admin/relying-parties/${clientId}/owners`,
+  );
+
+  return data;
+}
+
+export async function addRPOwner(clientId: string, subject: string) {
+  await apiClient.post(
+    `/v1/admin/relying-parties/${clientId}/owners/${subject}`,
+  );
+}
+
+export async function removeRPOwner(clientId: string, subject: string) {
+  await apiClient.delete(
+    `/v1/admin/relying-parties/${clientId}/owners/${subject}`,
+  );
+}
@@ -29,7 +29,10 @@ apiClient.interceptors.request.use((config) => {
 apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
-    // TODO: 401/403 응답 시 로그인/재인증 플로우로 리다이렉션한다.
+    if (error.response?.status === 401) {
+      window.localStorage.removeItem("admin_session");
+      window.location.href = "/login";
+    }
    return Promise.reject(error);
  },
 );