forked from baron/baron-sso
91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import type { FC } from "react";
|
|
import { useEffect, useState } from "react";
|
|
import { t } from "../../lib/i18n";
|
|
|
|
const RoleSwitcher: FC = () => {
|
|
const [currentRole, setCurrentRole] = useState<string>("super_admin");
|
|
|
|
useEffect(() => {
|
|
// localStorage에서 역할 읽기
|
|
const savedRole = window.localStorage.getItem("X-Mock-Role");
|
|
if (savedRole) {
|
|
setCurrentRole(savedRole);
|
|
} else {
|
|
// 기본값 설정
|
|
window.localStorage.setItem("X-Mock-Role", "super_admin");
|
|
}
|
|
}, []);
|
|
|
|
const switchRole = (role: string) => {
|
|
// localStorage 설정
|
|
window.localStorage.setItem("X-Mock-Role", role);
|
|
setCurrentRole(role);
|
|
// 페이지 새로고침하여 권한 적용
|
|
window.location.reload();
|
|
};
|
|
|
|
if (import.meta.env.MODE === "production") return null;
|
|
|
|
const roleLabels: Record<string, string> = {
|
|
super_admin: t("ui.admin.role.super_admin", "SUPER ADMIN"),
|
|
tenant_admin: t("ui.admin.role.tenant_admin", "TENANT ADMIN"),
|
|
rp_admin: t("ui.admin.role.rp_admin", "RP ADMIN"),
|
|
tenant_member: t("ui.admin.role.tenant_member", "TENANT MEMBER"),
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
bottom: "20px",
|
|
right: "20px",
|
|
zIndex: 9999,
|
|
background: "#1A1F2C",
|
|
color: "white",
|
|
padding: "10px",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "8px",
|
|
fontSize: "12px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontWeight: "bold",
|
|
borderBottom: "1px solid #444",
|
|
paddingBottom: "4px",
|
|
marginBottom: "4px",
|
|
}}
|
|
>
|
|
{t("ui.admin.dev_role_switcher", "🛠 DEV Role Switcher")}
|
|
</div>
|
|
{(
|
|
["super_admin", "tenant_admin", "rp_admin", "tenant_member"] as const
|
|
).map((role) => (
|
|
<button
|
|
key={role}
|
|
type="button"
|
|
onClick={() => switchRole(role)}
|
|
style={{
|
|
background: currentRole === role ? "#3b82f6" : "#333",
|
|
color: "white",
|
|
border: "none",
|
|
padding: "4px 8px",
|
|
borderRadius: "4px",
|
|
cursor: "pointer",
|
|
textAlign: "left",
|
|
transition: "background 0.2s",
|
|
}}
|
|
>
|
|
{roleLabels[role] ?? role.toUpperCase().replace("_", " ")}{" "}
|
|
{currentRole === role ? "✅" : ""}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RoleSwitcher;
|