사이드바 디자인 다듬기

frontend/components/admin/dashboard/data-sources/ApiConfig.tsx

@@ -2,7 +2,6 @@
 
 import React, { useState, useEffect } from "react";
 import { ChartDataSource, QueryResult, KeyValuePair } from "../types";
-import { Card } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -314,55 +313,48 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
 
   return (
     <div className="space-y-4">
-      <div>
-        <h3 className="text-lg font-semibold text-gray-800">2단계: REST API 설정</h3>
-        <p className="mt-1 text-sm text-gray-600">외부 API에서 데이터를 가져올 설정을 입력하세요</p>
-      </div>
-
       {/* 외부 커넥션 선택 */}
       {apiConnections.length > 0 && (
-        <Card className="space-y-4 p-4">
-          <div>
-            <Label className="text-sm font-medium text-gray-700">외부 커넥션 (선택)</Label>
-            <Select value={selectedConnectionId} onValueChange={handleConnectionSelect}>
-              <SelectTrigger className="mt-2">
-                <SelectValue placeholder="저장된 커넥션 선택" />
-              </SelectTrigger>
-              <SelectContent className="z-[9999]">
-                <SelectItem value="manual">직접 입력</SelectItem>
-                {apiConnections.map((conn) => (
-                  <SelectItem key={conn.id} value={String(conn.id)}>
-                    {conn.connection_name}
-                    {conn.description && <span className="ml-2 text-xs text-gray-500">({conn.description})</span>}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <p className="mt-1 text-xs text-gray-500">외부 커넥션 관리에서 저장한 REST API 설정을 불러올 수 있습니다</p>
-          </div>
-        </Card>
+        <div className="space-y-2">
+          <Label className="text-xs font-medium text-gray-700">외부 커넥션 (선택)</Label>
+          <Select value={selectedConnectionId} onValueChange={handleConnectionSelect}>
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="저장된 커넥션 선택" />
+            </SelectTrigger>
+            <SelectContent className="z-[9999]">
+              <SelectItem value="manual" className="text-xs">
+                직접 입력
+              </SelectItem>
+              {apiConnections.map((conn) => (
+                <SelectItem key={conn.id} value={String(conn.id)} className="text-xs">
+                  {conn.connection_name}
+                  {conn.description && <span className="ml-1.5 text-[10px] text-gray-500">({conn.description})</span>}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-[11px] text-gray-500">저장한 REST API 설정을 불러올 수 있습니다</p>
+        </div>
       )}
 
       {/* API URL */}
-      <Card className="space-y-4 p-4">
-        <div>
-          <Label className="text-sm font-medium text-gray-700">API URL *</Label>
-          <Input
-            type="url"
-            placeholder="https://api.example.com/data"
-            value={dataSource.endpoint || ""}
-            onChange={(e) => onChange({ endpoint: e.target.value })}
-            className="mt-2"
-          />
-          <p className="mt-1 text-xs text-gray-500">GET 요청을 보낼 API 엔드포인트</p>
-        </div>
-      </Card>
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium text-gray-700">API URL *</Label>
+        <Input
+          type="url"
+          placeholder="https://api.example.com/data"
+          value={dataSource.endpoint || ""}
+          onChange={(e) => onChange({ endpoint: e.target.value })}
+          className="h-8 text-xs"
+        />
+        <p className="text-[11px] text-gray-500">GET 요청을 보낼 API 엔드포인트</p>
+      </div>
 
       {/* 쿼리 파라미터 */}
-      <Card className="space-y-4 p-4">
+      <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <Label className="text-sm font-medium text-gray-700">URL 쿼리 파라미터</Label>
-          <Button variant="outline" size="sm" onClick={addQueryParam}>
+          <Label className="text-xs font-medium text-gray-700">URL 쿼리 파라미터</Label>
+          <Button variant="outline" size="sm" onClick={addQueryParam} className="h-6 text-[11px]">
             <Plus className="mr-1 h-3 w-3" />
             추가
           </Button>
@@ -371,39 +363,42 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
         {(() => {
           const params = normalizeQueryParams();
           return params.length > 0 ? (
-            <div className="space-y-2">
+            <div className="space-y-1.5">
               {params.map((param) => (
-                <div key={param.id} className="flex gap-2">
+                <div key={param.id} className="flex gap-1.5">
                   <Input
                     placeholder="key"
                     value={param.key}
                     onChange={(e) => updateQueryParam(param.id, { key: e.target.value })}
-                    className="flex-1"
+                    className="h-7 flex-1 text-xs"
                   />
                   <Input
                     placeholder="value"
                     value={param.value}
                     onChange={(e) => updateQueryParam(param.id, { value: e.target.value })}
-                    className="flex-1"
+                    className="h-7 flex-1 text-xs"
                   />
-                  <Button variant="ghost" size="icon" onClick={() => removeQueryParam(param.id)}>
-                    <X className="h-4 w-4" />
-                  </Button>
+                  <button
+                    onClick={() => removeQueryParam(param.id)}
+                    className="flex h-7 w-7 items-center justify-center rounded hover:bg-gray-100"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
                 </div>
               ))}
             </div>
           ) : (
-            <p className="py-2 text-center text-sm text-gray-500">추가된 파라미터가 없습니다</p>
+            <p className="py-2 text-center text-[11px] text-gray-500">추가된 파라미터가 없습니다</p>
           );
         })()}
 
-        <p className="text-xs text-gray-500">예: category=electronics, limit=10</p>
-      </Card>
+        <p className="text-[11px] text-gray-500">예: category=electronics, limit=10</p>
+      </div>
 
       {/* 헤더 */}
-      <Card className="space-y-4 p-4">
+      <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <Label className="text-sm font-medium text-gray-700">요청 헤더</Label>
+          <Label className="text-xs font-medium text-gray-700">요청 헤더</Label>
           <Button variant="outline" size="sm" onClick={addHeader}>
             <Plus className="mr-1 h-3 w-3" />
             추가
@@ -467,22 +462,22 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
             <p className="py-2 text-center text-sm text-gray-500">추가된 헤더가 없습니다</p>
           );
         })()}
-      </Card>
+      </div>
 
       {/* JSON Path */}
-      <Card className="space-y-2 p-4">
-        <Label className="text-sm font-medium text-gray-700">JSON Path (선택)</Label>
+      <div className="space-y-2">
+        <Label className="text-xs font-medium text-gray-700">JSON Path (선택)</Label>
         <Input
           placeholder="data.results"
           value={dataSource.jsonPath || ""}
           onChange={(e) => onChange({ jsonPath: e.target.value })}
         />
-        <p className="text-xs text-gray-500">
+        <p className="text-[11px] text-gray-500">
           JSON 응답에서 데이터 배열의 경로 (예: data.results, items, response.data)
           <br />
           비워두면 전체 응답을 사용합니다
         </p>
-      </Card>
+      </div>
 
       {/* 테스트 버튼 */}
       <div className="flex justify-end">
@@ -503,7 +498,7 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
 
       {/* 테스트 오류 */}
       {testError && (
-        <Card className="border-red-200 bg-red-50 p-4">
+        <div className="rounded bg-red-50 px-2 py-2">
           <div className="flex items-start gap-2">
             <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-red-600" />
             <div>
@@ -511,18 +506,18 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
               <div className="mt-1 text-sm text-red-700">{testError}</div>
             </div>
           </div>
-        </Card>
+        </div>
       )}
 
       {/* 테스트 결과 */}
       {testResult && (
-        <Card className="border-green-200 bg-green-50 p-4">
+        <div className="rounded bg-green-50 px-2 py-2">
           <div className="mb-2 text-sm font-medium text-green-800">API 호출 성공</div>
           <div className="space-y-1 text-xs text-green-700">
             <div>총 {testResult.rows.length}개의 데이터를 불러왔습니다</div>
             <div>컬럼: {testResult.columns.join(", ")}</div>
           </div>
-        </Card>
+        </div>
       )}
     </div>
   );