custom claim 권한체크 확인

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -37,6 +37,7 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import { Textarea } from "../../components/ui/textarea";
 import {
   fetchClient,
   fetchConsents,
@@ -154,7 +155,7 @@ function draftRowsToMetadata(rows: MetadataDraftRow[]) {
   for (const row of rows) {
     const key = row.key.trim();
     if (!key) continue;
-    metadata[key] = row.value.trim();
+    metadata[key] = draftRowValueToMetadataValue(row);
     metadata[`${key}_permissions`] = {
       readPermission: row.readPermission,
       writePermission: row.writePermission,
@@ -163,6 +164,38 @@ function draftRowsToMetadata(rows: MetadataDraftRow[]) {
   return metadata;
 }
 
+function draftRowValueToMetadataValue(row: MetadataDraftRow) {
+  const value = row.value.trim();
+  switch (row.valueType) {
+    case "number": {
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : value;
+    }
+    case "boolean":
+      return value === "true";
+    case "array":
+      if (value === "") return [];
+      try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed : value;
+      } catch {
+        return value;
+      }
+    case "object":
+      if (value === "") return {};
+      try {
+        const parsed = JSON.parse(value);
+        return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+          ? parsed
+          : value;
+      } catch {
+        return value;
+      }
+    default:
+      return value;
+  }
+}
+
 function isRPClaimValueType(value: string): value is RPClaimValueType {
   return (
     value === "text" ||
@@ -994,20 +1027,54 @@ function ClientConsentsPage() {
                       )}
                     />
                   )}
-                  <Input
-                    type={rpClaimInputType(row.valueType)}
-                    value={row.value}
-                    onChange={(event) =>
-                      updateMetadataDraftRow(row.id, {
-                        value: event.target.value,
-                      })
-                    }
-                    className="font-mono text-xs"
-                    placeholder={t(
-                      "ui.dev.clients.consents.rp_claims.value_placeholder",
-                      "claim value",
-                    )}
-                  />
+                  {row.valueType === "boolean" ? (
+                    <select
+                      value={row.value === "false" ? "false" : "true"}
+                      onChange={(event) =>
+                        updateMetadataDraftRow(row.id, {
+                          value: event.target.value,
+                        })
+                      }
+                      className="h-10 rounded-md border border-input bg-background px-3 font-mono text-xs shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                      aria-label={`${row.key} boolean`}
+                    >
+                      <option value="true">true</option>
+                      <option value="false">false</option>
+                    </select>
+                  ) : row.valueType === "array" ||
+                    row.valueType === "object" ? (
+                    <Textarea
+                      value={row.value}
+                      onChange={(event) =>
+                        updateMetadataDraftRow(row.id, {
+                          value: event.target.value,
+                        })
+                      }
+                      className="min-h-10 font-mono text-xs"
+                      placeholder={
+                        row.valueType === "array"
+                          ? `["value"]`
+                          : `{"key": "value"}`
+                      }
+                      aria-label={`${row.key} ${row.valueType}`}
+                    />
+                  ) : (
+                    <Input
+                      type={rpClaimInputType(row.valueType)}
+                      value={row.value}
+                      onChange={(event) =>
+                        updateMetadataDraftRow(row.id, {
+                          value: event.target.value,
+                        })
+                      }
+                      className="font-mono text-xs"
+                      placeholder={t(
+                        "ui.dev.clients.consents.rp_claims.value_placeholder",
+                        "claim value",
+                      )}
+                      aria-label={`${row.key} ${row.valueType}`}
+                    />
+                  )}
                   <select
                     value={row.readPermission}
                     onChange={(event) =>