ConnectionSetupModal 리팩터링

2025-09-16 15:43:18 +09:00
parent 4ccce97eef
commit 7acea0b272
15 changed files with 2146 additions and 1811 deletions
--- a/frontend/components/dataflow/connection/ExternalCallSettings.tsx
+++ b/frontend/components/dataflow/connection/ExternalCallSettings.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Globe } from "lucide-react";
+import { ExternalCallSettings as ExternalCallSettingsType } from "@/types/connectionTypes";
+
+interface ExternalCallSettingsProps {
+  settings: ExternalCallSettingsType;
+  onSettingsChange: (settings: ExternalCallSettingsType) => void;
+}
+
+export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ settings, onSettingsChange }) => {
+  return (
+    <div className="rounded-lg border border-l-4 border-l-orange-500 bg-orange-50/30 p-4">
+      <div className="mb-3 flex items-center gap-2">
+        <Globe className="h-4 w-4 text-orange-500" />
+        <span className="text-sm font-medium">외부 호출 설정</span>
+      </div>
+      <div className="space-y-3">
+        <div>
+          <Label htmlFor="callType" className="text-sm">
+            호출 유형
+          </Label>
+          <Select
+            value={settings.callType}
+            onValueChange={(value: "rest-api" | "email" | "webhook" | "ftp" | "queue") =>
+              onSettingsChange({ ...settings, callType: value })
+            }
+          >
+            <SelectTrigger className="text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="rest-api">REST API 호출</SelectItem>
+              <SelectItem value="email">이메일 전송</SelectItem>
+              <SelectItem value="webhook">웹훅</SelectItem>
+              <SelectItem value="ftp">FTP 업로드</SelectItem>
+              <SelectItem value="queue">메시지 큐</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {settings.callType === "rest-api" && (
+          <>
+            <div>
+              <Label htmlFor="apiUrl" className="text-sm">
+                API URL
+              </Label>
+              <Input
+                id="apiUrl"
+                value={settings.apiUrl}
+                onChange={(e) => onSettingsChange({ ...settings, apiUrl: e.target.value })}
+                placeholder="https://api.example.com/webhook"
+                className="text-sm"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label htmlFor="httpMethod" className="text-sm">
+                  HTTP Method
+                </Label>
+                <Select
+                  value={settings.httpMethod}
+                  onValueChange={(value: "GET" | "POST" | "PUT" | "DELETE") =>
+                    onSettingsChange({ ...settings, httpMethod: value })
+                  }
+                >
+                  <SelectTrigger className="text-sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="GET">GET</SelectItem>
+                    <SelectItem value="POST">POST</SelectItem>
+                    <SelectItem value="PUT">PUT</SelectItem>
+                    <SelectItem value="DELETE">DELETE</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label htmlFor="headers" className="text-sm">
+                  Headers
+                </Label>
+                <Textarea
+                  id="headers"
+                  value={settings.headers}
+                  onChange={(e) => onSettingsChange({ ...settings, headers: e.target.value })}
+                  placeholder="{}"
+                  rows={1}
+                  className="text-sm"
+                />
+              </div>
+            </div>
+            <div>
+              <Label htmlFor="bodyTemplate" className="text-sm">
+                Body Template
+              </Label>
+              <Textarea
+                id="bodyTemplate"
+                value={settings.bodyTemplate}
+                onChange={(e) => onSettingsChange({ ...settings, bodyTemplate: e.target.value })}
+                placeholder="{}"
+                rows={2}
+                className="text-sm"
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};