+ {/* 데이터 소스명만 표시 */}
+ {marker.source && (
+
+ )}
{/* 상세 정보 */}
- {marker.description && (
-
-
상세 정보
-
- {(() => {
- try {
- const parsed = JSON.parse(marker.description);
- return (
-
- {parsed.incidenteTypeCd === "1" && (
-
🚨 교통사고
- )}
- {parsed.incidenteTypeCd === "2" && (
-
🚧 도로공사
- )}
- {parsed.addressJibun &&
📍 {parsed.addressJibun}
}
- {parsed.addressNew && parsed.addressNew !== parsed.addressJibun && (
-
📍 {parsed.addressNew}
- )}
- {parsed.roadName &&
🛣️ {parsed.roadName}
}
- {parsed.linkName &&
🔗 {parsed.linkName}
}
- {parsed.incidentMsg && (
-
💬 {parsed.incidentMsg}
- )}
- {parsed.eventContent && (
-
📝 {parsed.eventContent}
- )}
- {parsed.startDate &&
🕐 {parsed.startDate}
}
- {parsed.endDate &&
🕐 종료: {parsed.endDate}
}
-
- );
- } catch {
- return marker.description;
- }
- })()}
-
-
- )}
+ {marker.description &&
+ (() => {
+ const firstDataSource = dataSources?.[0];
+ const popupFields = firstDataSource?.popupFields;
- {marker.status && (
-
- 상태: {marker.status}
-
- )}
+ // popupFields가 설정되어 있으면 설정된 필드만 표시
+ if (popupFields && popupFields.length > 0) {
+ try {
+ const parsed = JSON.parse(marker.description);
+ return (
+
+
상세 정보
+
+ {popupFields.map((field, idx) => {
+ const value = parsed[field.fieldName];
+ if (value === undefined || value === null) return null;
+
+ // 포맷팅 적용
+ let formattedValue = value;
+ if (field.format === "date" && value) {
+ formattedValue = new Date(value).toLocaleDateString("ko-KR");
+ } else if (field.format === "datetime" && value) {
+ formattedValue = new Date(value).toLocaleString("ko-KR");
+ } else if (field.format === "number" && typeof value === "number") {
+ formattedValue = value.toLocaleString();
+ } else if (
+ field.format === "url" &&
+ typeof value === "string" &&
+ value.startsWith("http")
+ ) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {field.label}:{" "}
+ {String(formattedValue)}
+
+ );
+ })}
+
+
+ );
+ } catch (error) {
+ return (
+
+
상세 정보
+
{marker.description}
+
+ );
+ }
+ }
+
+ // popupFields가 없으면 전체 데이터 표시 (기본 동작)
+ try {
+ const parsed = JSON.parse(marker.description);
+ return (
+
+
상세 정보
+
+ {Object.entries(parsed).map(([key, value], idx) => {
+ if (value === undefined || value === null) return null;
+
+ // 좌표 필드는 제외 (하단에 별도 표시)
+ if (["lat", "lng", "latitude", "longitude", "x", "y"].includes(key)) return null;
+
+ return (
+
+ {key}:{" "}
+ {String(value)}
+
+ );
+ })}
+
+
+ );
+ } catch (error) {
+ return (
+
+
상세 정보
+
{marker.description}
+
+ );
+ }
+ })()}
{/* 좌표 */}
- 📍 {marker.lat.toFixed(6)}, {marker.lng.toFixed(6)}
+ {marker.lat.toFixed(6)}, {marker.lng.toFixed(6)}