i18n refresh and frontend fixes

adminfront/src/components/layout/RoleSwitcher.tsx

@@ -1,64 +1,86 @@
-import React, { useState, useEffect } from 'react';
+import type { FC } from "react";
+import { useEffect, useState } from "react";
+import { t } from "../../lib/i18n";
 
-const RoleSwitcher: React.FC = () => {
-  const [currentRole, setCurrentRole] = useState<string>('super_admin');
+const RoleSwitcher: FC = () => {
+  const [currentRole, setCurrentRole] = useState<string>("super_admin");
 
   useEffect(() => {
     // localStorage에서 역할 읽기
-    const savedRole = window.localStorage.getItem('X-Mock-Role');
+    const savedRole = window.localStorage.getItem("X-Mock-Role");
     if (savedRole) {
       setCurrentRole(savedRole);
     } else {
       // 기본값 설정
-      window.localStorage.setItem('X-Mock-Role', 'super_admin');
+      window.localStorage.setItem("X-Mock-Role", "super_admin");
     }
   }, []);
 
   const switchRole = (role: string) => {
     // localStorage 설정
-    window.localStorage.setItem('X-Mock-Role', role);
+    window.localStorage.setItem("X-Mock-Role", role);
     setCurrentRole(role);
     // 페이지 새로고침하여 권한 적용
     window.location.reload();
   };
 
-  if (import.meta.env.MODE === 'production') return null;
+  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' }}>
-        🛠 DEV Role Switcher
+    <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 => (
+      {(
+        ["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'
+            background: currentRole === role ? "#3b82f6" : "#333",
+            color: "white",
+            border: "none",
+            padding: "4px 8px",
+            borderRadius: "4px",
+            cursor: "pointer",
+            textAlign: "left",
+            transition: "background 0.2s",
           }}
         >
-          {role.toUpperCase().replace('_', ' ')} {currentRole === role ? '✅' : ''}
+          {roleLabels[role] ?? role.toUpperCase().replace("_", " ")}{" "}
+          {currentRole === role ? "✅" : ""}
         </button>
       ))}
     </div>