Merge pull request 'lhj' (#248) from lhj into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/248

frontend/components/screen/config-panels/ButtonConfigPanel.tsx

@@ -1953,6 +1953,139 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             </div>
           )}
 
+          {/* 🆕 버튼 활성화 조건 설정 */}
+          <div className="mt-4 border-t pt-4">
+            <h5 className="mb-3 text-xs font-medium text-muted-foreground">버튼 활성화 조건</h5>
+            
+            {/* 출발지/도착지 필수 체크 */}
+            <div className="flex items-center justify-between">
+              <div>
+                <Label htmlFor="require-location">출발지/도착지 필수</Label>
+                <p className="text-xs text-muted-foreground">선택하지 않으면 버튼 비활성화</p>
+              </div>
+              <Switch
+                id="require-location"
+                checked={config.action?.requireLocationFields === true}
+                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.requireLocationFields", checked)}
+              />
+            </div>
+
+            {config.action?.requireLocationFields && (
+              <div className="mt-3 space-y-2 rounded-md bg-orange-50 p-3 dark:bg-orange-950">
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <Label>출발지 필드명</Label>
+                    <Input
+                      placeholder="departure"
+                      value={config.action?.trackingDepartureField || "departure"}
+                      onChange={(e) => onUpdateProperty("componentConfig.action.trackingDepartureField", e.target.value)}
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label>도착지 필드명</Label>
+                    <Input
+                      placeholder="destination"
+                      value={config.action?.trackingArrivalField || "destination"}
+                      onChange={(e) => onUpdateProperty("componentConfig.action.trackingArrivalField", e.target.value)}
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 상태 기반 활성화 조건 */}
+            <div className="mt-4 flex items-center justify-between">
+              <div>
+                <Label htmlFor="enable-on-status">상태 기반 활성화</Label>
+                <p className="text-xs text-muted-foreground">특정 상태일 때만 버튼 활성화</p>
+              </div>
+              <Switch
+                id="enable-on-status"
+                checked={config.action?.enableOnStatusCheck === true}
+                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.enableOnStatusCheck", checked)}
+              />
+            </div>
+
+            {config.action?.enableOnStatusCheck && (
+              <div className="mt-3 space-y-2 rounded-md bg-purple-50 p-3 dark:bg-purple-950">
+                <div>
+                  <Label>상태 조회 테이블</Label>
+                  <Select
+                    value={config.action?.statusCheckTableName || "vehicles"}
+                    onValueChange={(value) => onUpdateProperty("componentConfig.action.statusCheckTableName", value)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableTables.map((table) => (
+                        <SelectItem key={table.name} value={table.name} className="text-xs">
+                          {table.label || table.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="mt-1 text-[10px] text-muted-foreground">
+                    상태를 조회할 테이블 (기본: vehicles)
+                  </p>
+                </div>
+                <div>
+                  <Label>조회 키 필드</Label>
+                  <Input
+                    placeholder="user_id"
+                    value={config.action?.statusCheckKeyField || "user_id"}
+                    onChange={(e) => onUpdateProperty("componentConfig.action.statusCheckKeyField", e.target.value)}
+                    className="h-8 text-xs"
+                  />
+                  <p className="mt-1 text-[10px] text-muted-foreground">
+                    현재 로그인 사용자 ID로 조회할 필드 (기본: user_id)
+                  </p>
+                </div>
+                <div>
+                  <Label>상태 컬럼명</Label>
+                  <Input
+                    placeholder="status"
+                    value={config.action?.statusCheckField || "status"}
+                    onChange={(e) => onUpdateProperty("componentConfig.action.statusCheckField", e.target.value)}
+                    className="h-8 text-xs"
+                  />
+                  <p className="mt-1 text-[10px] text-muted-foreground">
+                    상태 값이 저장된 컬럼명 (기본: status)
+                  </p>
+                </div>
+                <div>
+                  <Label>상태 조건</Label>
+                  <Select
+                    value={config.action?.statusConditionType || "enableOn"}
+                    onValueChange={(value) => onUpdateProperty("componentConfig.action.statusConditionType", value)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="enableOn">이 상태일 때만 활성화</SelectItem>
+                      <SelectItem value="disableOn">이 상태일 때 비활성화</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <Label>상태값 (쉼표로 구분)</Label>
+                  <Input
+                    placeholder="예: active, inactive"
+                    value={config.action?.statusConditionValues || ""}
+                    onChange={(e) => onUpdateProperty("componentConfig.action.statusConditionValues", e.target.value)}
+                    className="h-8 text-xs"
+                  />
+                  <p className="mt-1 text-[10px] text-muted-foreground">
+                    여러 상태값은 쉼표(,)로 구분
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+
           <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
             <p className="text-xs text-blue-900 dark:text-blue-100">
               <strong>사용 예시:</strong>

frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx

@@ -26,6 +26,7 @@ import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import { applyMappingRules } from "@/lib/utils/dataMapping";
+import { apiClient } from "@/lib/api/client";
 
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
@@ -148,6 +149,149 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     return result;
   }, [flowConfig, currentStep, component.id, component.label]);
 
+  // 🆕 운행알림 버튼 조건부 비활성화 (출발지/도착지 필수, 상태 체크)
+  // 상태는 API로 조회 (formData에 없는 경우)
+  const [vehicleStatus, setVehicleStatus] = useState<string | null>(null);
+  const [statusLoading, setStatusLoading] = useState(false);
+
+  // 상태 조회 (operation_control + enableOnStatusCheck일 때)
+  const actionConfig = component.componentConfig?.action;
+  const shouldFetchStatus = actionConfig?.type === "operation_control" && actionConfig?.enableOnStatusCheck && userId;
+  const statusTableName = actionConfig?.statusCheckTableName || "vehicles";
+  const statusKeyField = actionConfig?.statusCheckKeyField || "user_id";
+  const statusFieldName = actionConfig?.statusCheckField || "status";
+
+  useEffect(() => {
+    if (!shouldFetchStatus) return;
+
+    let isMounted = true;
+    
+    const fetchStatus = async () => {
+      if (!isMounted) return;
+      
+      try {
+        const response = await apiClient.post(`/table-management/tables/${statusTableName}/data`, {
+          page: 1,
+          size: 1,
+          search: { [statusKeyField]: userId },
+          autoFilter: true,
+        });
+        
+        if (!isMounted) return;
+        
+        const rows = response.data?.data?.data || response.data?.data?.rows || response.data?.rows || [];
+        const firstRow = Array.isArray(rows) ? rows[0] : null;
+        
+        if (response.data?.success && firstRow) {
+          const newStatus = firstRow[statusFieldName];
+          if (newStatus !== vehicleStatus) {
+            // console.log("🔄 [ButtonPrimary] 상태 변경 감지:", { 이전: vehicleStatus, 현재: newStatus, buttonLabel: component.label });
+          }
+          setVehicleStatus(newStatus);
+        } else {
+          setVehicleStatus(null);
+        }
+      } catch (error: any) {
+        // console.error("❌ [ButtonPrimary] 상태 조회 오류:", error?.message);
+        if (isMounted) setVehicleStatus(null);
+      } finally {
+        if (isMounted) setStatusLoading(false);
+      }
+    };
+
+    // 즉시 실행
+    setStatusLoading(true);
+    fetchStatus();
+    
+    // 2초마다 갱신
+    const interval = setInterval(fetchStatus, 2000);
+    
+    return () => {
+      isMounted = false;
+      clearInterval(interval);
+    };
+  }, [shouldFetchStatus, statusTableName, statusKeyField, statusFieldName, userId, component.label]);
+
+  // 버튼 비활성화 조건 계산
+  const isOperationButtonDisabled = useMemo(() => {
+    const actionConfig = component.componentConfig?.action;
+    
+    if (actionConfig?.type !== "operation_control") return false;
+
+    // 1. 출발지/도착지 필수 체크
+    if (actionConfig?.requireLocationFields) {
+      const departureField = actionConfig.trackingDepartureField || "departure";
+      const destinationField = actionConfig.trackingArrivalField || "destination";
+      
+      const departure = formData?.[departureField];
+      const destination = formData?.[destinationField];
+      
+      // console.log("🔍 [ButtonPrimary] 출발지/도착지 체크:", { 
+      //   departureField, destinationField, departure, destination, 
+      //   buttonLabel: component.label 
+      // });
+      
+      if (!departure || departure === "" || !destination || destination === "") {
+        // console.log("🚫 [ButtonPrimary] 출발지/도착지 미선택 → 비활성화:", component.label);
+        return true;
+      }
+    }
+
+    // 2. 상태 기반 활성화 조건 (API로 조회한 vehicleStatus 우선 사용)
+    if (actionConfig?.enableOnStatusCheck) {
+      const statusField = actionConfig.statusCheckField || "status";
+      // API 조회 결과를 우선 사용 (실시간 DB 상태 반영)
+      const currentStatus = vehicleStatus || formData?.[statusField];
+      
+      const conditionType = actionConfig.statusConditionType || "enableOn";
+      const conditionValues = (actionConfig.statusConditionValues || "")
+        .split(",")
+        .map((v: string) => v.trim())
+        .filter((v: string) => v);
+
+      // console.log("🔍 [ButtonPrimary] 상태 조건 체크:", { 
+      //   statusField,
+      //   formDataStatus: formData?.[statusField],
+      //   apiStatus: vehicleStatus,
+      //   currentStatus, 
+      //   conditionType, 
+      //   conditionValues, 
+      //   buttonLabel: component.label,
+      // });
+
+      // 상태 로딩 중이면 비활성화
+      if (statusLoading) {
+        // console.log("⏳ [ButtonPrimary] 상태 로딩 중 → 비활성화:", component.label);
+        return true;
+      }
+
+      // 상태값이 없으면 → 비활성화 (조건 확인 불가)
+      if (!currentStatus) {
+        // console.log("🚫 [ButtonPrimary] 상태값 없음 → 비활성화:", component.label);
+        return true;
+      }
+      
+      if (conditionValues.length > 0) {
+        if (conditionType === "enableOn") {
+          // 이 상태일 때만 활성화
+          if (!conditionValues.includes(currentStatus)) {
+            // console.log(`🚫 [ButtonPrimary] 상태 ${currentStatus} ∉ [${conditionValues}] → 비활성화:`, component.label);
+            return true;
+          }
+        } else if (conditionType === "disableOn") {
+          // 이 상태일 때 비활성화
+          if (conditionValues.includes(currentStatus)) {
+            // console.log(`🚫 [ButtonPrimary] 상태 ${currentStatus} ∈ [${conditionValues}] → 비활성화:`, component.label);
+            return true;
+          }
+        }
+      }
+    }
+
+    // console.log("✅ [ButtonPrimary] 버튼 활성화:", component.label);
+    return false;
+  }, [component.componentConfig?.action, formData, vehicleStatus, statusLoading, component.label]);
+
   // 확인 다이얼로그 상태
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [pendingAction, setPendingAction] = useState<{
@@ -877,6 +1021,9 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     }
   }
 
+  // 🆕 최종 비활성화 상태 (설정 + 조건부 비활성화)
+  const finalDisabled = componentConfig.disabled || isOperationButtonDisabled || statusLoading;
+
   // 공통 버튼 스타일
   const buttonElementStyle: React.CSSProperties = {
     width: "100%",
@@ -884,12 +1031,12 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     minHeight: "40px",
     border: "none",
     borderRadius: "0.5rem",
-    background: componentConfig.disabled ? "#e5e7eb" : buttonColor,
-    color: componentConfig.disabled ? "#9ca3af" : "white",
+    background: finalDisabled ? "#e5e7eb" : buttonColor,
+    color: finalDisabled ? "#9ca3af" : "white",
     // 🔧 크기 설정 적용 (sm/md/lg)
     fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem",
     fontWeight: "600",
-    cursor: componentConfig.disabled ? "not-allowed" : "pointer",
+    cursor: finalDisabled ? "not-allowed" : "pointer",
     outline: "none",
     boxSizing: "border-box",
     display: "flex",
@@ -900,7 +1047,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       componentConfig.size === "sm" ? "0 0.75rem" : componentConfig.size === "lg" ? "0 1.25rem" : "0 1rem",
     margin: "0",
     lineHeight: "1.25",
-    boxShadow: componentConfig.disabled ? "none" : "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    boxShadow: finalDisabled ? "none" : "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
     // 디자인 모드와 인터랙티브 모드 모두에서 사용자 스타일 적용 (width/height 제외)
     ...(component.style ? Object.fromEntries(
       Object.entries(component.style).filter(([key]) => key !== 'width' && key !== 'height')
@@ -925,7 +1072,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
           // 일반 모드: button으로 렌더링
           <button
             type={componentConfig.actionType || "button"}
-            disabled={componentConfig.disabled || false}
+            disabled={finalDisabled}
             className="transition-colors duration-150 hover:opacity-90 active:scale-95 transition-transform"
             style={buttonElementStyle}
             onClick={handleClick}

frontend/lib/utils/buttonActions.ts

@@ -3613,6 +3613,112 @@ export class ButtonActionExecutor {
 
       await this.saveLocationToHistory(tripId, departure, arrival, departureName, destinationName, vehicleId, "completed");
 
+      // 🆕 거리/시간 계산 및 저장
+      if (tripId) {
+        try {
+          const tripStats = await this.calculateTripStats(tripId);
+          console.log("📊 운행 통계:", tripStats);
+          
+          // 운행 통계를 두 테이블에 저장
+          if (tripStats) {
+            const distanceMeters = Math.round(tripStats.totalDistanceKm * 1000); // km → m
+            const timeMinutes = tripStats.totalTimeMinutes;
+            const userId = this.trackingUserId || context.userId;
+            
+            console.log("💾 운행 통계 DB 저장 시도:", {
+              tripId,
+              userId,
+              distanceMeters,
+              timeMinutes,
+              startTime: tripStats.startTime,
+              endTime: tripStats.endTime,
+            });
+            
+            const { apiClient } = await import("@/lib/api/client");
+            
+            // 1️⃣ vehicle_location_history 마지막 레코드에 통계 저장 (이력용)
+            try {
+              const lastRecordResponse = await apiClient.post(`/table-management/tables/vehicle_location_history/data`, {
+                page: 1,
+                size: 1,
+                search: { trip_id: tripId },
+                sortBy: "recorded_at",
+                sortOrder: "desc",
+                autoFilter: true,
+              });
+              
+              const lastRecordData = lastRecordResponse.data?.data?.data || lastRecordResponse.data?.data?.rows || [];
+              if (lastRecordData.length > 0) {
+                const lastRecordId = lastRecordData[0].id;
+                console.log("📍 마지막 레코드 ID:", lastRecordId);
+                
+                const historyUpdates = [
+                  { field: "trip_distance", value: distanceMeters },
+                  { field: "trip_time", value: timeMinutes },
+                  { field: "trip_start", value: tripStats.startTime },
+                  { field: "trip_end", value: tripStats.endTime },
+                ];
+                
+                for (const update of historyUpdates) {
+                  await apiClient.put(`/dynamic-form/update-field`, {
+                    tableName: "vehicle_location_history",
+                    keyField: "id",
+                    keyValue: lastRecordId,
+                    updateField: update.field,
+                    updateValue: update.value,
+                  });
+                }
+                console.log("✅ vehicle_location_history 통계 저장 완료");
+              } else {
+                console.warn("⚠️ trip_id에 해당하는 레코드를 찾을 수 없음:", tripId);
+              }
+            } catch (historyError) {
+              console.warn("⚠️ vehicle_location_history 저장 실패:", historyError);
+            }
+            
+            // 2️⃣ vehicles 테이블에도 마지막 운행 통계 업데이트 (최신 정보용)
+            if (userId) {
+              try {
+                const vehicleUpdates = [
+                  { field: "last_trip_distance", value: distanceMeters },
+                  { field: "last_trip_time", value: timeMinutes },
+                  { field: "last_trip_start", value: tripStats.startTime },
+                  { field: "last_trip_end", value: tripStats.endTime },
+                ];
+                
+                for (const update of vehicleUpdates) {
+                  await apiClient.put(`/dynamic-form/update-field`, {
+                    tableName: "vehicles",
+                    keyField: "user_id",
+                    keyValue: userId,
+                    updateField: update.field,
+                    updateValue: update.value,
+                  });
+                }
+                console.log("✅ vehicles 테이블 통계 업데이트 완료");
+              } catch (vehicleError) {
+                console.warn("⚠️ vehicles 테이블 저장 실패:", vehicleError);
+              }
+            }
+            
+            // 이벤트로 통계 전달 (UI에서 표시용)
+            window.dispatchEvent(new CustomEvent("tripCompleted", {
+              detail: { 
+                tripId, 
+                totalDistanceKm: tripStats.totalDistanceKm,
+                totalTimeMinutes: tripStats.totalTimeMinutes,
+                startTime: tripStats.startTime,
+                endTime: tripStats.endTime,
+              }
+            }));
+            
+            toast.success(`운행 종료! 총 ${tripStats.totalDistanceKm.toFixed(1)}km, ${tripStats.totalTimeMinutes}분 소요`);
+          }
+        } catch (statsError) {
+          console.warn("⚠️ 운행 통계 계산 실패:", statsError);
+        }
+      }
+
       // 상태 변경 (vehicles 테이블 등)
       const effectiveConfig = config.trackingStatusOnStop ? config : this.trackingConfig;
       const effectiveContext = context.userId ? context : this.trackingContext;
@@ -3662,6 +3768,104 @@ export class ButtonActionExecutor {
     }
   }
 
+  /**
+   * 운행 통계 계산 (거리, 시간)
+   */
+  private static async calculateTripStats(tripId: string): Promise<{
+    totalDistanceKm: number;
+    totalTimeMinutes: number;
+    startTime: string | null;
+    endTime: string | null;
+  } | null> {
+    try {
+      // vehicle_location_history에서 해당 trip의 모든 위치 조회
+      const { apiClient } = await import("@/lib/api/client");
+      
+      const response = await apiClient.post(`/table-management/tables/vehicle_location_history/data`, {
+        page: 1,
+        size: 10000,
+        search: { trip_id: tripId },
+        sortBy: "recorded_at",
+        sortOrder: "asc",
+      });
+
+      if (!response.data?.success) {
+        console.log("📊 통계 계산: API 응답 실패");
+        return null;
+      }
+
+      // 응답 형식: data.data.data 또는 data.data.rows
+      const rows = response.data?.data?.data || response.data?.data?.rows || [];
+      
+      if (!rows.length) {
+        console.log("📊 통계 계산: 데이터 없음");
+        return null;
+      }
+
+      const locations = rows;
+      console.log(`📊 통계 계산: ${locations.length}개 위치 데이터`);
+
+      // 시간 계산
+      const startTime = locations[0].recorded_at;
+      const endTime = locations[locations.length - 1].recorded_at;
+      const totalTimeMs = new Date(endTime).getTime() - new Date(startTime).getTime();
+      const totalTimeMinutes = Math.round(totalTimeMs / 60000);
+
+      // 거리 계산 (Haversine 공식)
+      let totalDistanceM = 0;
+      for (let i = 1; i < locations.length; i++) {
+        const prev = locations[i - 1];
+        const curr = locations[i];
+        
+        if (prev.latitude && prev.longitude && curr.latitude && curr.longitude) {
+          const distance = this.calculateDistance(
+            parseFloat(prev.latitude),
+            parseFloat(prev.longitude),
+            parseFloat(curr.latitude),
+            parseFloat(curr.longitude)
+          );
+          totalDistanceM += distance;
+        }
+      }
+
+      const totalDistanceKm = totalDistanceM / 1000;
+
+      console.log("📊 운행 통계 결과:", {
+        tripId,
+        totalDistanceKm,
+        totalTimeMinutes,
+        startTime,
+        endTime,
+        pointCount: locations.length,
+      });
+
+      return {
+        totalDistanceKm,
+        totalTimeMinutes,
+        startTime,
+        endTime,
+      };
+    } catch (error) {
+      console.error("❌ 운행 통계 계산 오류:", error);
+      return null;
+    }
+  }
+
+  /**
+   * 두 좌표 간 거리 계산 (Haversine 공식, 미터 단위)
+   */
+  private static calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
+    const R = 6371000; // 지구 반경 (미터)
+    const dLat = (lat2 - lat1) * Math.PI / 180;
+    const dLon = (lon2 - lon1) * Math.PI / 180;
+    const a = 
+      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+      Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+      Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    return R * c;
+  }
+
   /**
    * 위치 이력 테이블에 저장 (내부 헬퍼)
    * + vehicles 테이블의 latitude/longitude도 함께 업데이트
@@ -4217,6 +4421,28 @@ export class ButtonActionExecutor {
     try {
       console.log("🔄 운행알림/종료 액션 실행:", { config, context });
 
+      // 🆕 출발지/도착지 필수 체크 (운행 시작 모드일 때만)
+      // updateTrackingMode가 "start"이거나 updateTargetValue가 "active"/"inactive"인 경우
+      const isStartMode = config.updateTrackingMode === "start" || 
+                          config.updateTargetValue === "active" || 
+                          config.updateTargetValue === "inactive";
+      
+      if (isStartMode) {
+        // 출발지/도착지 필드명 (기본값: departure, destination)
+        const departureField = config.trackingDepartureField || "departure";
+        const destinationField = config.trackingArrivalField || "destination";
+        
+        const departure = context.formData?.[departureField];
+        const destination = context.formData?.[destinationField];
+        
+        console.log("📍 출발지/도착지 체크:", { departureField, destinationField, departure, destination });
+        
+        if (!departure || departure === "" || !destination || destination === "") {
+          toast.error("출발지와 도착지를 먼저 선택해주세요.");
+          return false;
+        }
+      }
+
       // 🆕 공차 추적 중지 (운행 시작 시 공차 추적 종료)
       if (this.emptyVehicleWatchId !== null) {
         this.stopEmptyVehicleTracking();