101 lines
3.6 KiB
TypeScript
101 lines
3.6 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="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">
|
|
먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-lg bg-background 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-[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>
|
|
);
|
|
}
|
|
|