i18n refresh and frontend fixes

devfront/src/features/clients/ClientGeneralPage.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { Info, Search, Shield, Sparkles, Upload, Plus, Trash2 } from "lucide-react";
+import { Plus, Shield, Sparkles, Trash2, Upload } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
@@ -14,11 +14,15 @@ import {
 } from "../../components/ui/card";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
-import { Separator } from "../../components/ui/separator";
-import { Textarea } from "../../components/ui/textarea";
 import { Switch } from "../../components/ui/switch";
+import { Textarea } from "../../components/ui/textarea";
 import { createClient, fetchClient, updateClient } from "../../lib/devApi";
-import type { ClientStatus, ClientType } from "../../lib/devApi";
+import type {
+  ClientStatus,
+  ClientType,
+  ClientUpsertRequest,
+} from "../../lib/devApi";
+import { t } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
 
 interface ScopeItem {
@@ -46,10 +50,25 @@ function ClientGeneralPage() {
   const [clientType, setClientType] = useState<ClientType>("confidential");
   const [status, setStatus] = useState<ClientStatus>("active");
   const [redirectUris, setRedirectUris] = useState("");
-  const [scopes, setScopes] = useState<ScopeItem[]>([
-    { id: "1", name: "openid", description: "OIDC 인증 필수 스코프", mandatory: true },
-    { id: "2", name: "profile", description: "기본 프로필 정보 접근", mandatory: false },
-    { id: "3", name: "email", description: "이메일 주소 접근", mandatory: false },
+  const [scopes, setScopes] = useState<ScopeItem[]>(() => [
+    {
+      id: "1",
+      name: "openid",
+      description: t("msg.dev.clients.scopes.openid", "OIDC 인증 필수 스코프"),
+      mandatory: true,
+    },
+    {
+      id: "2",
+      name: "profile",
+      description: t("msg.dev.clients.scopes.profile", "기본 프로필 정보 접근"),
+      mandatory: false,
+    },
+    {
+      id: "3",
+      name: "email",
+      description: t("msg.dev.clients.scopes.email", "이메일 주소 접근"),
+      mandatory: false,
+    },
   ]);
 
   useEffect(() => {
@@ -58,43 +77,56 @@ function ClientGeneralPage() {
     setName(client.name || client.id);
     setClientType(client.type);
     setStatus(client.status);
-    
+
     const metadata = client.metadata ?? {};
-    if (typeof metadata.description === "string") setDescription(metadata.description);
+    if (typeof metadata.description === "string")
+      setDescription(metadata.description);
     if (typeof metadata.logo_url === "string") setLogoUrl(metadata.logo_url);
 
     // Metadata에 저장된 구조화된 scope 정보가 있으면 사용, 없으면 기본 scopes 문자열에서 생성
     const savedScopes = metadata.structured_scopes as ScopeItem[] | undefined;
     if (savedScopes && Array.isArray(savedScopes)) {
       setScopes(savedScopes);
-    }
-    else {
-      setScopes(client.scopes.map((s, idx) => ({
-        id: String(idx + 1),
-        name: s,
-        description: "",
-        mandatory: s === "openid"
-      })));
+    } else {
+      setScopes(
+        client.scopes.map((s, idx) => ({
+          id: String(idx + 1),
+          name: s,
+          description: "",
+          mandatory: s === "openid",
+        })),
+      );
     }
   }, [data]);
 
   const addScope = () => {
     const newId = String(Date.now());
-    setScopes([...scopes, { id: newId, name: "", description: "", mandatory: false }]);
+    setScopes([
+      ...scopes,
+      { id: newId, name: "", description: "", mandatory: false },
+    ]);
   };
 
-  const updateScope = (id: string, field: keyof ScopeItem, value: any) => {
-    setScopes(scopes.map(s => s.id === id ? { ...s, [field]: value } : s));
+  const updateScope = <K extends keyof ScopeItem>(
+    id: string,
+    field: K,
+    value: ScopeItem[K],
+  ) => {
+    setScopes(
+      scopes.map((scope) =>
+        scope.id === id ? { ...scope, [field]: value } : scope,
+      ),
+    );
   };
 
   const removeScope = (id: string) => {
-    setScopes(scopes.filter(s => s.id !== id));
+    setScopes(scopes.filter((s) => s.id !== id));
   };
 
   const mutation = useMutation({
     mutationFn: async () => {
-      const scopeNames = scopes.map(s => s.name).filter(Boolean);
-      const payload: any = {
+      const scopeNames = scopes.map((scope) => scope.name).filter(Boolean);
+      const payload: ClientUpsertRequest = {
         name,
         type: clientType,
         status,
@@ -102,16 +134,19 @@ function ClientGeneralPage() {
         metadata: {
           description,
           logo_url: logoUrl,
-          structured_scopes: scopes // 향후 보존을 위해 metadata에 저장
+          structured_scopes: scopes, // 향후 보존을 위해 metadata에 저장
         },
       };
 
       // 생성 시에는 Redirect URIs를 포함해서 전송
       if (isCreate) {
-        payload.redirectUris = redirectUris.split(",").map(u => u.trim()).filter(Boolean);
+        payload.redirectUris = redirectUris
+          .split(",")
+          .map((uri) => uri.trim())
+          .filter(Boolean);
         return createClient(payload);
       }
-      
+
       // 수정 시에는 Redirect URIs는 별도 탭에서 관리하므로 제외 (빈 배열이나 undefined로 보내지 않음)
       return updateClient(clientId as string, payload);
     },
@@ -120,17 +155,37 @@ function ClientGeneralPage() {
       if (result?.client?.id) {
         navigate(`/clients/${result.client.id}/settings`);
       }
-      alert("설정이 저장되었습니다.");
+      alert(t("msg.dev.clients.general.saved", "설정이 저장되었습니다."));
     },
   });
 
-  if (!isCreate && isLoading) return <div className="p-8 text-center">Loading client...</div>;
+  if (!isCreate && isLoading) {
+    return (
+      <div className="p-8 text-center">
+        {t("msg.dev.clients.general.loading", "Loading client...")}
+      </div>
+    );
+  }
   if (!isCreate && (error || !data)) {
-    const errMsg = (error as AxiosError<{ error?: string }>).response?.data?.error ?? (error as Error)?.message;
-    return <div className="p-8 text-center text-red-500">Error loading client: {errMsg || "unknown error"}</div>;
+    const errMsg =
+      (error as AxiosError<{ error?: string }>).response?.data?.error ??
+      (error as Error)?.message;
+    return (
+      <div className="p-8 text-center text-red-500">
+        {t(
+          "msg.dev.clients.general.load_error",
+          "Error loading client: {{error}}",
+          {
+            error: errMsg || t("msg.common.unknown_error", "unknown error"),
+          },
+        )}
+      </div>
+    );
   }
 
-  const displayName = isCreate ? "새 클라이언트" : data?.client?.name || data?.client?.id;
+  const displayName = isCreate
+    ? t("ui.dev.clients.general.display_new", "새 클라이언트")
+    : data?.client?.name || data?.client?.id;
 
   return (
     <div className="space-y-8">
@@ -138,22 +193,45 @@ function ClientGeneralPage() {
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div className="space-y-2">
             <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-              <Link to="/clients" className="text-primary hover:underline">Applications</Link>
+              <Link to="/clients" className="text-primary hover:underline">
+                {t("ui.dev.clients.general.breadcrumb.section", "Applications")}
+              </Link>
               <span>/</span>
               <span className="text-foreground">{displayName}</span>
             </div>
-            <h1 className="text-3xl font-black leading-tight">{isCreate ? "Create Client" : "Client Settings"}</h1>
+            <h1 className="text-3xl font-black leading-tight">
+              {isCreate
+                ? t("ui.dev.clients.general.title_create", "Create Client")
+                : t("ui.dev.clients.general.title_edit", "Client Settings")}
+            </h1>
           </div>
-          <Badge variant={status === "active" ? "success" : "muted"} className="px-3 py-1 text-xs uppercase">
-            {status === "active" ? "Active" : "Inactive"}
+          <Badge
+            variant={status === "active" ? "success" : "muted"}
+            className="px-3 py-1 text-xs uppercase"
+          >
+            {status === "active"
+              ? t("ui.common.status.active", "Active")
+              : t("ui.common.status.inactive", "Inactive")}
           </Badge>
         </div>
         <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
           {!isCreate && (
             <>
-              <Link to={`/clients/${clientId}`} className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground">Connection</Link>
-              <Link to={`/clients/${clientId}/consents`} className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground">Consent &amp; Users</Link>
-              <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">Settings</span>
+              <Link
+                to={`/clients/${clientId}`}
+                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+              >
+                {t("ui.dev.clients.details.tab.connection", "Connection")}
+              </Link>
+              <Link
+                to={`/clients/${clientId}/consents`}
+                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+              >
+                {t("ui.dev.clients.details.tab.consents", "Consent & Users")}
+              </Link>
+              <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
+                {t("ui.dev.clients.details.tab.settings", "Settings")}
+              </span>
             </>
           )}
         </div>
@@ -161,28 +239,83 @@ function ClientGeneralPage() {
 
       {/* 1. Application Identity */}
       <div className="glass-panel p-6">
-        <CardTitle className="text-xl font-bold mb-2">Application Identity</CardTitle>
-        <CardDescription className="mb-6">앱 이름과 설명, 로고를 설정합니다.</CardDescription>
+        <CardTitle className="text-xl font-bold mb-2">
+          {t("ui.dev.clients.general.identity.title", "Application Identity")}
+        </CardTitle>
+        <CardDescription className="mb-6">
+          {t(
+            "msg.dev.clients.general.identity.subtitle",
+            "앱 이름과 설명, 로고를 설정합니다.",
+          )}
+        </CardDescription>
         <div className="grid gap-8 md:grid-cols-2">
           <div className="space-y-5">
             <div className="space-y-2">
-              <Label className="text-sm font-semibold">앱 이름 <span className="text-destructive">*</span></Label>
-              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="My Awesome Application" />
+              <Label className="text-sm font-semibold">
+                {t("ui.dev.clients.general.identity.name", "앱 이름")}{" "}
+                <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder={t(
+                  "ui.dev.clients.general.identity.name_placeholder",
+                  "My Awesome Application",
+                )}
+              />
             </div>
             <div className="space-y-2">
-              <Label className="text-sm font-semibold">Description</Label>
-              <Textarea rows={3} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="앱에 대한 간단한 설명을 입력하세요." />
+              <Label className="text-sm font-semibold">
+                {t(
+                  "ui.dev.clients.general.identity.description",
+                  "Description",
+                )}
+              </Label>
+              <Textarea
+                rows={3}
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder={t(
+                  "ui.dev.clients.general.identity.description_placeholder",
+                  "앱에 대한 간단한 설명을 입력하세요.",
+                )}
+              />
             </div>
           </div>
           <div className="space-y-2">
-            <Label className="text-sm font-semibold">App Logo URL</Label>
+            <Label className="text-sm font-semibold">
+              {t("ui.dev.clients.general.identity.logo", "App Logo URL")}
+            </Label>
             <div className="flex gap-4">
               <div className="flex-1 space-y-2">
-                <Input value={logoUrl} onChange={(e) => setLogoUrl(e.target.value)} placeholder="https://example.com/logo.png" />
-                <p className="text-xs text-muted-foreground">인증 화면에 표시될 PNG/SVG URL입니다.</p>
+                <Input
+                  value={logoUrl}
+                  onChange={(e) => setLogoUrl(e.target.value)}
+                  placeholder={t(
+                    "ui.dev.clients.general.identity.logo_placeholder",
+                    "https://example.com/logo.png",
+                  )}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t(
+                    "msg.dev.clients.general.identity.logo_help",
+                    "인증 화면에 표시될 PNG/SVG URL입니다.",
+                  )}
+                </p>
               </div>
               <div className="flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/40 shrink-0">
-                {logoUrl ? <img src={logoUrl} alt="Logo Preview" className="h-full w-full object-contain" /> : <Upload className="h-5 w-5 text-muted-foreground" />}
+                {logoUrl ? (
+                  <img
+                    src={logoUrl}
+                    alt={t(
+                      "ui.dev.clients.general.identity.logo_preview",
+                      "Logo Preview",
+                    )}
+                    className="h-full w-full object-contain"
+                  />
+                ) : (
+                  <Upload className="h-5 w-5 text-muted-foreground" />
+                )}
               </div>
             </div>
           </div>
@@ -193,25 +326,49 @@ function ClientGeneralPage() {
       <Card className="glass-panel">
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
           <div>
-            <CardTitle className="text-xl font-bold">Scopes</CardTitle>
-            <CardDescription>이 클라이언트가 요청할 수 있는 권한 범위를 정의합니다.</CardDescription>
+            <CardTitle className="text-xl font-bold">
+              {t("ui.dev.clients.general.scopes.title", "Scopes")}
+            </CardTitle>
+            <CardDescription>
+              {t(
+                "msg.dev.clients.general.scopes.subtitle",
+                "이 클라이언트가 요청할 수 있는 권한 범위를 정의합니다.",
+              )}
+            </CardDescription>
           </div>
-          <Button variant="outline" size="sm" onClick={addScope} className="gap-2">
-            <Plus className="h-4 w-4" /> Scope 추가
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={addScope}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            {t("ui.dev.clients.general.scopes.add", "Scope 추가")}
           </Button>
         </CardHeader>
         <CardContent className="space-y-6">
           {/* Create 모드일 때만 Redirect URIs 입력 필드 표시 */}
           {isCreate && (
             <div className="space-y-2 border-b border-border pb-6 mb-6">
-              <Label className="text-sm font-semibold">Redirect URIs <span className="text-destructive">*</span></Label>
-              <Textarea 
-                value={redirectUris} 
-                onChange={(e) => setRedirectUris(e.target.value)} 
-                placeholder="https://app.example.com/callback, http://localhost:3000/auth/callback (콤마로 구분)" 
+              <Label className="text-sm font-semibold">
+                {t("ui.dev.clients.general.redirect.label", "Redirect URIs")}{" "}
+                <span className="text-destructive">*</span>
+              </Label>
+              <Textarea
+                value={redirectUris}
+                onChange={(e) => setRedirectUris(e.target.value)}
+                placeholder={t(
+                  "ui.dev.clients.general.redirect.placeholder",
+                  "https://app.example.com/callback, http://localhost:3000/auth/callback (콤마로 구분)",
+                )}
                 className="font-mono text-sm"
               />
-              <p className="text-xs text-muted-foreground">인증 후 리다이렉트될 URI를 입력하세요. 생성 후 Connection 탭에서 수정 가능합니다.</p>
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "msg.dev.clients.general.redirect.help",
+                  "인증 후 리다이렉트될 URI를 입력하세요. 생성 후 Connection 탭에서 수정 가능합니다.",
+                )}
+              </p>
             </div>
           )}
 
@@ -220,27 +377,76 @@ function ClientGeneralPage() {
               <thead className="bg-muted/50 border-b border-border text-xs uppercase tracking-wider text-muted-foreground">
                 <tr>
                   <th className="px-4 py-3 text-left font-bold">Scope Name</th>
-                  <th className="px-4 py-3 text-left font-bold">Description</th>
-                  <th className="px-4 py-3 text-center font-bold">Mandatory</th>
-                  <th className="px-4 py-3 text-right"></th>
+                  <th className="px-4 py-3 text-left font-bold">
+                    {t(
+                      "ui.dev.clients.general.scopes.table.name",
+                      "Scope Name",
+                    )}
+                  </th>
+                  <th className="px-4 py-3 text-left font-bold">
+                    {t(
+                      "ui.dev.clients.general.scopes.table.description",
+                      "Description",
+                    )}
+                  </th>
+                  <th className="px-4 py-3 text-center font-bold">
+                    {t(
+                      "ui.dev.clients.general.scopes.table.mandatory",
+                      "Mandatory",
+                    )}
+                  </th>
+                  <th className="px-4 py-3 text-right" />
                 </tr>
               </thead>
               <tbody className="divide-y divide-border">
                 {scopes.map((s) => (
-                  <tr key={s.id} className="hover:bg-muted/30 transition-colors">
+                  <tr
+                    key={s.id}
+                    className="hover:bg-muted/30 transition-colors"
+                  >
                     <td className="px-4 py-3">
-                      <Input value={s.name} onChange={(e) => updateScope(s.id, "name", e.target.value)} className="h-8 font-mono text-xs" placeholder="e.g. profile" />
+                      <Input
+                        value={s.name}
+                        onChange={(e) =>
+                          updateScope(s.id, "name", e.target.value)
+                        }
+                        className="h-8 font-mono text-xs"
+                        placeholder={t(
+                          "ui.dev.clients.general.scopes.name_placeholder",
+                          "e.g. profile",
+                        )}
+                      />
                     </td>
                     <td className="px-4 py-3">
-                      <Input value={s.description} onChange={(e) => updateScope(s.id, "description", e.target.value)} className="h-8 text-xs" placeholder="권한에 대한 설명" />
+                      <Input
+                        value={s.description}
+                        onChange={(e) =>
+                          updateScope(s.id, "description", e.target.value)
+                        }
+                        className="h-8 text-xs"
+                        placeholder={t(
+                          "ui.dev.clients.general.scopes.description_placeholder",
+                          "권한에 대한 설명",
+                        )}
+                      />
                     </td>
                     <td className="px-4 py-3 text-center">
                       <div className="flex justify-center">
-                        <Switch checked={s.mandatory} onCheckedChange={(checked) => updateScope(s.id, "mandatory", checked)} />
+                        <Switch
+                          checked={s.mandatory}
+                          onCheckedChange={(checked) =>
+                            updateScope(s.id, "mandatory", checked)
+                          }
+                        />
                       </div>
                     </td>
                     <td className="px-4 py-3 text-right">
-                      <Button variant="ghost" size="icon" onClick={() => removeScope(s.id)} className="h-8 w-8 text-muted-foreground hover:text-destructive">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeScope(s.id)}
+                        className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                      >
                         <Trash2 className="h-4 w-4" />
                       </Button>
                     </td>
@@ -248,7 +454,15 @@ function ClientGeneralPage() {
                 ))}
                 {scopes.length === 0 && (
                   <tr>
-                    <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">등록된 스코프가 없습니다.</td>
+                    <td
+                      colSpan={4}
+                      className="px-4 py-8 text-center text-muted-foreground"
+                    >
+                      {t(
+                        "msg.dev.clients.general.scopes.empty",
+                        "등록된 스코프가 없습니다.",
+                      )}
+                    </td>
                   </tr>
                 )}
               </tbody>
@@ -260,48 +474,118 @@ function ClientGeneralPage() {
       {/* 3. Security Settings (Moved down) */}
       <Card className="glass-panel">
         <CardHeader className="pb-3">
-          <CardTitle className="text-xl font-bold">보안 설정</CardTitle>
-          <CardDescription>클라이언트 유형을 선택하세요. 보안 수준에 따라 인증 방식이 달라집니다.</CardDescription>
+          <CardTitle className="text-xl font-bold">
+            {t("ui.dev.clients.general.security.title", "보안 설정")}
+          </CardTitle>
+          <CardDescription>
+            {t(
+              "msg.dev.clients.general.security.subtitle",
+              "클라이언트 유형을 선택하세요. 보안 수준에 따라 인증 방식이 달라집니다.",
+            )}
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="grid gap-4 md:grid-cols-2">
-            <label className={cn("relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition", clientType === "confidential" ? "border-primary bg-primary/5" : "border-border bg-card hover:border-muted-foreground/40")}>
-              <input className="sr-only" type="radio" name="client-type" checked={clientType === "confidential"} onChange={() => setClientType("confidential")} />
+            <label
+              className={cn(
+                "relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
+                clientType === "confidential"
+                  ? "border-primary bg-primary/5"
+                  : "border-border bg-card hover:border-muted-foreground/40",
+              )}
+            >
+              <input
+                className="sr-only"
+                type="radio"
+                name="client-type"
+                checked={clientType === "confidential"}
+                onChange={() => setClientType("confidential")}
+              />
               <span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
-                <Shield className="h-4 w-4 text-primary" /> Confidential
+                <Shield className="h-4 w-4 text-primary" />
+                {t(
+                  "ui.dev.clients.general.security.confidential",
+                  "Confidential",
+                )}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {t(
+                  "msg.dev.clients.general.security.confidential_help",
+                  "서버 사이드 앱(예: Node.js, Java)처럼 비밀키를 안전하게 보관 가능한 경우.",
+                )}
+              </span>
+              <span className="absolute right-4 top-4 text-primary">
+                {clientType === "confidential" ? "✓" : ""}
               </span>
-              <span className="text-xs text-muted-foreground">서버 사이드 앱(예: Node.js, Java)처럼 비밀키를 안전하게 보관 가능한 경우.</span>
-              <span className="absolute right-4 top-4 text-primary">{clientType === "confidential" ? "✓" : ""}</span>
             </label>
 
-            <label className={cn("relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition", clientType === "public" ? "border-primary bg-primary/5" : "border-border bg-card hover:border-muted-foreground/40")}>
-              <input className="sr-only" type="radio" name="client-type" checked={clientType === "public"} onChange={() => setClientType("public")} />
+            <label
+              className={cn(
+                "relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
+                clientType === "public"
+                  ? "border-primary bg-primary/5"
+                  : "border-border bg-card hover:border-muted-foreground/40",
+              )}
+            >
+              <input
+                className="sr-only"
+                type="radio"
+                name="client-type"
+                checked={clientType === "public"}
+                onChange={() => setClientType("public")}
+              />
               <span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
-                <Sparkles className="h-4 w-4" /> Public
+                <Sparkles className="h-4 w-4" />
+                {t("ui.dev.clients.general.security.public", "Public")}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {t(
+                  "msg.dev.clients.general.security.public_help",
+                  "SPA/모바일 앱처럼 비밀키 보관이 어려운 경우. PKCE를 기본 사용합니다.",
+                )}
+              </span>
+              <span className="absolute right-4 top-4 text-primary">
+                {clientType === "public" ? "✓" : ""}
               </span>
-              <span className="text-xs text-muted-foreground">SPA/모바일 앱처럼 비밀키 보관이 어려운 경우. PKCE를 기본 사용합니다.</span>
-              <span className="absolute right-4 top-4 text-primary">{clientType === "public" ? "✓" : ""}</span>
             </label>
           </div>
         </CardContent>
       </Card>
 
       <div className="flex items-center justify-end gap-3 border-t border-border pt-4">
-        <Button variant="outline" onClick={() => navigate("/clients")}>취소</Button>
-        <Button onClick={() => mutation.mutate()} disabled={mutation.isPending} className="px-8 shadow-lg shadow-primary/20">
-          {mutation.isPending ? "저장 중..." : (isCreate ? "클라이언트 생성" : "설정 저장")}
+        <Button variant="outline" onClick={() => navigate("/clients")}>
+          {t("ui.common.cancel", "취소")}
+        </Button>
+        <Button
+          onClick={() => mutation.mutate()}
+          disabled={mutation.isPending}
+          className="px-8 shadow-lg shadow-primary/20"
+        >
+          {mutation.isPending
+            ? t("msg.common.saving", "저장 중...")
+            : isCreate
+              ? t("ui.dev.clients.general.create", "클라이언트 생성")
+              : t("ui.dev.clients.general.save", "설정 저장")}
         </Button>
       </div>
 
       {!isCreate && (
         <div className="glass-panel flex flex-wrap gap-x-12 gap-y-4 p-4 opacity-70">
           <div className="space-y-1">
-            <span className="text-xs font-semibold uppercase text-muted-foreground">Client ID</span>
+            <span className="text-xs font-semibold uppercase text-muted-foreground">
+              {t("ui.dev.clients.general.footer.client_id", "Client ID")}
+            </span>
             <span className="font-mono text-sm block">{data?.client?.id}</span>
           </div>
           <div className="space-y-1">
-            <span className="text-xs font-semibold uppercase text-muted-foreground">Created On</span>
-            <span className="text-sm text-muted-foreground block">{data?.client?.created_at ? new Date(data.client.created_at).toLocaleString() : "-"}</span>
+            <span className="text-xs font-semibold uppercase text-muted-foreground">
+              {t("ui.dev.clients.general.footer.created_on", "Created On")}
+            </span>
+            <span className="text-sm text-muted-foreground block">
+              {data?.client?.createdAt
+                ? new Date(data.client.createdAt).toLocaleString()
+                : "-"}
+            </span>
           </div>
         </div>
       )}