사이드바에 탭 방식 적용

frontend/components/admin/dashboard/ElementConfigSidebar.tsx

@@ -5,13 +5,13 @@ import { DashboardElement, ChartDataSource, ChartConfig, QueryResult } from "./t
 import { QueryEditor } from "./QueryEditor";
 import { ChartConfigPanel } from "./ChartConfigPanel";
 import { VehicleMapConfigPanel } from "./VehicleMapConfigPanel";
-import { DataSourceSelector } from "./data-sources/DataSourceSelector";
 import { DatabaseConfig } from "./data-sources/DatabaseConfig";
 import { ApiConfig } from "./data-sources/ApiConfig";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { X, ChevronLeft, ChevronRight } from "lucide-react";
+import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface ElementConfigSidebarProps {
   element: DashboardElement | null;
@@ -34,7 +34,6 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
   });
   const [chartConfig, setChartConfig] = useState<ChartConfig>({});
   const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
-  const [currentStep, setCurrentStep] = useState<1 | 2>(1);
   const [customTitle, setCustomTitle] = useState<string>("");
   const [showHeader, setShowHeader] = useState<boolean>(true);
 
@@ -44,7 +43,6 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
       setDataSource(element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 });
       setChartConfig(element.chartConfig || {});
       setQueryResult(null);
-      setCurrentStep(1);
       setCustomTitle(element.customTitle || "");
       setShowHeader(element.showHeader !== false);
     }
@@ -100,25 +98,6 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
     setChartConfig({});
   }, []);
 
