사용자 필드 관리

adminfront/src/features/tenants/routes/TenantDetailPage.tsx

@@ -60,6 +60,16 @@ function TenantDetailPage() {
         >
           Federation
         </Link>
+        <Link
+          to={`/tenants/${tenantId}/schema`}
+          className={`px-4 py-2 text-sm font-medium ${
+            location.pathname.includes("/schema")
+              ? "border-b-2 border-blue-500 text-blue-600"
+              : "text-gray-500 hover:text-gray-700"
+          }`}
+        >
+          Schema
+        </Link>
       </div>
 
       {/* Outlet for nested routes */}

adminfront/src/features/tenants/routes/TenantSchemaPage.tsx

@@ -0,0 +1,152 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Plus, Save, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { fetchTenant, updateTenant } from "../../../lib/adminApi";
+
+type SchemaField = {
+  key: string;
+  label: string;
+  type: "text" | "number" | "boolean";
+  required: boolean;
+};
+
+export function TenantSchemaPage() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const queryClient = useQueryClient();
+
+  if (!tenantId) return <div>Tenant ID missing</div>;
+
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId),
+  });
+
+  const [fields, setFields] = useState<SchemaField[]>([]);
+
+  useEffect(() => {
+    if (tenantQuery.data?.config?.userSchema) {
+      setFields(tenantQuery.data.config.userSchema as SchemaField[]);
+    }
+  }, [tenantQuery.data]);
+
+  const updateMutation = useMutation({
+    mutationFn: (newFields: SchemaField[]) =>
+      updateTenant(tenantId, {
+        config: {
+          ...tenantQuery.data?.config,
+          userSchema: newFields,
+        },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+      alert("Schema updated successfully");
+    },
+    onError: (err: AxiosError<{ error?: string }>) => {
+      alert(err.response?.data?.error || "Failed to update schema");
+    },
+  });
+
+  const addField = () => {
+    setFields([...fields, { key: "", label: "", type: "text", required: false }]);
+  };
+
+  const removeField = (index: number) => {
+    setFields(fields.filter((_, i) => i !== index));
+  };
+
+  const updateField = (index: number, updates: Partial<SchemaField>) => {
+    const newFields = [...fields];
+    newFields[index] = { ...newFields[index], ...updates };
+    setFields(newFields);
+  };
+
+  return (
+    <div className="space-y-6 mt-6">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>User Schema Extension</CardTitle>
+              <CardDescription>
+                Define custom attributes for users in this tenant.
+              </CardDescription>
+            </div>
+            <Button onClick={addField} size="sm">
+              <Plus size={16} className="mr-2" />
+              Add Field
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {fields.length === 0 && (
+            <div className="py-8 text-center text-muted-foreground border border-dashed rounded-md">
+              No custom fields defined. Click "Add Field" to begin.
+            </div>
+          )}
+          {fields.map((field, index) => (
+            <div key={index} className="flex items-end gap-4 p-4 border rounded-md bg-muted/30">
+              <div className="flex-1 space-y-2">
+                <Label>Field Key (ID)</Label>
+                <Input
+                  value={field.key}
+                  onChange={(e) => updateField(index, { key: e.target.value })}
+                  placeholder="e.g. employee_id"
+                />
+              </div>
+              <div className="flex-1 space-y-2">
+                <Label>Display Label</Label>
+                <Input
+                  value={field.label}
+                  onChange={(e) => updateField(index, { label: e.target.value })}
+                  placeholder="e.g. 사번"
+                />
+              </div>
+              <div className="w-32 space-y-2">
+                <Label>Type</Label>
+                <select
+                  className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+                  value={field.type}
+                  onChange={(e) => updateField(index, { type: e.target.value as any })}
+                >
+                  <option value="text">Text</option>
+                  <option value="number">Number</option>
+                  <option value="boolean">Boolean</option>
+                </select>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-destructive"
+                onClick={() => removeField(index)}
+              >
+                <Trash2 size={16} />
+              </Button>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button
+          onClick={() => updateMutation.mutate(fields)}
+          disabled={updateMutation.isPending || tenantQuery.isLoading}
+        >
+          <Save size={16} className="mr-2" />
+          Save Schema Changes
+        </Button>
+      </div>
+    </div>
+  );
+}