ory용 MCP 제작, devfront/adminfront 백엔드 연결

devfront/src/features/dashboard/DashboardPage.tsx

@@ -0,0 +1,215 @@
+import {
+  Activity,
+  ArrowRight,
+  BarChart3,
+  CheckCircle2,
+  Database,
+  KeyRound,
+  ShieldCheck,
+  Sparkles,
+} from "lucide-react";
+
+const guardHighlights = [
+  {
+    title: "RP 정책 통제",
+    body: "Relying Party 상태를 활성/비활성으로 관리하고 정책 변경을 기록합니다.",
+    metric: "Policy",
+  },
+  {
+    title: "Consent 흐름",
+    body: "사용자 Consent를 조회하고 필요 시 회수해 리스크를 제어합니다.",
+    metric: "Consent",
+  },
+  {
+    title: "Hydra Admin",
+    body: "Hydra Admin API를 통해 RP 등록 현황을 동기화합니다.",
+    metric: "Hydra",
+  },
+];
+
+const stackReadiness = [
+  "React 19 + Vite 7, strict TS, Router v6 data router.",
+  "TanStack Query 5로 RP/Consent 데이터를 캐시합니다.",
+  "Axios 클라이언트에서 Bearer + 테넌트 헤더를 주입합니다.",
+  "Tailwind + shadcn/ui로 devfront 톤을 맞춥니다.",
+  "Hydra Admin API 연동을 위한 프록시 엔드포인트 준비.",
+];
+
+const nextSteps = [
+  "RP 등록/수정/삭제 워크플로우 추가",
+  "Consent 검색 필터 고도화 및 CSV 내보내기",
+  "권한 가드 및 감사 로그 연동",
+];
+
+function DashboardPage() {
+  return (
+    <div className="space-y-10">
+      <section className="relative overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-7 shadow-[var(--shadow-card)]">
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_24%_20%,rgba(54,211,153,0.14),transparent_32%)]" />
+        <div className="relative flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-3 max-w-2xl">
+            <div className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] px-3 py-1 text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
+              <Sparkles size={14} />
+              devfront ready
+            </div>
+            <h2 className="text-3xl font-semibold leading-tight">
+              RP 등록 현황과 Consent 상태를
+              <span className="text-[var(--color-accent)]"> 하나의 화면</span>
+              에서 관리합니다.
+            </h2>
+            <p className="text-[var(--color-muted)]">
+              Hydra Admin API와 동기화된 RP 목록, 상태 토글, Consent 회수까지
+              devfront에서 처리하도록 준비합니다.
+            </p>
+            <div className="flex flex-wrap gap-3 text-sm">
+              <span className="rounded-full bg-[rgba(54,211,153,0.16)] px-3 py-2 text-[var(--color-accent)]">
+                RP registry synced
+              </span>
+              <span className="rounded-full border border-[var(--color-border)] px-3 py-2 text-[var(--color-muted)]">
+                Consent guard ready
+              </span>
+              <span className="rounded-full bg-[rgba(249,168,38,0.16)] px-3 py-2 font-semibold text-[var(--color-accent-strong)]">
+                Policy toggle enabled
+              </span>
+            </div>
+          </div>
+          <div className="grid gap-3 text-sm">
+            <div className="flex items-center gap-2 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3 text-[var(--color-muted)]">
+              <ShieldCheck size={16} />
+              RP 정책은 dev scope에서만 적용
+            </div>
+            <div className="flex items-center gap-2 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3 text-[var(--color-muted)]">
+              <KeyRound size={16} />
+              Consent 회수는 감사 로그와 연계
+            </div>
+            <div className="flex items-center gap-2 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3 text-[var(--color-muted)]">
+              <Database size={16} />
+              Hydra Admin 상태 체크 준비
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {guardHighlights.map((item) => (
+          <div
+            key={item.title}
+            className="relative overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-panel)] p-5 transition hover:-translate-y-1 hover:shadow-[0_16px_48px_rgba(7,15,26,0.4)]"
+          >
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(54,211,153,0.12),transparent_45%)]" />
+            <div className="relative flex items-center justify-between gap-2">
+              <div className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
+                {item.metric}
+              </div>
+              <span className="rounded-full border border-[var(--color-border)] px-3 py-1 text-[11px] text-[var(--color-muted)]">
+                active
+              </span>
+            </div>
+            <div className="relative mt-3 space-y-2">
+              <h3 className="text-lg font-semibold">{item.title}</h3>
+              <p className="text-sm text-[var(--color-muted)]">{item.body}</p>
+            </div>
+          </div>
+        ))}
+      </section>
+
+      <section className="grid gap-6 md:grid-cols-[1.2fr,0.8fr]">
+        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
+                Stack readiness
+              </p>
+              <h3 className="text-xl font-semibold">Devfront baseline</h3>
+            </div>
+            <button
+              type="button"
+              className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-muted)] transition hover:border-[var(--color-accent)] hover:text-[var(--color-accent)]"
+            >
+              Setup notes
+              <ArrowRight size={14} />
+            </button>
+          </div>
+          <div className="mt-4 grid gap-3 md:grid-cols-2">
+            {stackReadiness.map((item) => (
+              <div
+                key={item}
+                className="flex items-center gap-3 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3"
+              >
+                <CheckCircle2
+                  size={16}
+                  className="text-[var(--color-accent)]"
+                />
+                <p className="text-sm">{item}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
+          <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
+            Next actions
+          </p>
+          <h3 className="mt-2 text-xl font-semibold">Ship the RP controls</h3>
+          <div className="mt-4 space-y-3">
+            {nextSteps.map((item, idx) => (
+              <div
+                key={item}
+                className="flex gap-3 rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-3"
+              >
+                <div className="grid h-8 w-8 place-items-center rounded-full bg-[rgba(249,168,38,0.12)] text-sm font-semibold text-[var(--color-accent-strong)]">
+                  {idx + 1}
+                </div>
+                <p className="text-sm text-[var(--color-text)]">{item}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
+        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+          <div>
+            <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
+              Ops board
+            </p>
+            <h3 className="text-xl font-semibold">현재 관측</h3>
+          </div>
+          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
+            <span className="rounded-full border border-[var(--color-border)] px-3 py-2">
+              Consent grants
+            </span>
+            <span className="rounded-full border border-[var(--color-border)] px-3 py-2">
+              RP status
+            </span>
+          </div>
+        </div>
+        <div className="mt-4 grid gap-4 md:grid-cols-3">
+          <div className="rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] p-4">
+            <div className="flex items-center gap-2 text-[var(--color-muted)]">
+              <BarChart3 size={16} />
+              RP 요청 추이
+            </div>
+            <p className="mt-3 text-2xl font-semibold">준비 중</p>
+          </div>
+          <div className="rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] p-4">
+            <div className="flex items-center gap-2 text-[var(--color-muted)]">
+              <Activity size={16} />
+              Consent 회수 건수
+            </div>
+            <p className="mt-3 text-2xl font-semibold">준비 중</p>
+          </div>
+          <div className="rounded-xl border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] p-4">
+            <div className="flex items-center gap-2 text-[var(--color-muted)]">
+              <Database size={16} />
+              Hydra 상태
+            </div>
+            <p className="mt-3 text-2xl font-semibold">정상</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default DashboardPage;