-  // 다음 단계로 이동
-  const handleNext = useCallback(() => {
-    if (currentStep === 1) {
-      setCurrentStep(2);
-    }
-  }, [currentStep]);
-
-  // 이전 단계로 이동
-  const handlePrev = useCallback(() => {
-    if (currentStep > 1) {
-      setCurrentStep((prev) => (prev - 1) as 1 | 2);
-    }
-  }, [currentStep]);
-
-  // 취소 처리
-  const handleCancel = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
   // 적용 처리
   const handleApply = useCallback(() => {
     if (!element) return;
@@ -184,15 +163,10 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
     isTitleChanged ||
     isHeaderChanged ||
     (isSimpleWidget
-      ? currentStep === 2 && queryResult && queryResult.rows.length > 0
+      ? queryResult && queryResult.rows.length > 0
       : isMapWidget
-        ? currentStep === 2 &&
+        ? queryResult && queryResult.rows.length > 0 && chartConfig.latitudeColumn && chartConfig.longitudeColumn
-          queryResult &&
+        : queryResult &&
-          queryResult.rows.length > 0 &&
-          chartConfig.latitudeColumn &&
-          chartConfig.longitudeColumn
-        : currentStep === 2 &&
-          queryResult &&
           queryResult.rows.length > 0 &&
           chartConfig.xAxis &&
           (isPieChart || isApiSource ? (chartConfig.aggregation === "count" ? true : hasYAxis) : hasYAxis));
@@ -214,8 +188,10 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
 
       {/* 본문: 스크롤 가능 영역 */}
       <div className="flex-1 overflow-y-auto p-4">
+        {/* 기본 설정 */}
+        <div className="mb-4 space-y-3">
           {/* 커스텀 제목 입력 */}
-        <div className="mb-4">
+          <div>
             <label className="mb-1 block text-sm font-medium text-gray-700">위젯 제목</label>
             <input
               type="text"
@@ -228,7 +204,7 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
           </div>
 
           {/* 헤더 표시 옵션 */}
-        <div className="mb-4 flex items-center gap-2">
+          <div className="flex items-center gap-2">
             <input
               type="checkbox"
               id="showHeader"
@@ -240,38 +216,27 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
               위젯 헤더 표시
             </label>
           </div>
-
-        {/* 진행 상황 표시 */}
-        {!isSimpleWidget && !isHeaderOnlyWidget && (
-          <div className="mb-4 rounded-md bg-gray-50 p-3">
-            <div className="text-sm font-medium text-gray-700">
-              단계 {currentStep} / 2: {currentStep === 1 ? "데이터 소스 선택" : "데이터 설정"}
         </div>
-          </div>
-        )}
 
-        {/* 단계별 내용 */}
+        {/* 헤더 전용 위젯이 아닐 때만 데이터 소스 탭 표시 */}
         {!isHeaderOnlyWidget && (
-          <div className="space-y-4">
+          <Tabs
-            {currentStep === 1 && (
+            defaultValue={dataSource.type}
-              <DataSourceSelector dataSource={dataSource} onTypeChange={handleDataSourceTypeChange} />
+            onValueChange={(value) => handleDataSourceTypeChange(value as "database" | "api")}
-            )}
+            className="w-full"
+          >
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="database">데이터베이스</TabsTrigger>
+              <TabsTrigger value="api">REST API</TabsTrigger>
+            </TabsList>
 
-            {currentStep === 2 && (
+            <TabsContent value="database" className="mt-4 space-y-4">
-              <div className="space-y-4">
-                {/* 데이터 설정 */}
-                {dataSource.type === "database" ? (
-                  <>
               <DatabaseConfig dataSource={dataSource} onChange={handleDataSourceUpdate} />
               <QueryEditor
                 dataSource={dataSource}
                 onDataSourceChange={handleDataSourceUpdate}
                 onQueryTest={handleQueryTest}
               />
-                  </>
-                ) : (
-                  <ApiConfig dataSource={dataSource} onChange={handleDataSourceUpdate} onTestResult={handleQueryTest} />
-                )}
 
               {/* 차트/지도 설정 */}
               {!isSimpleWidget && queryResult && queryResult.rows.length > 0 && (
@@ -294,10 +259,35 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
                   )}
                 </div>
               )}
-              </div>
+            </TabsContent>
+
+            <TabsContent value="api" className="mt-4 space-y-4">
+              <ApiConfig dataSource={dataSource} onChange={handleDataSourceUpdate} onTestResult={handleQueryTest} />
+
+              {/* 차트/지도 설정 */}
+              {!isSimpleWidget && queryResult && queryResult.rows.length > 0 && (
+                <div className="mt-4">
+                  {isMapWidget ? (
+                    <VehicleMapConfigPanel
+                      config={chartConfig}
+                      queryResult={queryResult}
+                      onConfigChange={handleChartConfigChange}
+                    />
+                  ) : (
+                    <ChartConfigPanel
+                      config={chartConfig}
+                      queryResult={queryResult}
+                      onConfigChange={handleChartConfigChange}
+                      chartType={element.subtype}
+                      dataSourceType={dataSource.type}
+                      query={dataSource.query}
+                    />
                   )}
                 </div>
               )}
+            </TabsContent>
+          </Tabs>
+        )}
 
         {/* 데이터 로드 상태 */}
         {queryResult && (
@@ -307,32 +297,14 @@ export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: Elem
         )}
       </div>
 
-      {/* 푸터: 단계 이동 및 적용 버튼 */}
+      {/* 푸터: 적용 버튼 */}
-      <div className="flex items-center justify-between border-t p-4">
+      <div className="flex items-center justify-end gap-2 border-t p-4">
-        <div className="flex gap-2">
+        <Button variant="outline" size="sm" onClick={onClose}>
-          {!isSimpleWidget && !isHeaderOnlyWidget && currentStep > 1 && (
-            <Button variant="outline" size="sm" onClick={handlePrev}>
-              <ChevronLeft className="mr-1 h-4 w-4" />
-              이전
-            </Button>
-          )}
-        </div>
-
-        <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={handleCancel}>
           취소
         </Button>
-          {isHeaderOnlyWidget || currentStep === 1 ? (
+        <Button size="sm" onClick={handleApply} disabled={isHeaderOnlyWidget ? false : !canApply}>
-            <Button size="sm" onClick={isHeaderOnlyWidget ? handleApply : handleNext}>
-              {isHeaderOnlyWidget ? "적용" : "다음"}
-              {!isHeaderOnlyWidget && <ChevronRight className="ml-1 h-4 w-4" />}
-            </Button>
-          ) : (
-            <Button size="sm" onClick={handleApply} disabled={!canApply}>
           적용
         </Button>
-          )}
-        </div>
       </div>
     </div>
   );

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

@@ -68,8 +68,8 @@ export function DatabaseConfig({ dataSource, onChange }: DatabaseConfigProps) {
           >
             <Database className="mr-2 h-4 w-4" />
             <div className="text-left">
-              <div className="font-medium">현재 데이터베이스</div>
+              <div className="font-medium">현재 DB</div>
-              <div className="text-xs opacity-80">애플리케이션 기본 DB</div>
+              <div className="text-xs opacity-80">기본 DB</div>
             </div>
           </Button>
 
@@ -82,7 +82,7 @@ export function DatabaseConfig({ dataSource, onChange }: DatabaseConfigProps) {
           >
             <Server className="mr-2 h-4 w-4" />
             <div className="text-left">
-              <div className="font-medium">외부 데이터베이스</div>
+              <div className="font-medium">외부 DB</div>
               <div className="text-xs opacity-80">등록된 외부 커넥션</div>
             </div>
           </Button>
@@ -183,7 +183,11 @@ export function DatabaseConfig({ dataSource, onChange }: DatabaseConfigProps) {
       {(dataSource.connectionType === "current" ||
         (dataSource.connectionType === "external" && dataSource.externalConnectionId)) && (
         <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
-          <div className="text-sm text-blue-800">✅ 데이터베이스가 선택되었습니다. 아래에서 SQL 쿼리를 작성하세요.</div>
+          <div className="text-sm text-blue-800">
+            데이터베이스가 선택되었습니다.
+            <br />
+            아래에서 SQL 쿼리를 작성하세요.
+          </div>
         </div>
       )}
     </div>