동의 및 사용자 탭 에러 메세지 수정

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 import {
   ArrowLeft,
   ChevronLeft,
@@ -9,6 +10,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { Link, useParams } from "react-router-dom";
+import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import {
@@ -161,6 +163,57 @@ function ClientConsentsPage() {
     }
   };
 
+  if (error) {
+    const axiosError = error as AxiosError<{ error?: string }>;
+    if (axiosError.response?.status === 403) {
+      return (
+        <div className="space-y-8">
+          <header className="space-y-4">
+            <div className="flex flex-wrap justify-between gap-4">
+              <div className="space-y-2">
+                <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+                  <Link to="/" className="hover:text-primary">
+                    {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
+                  </Link>
+                  <span>/</span>
+                  <Link to="/clients" className="hover:text-primary">
+                    {t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
+                  </Link>
+                  <span>/</span>
+                  <span>{clientData?.client?.name || clientId}</span>
+                  <span>/</span>
+                  <span className="text-foreground font-semibold">
+                    {t(
+                      "ui.dev.clients.consents.breadcrumb.current",
+                      "User Consent Grants",
+                    )}
+                  </span>
+                </nav>
+                <div className="flex items-center gap-2">
+                  <Button variant="ghost" size="icon" asChild>
+                    <Link to={`/clients/${clientId}`}>
+                      <ArrowLeft className="h-4 w-4" />
+                    </Link>
+                  </Button>
+                  <div>
+                    <p className="text-3xl font-black leading-tight">
+                      {t(
+                        "ui.dev.clients.consents.title",
+                        "User Consent Grants",
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <ClientDetailTabs activeTab="consents" clientId={clientId} />
+          </header>
+          <ForbiddenMessage resourceToken="consents" />
+        </div>
+      );
+    }
+  }
+
   return (
     <div className="space-y-8">
       <header className="space-y-4">
@@ -359,18 +412,20 @@ function ClientConsentsPage() {
 
       <Card className="glass-panel">
         {error && (
-          <CardContent className="text-sm text-red-500">
+          <CardContent className="py-8 text-center text-sm text-destructive border-b border-border/50">
             {t(
               "msg.dev.clients.consents.load_error",
               "Error loading consents: {{error}}",
               {
-                error: (error as Error).message,
+                error:
+                  (error as AxiosError<{ error?: string }>).response?.data
+                    ?.error ?? (error as Error).message,
               },
             )}
           </CardContent>
         )}
         {isLoading && (
-          <CardContent className="text-sm text-muted-foreground">
+          <CardContent className="py-8 text-center text-sm text-muted-foreground border-b border-border/50">
             {t("msg.dev.clients.consents.loading", "Loading consents...")}
           </CardContent>
         )}
@@ -408,10 +463,13 @@ function ClientConsentsPage() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredRows.length === 0 && !isLoading ? (
+            {filteredRows.length === 0 && !isLoading && !error ? (
               <TableRow>
-                <TableCell colSpan={7} className="h-24 text-center">
-                  {t("msg.dev.clients.consents.empty", "No consents found.")}
+                <TableCell colSpan={7} className="h-32 text-center text-muted-foreground">
+                  <div className="flex flex-col items-center gap-2">
+                    <Search className="h-8 w-8 opacity-20" />
+                    <p>{t("msg.dev.clients.consents.empty", "No consents found.")}</p>
+                  </div>
                 </TableCell>
               </TableRow>
             ) : (