클라이언트 목록 및 상세 화면에 복사 피드백 적용

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>