jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

지도에 마커 기능 추가

Browse Source
This commit is contained in:
dohyeons
2025-10-28 13:38:22 +09:00
parent c48eec78ac
commit e6c11a0e04
3 changed files with 443 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
frontend/components/dashboard/widgets/MapSummaryWidget.tsx
View File

@@ -42,6 +42,7 @@ interface MarkerData {
name: string;
info: any;
weather?: WeatherData | null;
markerColor?: string; // 마커 색상
}
// 테이블명 한글 번역
@@ -472,6 +473,33 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
const latCol = element.chartConfig?.latitudeColumn || "latitude";
const lngCol = element.chartConfig?.longitudeColumn || "longitude";
// 마커 색상 결정 함수
const getMarkerColor = (row: any): string => {
const colorMode = element.chartConfig?.markerColorMode || "single";
if (colorMode === "single") {
// 단일 색상 모드
return element.chartConfig?.markerDefaultColor || "#3b82f6";
} else {
// 조건부 색상 모드
const colorColumn = element.chartConfig?.markerColorColumn;
const colorRules = element.chartConfig?.markerColorRules || [];
const defaultColor = element.chartConfig?.markerDefaultColor || "#6b7280";
if (!colorColumn || colorRules.length === 0) {
return defaultColor;
}
// 컬럼 값 가져오기
const columnValue = String(row[colorColumn] || "");
// 색상 규칙 매칭
const matchedRule = colorRules.find((rule) => String(rule.value) === columnValue);
return matchedRule ? matchedRule.color : defaultColor;
}
};
// 유효한 좌표 필터링 및 마커 데이터 생성
const markerData = rows
.filter((row: any) => row[latCol] && row[lngCol])
@@ -481,6 +509,7 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
name: row.name || row.vehicle_number || row.warehouse_name || row.customer_name || "알 수 없음",
info: row,
weather: null,
markerColor: getMarkerColor(row), // 마커 색상 추가
}));
setMarkers(markerData);
@@ -693,54 +722,81 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
})}
{/* 마커 표시 */}
{markers.map((marker, idx) => (
<Marker key={idx} position={[marker.lat, marker.lng]}>
<Popup>
<div className="min-w-[200px] text-xs">
{/* 마커 정보 */}
<div className="mb-2 border-b pb-2">
<div className="mb-1 text-sm font-bold">{marker.name}</div>
{Object.entries(marker.info)
.filter(([key]) => !["latitude", "longitude", "lat", "lng"].includes(key.toLowerCase()))
.map(([key, value]) => (
<div key={key} className="text-xs">
<strong>{key}:</strong> {String(value)}
</div>
))}
</div>
{markers.map((marker, idx) => {
// Leaflet 커스텀 아이콘 생성 (클라이언트 사이드에서만)
let customIcon;
if (typeof window !== "undefined") {
const L = require("leaflet");
customIcon = L.divIcon({
className: "custom-marker",
html: `
<div style="
width: 30px;
height: 30px;
background-color: ${marker.markerColor || "#3b82f6"};
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
"></div>
`,
iconSize: [30, 30],
iconAnchor: [15, 15],
});
}
{/* 날씨 정보 */}
{marker.weather && (
<div className="space-y-1">
<div className="mb-1 flex items-center gap-2">
{getWeatherIcon(marker.weather.weatherMain)}
<span className="text-xs font-semibold">현재 날씨</span>
</div>
<div className="text-xs text-gray-600">{marker.weather.weatherDescription}</div>
<div className="mt-2 space-y-1 text-xs">
<div className="flex justify-between">
<span className="text-gray-500">온도</span>
<span className="font-medium">{marker.weather.temperature}°C</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">체감온도</span>
<span className="font-medium">{marker.weather.feelsLike}°C</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">습도</span>
<span className="font-medium">{marker.weather.humidity}%</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">풍속</span>
<span className="font-medium">{marker.weather.windSpeed} m/s</span>
</div>
</div>
return (
<Marker key={idx} position={[marker.lat, marker.lng]} icon={customIcon}>
<Popup>
<div className="min-w-[200px] text-xs">
{/* 마커 정보 */}
<div className="mb-2 border-b pb-2">
<div className="mb-1 text-sm font-bold">{marker.name}</div>
{Object.entries(marker.info)
.filter(([key]) => !["latitude", "longitude", "lat", "lng"].includes(key.toLowerCase()))
.map(([key, value]) => (
<div key={key} className="text-xs">
<strong>{key}:</strong> {String(value)}
</div>
))}
</div>
)}
</div>
</Popup>
</Marker>
))}
{/* 날씨 정보 */}
{marker.weather && (
<div className="space-y-1">
<div className="mb-1 flex items-center gap-2">
{getWeatherIcon(marker.weather.weatherMain)}
<span className="text-xs font-semibold">현재 날씨</span>
</div>
<div className="text-xs text-gray-600">{marker.weather.weatherDescription}</div>
<div className="mt-2 space-y-1 text-xs">
<div className="flex justify-between">
<span className="text-gray-500">온도</span>
<span className="font-medium">{marker.weather.temperature}°C</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">체감온도</span>
<span className="font-medium">{marker.weather.feelsLike}°C</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">습도</span>
<span className="font-medium">{marker.weather.humidity}%</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">풍속</span>
<span className="font-medium">{marker.weather.windSpeed} m/s</span>
</div>
</div>
</div>
)}
</div>
</Popup>
</Marker>
);
})}
</MapContainer>
{/* 범례 (특보가 있을 때만 표시) */}