User Consent 필터(기능) 개선

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -34,8 +34,8 @@ function ClientConsentsPage() {
   const clientId = params.id ?? "";
   const [subjectInput, setSubjectInput] = useState("");
   const [subject, setSubject] = useState("");
-  const [statusFilter, setStatusFilter] = useState("all");
+  const [statusFilter, setStatusFilter] = useState<string[]>([]);
-  const [scopeFilter, setScopeFilter] = useState("all");
+  const [scopeFilter, setScopeFilter] = useState<string[]>([]);
   const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] = useState(false);
 
   const { data: clientData } = useQuery({
@@ -49,8 +49,8 @@ function ClientConsentsPage() {
     error,
     refetch,
   } = useQuery({
-    queryKey: ["consents", clientId, subject, statusFilter],
+    queryKey: ["consents", clientId, subject],
-    queryFn: () => fetchConsents(subject, clientId, statusFilter),
+    queryFn: () => fetchConsents(subject, clientId, "all"),
     enabled: clientId.length > 0,
   });
   const revokeMutation = useMutation({
@@ -77,7 +77,12 @@ function ClientConsentsPage() {
   const rows = consentsData?.items ?? [];
   const allScopes = Array.from(new Set(rows.flatMap((r) => r.grantedScopes)));
   const filteredRows = rows.filter((row) => {
-    return scopeFilter === "all" || row.grantedScopes.includes(scopeFilter);
+    const matchStatus =
+      statusFilter.length === 0 || statusFilter.includes(row.status);
+    const matchScope =
+      scopeFilter.length === 0 ||
+      scopeFilter.some((s) => row.grantedScopes.includes(s));
+    return matchStatus && matchScope;
   });
 
   const handleExportCSV = () => {
@@ -130,6 +135,30 @@ function ClientConsentsPage() {
     document.body.removeChild(link);
   };
 
+  const handleStatusFilterChange = (status: string, checked: boolean) => {
+    if (checked) {
+      setStatusFilter((prev) => [...prev, status]);
+    } else {
+      setStatusFilter((prev) => prev.filter((s) => s !== status));
+    }
+  };
+
+  const handleScopeFilterChange = (scope: string, checked: boolean) => {
+    if (checked) {
+      setScopeFilter((prev) => [...prev, scope]);
+    } else {
+      setScopeFilter((prev) => prev.filter((s) => s !== scope));
+    }
+  };
+
+  const handleAllScopesChange = (checked: boolean) => {
+    if (checked) {
+      setScopeFilter(allScopes);
+    } else {
+      setScopeFilter([]);
+    }
+  };
+
   return (
     <div className="space-y-8">
       <header className="space-y-4">
@@ -175,7 +204,7 @@ function ClientConsentsPage() {
           <div className="flex items-center gap-3">
             <Badge
               variant={
-                clientData?.client?.status === "active" ? "success" : "muted"
+                clientData?.client?.status === "active" ? "info" : "muted"
               }
             >
               {clientData?.client?.status === "active"
@@ -252,59 +281,88 @@ function ClientConsentsPage() {
           </div>
 
           {isAdvancedFilterOpen && (
-            <div className="flex flex-wrap items-center gap-6 rounded-lg bg-secondary/30 p-4 border border-border/40 animate-in fade-in slide-in-from-top-2 duration-200">
+            <div className="flex flex-col gap-4 rounded-lg bg-secondary/30 p-4 border border-border/40 animate-in fade-in slide-in-from-top-2 duration-200">
-              <div className="flex items-center gap-2">
+              <div className="flex flex-col gap-2">
-                <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
+                <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
                   {t("ui.dev.clients.consents.status_label", "Status:")}
                 </span>
-                <select
+                <div className="flex flex-wrap gap-4">
-                  className="h-9 rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30 min-w-[140px]"
+                  <label className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground">
-                  value={statusFilter}
+                    <input
-                  onChange={(e) => setStatusFilter(e.target.value)}
+                      type="checkbox"
-                >
+                      className="rounded border-input text-primary focus:ring-primary h-4 w-4"
-                  <option value="all">
+                      checked={statusFilter.includes("active")}
-                    {t("ui.dev.clients.consents.status_all", "All Statuses")}
+                      onChange={(e) =>
-                  </option>
+                        handleStatusFilterChange("active", e.target.checked)
-                  <option value="active">
+                      }
+                    />
                     {t("ui.common.status.active", "Active")}
-                  </option>
+                  </label>
-                  <option value="revoked">
+                  <label className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground">
+                    <input
+                      type="checkbox"
+                      className="rounded border-input text-primary focus:ring-primary h-4 w-4"
+                      checked={statusFilter.includes("revoked")}
+                      onChange={(e) =>
+                        handleStatusFilterChange("revoked", e.target.checked)
+                      }
+                    />
                     {t("ui.dev.clients.consents.status_revoked", "Revoked")}
-                  </option>
+                  </label>
-                </select>
+                </div>
               </div>
 
-              <div className="flex items-center gap-2">
+              <div className="flex flex-col gap-2">
-                <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
+                <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
                   {t("ui.dev.clients.consents.scope_label", "Scope:")}
                 </span>
-                <select
+                <div className="flex flex-wrap gap-4">
-                  className="h-9 rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30 min-w-[140px]"
+                  {allScopes.length > 0 && (
-                  value={scopeFilter}
+                    <label className="flex items-center gap-2 text-sm cursor-pointer font-bold text-primary hover:opacity-80">
-                  onChange={(e) => setScopeFilter(e.target.value)}
+                      <input
-                >
+                        type="checkbox"
-                  <option value="all">
+                        className="rounded border-input text-primary focus:ring-primary h-4 w-4"
-                    {t("ui.dev.clients.consents.scope_all", "All Scopes")}
+                        checked={
-                  </option>
+                          scopeFilter.length === allScopes.length &&
+                          allScopes.length > 0
+                        }
+                        onChange={(e) => handleAllScopesChange(e.target.checked)}
+                      />
+                      ALL
+                    </label>
+                  )}
                   {allScopes.map((scope) => (
-                    <option key={scope} value={scope}>
+                    <label
+                      key={scope}
+                      className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground"
+                    >
+                      <input
+                        type="checkbox"
+                        className="rounded border-input text-primary focus:ring-primary h-4 w-4"
+                        checked={scopeFilter.includes(scope)}
+                        onChange={(e) =>
+                          handleScopeFilterChange(scope, e.target.checked)
+                        }
+                      />
                       {scope}
-                    </option>
+                    </label>
                   ))}
-                </select>
+                </div>
               </div>
 
-              <Button
+              <div className="flex justify-end">
-                variant="link"
+                <Button
-                size="sm"
+                  variant="link"
-                className="text-xs text-muted-foreground ml-auto"
+                  size="sm"
-                onClick={() => {
+                  className="text-xs text-muted-foreground p-0 h-auto"
-                  setStatusFilter("all");
+                  onClick={() => {
-                  setScopeFilter("all");
+                    setStatusFilter([]);
-                }}
+                    setScopeFilter([]);
-              >
+                  }}
-                {t("ui.common.reset", "초기화")}
+                >
-              </Button>
+                  {t("ui.common.reset", "초기화")}
+                </Button>
+              </div>
             </div>
           )}
         </CardContent>