From fb2541cb09611cbd5867f3ff09a711c4109a1cee Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Mon, 2 Feb 2026 16:02:53 +0900
Subject: [PATCH] =?UTF-8?q?=ED=81=B4=EB=9D=BC=EC=9D=B4=EC=96=B8=ED=8A=B8?=
 =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=20=EB=B0=8F=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=EC=97=90=20=EB=B3=B5=EC=82=AC=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=EB=B0=B1=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devfront/src/components/layout/AppLayout.tsx  |  2 ++
 .../features/clients/ClientDetailsPage.tsx    | 35 +++++++++----------
 devfront/src/features/clients/ClientsPage.tsx | 12 +++----
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/devfront/src/components/layout/AppLayout.tsx b/devfront/src/components/layout/AppLayout.tsx
index 35d9448d..3063028b 100644
--- a/devfront/src/components/layout/AppLayout.tsx
+++ b/devfront/src/components/layout/AppLayout.tsx
@@ -1,6 +1,7 @@
 import { BadgeCheck, Moon, ShieldHalf, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
 import { NavLink, Outlet } from "react-router-dom";
+import { Toaster } from "../ui/toaster";
 
 const navItems = [{ label: "Clients", to: "/clients", icon: ShieldHalf }];
 
@@ -105,6 +106,7 @@ function AppLayout() {
           <Outlet />
         </main>
       </div>
+      <Toaster />
     </div>
   );
 }
diff --git a/devfront/src/features/clients/ClientDetailsPage.tsx b/devfront/src/features/clients/ClientDetailsPage.tsx
index dcecfbae..fe20da69 100644
--- a/devfront/src/features/clients/ClientDetailsPage.tsx
+++ b/devfront/src/features/clients/ClientDetailsPage.tsx
@@ -17,6 +17,8 @@ import { Textarea } from "../../components/ui/textarea";
 import { Label } from "../../components/ui/label";
 import { fetchClient, updateClient } from "../../lib/devApi";
 import { cn } from "../../lib/utils";
+import { CopyButton } from "../../components/ui/copy-button";
+import { toast } from "../../components/ui/use-toast";
 
 function ClientDetailsPage() {
   const params = useParams();
@@ -48,10 +50,10 @@ function ClientDetailsPage() {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["client", clientId] });
-      alert("Redirect URIs가 저장되었습니다.");
+      toast("Redirect URIs가 저장되었습니다.");
     },
     onError: (err) => {
-      alert(`저장 실패: ${(err as Error).message}`);
+      toast(`저장 실패: ${(err as Error).message}`, "error");
     },
   });
 
@@ -145,9 +147,10 @@ function ClientDetailsPage() {
                   </p>
                   <div className="flex items-center justify-between gap-2">
                     <p className="font-mono text-lg truncate">{data.client.id}</p>
-                    <Button variant="secondary" size="icon" className="shrink-0" onClick={() => navigator.clipboard.writeText(data.client.id)}>
-                      <Copy className="h-4 w-4" />
-                    </Button>
+                    <CopyButton 
+                      value={data.client.id} 
+                      onCopy={() => toast("Client ID가 복사되었습니다.")}
+                    />
                   </div>
                 </div>
 
@@ -173,14 +176,11 @@ function ClientDetailsPage() {
                       >
                         {showSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                       </Button>
-                      <Button 
-                        variant="secondary" 
-                        size="icon"
-                        onClick={() => navigator.clipboard.writeText(clientSecret)}
+                      <CopyButton 
+                        value={clientSecret}
                         disabled={!showSecret && clientSecret === "SECRET_NOT_AVAILABLE"}
-                      >
-                        <Copy className="h-4 w-4" />
-                      </Button>
+                        onCopy={() => toast("Client Secret이 복사되었습니다.")}
+                      />
                       <Button variant="outline" size="icon" className="border-amber-500/50 text-amber-500">
                         <AlertCircle className="h-4 w-4" />
                       </Button>
@@ -213,14 +213,11 @@ function ClientDetailsPage() {
                         <span className="break-all font-mono text-sm">
                           {endpoint.value}
                         </span>
-                        <Button
-                          variant="secondary"
-                          size="icon"
+                        <CopyButton
+                          value={endpoint.value}
                           className="h-8 w-8 shrink-0"
-                          onClick={() => navigator.clipboard.writeText(endpoint.value)}
-                        >
-                          <Copy className="h-4 w-4" />
-                        </Button>
+                          onCopy={() => toast(`${endpoint.label}가 복사되었습니다.`)}
+                        />
                       </TableCell>
                     </TableRow>
                   ))}
diff --git a/devfront/src/features/clients/ClientsPage.tsx b/devfront/src/features/clients/ClientsPage.tsx
index 14a0d3f6..a3ed28a7 100644
--- a/devfront/src/features/clients/ClientsPage.tsx
+++ b/devfront/src/features/clients/ClientsPage.tsx
@@ -42,6 +42,8 @@ import {
   updateClientStatus,
 } from "../../lib/devApi";
 import { cn } from "../../lib/utils";
+import { CopyButton } from "../../components/ui/copy-button";
+import { toast } from "../../components/ui/use-toast";
 
 function ClientsPage() {
   const navigate = useNavigate();
@@ -231,15 +233,13 @@ function ClientsPage() {
                       <code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
                         {client.id}
                       </code>
-                      <Button
+                      <CopyButton
+                        value={client.id}
                         variant="ghost"
-                        size="icon"
                         className="h-8 w-8 text-muted-foreground hover:text-primary"
                         aria-label="Copy client id"
-                        onClick={() => navigator.clipboard.writeText(client.id)}
-                      >
-                        <Copy className="h-4 w-4" />
-                      </Button>
+                        onCopy={() => toast("클라이언트 ID가 복사되었습니다.")}
+                      />
                     </div>
                   </TableCell>
                   <TableCell>