대시보드 위젯 수정사항 반영

frontend/components/admin/dashboard/ElementConfigModal.tsx

@@ -53,9 +53,9 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     element.subtype === "driver-management" ||
     element.subtype === "work-history" || // 작업 이력 위젯 (쿼리 필요)
     element.subtype === "transport-stats"; // 커스텀 통계 카드 위젯 (쿼리 필요)
-  
+
   // 자체 기능 위젯 (DB 연결 불필요, 헤더 설정만 가능)
-  const isSelfContainedWidget = 
+  const isSelfContainedWidget =
     element.subtype === "weather" || // 날씨 위젯 (외부 API)
     element.subtype === "exchange" || // 환율 위젯 (외부 API)
     element.subtype === "calculator"; // 계산기 위젯 (자체 기능)
@@ -150,11 +150,9 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   if (!isOpen) return null;
 
   // 시계, 달력, 날씨, 환율, 계산기 위젯은 헤더 설정만 가능
-  const isHeaderOnlyWidget = 
-    element.type === "widget" && 
-    (element.subtype === "clock" || 
-     element.subtype === "calendar" || 
-     isSelfContainedWidget);
+  const isHeaderOnlyWidget =
+    element.type === "widget" &&
+    (element.subtype === "clock" || element.subtype === "calendar" || isSelfContainedWidget);
 
   // 기사관리 위젯은 자체 설정 UI를 가지고 있으므로 모달 표시하지 않음
   if (element.type === "widget" && element.subtype === "driver-management") {
@@ -172,7 +170,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
 
   // customTitle이 변경되었는지 확인
   const isTitleChanged = customTitle.trim() !== (element.customTitle || "");
-  
+
   // showHeader가 변경되었는지 확인
   const isHeaderChanged = showHeader !== (element.showHeader !== false);
 
@@ -214,13 +212,6 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
           <div className="flex items-center justify-between">
             <div className="flex-1">
               <h2 className="text-xl font-semibold text-gray-900">{element.title} 설정</h2>
-              <p className="mt-1 text-sm text-gray-500">
-                {isSimpleWidget
-                  ? "데이터 소스를 설정하세요"
-                  : currentStep === 1
-                    ? "데이터 소스를 선택하세요"
-                    : "쿼리를 실행하고 차트를 설정하세요"}
-              </p>
             </div>
             <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
               <X className="h-5 w-5" />
@@ -241,7 +232,9 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
               placeholder="예: 정비 일정 목록, 창고 위치 현황 등 (비워두면 자동 생성)"
               className="focus:border-primary focus:ring-primary w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:outline-none"
             />
-            <p className="mt-1 text-xs text-gray-500">비워두면 테이블명으로 자동 생성됩니다 (예: "maintenance_schedules 목록")</p>
+            <p className="mt-1 text-xs text-gray-500">
+              비워두면 테이블명으로 자동 생성됩니다 (예: "maintenance_schedules 목록")
+            </p>
           </div>
 
           {/* 헤더 표시 옵션 */}
@@ -251,7 +244,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
               id="showHeader"
               checked={showHeader}
               onChange={(e) => setShowHeader(e.target.checked)}
-              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+              className="text-primary focus:ring-primary h-4 w-4 rounded border-gray-300"
             />
             <label htmlFor="showHeader" className="text-sm font-medium text-gray-700">
               위젯 헤더 표시 (제목 + 새로고침 버튼)
@@ -278,61 +271,65 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
             )}
 
             {currentStep === 2 && (
-            <div className={`grid ${isSimpleWidget ? "grid-cols-1" : "grid-cols-2"} gap-6`}>
-              {/* 왼쪽: 데이터 설정 */}
-              <div className="space-y-6">
-                {dataSource.type === "database" ? (
-                  <>
-                    <DatabaseConfig dataSource={dataSource} onChange={handleDataSourceUpdate} />
-                    <QueryEditor
+              <div className={`grid ${isSimpleWidget ? "grid-cols-1" : "grid-cols-2"} gap-6`}>
+                {/* 왼쪽: 데이터 설정 */}
+                <div className="space-y-6">
+                  {dataSource.type === "database" ? (
+                    <>
+                      <DatabaseConfig dataSource={dataSource} onChange={handleDataSourceUpdate} />
+                      <QueryEditor
+                        dataSource={dataSource}
+                        onDataSourceChange={handleDataSourceUpdate}
+                        onQueryTest={handleQueryTest}
+                      />
+                    </>
+                  ) : (
+                    <ApiConfig
                       dataSource={dataSource}
-                      onDataSourceChange={handleDataSourceUpdate}
-                      onQueryTest={handleQueryTest}
+                      onChange={handleDataSourceUpdate}
+                      onTestResult={handleQueryTest}
                     />
-                  </>
-                ) : (
-                  <ApiConfig dataSource={dataSource} onChange={handleDataSourceUpdate} onTestResult={handleQueryTest} />
-                )}
-              </div>
+                  )}
+                </div>
 
-              {/* 오른쪽: 설정 패널 */}
-              {!isSimpleWidget && (
-                <div>
-                  {isMapWidget ? (
-                    // 지도 위젯: 위도/경도 매핑 패널
+                {/* 오른쪽: 설정 패널 */}
+                {!isSimpleWidget && (
+                  <div>
+                    {isMapWidget ? (
+                      // 지도 위젯: 위도/경도 매핑 패널
+                      queryResult && queryResult.rows.length > 0 ? (
+                        <VehicleMapConfigPanel
+                          config={chartConfig}
+                          queryResult={queryResult}
+                          onConfigChange={handleChartConfigChange}
+                        />
+                      ) : (
+                        <div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center">
+                          <div>
+                            <div className="mt-1 text-xs text-gray-500">데이터를 가져온 후 지도 설정이 표시됩니다</div>
+                          </div>
+                        </div>
+                      )
+                    ) : // 차트: 차트 설정 패널
                     queryResult && queryResult.rows.length > 0 ? (
-                      <VehicleMapConfigPanel
+                      <ChartConfigPanel
                         config={chartConfig}
                         queryResult={queryResult}
                         onConfigChange={handleChartConfigChange}
+                        chartType={element.subtype}
+                        dataSourceType={dataSource.type}
+                        query={dataSource.query}
                       />
                     ) : (
                       <div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center">
                         <div>
-                          <div className="mt-1 text-xs text-gray-500">데이터를 가져온 후 지도 설정이 표시됩니다</div>
+                          <div className="mt-1 text-xs text-gray-500">데이터를 가져온 후 차트 설정이 표시됩니다</div>
                         </div>
                       </div>
-                    )
-                  ) : // 차트: 차트 설정 패널
-                  queryResult && queryResult.rows.length > 0 ? (
-                    <ChartConfigPanel
-                      config={chartConfig}
-                      queryResult={queryResult}
-                      onConfigChange={handleChartConfigChange}
-                      chartType={element.subtype}
-                      dataSourceType={dataSource.type}
-                      query={dataSource.query}
-                    />
-                  ) : (
-                    <div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center">
-                      <div>
-                        <div className="mt-1 text-xs text-gray-500">데이터를 가져온 후 차트 설정이 표시됩니다</div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
+                    )}
+                  </div>
+                )}
+              </div>
             )}
           </div>
         )}
@@ -376,4 +373,3 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     </div>
   );
 }
-