feat: 테넌트/RP 관리자 할당 UI 및 ReBAC 권한 검증 도구 구현 #244

adminfront/src/features/overview/GlobalOverviewPage.tsx

@@ -17,6 +17,7 @@ import {
   CardTitle,
 } from "../../components/ui/card";
 import { t } from "../../lib/i18n";
+import PermissionChecker from "./components/PermissionChecker";
 
 const summaryCards = [
   {
@@ -216,6 +217,8 @@ function GlobalOverviewPage() {
           </CardContent>
         </Card>
       </div>
+
+      <PermissionChecker />
     </div>
   );
 }

adminfront/src/features/overview/components/PermissionChecker.tsx

@@ -0,0 +1,133 @@
+import { useMutation } from "@tanstack/react-query";
+import { ShieldAlert, CheckCircle2, XCircle, Search } 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;

adminfront/src/features/relying-parties/routes/RPDetailPage.tsx

@@ -0,0 +1,77 @@
+import { useQuery } from "@tanstack/react-query";
+import { ArrowLeft, Rocket } from "lucide-react";
+import { Link, Outlet, useLocation, useParams } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import { fetchRelyingParty } from "../../../lib/adminApi";
+
+function RPDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const location = useLocation();
+
+  const rpQuery = useQuery({
+    queryKey: ["relying-party", id],
+    queryFn: () => fetchRelyingParty(id!),
+    enabled: !!id,
+  });
+
+  const isOwnersTab = location.pathname.endsWith("/owners");
+
+  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="/relying-parties" className="inline-flex items-center gap-2 hover:text-foreground">
+              <ArrowLeft size={14} />
+              Apps
+            </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">
+                <Rocket size={24} className="text-primary" />
+            </div>
+            <h2 className="text-3xl font-semibold">
+                {rpQuery.data?.relyingParty?.name ?? "Loading App..."}
+            </h2>
+          </div>
+          <p className="text-sm text-[var(--color-muted)]">
+            Client ID: <span className="font-mono">{id}</span>
+          </p>
+        </div>
+        <Badge variant="muted">Admin only</Badge>
+      </header>
+
+      {/* Tabs */}
+      <div className="flex border-b border-border">
+        <Link
+          to={`/relying-parties/${id}`}
+          className={`px-6 py-3 text-sm font-medium transition-colors ${
+            !isOwnersTab
+              ? "border-b-2 border-primary text-primary"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          기본 설정
+        </Link>
+        <Link
+          to={`/relying-parties/${id}/owners`}
+          className={`px-6 py-3 text-sm font-medium transition-colors ${
+            isOwnersTab
+              ? "border-b-2 border-primary text-primary"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          소유자 (권한 관리)
+        </Link>
+      </div>
+
+      <div className="mt-6">
+        <Outlet context={{ rp: rpQuery.data, refetch: rpQuery.refetch }} />
+      </div>
+    </div>
+  );
+}
+
+export default RPDetailPage;

adminfront/src/features/relying-parties/routes/RPListPage.tsx

@@ -0,0 +1,146 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Pencil, Plus, RefreshCw, Trash2, Rocket } 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 { deleteRelyingParty, fetchAllRelyingParties } from "../../../lib/adminApi";
+
+function RPListPage() {
+  const navigate = useNavigate();
+  const query = useQuery({
+    queryKey: ["relying-parties"],
+    queryFn: () => fetchAllRelyingParties(),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteRelyingParty(id),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const items = query.data ?? [];
+
+  const handleDelete = (id: string, name: string) => {
+    if (!window.confirm(`애플리케이션 "${name}"을 삭제할까요?`)) {
+      return;
+    }
+    deleteMutation.mutate(id);
+  };
+
+  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>Apps</span>
+            <span>/</span>
+            <span className="text-foreground">List</span>
+          </div>
+          <h2 className="text-3xl font-semibold">애플리케이션(RP) 목록</h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            등록된 OAuth2 클라이언트(Relying Party) 목록입니다.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            onClick={() => query.refetch()}
+            disabled={query.isFetching}
+          >
+            <RefreshCw size={16} />
+            새로고침
+          </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">
+                <Rocket size={20} className="text-primary" />
+                Relying Party Registry
+            </CardTitle>
+            <CardDescription>
+              총 {items.length}개 앱
+            </CardDescription>
+          </div>
+          <Badge variant="muted">Admin only</Badge>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>NAME</TableHead>
+                <TableHead>CLIENT ID</TableHead>
+                <TableHead>TENANT</TableHead>
+                <TableHead className="text-right">ACTIONS</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {query.isLoading && (
+                <TableRow>
+                  <TableCell colSpan={4}>로딩 중...</TableCell>
+                </TableRow>
+              )}
+              {!query.isLoading && items.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={4}>
+                    등록된 애플리케이션이 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {items.map((rp) => (
+                <TableRow key={rp.clientId}>
+                  <TableCell className="font-semibold">{rp.name}</TableCell>
+                  <TableCell className="text-xs font-mono">{rp.clientId}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{rp.tenantId}</Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => navigate(`/relying-parties/${rp.clientId}`)}
+                      >
+                        <Pencil size={14} />
+                        관리
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDelete(rp.clientId, rp.name)}
+                        disabled={deleteMutation.isPending}
+                      >
+                        <Trash2 size={14} />
+                        삭제
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default RPListPage;

adminfront/src/features/relying-parties/routes/RPOwnersTab.tsx

@@ -0,0 +1,201 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plus, Trash2, ShieldCheck, Search, UserPlus } from "lucide-react";
+import { useState } from "react";
+import { useOutletContext, useParams } from "react-router-dom";
+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 { Input } from "../../../components/ui/input";
+import { 
+    fetchRPOwners, 
+    addRPOwner, 
+    removeRPOwner, 
+    fetchUsers
+} from "../../../lib/adminApi";
+
+function RPOwnersTab() {
+  const { id: clientId } = useParams<{ id: string }>();
+  const queryClient = useQueryClient();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  if (!clientId) return null;
+
+  // 현재 소유자 목록
+  const ownersQuery = useQuery({
+    queryKey: ["rp-owners", clientId],
+    queryFn: () => fetchRPOwners(clientId),
+    enabled: !!clientId,
+  });
+
+  // 전체 사용자 목록 (소유자 추가용)
+  const usersQuery = useQuery({
+    queryKey: ["users", { limit: 100, search: searchTerm }],
+    queryFn: () => fetchUsers(100, 0, searchTerm),
+    enabled: searchTerm.length > 1,
+  });
+
+  const addMutation = useMutation({
+    mutationFn: (subject: string) => addRPOwner(clientId, subject),
+    onSuccess: () => {
+      ownersQuery.refetch();
+      setSearchTerm("");
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (subject: string) => removeRPOwner(clientId, subject),
+    onSuccess: () => {
+      ownersQuery.refetch();
+    },
+  });
+
+  const handleAddOwner = (userId: string) => {
+    addMutation.mutate(`User:${userId}`);
+  };
+
+  const handleRemoveOwner = (subject: string, name?: string) => {
+    if (window.confirm(`${name || subject}의 소유 권한을 회수할까요?`)) {
+      removeMutation.mutate(subject);
+    }
+  };
+
+  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>
+              {ownersQuery.data?.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={3} className="text-center py-8 text-muted-foreground">
+                    등록된 소유자가 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {ownersQuery.data?.map((owner) => (
+                <TableRow key={owner.subject}>
+                  <TableCell>
+                    <div className="font-medium">{owner.name || owner.subject}</div>
+                    <div className="text-[10px] text-muted-foreground">{owner.email}</div>
+                  </TableCell>
+                  <TableCell className="text-xs">{owner.type}</TableCell>
+                  <TableCell className="text-right">
+                    <Button 
+                        variant="ghost" 
+                        size="sm" 
+                        onClick={() => handleRemoveOwner(owner.subject, owner.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 => !ownersQuery.data?.some(o => o.subject === `User:${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={() => handleAddOwner(user.id)}
+                        disabled={addMutation.isPending}
+                    >
+                      <Plus size={14} />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default RPOwnersTab;

adminfront/src/features/relying-parties/routes/RPProfileTab.tsx

@@ -0,0 +1,82 @@
+import { useOutletContext } from "react-router-dom";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Badge } from "../../../components/ui/badge";
+import type { RelyingParty, HydraClientReq } from "../../../lib/adminApi";
+
+function RPProfileTab() {
+  const { rp } = useOutletContext<{ 
+    rp: { relyingParty: RelyingParty; oauth2Config: HydraClientReq } 
+  }>();
+
+  if (!rp) return null;
+
+  return (
+    <div className="max-w-4xl space-y-6">
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle>애플리케이션 정보</CardTitle>
+          <CardDescription>
+            OAuth2 클라이언트의 기본 정보 및 상태입니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+                <Label>App Name</Label>
+                <Input value={rp.relyingParty.name} disabled className="bg-muted" />
+            </div>
+            <div className="space-y-2">
+                <Label>Client ID</Label>
+                <Input value={rp.relyingParty.clientId} disabled className="bg-muted font-mono text-xs" />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Tenant ID</Label>
+            <div className="flex items-center gap-2">
+                <Input value={rp.relyingParty.tenantId} disabled className="bg-muted flex-1" />
+                <Badge>Owner Tenant</Badge>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Scopes</Label>
+            <div className="flex flex-wrap gap-2 p-3 border rounded-md bg-muted/30">
+                {rp.oauth2Config.scope?.split(" ").map(s => (
+                    <Badge key={s} variant="outline">{s}</Badge>
+                ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-[var(--color-panel)] border-primary/20">
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">OAuth2 Endpoints</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+            <div className="space-y-1">
+                <Label className="text-[10px] uppercase text-muted-foreground">Authorization URL</Label>
+                <code className="block p-2 bg-black/20 rounded text-xs break-all">
+                    https://sso.hmac.kr/oidc/oauth2/auth
+                </code>
+            </div>
+            <div className="space-y-1">
+                <Label className="text-[10px] uppercase text-muted-foreground">Token URL</Label>
+                <code className="block p-2 bg-black/20 rounded text-xs break-all">
+                    https://sso.hmac.kr/oidc/oauth2/token
+                </code>
+            </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default RPProfileTab;

adminfront/src/features/tenant-groups/routes/TenantGroupAdminsTab.tsx

@@ -0,0 +1,199 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plus, Trash2, ShieldCheck, Search, 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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { Input } from "../../../components/ui/input";
+import { 
+    fetchGroupAdmins, 
+    addGroupAdmin, 
+    removeGroupAdmin, 
+    fetchUsers, 
+    type TenantGroupSummary 
+} 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;

adminfront/src/features/tenant-groups/routes/TenantGroupDetailPage.tsx

@@ -15,6 +15,7 @@ function TenantGroupDetailPage() {
   });
 
   const isTenantsTab = location.pathname.endsWith("/tenants");
+  const isAdminTab = location.pathname.endsWith("/admins");
 
   return (
     <div className="space-y-8">
@@ -48,7 +49,7 @@ function TenantGroupDetailPage() {
         <Link
           to={`/tenant-groups/${id}`}
           className={`px-6 py-3 text-sm font-medium transition-colors ${
-            !isTenantsTab
+            !isTenantsTab && !isAdminTab
               ? "border-b-2 border-primary text-primary"
               : "text-muted-foreground hover:text-foreground"
           }`}
@@ -65,6 +66,16 @@ function TenantGroupDetailPage() {
         >
           소속 테넌트 ({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">

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

@@ -0,0 +1,198 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plus, Trash2, ShieldCheck, Search, 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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { Input } from "../../../components/ui/input";
+import { 
+    fetchTenantAdmins, 
+    addTenantAdmin, 
+    removeTenantAdmin, 
+    fetchUsers
+} 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;

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

@@ -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,7 @@ 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 +62,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 ${