IdP 설정 생성 구현 및 오류 수정

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

@@ -1,9 +1,167 @@
 import { useParams } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import { listIdpConfigsForTenant } from "../../../lib/adminApi";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createIdpConfig, listIdpConfigsForTenant } from "../../../lib/adminApi";
+import type { IdpConfigCreateRequest, IdpConfig } from "../../../lib/adminApi";
+import { useState } from "react";
+
+// Proper Modal Component with Form
+const CreateIdpModal = ({
+  isOpen,
+  onClose,
+  tenantId,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  tenantId: string;
+}) => {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState<IdpConfigCreateRequest>({
+    tenant_id: tenantId,
+    provider_type: "oidc",
+    display_name: "",
+    status: "active",
+    issuer_url: "",
+    client_id: "",
+    client_secret: "",
+    scopes: "openid email profile",
+  });
+
+  const mutation = useMutation({
+    mutationFn: (newData: IdpConfigCreateRequest) => createIdpConfig(newData),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["idpConfigs", tenantId] });
+      onClose();
+    },
+    onError: (error) => {
+      // Basic error handling
+      alert(`Failed to create configuration: ${error.message}`);
+    },
+  });
+
+  // 이 내용으로 교체해주세요
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white p-6 rounded-lg shadow-xl w-full max-w-lg">
+        <h2 className="text-xl font-bold mb-4">Add New IdP Configuration</h2>
+        <form onSubmit={handleSubmit}>
+          {/* Display Name */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Display Name
+            </label>
+            <input
+              type="text"
+              name="display_name"
+              value={formData.display_name}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              required
+            />
+          </div>
+
+          {/* Issuer URL */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Issuer URL
+            </label>
+            <input
+              type="url"
+              name="issuer_url"
+              value={formData.issuer_url}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              placeholder="https://accounts.google.com"
+              required
+            />
+          </div>
+
+          {/* Client ID */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Client ID
+            </label>
+            <input
+              type="text"
+              name="client_id"
+              value={formData.client_id}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              required
+            />
+          </div>
+
+          {/* Client Secret */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Client Secret
+            </label>
+            <input
+              type="password"
+              name="client_secret"
+              value={formData.client_secret}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              required
+            />
+          </div>
+
+          {/* Scopes */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Scopes
+            </label>
+            <input
+              type="text"
+              name="scopes"
+              value={formData.scopes}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            />
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mr-2"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={mutation.isPending}
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+            >
+              {mutation.isPending ? "Saving..." : "Save Configuration"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
 
 export function TenantFederationPage() {
   const { tenantId } = useParams<{ tenantId: string }>();
+  const [isCreateModalOpen, setCreateModalOpen] = useState(false);
 
   if (!tenantId) {
     return <div>Tenant ID is missing</div>;
@@ -16,19 +174,26 @@ export function TenantFederationPage() {
 
   return (
     <div className="p-4">
-      <h1 className="text-2xl font-bold mb-4">
-        Identity Federation Settings
-      </h1>
+      <h1 className="text-2xl font-bold mb-4">Identity Federation Settings</h1>
       <p className="mb-4 text-gray-600">
         Manage external identity providers for this tenant.
       </p>
 
       <div className="mb-4">
-        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        <button
+          onClick={() => setCreateModalOpen(true)}
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        >
           + Add IdP Configuration
         </button>
       </div>
 
+      <CreateIdpModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setCreateModalOpen(false)}
+        tenantId={tenantId}
+      />
+
       {isLoading && <div>Loading configurations...</div>}
       {error && (
         <div className="text-red-500">
@@ -55,7 +220,7 @@ export function TenantFederationPage() {
                   </td>
                 </tr>
               ) : (
-                data.map((config) => (
+                data.map((config: IdpConfig) => (
                   <tr key={config.id}>
                     <td className="py-2 px-4 border-b">
                       {config.display_name}