devfront 앱 목록 로고 표시

devfront/src/features/clients/ClientsPage.tsx

@@ -5,8 +5,6 @@ import {
   Filter,
   Plus,
   Search,
-  ServerCog,
-  ShieldHalf,
   X,
 } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -50,6 +48,7 @@ import { t } from "../../lib/i18n";
 import { resolveProfileRole } from "../../lib/role";
 import { cn } from "../../lib/utils";
 import { fetchMe } from "../auth/authApi";
+import { ClientLogo } from "./components/ClientLogo";
 
 function ClientsPage() {
   const navigate = useNavigate();
@@ -498,13 +497,7 @@ function ClientsPage() {
                       to={`/clients/${client.id}`}
                       className="flex items-center gap-3 transition-colors hover:text-primary"
                     >
-                      <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                        {client.type === "private" ? (
-                          <ServerCog className="h-4 w-4" />
-                        ) : (
-                          <ShieldHalf className="h-4 w-4" />
-                        )}
-                      </div>
+                      <ClientLogo client={client} />
                       <div>
                         <p className="font-semibold">
                           {client.name ||

devfront/src/features/clients/components/ClientLogo.tsx

@@ -0,0 +1,52 @@
+import { ServerCog, ShieldHalf } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../../../components/ui/avatar";
+import type { ClientSummary, ClientType } from "../../../lib/devApi";
+import { t } from "../../../lib/i18n";
+
+type ClientLogoProps = {
+  client: Pick<ClientSummary, "name" | "type" | "metadata">;
+};
+
+function readLogoUrl(metadata?: Record<string, unknown>): string | undefined {
+  const logoUrl = metadata?.logo_url;
+  if (typeof logoUrl !== "string") {
+    return undefined;
+  }
+
+  const trimmedLogoUrl = logoUrl.trim();
+  return trimmedLogoUrl.length > 0 ? trimmedLogoUrl : undefined;
+}
+
+function TypeFallbackIcon({ type }: { type: ClientType }) {
+  if (type === "private") {
+    return <ServerCog className="h-4 w-4" aria-hidden="true" />;
+  }
+
+  return <ShieldHalf className="h-4 w-4" aria-hidden="true" />;
+}
+
+export function ClientLogo({ client }: ClientLogoProps) {
+  const [didImageFail, setDidImageFail] = useState(false);
+  const logoUrl = useMemo(() => readLogoUrl(client.metadata), [client.metadata]);
+  const showImage = Boolean(logoUrl) && !didImageFail;
+  const clientName = client.name || t("ui.dev.clients.untitled", "Untitled");
+
+  return (
+    <Avatar className="h-9 w-9 rounded-lg border border-border/60 bg-primary/10 text-primary">
+      {showImage ? (
+        <AvatarImage
+          src={logoUrl}
+          alt={t("ui.dev.clients.logo_alt", "{{name}} 로고", {
+            name: clientName,
+          })}
+          className="object-contain p-1"
+          onError={() => setDidImageFail(true)}
+        />
+      ) : null}
+      <AvatarFallback className="rounded-lg bg-primary/10 text-primary">
+        <TypeFallbackIcon type={client.type} />
+      </AvatarFallback>
+    </Avatar>
+  );
+}