개요/감사로그 CTA 공통화

2026-05-29 10:08:13 +09:00
parent 23e3738b80
commit b4dfbe0480
7 changed files with 179 additions and 81 deletions
--- a/devfront/src/features/audit/AuditLogsPage.tsx
+++ b/devfront/src/features/audit/AuditLogsPage.tsx
@@ -9,6 +9,7 @@ import { AuditLogTable } from "../../../../common/core/components/audit";
 import { PageHeader } from "../../../../common/core/components/page";
 import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
 import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
+import { DeveloperAccessRequestCard } from "../../components/common/DeveloperAccessRequestCard";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import {
@@ -94,7 +95,7 @@ function AuditLogsPage() {
  const { data: requestStatus, isLoading: isLoadingRequestStatus } = useQuery({
    queryKey: ["developer-request", tenantId],
    queryFn: () => fetchDeveloperRequestStatus(tenantId),
-    enabled: hasAccessToken && (profileRole === "user" || profileRole === "tenant_member"),
+    enabled: hasAccessToken && profileRole === "user",
  });
  const hasDeveloperAccess =
    profileRole === "super_admin" ||
@@ -103,7 +104,7 @@ function AuditLogsPage() {
    requestStatus?.status === "approved";
  const isDeveloperRequestPending = requestStatus?.status === "pending";
  const canRequestDeveloperAccess =
-    (profileRole === "user" || profileRole === "tenant_member") &&
+    profileRole === "user" &&
    !isLoadingRequestStatus &&
    !hasDeveloperAccess &&
    !isDeveloperRequestPending;
@@ -138,7 +139,7 @@ function AuditLogsPage() {
  };

  if (
-    (profileRole === "user" || profileRole === "tenant_member") &&
+    profileRole === "user" &&
    (isLoadingMe || isLoadingRequestStatus)
  ) {
    return (
@@ -150,44 +151,29 @@ function AuditLogsPage() {

  if (!hasDeveloperAccess) {
    return (
-      <div className="rounded-xl border border-border/60 bg-card p-8 text-center">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-semibold tracking-tight">
-            {t("ui.common.audit.title", "Audit Logs")}
-          </h2>
-          <p className="font-medium text-foreground">
-            {isDeveloperRequestPending
-              ? t(
-                  "msg.dev.dashboard.access_pending",
-                  "개발자 권한 신청을 검토 중입니다.",
-                )
-              : t(
-                  "msg.dev.dashboard.access_denied",
-                  "대시보드는 개발자 권한이 있어야 볼 수 있습니다.",
-                )}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            {isDeveloperRequestPending
-              ? t(
-                  "msg.dev.dashboard.access_pending_detail",
-                  "super admin이 승인하면 개요와 개발자 기능을 사용할 수 있습니다.",
-                )
-              : t(
-                  "msg.dev.dashboard.access_denied_detail",
-                  "개발자 권한 신청 페이지에서 신청을 등록한 뒤 승인을 받아주세요.",
-                )}
-          </p>
-          {(isDeveloperRequestPending || canRequestDeveloperAccess) && (
-            <button
-              type="button"
-              className="font-bold text-primary hover:underline"
-              onClick={() => navigate("/developer-requests")}
-            >
-              {t("ui.dev.nav.developer_request", "개발자 권한 신청")}
-            </button>
-          )}
-        </div>
-      </div>
+      <DeveloperAccessRequestCard
+        title={t("ui.common.audit.title", "Audit Logs")}
+        isPending={isDeveloperRequestPending}
+        canRequest={canRequestDeveloperAccess}
+        pendingMessage={t(
+          "msg.dev.dashboard.access_pending",
+          "개발자 권한 신청을 검토 중입니다.",
+        )}
+        deniedMessage={t(
+          "msg.dev.audit.access_denied",
+          "감사 로그는 개발자 권한이 있어야 볼 수 있습니다.",
+        )}
+        pendingDetailMessage={t(
+          "msg.dev.dashboard.access_pending_detail",
+          "super admin이 승인하면 개요와 개발자 기능을 사용할 수 있습니다.",
+        )}
+        deniedDetailMessage={t(
+          "msg.dev.audit.access_denied_detail",
+          "개발자 권한 신청 페이지에서 신청을 등록한 뒤 승인을 받아주세요.",
+        )}
+        actionLabel={t("ui.dev.nav.developer_request", "개발자 권한 신청")}
+        onAction={() => navigate("/developer-requests")}
+      />
    );
  }

--- a/devfront/src/features/overview/GlobalOverviewPage.tsx
+++ b/devfront/src/features/overview/GlobalOverviewPage.tsx
@@ -16,6 +16,7 @@ import {
  OverviewMetric,
  OverviewSelectionChips,
 } from "../../../../common/core/components/overview";
+import { DeveloperAccessRequestCard } from "../../components/common/DeveloperAccessRequestCard";
 import {
  type ClientSummary,
  fetchClients,
@@ -523,7 +524,7 @@ function GlobalOverviewPage() {
    requestStatus?.status === "approved";
  const isDeveloperRequestPending = requestStatus?.status === "pending";
  const canRequestDeveloperAccess =
-    (profileRole === "user" || profileRole === "tenant_member") &&
+    profileRole === "user" &&
    !isLoadingRequestStatus &&
    !hasDeveloperAccess &&
    !isDeveloperRequestPending;
@@ -615,7 +616,7 @@ function GlobalOverviewPage() {
  };

  if (
-    (profileRole === "user" || profileRole === "tenant_member") &&
+    profileRole === "user" &&
    (isLoadingMe || isLoadingRequestStatus)
  ) {
    return (
@@ -627,44 +628,29 @@ function GlobalOverviewPage() {

  if (!hasDeveloperAccess) {
    return (
-      <div className="rounded-xl border border-border/60 bg-card p-8 text-center">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-semibold tracking-tight">
-            {t("ui.common.overview.title", "운영 현황")}
-          </h2>
-          <p className="font-medium text-foreground">
-            {isDeveloperRequestPending
-              ? t(
-                  "msg.dev.dashboard.access_pending",
-                  "개발자 권한 신청을 검토 중입니다.",
-                )
-              : t(
-                  "msg.dev.dashboard.access_denied",
-                  "대시보드는 개발자 권한이 있어야 볼 수 있습니다.",
-                )}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            {isDeveloperRequestPending
-              ? t(
-                  "msg.dev.dashboard.access_pending_detail",
-                  "super admin이 승인하면 개요와 개발자 기능을 사용할 수 있습니다.",
-                )
-              : t(
-                  "msg.dev.dashboard.access_denied_detail",
-                  "개발자 권한 신청 페이지에서 신청을 등록한 뒤 승인을 받아주세요.",
-                )}
-          </p>
-          {(isDeveloperRequestPending || canRequestDeveloperAccess) && (
-            <button
-              type="button"
-              className="font-bold text-primary hover:underline"
-              onClick={() => navigate("/developer-requests")}
-            >
-              {t("ui.dev.nav.developer_request", "개발자 권한 신청")}
-            </button>
-          )}
-        </div>
-      </div>
+      <DeveloperAccessRequestCard
+        title={t("ui.common.overview.title", "운영 현황")}
+        isPending={isDeveloperRequestPending}
+        canRequest={canRequestDeveloperAccess}
+        pendingMessage={t(
+          "msg.dev.dashboard.access_pending",
+          "개발자 권한 신청을 검토 중입니다.",
+        )}
+        deniedMessage={t(
+          "msg.dev.dashboard.access_denied",
+          "대시보드는 개발자 권한이 있어야 볼 수 있습니다.",
+        )}
+        pendingDetailMessage={t(
+          "msg.dev.dashboard.access_pending_detail",
+          "super admin이 승인하면 개요와 개발자 기능을 사용할 수 있습니다.",
+        )}
+        deniedDetailMessage={t(
+          "msg.dev.dashboard.access_denied_detail",
+          "개발자 권한 신청 페이지에서 신청을 등록한 뒤 승인을 받아주세요.",
+        )}
+        actionLabel={t("ui.dev.nav.developer_request", "개발자 권한 신청")}
+        onAction={() => navigate("/developer-requests")}
+      />
    );
  }