지역 필터링 기능 추가

frontend/components/dashboard/widgets/MapTestWidgetV2.tsx

@@ -8,6 +8,8 @@ import { Button } from "@/components/ui/button";
 import { Loader2, RefreshCw } from "lucide-react";
 import { applyColumnMapping } from "@/lib/utils/columnMapping";
 import { getApiUrl } from "@/lib/utils/apiUrl";
+import { regionOptions, filterVehiclesByRegion } from "@/lib/constants/regionBounds";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import "leaflet/dist/leaflet.css";
 
 // Popup 말풍선 꼬리 제거 스타일
@@ -101,6 +103,9 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   const [routeLoading, setRouteLoading] = useState(false);
   const [routeDate, setRouteDate] = useState<string>(new Date().toISOString().split("T")[0]); // YYYY-MM-DD 형식
 
+  // 지역 필터 상태
+  const [selectedRegion, setSelectedRegion] = useState<string>("all");
+
   // dataSources를 useMemo로 추출 (circular reference 방지)
   const dataSources = useMemo(() => {
     return element?.dataSources || element?.chartConfig?.dataSources;
@@ -1165,6 +1170,20 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
           </p>
         </div>
         <div className="flex items-center gap-2">
+          {/* 지역 필터 */}
+          <Select value={selectedRegion} onValueChange={setSelectedRegion}>
+            <SelectTrigger className="h-8 w-[140px] text-xs">
+              <SelectValue placeholder="지역 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              {regionOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs">
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
           {/* 이동경로 날짜 선택 */}
           {selectedUserId && (
             <div className="flex items-center gap-1 rounded border bg-blue-50 px-2 py-1">
@@ -1442,8 +1461,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                 );
               })}
 
-            {/* 마커 렌더링 */}
-            {markers.map((marker) => {
+            {/* 마커 렌더링 (지역 필터 적용) */}
+            {filterVehiclesByRegion(markers, selectedRegion).map((marker) => {
               // 마커의 소스에 해당하는 데이터 소스 찾기
               const sourceDataSource = dataSources?.find((ds) => ds.name === marker.source) || dataSources?.[0];
               const markerType = sourceDataSource?.markerType || "circle";
@@ -1771,7 +1790,12 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       {/* 하단 정보 */}
       {(markers.length > 0 || polygons.length > 0) && (
         <div className="text-muted-foreground border-t p-2 text-xs">
-          {markers.length > 0 && `마커 ${markers.length}개`}
+          {markers.length > 0 && (
+            <>
+              마커 {filterVehiclesByRegion(markers, selectedRegion).length}개
+              {selectedRegion !== "all" && ` (전체 ${markers.length}개)`}
+            </>
+          )}
           {markers.length > 0 && polygons.length > 0 && " · "}
           {polygons.length > 0 && `영역 ${polygons.length}개`}
         </div>