rest api 연결 ui 개선

frontend/components/admin/RestApiConnectionModal.tsx

@@ -46,6 +46,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
   const [testEndpoint, setTestEndpoint] = useState("");
   const [testing, setTesting] = useState(false);
   const [testResult, setTestResult] = useState<RestApiTestResult | null>(null);
+  const [testRequestUrl, setTestRequestUrl] = useState<string>("");
   const [saving, setSaving] = useState(false);
 
   // 기존 연결 데이터 로드
@@ -77,6 +78,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
 
     setTestResult(null);
     setTestEndpoint("");
+    setTestRequestUrl("");
   }, [connection, isOpen]);
 
   // 연결 테스트
@@ -94,6 +96,10 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
     setTesting(true);
     setTestResult(null);
 
+    // 사용자가 테스트하려는 실제 외부 API URL 설정
+    const fullUrl = testEndpoint ? `${baseUrl}${testEndpoint}` : baseUrl;
+    setTestRequestUrl(fullUrl);
+
     try {
       const result = await ExternalRestApiConnectionAPI.testConnection({
         base_url: baseUrl,
@@ -220,7 +226,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
 
             <div className="space-y-2">
               <Label htmlFor="connection-name">
-                연결명 <span className="text-red-500">*</span>
+                연결명 <span className="text-destructive">*</span>
               </Label>
               <Input
                 id="connection-name"
@@ -243,7 +249,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
 
             <div className="space-y-2">
               <Label htmlFor="base-url">
-                기본 URL <span className="text-red-500">*</span>
+                기본 URL <span className="text-destructive">*</span>
               </Label>
               <Input
                 id="base-url"
@@ -283,14 +289,14 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
             <button
               type="button"
               onClick={() => setShowAdvanced(!showAdvanced)}
-              className="flex items-center space-x-2 text-sm font-semibold hover:text-blue-600"
+              className="hover:text-primary flex items-center space-x-2 text-sm font-semibold transition-colors"
             >
               <span>고급 설정</span>
               {showAdvanced ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
             </button>
 
             {showAdvanced && (
-              <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+              <div className="bg-muted space-y-4 rounded-md border p-4">
                 <div className="grid grid-cols-3 gap-4">
                   <div className="space-y-2">
                     <Label htmlFor="timeout">타임아웃 (ms)</Label>
@@ -342,7 +348,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
                 id="test-endpoint"
                 value={testEndpoint}
                 onChange={(e) => setTestEndpoint(e.target.value)}
-                placeholder="/api/v1/test 또는 빈칸 (기본 URL만 테스트)"
+                placeholder="엔드포인트 또는 빈칸(기본 URL만 테스트)"
               />
             </div>
 
@@ -351,6 +357,41 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
               {testing ? "테스트 중..." : "연결 테스트"}
             </Button>
 
+            {/* 테스트 요청 정보 표시 */}
+            {testRequestUrl && (
+              <div className="bg-muted/30 space-y-3 rounded-md border p-3">
+                <div>
+                  <div className="text-muted-foreground mb-1 text-xs font-medium">테스트 요청 URL</div>
+                  <code className="text-foreground block text-xs break-all">GET {testRequestUrl}</code>
+                </div>
+
+                {Object.keys(defaultHeaders).length > 0 && (
+                  <div>
+                    <div className="text-muted-foreground mb-1 text-xs font-medium">요청 헤더</div>
+                    <div className="space-y-1">
+                      {Object.entries(defaultHeaders).map(([key, value]) => (
+                        <code key={key} className="text-foreground block text-xs">
+                          {key}: {value}
+                        </code>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {authType !== "none" && (
+                  <div>
+                    <div className="text-muted-foreground mb-1 text-xs font-medium">인증 방식</div>
+                    <code className="text-foreground block text-xs">
+                      {authType === "api-key" && "API Key"}
+                      {authType === "bearer" && "Bearer Token"}
+                      {authType === "basic" && "Basic Auth"}
+                      {authType === "oauth2" && "OAuth 2.0"}
+                    </code>
+                  </div>
+                )}
+              </div>
+            )}
+
             {testResult && (
               <div
                 className={`rounded-md border p-4 ${