polling 및 마커 종류 설정 추가

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

@@ -3,20 +3,30 @@
 import React from "react";
 import { QueryResult } from "../types";
 import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 
 interface MapConfigSectionProps {
   queryResult: QueryResult | null;
+  refreshInterval?: number;
+  markerType?: string;
+  onRefreshIntervalChange?: (interval: number) => void;
+  onMarkerTypeChange?: (type: string) => void;
 }
 
 /**
  * 지도 위젯 설정 섹션
- * - 위도/경도 매핑
- * 
- * TODO: 상세 설정 UI 추가 필요
+ * - 자동 새로고침 간격 설정
+ * - 마커 종류 선택
  */
-export function MapConfigSection({ queryResult }: MapConfigSectionProps) {
+export function MapConfigSection({ 
+  queryResult, 
+  refreshInterval = 5,
+  markerType = "circle",
+  onRefreshIntervalChange,
+  onMarkerTypeChange 
+}: MapConfigSectionProps) {
   // 쿼리 결과가 없으면 안내 메시지 표시
   if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
     return (
@@ -34,13 +44,56 @@ export function MapConfigSection({ queryResult }: MapConfigSectionProps) {
 
   return (
     <div className="rounded-lg bg-background 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">
-          지도 상세 설정 UI는 추후 추가 예정입니다.
-        </AlertDescription>
-      </Alert>
+      <Label className="mb-3 block text-xs font-semibold">지도 설정</Label>
+      
+      <div className="space-y-3">
+        {/* 자동 새로고침 간격 */}
+        <div className="space-y-1.5">
+          <Label htmlFor="refresh-interval" className="text-xs">
+            자동 새로고침 간격
+          </Label>
+          <Select
+            value={refreshInterval.toString()}
+            onValueChange={(value) => onRefreshIntervalChange?.(parseInt(value))}
+          >
+            <SelectTrigger id="refresh-interval" className="h-9 text-xs">
+              <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>
+            </SelectContent>
+          </Select>
+          <p className="text-[10px] text-muted-foreground">
+            마커 데이터를 자동으로 갱신하는 주기를 설정합니다
+          </p>
+        </div>
+
+        {/* 마커 종류 선택 */}
+        <div className="space-y-1.5">
+          <Label htmlFor="marker-type" className="text-xs">
+            마커 종류
+          </Label>
+          <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>
+            </SelectContent>
+          </Select>
+          <p className="text-[10px] text-muted-foreground">
+            지도에 표시할 마커의 모양을 선택합니다
+          </p>
+        </div>
+      </div>
     </div>
   );
 }