i18n refresh and frontend fixes

adminfront/src/features/api-keys/ApiKeyCreatePage.tsx

@@ -1,6 +1,14 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { AlertCircle, Check, ChevronLeft, Copy, Loader2, Save, ShieldCheck } from "lucide-react";
+import {
+  AlertCircle,
+  Check,
+  ChevronLeft,
+  Copy,
+  Loader2,
+  Save,
+  ShieldCheck,
+} from "lucide-react";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
@@ -13,24 +21,69 @@ import {
 } from "../../components/ui/card";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
+import {
+  type ApiKeyCreateRequest,
+  type ApiKeyCreateResponse,
+  createApiKey,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
-import { createApiKey, type ApiKeyCreateRequest, type ApiKeyCreateResponse } from "../../lib/adminApi";
 
 const AVAILABLE_SCOPES = [
-  { id: "audit:read", label: "감사 로그 조회", desc: "시스템 내의 모든 이력을 조회할 수 있습니다." },
-  { id: "audit:write", label: "감사 로그 생성", desc: "외부 앱의 로그를 Baron SSO로 전송합니다." },
-  { id: "user:read", label: "사용자 조회", desc: "사용자 목록 및 프로필을 읽을 수 있습니다." },
-  { id: "user:write", label: "사용자 관리", desc: "사용자 생성, 수정, 삭제 작업을 수행합니다." },
-  { id: "tenant:read", label: "테넌트 조회", desc: "등록된 모든 조직 정보를 조회합니다." },
-  { id: "tenant:write", label: "테넌트 관리", desc: "테넌트 정보를 직접 제어합니다." },
+  {
+    id: "audit:read",
+    labelKey: "ui.admin.api_keys.scopes.audit_read.title",
+    labelFallback: "감사 로그 조회",
+    descKey: "msg.admin.api_keys.scopes.audit_read.desc",
+    descFallback: "시스템 내의 모든 이력을 조회할 수 있습니다.",
+  },
+  {
+    id: "audit:write",
+    labelKey: "ui.admin.api_keys.scopes.audit_write.title",
+    labelFallback: "감사 로그 생성",
+    descKey: "msg.admin.api_keys.scopes.audit_write.desc",
+    descFallback: "외부 앱의 로그를 Baron SSO로 전송합니다.",
+  },
+  {
+    id: "user:read",
+    labelKey: "ui.admin.api_keys.scopes.user_read.title",
+    labelFallback: "사용자 조회",
+    descKey: "msg.admin.api_keys.scopes.user_read.desc",
+    descFallback: "사용자 목록 및 프로필을 읽을 수 있습니다.",
+  },
+  {
+    id: "user:write",
+    labelKey: "ui.admin.api_keys.scopes.user_write.title",
+    labelFallback: "사용자 관리",
+    descKey: "msg.admin.api_keys.scopes.user_write.desc",
+    descFallback: "사용자 생성, 수정, 삭제 작업을 수행합니다.",
+  },
+  {
+    id: "tenant:read",
+    labelKey: "ui.admin.api_keys.scopes.tenant_read.title",
+    labelFallback: "테넌트 조회",
+    descKey: "msg.admin.api_keys.scopes.tenant_read.desc",
+    descFallback: "등록된 모든 조직 정보를 조회합니다.",
+  },
+  {
+    id: "tenant:write",
+    labelKey: "ui.admin.api_keys.scopes.tenant_write.title",
+    labelFallback: "테넌트 관리",
+    descKey: "msg.admin.api_keys.scopes.tenant_write.desc",
+    descFallback: "테넌트 정보를 직접 제어합니다.",
+  },
 ];
 
 function ApiKeyCreatePage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const [error, setError] = React.useState<string | null>(null);
-  const [createdResult, setCreatedResult] = React.useState<ApiKeyCreateResponse | null>(null);
-  const [selectedScopes, setSelectedScopes] = React.useState<string[]>(["audit:read", "user:read"]);
+  const [createdResult, setCreatedResult] =
+    React.useState<ApiKeyCreateResponse | null>(null);
+  const [selectedScopes, setSelectedScopes] = React.useState<string[]>([
+    "audit:read",
+    "user:read",
+  ]);
 
   const {
     register,
@@ -47,19 +100,29 @@ function ApiKeyCreatePage() {
       setCreatedResult(data);
     },
     onError: (err: AxiosError<{ error?: string }>) => {
-      setError(err.response?.data?.error || "API 키 생성에 실패했습니다.");
+      setError(
+        err.response?.data?.error ||
+          t("msg.admin.api_keys.create.error", "API 키 생성에 실패했습니다."),
+      );
     },
   });
 
   const toggleScope = (scopeId: string) => {
     setSelectedScopes((prev) =>
-      prev.includes(scopeId) ? prev.filter((s) => s !== scopeId) : [...prev, scopeId]
+      prev.includes(scopeId)
+        ? prev.filter((s) => s !== scopeId)
+        : [...prev, scopeId],
     );
   };
 
   const onSubmit = (data: { name: string }) => {
     if (selectedScopes.length === 0) {
-      setError("최소 하나 이상의 권한을 선택해야 합니다.");
+      setError(
+        t(
+          "msg.admin.api_keys.create.scope_required",
+          "최소 하나 이상의 권한을 선택해야 합니다.",
+        ),
+      );
       return;
     }
     setError(null);
@@ -77,9 +140,24 @@ function ApiKeyCreatePage() {
           <div className="mx-auto w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center">
             <ShieldCheck size={32} />
           </div>
-          <h2 className="text-3xl font-bold tracking-tight">API 키 생성 완료</h2>
+          <h2 className="text-3xl font-bold tracking-tight">
+            {t("ui.admin.api_keys.create.success.title", "API 키 생성 완료")}
+          </h2>
           <p className="text-muted-foreground">
-            아래의 비밀번호(Secret)는 보안을 위해 <span className="text-destructive font-bold">지금 한 번만</span> 표시됩니다.
+            {t(
+              "msg.admin.api_keys.create.success.notice",
+              "아래의 비밀번호(Secret)는 보안을 위해 ",
+            )}
+            <span className="text-destructive font-bold">
+              {t(
+                "msg.admin.api_keys.create.success.notice_emphasis",
+                "지금 한 번만",
+              )}
+            </span>{" "}
+            {t(
+              "msg.admin.api_keys.create.success.notice_suffix",
+              "표시됩니다.",
+            )}
           </p>
         </div>
 
@@ -87,7 +165,10 @@ function ApiKeyCreatePage() {
           <CardHeader className="bg-primary/5 border-b">
             <CardTitle className="text-sm font-semibold flex items-center gap-2">
               <AlertCircle size={16} className="text-primary" />
-              보안 시크릿 복사
+              {t(
+                "ui.admin.api_keys.create.success.copy_secret",
+                "보안 시크릿 복사",
+              )}
             </CardTitle>
           </CardHeader>
           <CardContent className="pt-8 pb-8 space-y-6">
@@ -96,14 +177,14 @@ function ApiKeyCreatePage() {
                 X-Baron-Key-Secret
               </Label>
               <div className="relative group">
-                <Input 
-                  readOnly 
-                  value={createdResult.clientSecret} 
-                  className="font-mono text-lg py-6 pr-12 border-primary/30 bg-muted/30 focus-visible:ring-0" 
+                <Input
+                  readOnly
+                  value={createdResult.clientSecret}
+                  className="font-mono text-lg py-6 pr-12 border-primary/30 bg-muted/30 focus-visible:ring-0"
                 />
-                <Button 
-                  variant="ghost" 
-                  size="icon" 
+                <Button
+                  variant="ghost"
+                  size="icon"
                   className="absolute right-2 top-1/2 -translate-y-1/2 hover:bg-primary/10"
                   onClick={() => handleCopy(createdResult.clientSecret)}
                 >
@@ -111,13 +192,21 @@ function ApiKeyCreatePage() {
                 </Button>
               </div>
               <p className="text-[11px] text-center text-muted-foreground italic">
-                복사 버튼을 눌러 안전한 곳(비밀번호 관리자 등)에 저장하세요.
+                {t(
+                  "msg.admin.api_keys.create.success.copy_hint",
+                  "복사 버튼을 눌러 안전한 곳(비밀번호 관리자 등)에 저장하세요.",
+                )}
               </p>
             </div>
 
             <div className="pt-4 flex flex-col gap-2">
               <Button size="lg" className="w-full font-bold" asChild>
-                <Link to="/api-keys">저장했습니다. 목록으로 이동</Link>
+                <Link to="/api-keys">
+                  {t(
+                    "ui.admin.api_keys.create.success.go_list",
+                    "저장했습니다. 목록으로 이동",
+                  )}
+                </Link>
               </Button>
             </div>
           </CardContent>
@@ -130,12 +219,24 @@ function ApiKeyCreatePage() {
     <div className="max-w-3xl mx-auto space-y-10">
       <header className="flex items-center justify-between">
         <div className="space-y-1">
-          <Button variant="ghost" size="sm" className="-ml-3 text-muted-foreground" onClick={() => navigate("/api-keys")}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 text-muted-foreground"
+            onClick={() => navigate("/api-keys")}
+          >
             <ChevronLeft size={16} className="mr-1" />
-            돌아가기
+            {t("ui.common.back", "돌아가기")}
           </Button>
-          <h2 className="text-3xl font-bold tracking-tight">새 API 키 생성</h2>
-          <p className="text-muted-foreground">내부 시스템 연동을 위한 보안 인증 키를 구성합니다.</p>
+          <h2 className="text-3xl font-bold tracking-tight">
+            {t("ui.admin.api_keys.create.title", "새 API 키 생성")}
+          </h2>
+          <p className="text-muted-foreground">
+            {t(
+              "msg.admin.api_keys.create.subtitle",
+              "내부 시스템 연동을 위한 보안 인증 키를 구성합니다.",
+            )}
+          </p>
         </div>
       </header>
 
@@ -143,20 +244,41 @@ function ApiKeyCreatePage() {
         {/* 섹션 1: 이름 설정 */}
         <section className="space-y-4">
           <div className="flex items-center gap-2 pb-2 border-b">
-            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold">1</span>
-            <h3 className="font-semibold text-lg">키 이름 지정</h3>
+            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold">
+              1
+            </span>
+            <h3 className="font-semibold text-lg">
+              {t("ui.admin.api_keys.create.section_name", "키 이름 지정")}
+            </h3>
           </div>
           <Card>
             <CardContent className="pt-6">
               <div className="space-y-2">
-                <Label htmlFor="name" className="text-sm font-medium">서비스 또는 목적 식별 이름</Label>
+                <Label htmlFor="name" className="text-sm font-medium">
+                  {t(
+                    "ui.admin.api_keys.create.name_label",
+                    "서비스 또는 목적 식별 이름",
+                  )}
+                </Label>
                 <Input
                   id="name"
-                  placeholder="예: Jenkins-CI, Grafana-Dashboard"
+                  placeholder={t(
+                    "ui.admin.api_keys.create.name_placeholder",
+                    "예: Jenkins-CI, Grafana-Dashboard",
+                  )}
                   className="text-base py-5"
-                  {...register("name", { required: "이름은 필수입니다." })}
+                  {...register("name", {
+                    required: t(
+                      "msg.admin.api_keys.create.name_required",
+                      "이름은 필수입니다.",
+                    ),
+                  })}
                 />
-                {errors.name && <p className="text-sm text-destructive mt-1">{errors.name.message}</p>}
+                {errors.name && (
+                  <p className="text-sm text-destructive mt-1">
+                    {errors.name.message}
+                  </p>
+                )}
               </div>
             </CardContent>
           </Card>
@@ -165,8 +287,15 @@ function ApiKeyCreatePage() {
         {/* 섹션 2: 권한 선택 */}
         <section className="space-y-4">
           <div className="flex items-center gap-2 pb-2 border-b">
-            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold">2</span>
-            <h3 className="font-semibold text-lg">권한 범위(Scopes) 선택</h3>
+            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold">
+              2
+            </span>
+            <h3 className="font-semibold text-lg">
+              {t(
+                "ui.admin.api_keys.create.section_scopes",
+                "권한 범위(Scopes) 선택",
+              )}
+            </h3>
           </div>
           <div className="grid gap-4 sm:grid-cols-2">
             {AVAILABLE_SCOPES.map((scope) => {
@@ -178,24 +307,39 @@ function ApiKeyCreatePage() {
                   onClick={() => toggleScope(scope.id)}
                   className={cn(
                     "flex flex-col items-start gap-2 p-4 rounded-xl border-2 text-left transition-all",
-                    isSelected 
-                      ? "border-primary bg-primary/5 shadow-md" 
-                      : "border-border bg-card hover:border-muted-foreground/30"
+                    isSelected
+                      ? "border-primary bg-primary/5 shadow-md"
+                      : "border-border bg-card hover:border-muted-foreground/30",
                   )}
                 >
                   <div className="flex items-center justify-between w-full">
-                    <span className={cn("font-bold text-sm", isSelected ? "text-primary" : "")}>{scope.label}</span>
-                    <div className={cn(
-                      "h-5 w-5 rounded-md flex items-center justify-center border",
-                      isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
-                    )}>
-                      {isSelected && <Check size={12} className="text-primary-foreground" />}
+                    <span
+                      className={cn(
+                        "font-bold text-sm",
+                        isSelected ? "text-primary" : "",
+                      )}
+                    >
+                      {t(scope.labelKey, scope.labelFallback)}
+                    </span>
+                    <div
+                      className={cn(
+                        "h-5 w-5 rounded-md flex items-center justify-center border",
+                        isSelected
+                          ? "bg-primary border-primary"
+                          : "border-muted-foreground/30",
+                      )}
+                    >
+                      {isSelected && (
+                        <Check size={12} className="text-primary-foreground" />
+                      )}
                     </div>
                   </div>
                   <p className="text-[11px] text-muted-foreground leading-snug">
-                    {scope.desc}
+                    {t(scope.descKey, scope.descFallback)}
                   </p>
-                  <code className="text-[9px] font-mono opacity-60 mt-1 uppercase tracking-tighter">ID: {scope.id}</code>
+                  <code className="text-[9px] font-mono opacity-60 mt-1 uppercase tracking-tighter">
+                    ID: {scope.id}
+                  </code>
                 </button>
               );
             })}
@@ -210,15 +354,26 @@ function ApiKeyCreatePage() {
               <p className="text-sm font-medium">{error}</p>
             </div>
           )}
-          
+
           <div className="flex items-center justify-between p-6 bg-muted/30 rounded-2xl border">
             <div>
-              <p className="text-sm font-bold">총 {selectedScopes.length}개의 권한이 할당됩니다.</p>
-              <p className="text-xs text-muted-foreground">생성 즉시 활성화되어 사용 가능합니다.</p>
+              <p className="text-sm font-bold">
+                {t(
+                  "msg.admin.api_keys.create.scopes_count",
+                  "총 {{count}}개의 권한이 할당됩니다.",
+                  { count: selectedScopes.length },
+                )}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "msg.admin.api_keys.create.scopes_hint",
+                  "생성 즉시 활성화되어 사용 가능합니다.",
+                )}
+              </p>
             </div>
-            <Button 
-              onClick={handleSubmit(onSubmit)} 
-              size="lg" 
+            <Button
+              onClick={handleSubmit(onSubmit)}
+              size="lg"
               className="px-8 font-bold shadow-lg shadow-primary/20"
               disabled={mutation.isPending}
             >
@@ -227,7 +382,7 @@ function ApiKeyCreatePage() {
               ) : (
                 <Save className="mr-2 h-5 w-5" />
               )}
-              API 키 발급하기
+              {t("ui.admin.api_keys.create.submit", "API 키 발급하기")}
             </Button>
           </div>
         </div>
@@ -236,4 +391,4 @@ function ApiKeyCreatePage() {
   );
 }
 
-export default ApiKeyCreatePage;
+export default ApiKeyCreatePage;