adminfront 개요 통계 추가

adminfront/src/features/auth/AuthPage.tsx

@@ -1,109 +1,25 @@
-import { ArrowRight, Fingerprint, Smartphone, Sparkles } from "lucide-react";
-
-const flows = [
-  {
-    title: "Admin login",
-    description:
-      "Enforce short TTL and step-up MFA. Keep admin session separate from app session.",
-    pill: "15m TTL",
-  },
-  {
-    title: "Tenant pick",
-    description:
-      "Admin chooses target tenant before hitting APIs. Propagate X-Tenant-ID on every call.",
-    pill: "Header-ready",
-  },
-  {
-    title: "Device approval",
-    description:
-      "If app session exists and user opts in, use push/deeplink approval as MFA replacement.",
-    pill: "App session",
-  },
-];
+import { KeyRound } from "lucide-react";
+import PermissionChecker from "./components/PermissionChecker";
 
 function AuthPage() {
   return (
-    <div className="space-y-8">
-      <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6 shadow-[var(--shadow-card)]">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div>
-            <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
-              Admin auth
-            </p>
-            <h2 className="text-2xl font-semibold">Admin auth guardrails</h2>
-            <p className="text-sm text-[var(--color-muted)]">
-              Build the admin-only login flow first, keeping app login separate.
-              Respect the “fallback only when user chooses” rule for SMS/email
-              vs app approval.
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="rounded-full border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-muted)]">
-              IDP session placeholder
-            </span>
-            <button
-              type="button"
-              className="inline-flex items-center gap-2 rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-black"
-            >
-              <Sparkles size={14} />
-              Connect auth layer
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <section className="grid gap-4 md:grid-cols-3">
-        {flows.map((flow) => (
-          <div
-            key={flow.title}
-            className="rounded-xl border border-[var(--color-border)] bg-[var(--color-panel)] p-5"
-          >
-            <div className="flex items-center justify-between text-xs uppercase tracking-[0.16em] text-[var(--color-muted)]">
-              <span>{flow.pill}</span>
-              <Fingerprint size={14} />
-            </div>
-            <h3 className="mt-3 text-lg font-semibold">{flow.title}</h3>
-            <p className="text-sm text-[var(--color-muted)]">
-              {flow.description}
-            </p>
-          </div>
-        ))}
-      </section>
-
-      <section className="grid gap-6 md:grid-cols-[1fr,0.9fr]">
-        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
-          <div className="flex items-center gap-2 text-[var(--color-muted)]">
-            <Smartphone size={16} />
-            <span className="text-xs uppercase tracking-[0.18em]">
-              App-based approvals
-            </span>
-          </div>
-          <h3 className="mt-2 text-xl font-semibold">
-            App session as MFA replacement
-          </h3>
-          <p className="text-sm text-[var(--color-muted)]">
-            If the admin keeps the mobile app signed in and opts in, use
-            push/deeplink approval instead of OTP. Otherwise fall back to
-            SMS/email based on user choice.
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div className="space-y-1">
+          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+            Admin auth
+          </p>
+          <h2 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
+            <KeyRound size={22} className="text-primary" />
+            인증가드
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            관리자 권한과 ReBAC 관계를 실제 정책 엔진 기준으로 확인합니다.
           </p>
         </div>
-        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
-          <div className="flex items-center gap-2 text-[var(--color-muted)]">
-            <ArrowRight size={16} />
-            <span className="text-xs uppercase tracking-[0.18em]">
-              TTL discipline
-            </span>
-          </div>
-          <h3 className="mt-2 text-xl font-semibold">
-            Keep admin sessions short
-          </h3>
-          <p className="text-sm text-[var(--color-muted)]">
-            Default admin TTL is 15 minutes. Show countdown and nudge re-auth
-            with step-up MFA when critical actions (rotate secret, export logs)
-            happen.
-          </p>
-        </div>
-      </section>
+      </div>
+
+      <PermissionChecker />
     </div>
   );
 }

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

@@ -0,0 +1,142 @@
+import { useMutation } from "@tanstack/react-query";
+import { CheckCircle2, 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="border-primary/20 bg-[var(--color-panel)]">
+      <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 px-12 md:w-auto"
+          >
+            {checkMutation.isPending ? "검증 중..." : "권한 확인 실행"}
+          </Button>
+        </div>
+
+        {checkMutation.isSuccess && result && (
+          <div
+            className={`flex flex-col items-center justify-center gap-3 rounded-xl border-2 p-6 animate-in zoom-in duration-300 ${
+              result.allowed
+                ? "border-green-500/50 bg-green-500/10 text-green-600"
+                : "border-destructive/50 bg-destructive/10 text-destructive"
+            }`}
+          >
+            {result.allowed ? (
+              <>
+                <CheckCircle2 size={48} />
+                <div className="text-xl font-bold">Access ALLOWED</div>
+                <p className="text-center text-sm opacity-80">
+                  해당 사용자는 요청한 리소스에 대해 권한이 있습니다. (상속
+                  포함)
+                </p>
+              </>
+            ) : (
+              <>
+                <XCircle size={48} />
+                <div className="text-xl font-bold">Access DENIED</div>
+                <p className="text-center text-sm opacity-80">
+                  해당 사용자는 요청한 리소스에 대해 권한이 없습니다.
+                </p>
+              </>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default PermissionChecker;