108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
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;
|
|
}
|
|
|
|
/**
|
|
* 지도 위젯 설정 섹션
|
|
* - 자동 새로고침 간격 설정
|
|
* - 마커 종류 선택
|
|
*/
|
|
export function MapConfigSection({
|
|
queryResult,
|
|
refreshInterval = 5,
|
|
markerType = "circle",
|
|
onRefreshIntervalChange,
|
|
onMarkerTypeChange,
|
|
}: MapConfigSectionProps) {
|
|
// 쿼리 결과가 없으면 안내 메시지 표시
|
|
if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
|
|
return (
|
|
<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>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<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">
|
|
<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-muted-foreground text-[10px]">마커 데이터를 자동으로 갱신하는 주기를 설정합니다</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>
|
|
<SelectItem value="truck" className="text-xs">
|
|
트럭
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-muted-foreground text-[10px]">지도에 표시할 마커의 모양을 선택합니다</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|