클라이언트 시크릿 키

devfront/src/features/clients/ClientDetailsPage.tsx

@@ -1,6 +1,7 @@
+import React, { useState, useEffect } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { AlertCircle, Copy, Eye, Link2, Shield, Workflow, Save } from "lucide-react";
+import { AlertCircle, Copy, Eye, EyeOff, Link2, Shield, Workflow, Save } from "lucide-react";
 import { Link, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -15,7 +16,7 @@ import {
 import { Textarea } from "../../components/ui/textarea";
 import { Label } from "../../components/ui/label";
 import { fetchClient, updateClient } from "../../lib/devApi";
-import { useState, useEffect } from "react";
+import { cn } from "../../lib/utils";
 
 function ClientDetailsPage() {
   const params = useParams();
@@ -29,6 +30,7 @@ function ClientDetailsPage() {
   });
 
   const [redirectUris, setRedirectUris] = useState("");
+  const [showSecret, setShowSecret] = useState(false);
 
   useEffect(() => {
     if (data?.client?.redirectUris) {
@@ -80,6 +82,9 @@ function ClientDetailsPage() {
     { label: "UserInfo Endpoint", value: data.endpoints.userinfo },
   ];
 
+  // Client Secret from API
+  const clientSecret = data.client.clientSecret || "SECRET_NOT_AVAILABLE";
+
   return (
     <div className="space-y-8">
       <div className="space-y-3">
@@ -159,10 +164,28 @@ function ClientDetailsPage() {
                     Client Secret
                   </p>
                   <div className="flex items-center justify-between gap-2">
-                    <p className="font-mono text-lg tracking-widest">••••••••••••••••</p>
+                    <p className={cn(
+                      "font-mono text-lg",
+                      !showSecret && "tracking-widest"
+                    )}>
+                      {showSecret ? clientSecret : "••••••••••••••••"}
+                    </p>
                     <div className="flex gap-2 shrink-0">
-                      <Button variant="secondary" size="icon">
-                        <Eye className="h-4 w-4" />
+                      <Button 
+                        variant="secondary" 
+                        size="icon" 
+                        onClick={() => setShowSecret(!showSecret)}
+                        aria-label={showSecret ? "비밀키 숨기기" : "비밀키 보기"}
+                      >
+                        {showSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                      </Button>
+                      <Button 
+                        variant="secondary" 
+                        size="icon"
+                        onClick={() => navigator.clipboard.writeText(clientSecret)}
+                        disabled={!showSecret && clientSecret === "SECRET_NOT_AVAILABLE"}
+                      >
+                        <Copy className="h-4 w-4" />
                       </Button>
                       <Button variant="outline" size="icon" className="border-amber-500/50 text-amber-500">
                         <AlertCircle className="h-4 w-4" />