kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

개요/감사로그 CTA 공통화

Browse Source
This commit is contained in:
김용연
2026-05-29 10:08:13 +09:00
parent 23e3738b80
commit b4dfbe0480
7 changed files with 179 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
devfront/src/components/common/DeveloperAccessRequestCard.test.tsx Normal file
View File

@@ -0,0 +1,66 @@
import { act } from "react-dom/test-utils";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vitest";
import { DeveloperAccessRequestCard } from "./DeveloperAccessRequestCard";
describe("DeveloperAccessRequestCard", () => {
afterEach(() => {
document.body.innerHTML = "";
});
it("renders the request CTA for pending and denied states", () => {
const onAction = vi.fn();
const container = document.createElement("div");
document.body.appendChild(container);
const root = createRoot(container);
act(() => {
root.render(
<DeveloperAccessRequestCard
title="운영 현황"
isPending={true}
canRequest={false}
pendingMessage="검토 중"
deniedMessage="거부됨"
pendingDetailMessage="승인 대기"
deniedDetailMessage="신청 필요"
actionLabel="개발자 권한 신청"
onAction={onAction}
/>,
);
});
expect(container.querySelector("h2")?.textContent).toBe("운영 현황");
expect(container.textContent).toContain("검토 중");
expect(container.textContent).toContain("승인 대기");
const button = container.querySelector("button");
expect(button?.textContent).toBe("개발자 권한 신청");
act(() => {
button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
});
expect(onAction).toHaveBeenCalledTimes(1);
act(() => {
root.render(
<DeveloperAccessRequestCard
title="감사 로그"
isPending={false}
canRequest={true}
pendingMessage="검토 중"
deniedMessage="거부됨"
pendingDetailMessage="승인 대기"
deniedDetailMessage="신청 필요"
actionLabel="개발자 권한 신청"
onAction={onAction}
/>,
);
});
expect(container.querySelector("h2")?.textContent).toBe("감사 로그");
expect(container.textContent).toContain("거부됨");
expect(container.textContent).toContain("신청 필요");
expect(container.querySelector("button")).not.toBeNull();
});
});

48
devfront/src/components/common/DeveloperAccessRequestCard.tsx Normal file
View File

@@ -0,0 +1,48 @@
interface DeveloperAccessRequestCardProps {
title: string;
isPending: boolean;
canRequest: boolean;
pendingMessage: string;
deniedMessage: string;
pendingDetailMessage: string;
deniedDetailMessage: string;
actionLabel: string;
onAction: () => void;
}
export function DeveloperAccessRequestCard({
title,
isPending,
canRequest,
pendingMessage,
deniedMessage,
pendingDetailMessage,
deniedDetailMessage,
actionLabel,
onAction,
}: DeveloperAccessRequestCardProps) {
const showAction = isPending || canRequest;
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">{title}</h2>
<p className="font-medium text-foreground">
{isPending ? pendingMessage : deniedMessage}
</p>
<p className="text-sm text-muted-foreground">
{isPending ? pendingDetailMessage : deniedDetailMessage}
</p>
{showAction && (
<button
type="button"
className="font-bold text-primary hover:underline"
onClick={onAction}
>
{actionLabel}
</button>
)}
</div>
</div>
);
}

68
devfront/src/features/audit/AuditLogsPage.tsx
View File

@@ -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")}
/>
);
}

66
devfront/src/features/overview/GlobalOverviewPage.tsx
View File

@@ -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")}
/>
);
}

4
devfront/src/locales/en.toml
View File

@@ -511,6 +511,10 @@ access_pending = "Your developer access request is under review."
access_pending_detail = "You can use the overview and developer features after a super admin approves it."
description = "View connected application composition and authentication operations metrics in one place."
[msg.dev.audit]
access_denied = "Audit logs are available only to users with developer access."
access_denied_detail = "Submit a request on the developer access page and wait for approval."
[msg.dev.dashboard.hero]
body = "Body"
title_emphasis = "Title Emphasis"

4
devfront/src/locales/ko.toml
View File

@@ -511,6 +511,10 @@ access_pending = "개발자 권한 신청을 검토 중입니다."
access_pending_detail = "super admin이 승인하면 개요와 개발자 기능을 사용할 수 있습니다."
description = "연동 앱 구성과 인증 운영 지표를 한 곳에서 확인합니다."
[msg.dev.audit]
access_denied = "감사 로그는 개발자 권한이 있어야 볼 수 있습니다."
access_denied_detail = "개발자 권한 신청 페이지에서 신청을 등록한 뒤 승인을 받아주세요."
[msg.dev.dashboard.hero]
body = "Hydra Admin API와 동기화된 RP 목록, 상태 토글, Consent 회수까지 devfront에서 처리하도록 준비합니다."
title_emphasis = " 하나의 화면"

4
devfront/src/locales/template.toml
View File

@@ -549,6 +549,10 @@ access_pending = ""
access_pending_detail = ""
description = ""
[msg.dev.audit]
access_denied = ""
access_denied_detail = ""
[msg.dev.dashboard.hero]
body = ""
title_emphasis = ""