실시간 지도 마커 업데이트 구현 및 마커 종류에 트럭 추가

frontend/components/admin/dashboard/WidgetConfigSidebar.tsx

@@ -455,7 +455,10 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
                 <Label htmlFor="refresh-interval" className="mb-2 block text-xs font-semibold">
                   자동 새로고침 간격
                 </Label>
-                <Select value={refreshInterval.toString()} onValueChange={(value) => setRefreshInterval(parseInt(value))}>
+                <Select
+                  value={refreshInterval.toString()}
+                  onValueChange={(value) => setRefreshInterval(parseInt(value))}
+                >
                   <SelectTrigger id="refresh-interval" className="h-9 text-sm">
                     <SelectValue placeholder="간격 선택" />
                   </SelectTrigger>
@@ -605,20 +608,20 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
         <Button variant="outline" onClick={onClose} className="h-9 flex-1 text-sm">
           취소
         </Button>
-        <Button 
-          onClick={handleApply} 
+        <Button
+          onClick={handleApply}
           className="h-9 flex-1 text-sm"
           disabled={
             // 다중 데이터 소스 위젯: 데이터 소스가 있는데 endpoint가 비어있으면 비활성화
             // (데이터 소스가 없는 건 OK - 연결 해제하는 경우)
-            (element?.subtype === "map-summary-v2" || 
-             element?.subtype === "chart" || 
-             element?.subtype === "list-v2" || 
-             element?.subtype === "custom-metric-v2" || 
-             element?.subtype === "risk-alert-v2") &&
-            dataSources && 
-            dataSources.length > 0 && 
-            dataSources.some(ds => ds.type === "api" && !ds.endpoint)
+            (element?.subtype === "map-summary-v2" ||
+              element?.subtype === "chart" ||
+              element?.subtype === "list-v2" ||
+              element?.subtype === "custom-metric-v2" ||
+              element?.subtype === "risk-alert-v2") &&
+            dataSources &&
+            dataSources.length > 0 &&
+            dataSources.some((ds) => ds.type === "api" && !ds.endpoint)
           }
         >
           적용

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

@@ -528,6 +528,7 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
           <SelectContent>
             <SelectItem value="circle" className="text-xs">동그라미</SelectItem>
             <SelectItem value="arrow" className="text-xs">화살표</SelectItem>
+            <SelectItem value="truck" className="text-xs">트럭</SelectItem>
           </SelectContent>
         </Select>
         <p className="text-[10px] text-muted-foreground">

frontend/components/admin/dashboard/types.ts

@@ -163,7 +163,10 @@ export interface ChartDataSource {
   markerColor?: string; // 마커 색상 (예: "#ff0000")
   polygonColor?: string; // 폴리곤 색상 (예: "#0000ff")
   polygonOpacity?: number; // 폴리곤 투명도 (0.0 ~ 1.0, 기본값: 0.5)
-  markerType?: string; // 마커 종류 (circle, arrow)
+  markerType?: string; // 마커 종류 (circle, arrow, truck)
+  minZoom?: number; // 최소 줌 레벨 (최대로 멀리 보기, 기본값: 2)
+  maxZoom?: number; // 최대 줌 레벨 (최대로 가까이 보기, 기본값: 18)
+  initialZoom?: number; // 초기 줌 레벨 (기본값: 13)
 
   // 컬럼 매핑 (다중 데이터 소스 통합용)
   columnMapping?: Record<string, string>; // { 원본컬럼: 표시이름 } (예: { "name": "product" })

frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx

@@ -20,32 +20,30 @@ interface MapConfigSectionProps {
  * - 자동 새로고침 간격 설정
  * - 마커 종류 선택
  */
-export function MapConfigSection({ 
-  queryResult, 
+export function MapConfigSection({
+  queryResult,
   refreshInterval = 5,
   markerType = "circle",
   onRefreshIntervalChange,
-  onMarkerTypeChange 
+  onMarkerTypeChange,
 }: MapConfigSectionProps) {
   // 쿼리 결과가 없으면 안내 메시지 표시
   if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
     return (
-      <div className="rounded-lg bg-background p-3 shadow-sm">
+      <div className="bg-background rounded-lg p-3 shadow-sm">
         <Label className="mb-2 block text-xs font-semibold">지도 설정</Label>
         <Alert>
           <AlertCircle className="h-4 w-4" />
-          <AlertDescription className="text-xs">
-            먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.
-          </AlertDescription>
+          <AlertDescription className="text-xs">먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.</AlertDescription>
         </Alert>
       </div>
     );
   }
 
   return (
-    <div className="rounded-lg bg-background p-3 shadow-sm">
+    <div className="bg-background rounded-lg p-3 shadow-sm">
       <Label className="mb-3 block text-xs font-semibold">지도 설정</Label>
-      
+
       <div className="space-y-3">
         {/* 자동 새로고침 간격 */}
         <div className="space-y-1.5">
@@ -60,16 +58,24 @@ export function MapConfigSection({
               <SelectValue placeholder="새로고침 간격 선택" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="0" className="text-xs">없음</SelectItem>
-              <SelectItem value="5" className="text-xs">5초</SelectItem>
-              <SelectItem value="10" className="text-xs">10초</SelectItem>
-              <SelectItem value="30" className="text-xs">30초</SelectItem>
-              <SelectItem value="60" className="text-xs">1분</SelectItem>
+              <SelectItem value="0" className="text-xs">
+                없음
+              </SelectItem>
+              <SelectItem value="5" className="text-xs">
+                5초
+              </SelectItem>
+              <SelectItem value="10" className="text-xs">
+                10초
+              </SelectItem>
+              <SelectItem value="30" className="text-xs">
+                30초
+              </SelectItem>
+              <SelectItem value="60" className="text-xs">
+                1분
+              </SelectItem>
             </SelectContent>
           </Select>
-          <p className="text-[10px] text-muted-foreground">
-            마커 데이터를 자동으로 갱신하는 주기를 설정합니다
-          </p>
+          <p className="text-muted-foreground text-[10px]">마커 데이터를 자동으로 갱신하는 주기를 설정합니다</p>
         </div>
 
         {/* 마커 종류 선택 */}
@@ -77,24 +83,25 @@ export function MapConfigSection({
           <Label htmlFor="marker-type" className="text-xs">
             마커 종류
           </Label>
-          <Select
-            value={markerType}
-            onValueChange={(value) => onMarkerTypeChange?.(value)}
-          >
+          <Select value={markerType} onValueChange={(value) => onMarkerTypeChange?.(value)}>
             <SelectTrigger id="marker-type" className="h-9 text-xs">
               <SelectValue placeholder="마커 종류 선택" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="circle" className="text-xs">동그라미</SelectItem>
-              <SelectItem value="arrow" className="text-xs">화살표</SelectItem>
+              <SelectItem value="circle" className="text-xs">
+                동그라미
+              </SelectItem>
+              <SelectItem value="arrow" className="text-xs">
+                화살표
+              </SelectItem>
+              <SelectItem value="truck" className="text-xs">
+                트럭
+              </SelectItem>
             </SelectContent>
           </Select>
-          <p className="text-[10px] text-muted-foreground">
-            지도에 표시할 마커의 모양을 선택합니다
-          </p>
+          <p className="text-muted-foreground text-[10px]">지도에 표시할 마커의 모양을 선택합니다</p>
         </div>
       </div>
     </div>
   );
 }
-