로컬 code-check 오류 수정

devfront/src/features/clients/ClientDetailsPage.tsx

@@ -9,7 +9,7 @@ import {
   Save,
   Shield,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -44,7 +44,7 @@ function ClientDetailsPage() {
   const queryClient = useQueryClient();
   const clientId = params.id ?? "";
 
-  const { data, isLoading, error } = useQuery({
+  const { data, error } = useQuery({
     queryKey: ["client", clientId],
     queryFn: () => fetchClient(clientId),
     enabled: clientId.length > 0,
@@ -52,12 +52,18 @@ function ClientDetailsPage() {
 
   const [redirectUris, setRedirectUris] = useState("");
   const [showSecret, setShowSecret] = useState(false);
+  const redirectUrisHydratedRef = useRef(false);
 
   useEffect(() => {
-    if (data?.client?.redirectUris) {
+    if (
+      !redirectUrisHydratedRef.current &&
+      data?.client?.redirectUris &&
+      redirectUris === ""
+    ) {
       setRedirectUris(data.client.redirectUris.join(", "));
+      redirectUrisHydratedRef.current = true;
     }
-  }, [data]);
+  }, [data, redirectUris]);
 
   const mutation = useMutation({
     mutationFn: () => {
@@ -129,15 +135,7 @@ function ClientDetailsPage() {
     );
   }
 
-  if (isLoading) {
-    return (
-      <div className="p-8 text-center">
-        {t("msg.dev.clients.details.loading", "Loading app...")}
-      </div>
-    );
-  }
-
-  if (error || !data) {
+  if (error && !data) {
     const errMsg =
       (error as AxiosError<{ error?: string }>).response?.data?.error ??
       (error as Error)?.message;
@@ -152,37 +150,45 @@ function ClientDetailsPage() {
     );
   }
 
+  const client = data?.client;
+  const endpointValues = data?.endpoints ?? {
+    discovery: "-",
+    issuer: "-",
+    authorization: "-",
+    token: "-",
+    userinfo: "-",
+  };
   const endpoints = [
     {
       labelKey: "ui.dev.clients.details.endpoint.discovery",
       labelFallback: "Discovery Endpoint",
-      value: data.endpoints.discovery,
+      value: endpointValues.discovery,
     },
     {
       labelKey: "ui.dev.clients.details.endpoint.issuer",
       labelFallback: "Issuer URL",
-      value: data.endpoints.issuer,
+      value: endpointValues.issuer,
     },
     {
       labelKey: "ui.dev.clients.details.endpoint.authorization",
       labelFallback: "Authorization Endpoint",
-      value: data.endpoints.authorization,
+      value: endpointValues.authorization,
     },
     {
       labelKey: "ui.dev.clients.details.endpoint.token",
       labelFallback: "Token Endpoint",
-      value: data.endpoints.token,
+      value: endpointValues.token,
     },
     {
       labelKey: "ui.dev.clients.details.endpoint.userinfo",
       labelFallback: "UserInfo Endpoint",
-      value: data.endpoints.userinfo,
+      value: endpointValues.userinfo,
     },
   ];
 
   // Client Secret from API
   const secretPlaceholder = "SECRET_NOT_AVAILABLE";
-  const clientSecret = data.client.clientSecret || secretPlaceholder;
+  const clientSecret = client?.clientSecret || secretPlaceholder;
   const displaySecret =
     clientSecret === secretPlaceholder
       ? t("msg.dev.clients.details.secret_unavailable", "SECRET_NOT_AVAILABLE")
@@ -200,7 +206,7 @@ function ClientDetailsPage() {
             {t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
           </Link>
           <span>/</span>
-          <span>{data.client.name || clientId}</span>
+          <span>{client?.name || clientId}</span>
           <span>/</span>
           <span className="text-foreground font-semibold">
             {t("ui.dev.clients.details.tab.connection", "Federation")}
@@ -215,7 +221,7 @@ function ClientDetailsPage() {
             </Button>
             <div>
               <h1 className="text-4xl font-black leading-tight tracking-tight">
-                {data.client.name || data.client.id}
+                {client?.name || client?.id || clientId}
               </h1>
               <p className="text-muted-foreground">
                 {t(
@@ -226,12 +232,14 @@ function ClientDetailsPage() {
             </div>
           </div>
           <Badge
-            variant={data.client.status === "active" ? "info" : "muted"}
+            variant={client?.status === "active" ? "info" : "muted"}
             className="px-3 py-1 text-xs uppercase"
           >
-            {data.client.status === "active"
+            {client?.status === "active"
               ? t("ui.common.status.active", "Active")
-              : t("ui.common.status.inactive", "Inactive")}
+              : client?.status === "inactive"
+                ? t("ui.common.status.inactive", "Inactive")
+                : t("msg.common.loading", "Loading...")}
           </Badge>
         </div>
         <div className="flex gap-6 border-b border-border">
@@ -276,10 +284,10 @@ function ClientDetailsPage() {
                   </p>
                   <div className="flex items-center justify-between gap-2">
                     <p className="font-mono text-lg truncate">
-                      {data.client.id}
+                      {client?.id || clientId}
                     </p>
                     <CopyButton
-                      value={data.client.id}
+                      value={client?.id || clientId}
                       onCopy={() =>
                         toast(
                           t(
@@ -461,7 +469,10 @@ function ClientDetailsPage() {
                     )}
                     rows={5}
                     value={redirectUris}
-                    onChange={(e) => setRedirectUris(e.target.value)}
+                    onChange={(e) => {
+                      redirectUrisHydratedRef.current = true;
+                      setRedirectUris(e.target.value);
+                    }}
                     className="font-mono text-sm"
                   />
                 </div>