에러 수정
This commit is contained in:
dohyeons
parent
cbdd9fef0f
commit
68184ac49f
|
|
@ -16,8 +16,8 @@ import {
|
|||
import dynamic from "next/dynamic";
|
||||
|
||||
// 위젯 동적 import - 모든 위젯
|
||||
const MapSummaryWidget = dynamic(() => import("./widgets/MapSummaryWidget"), { ssr: false });
|
||||
const MapTestWidget = dynamic(() => import("./widgets/MapTestWidget"), { ssr: false });
|
||||
// const MapSummaryWidget = dynamic(() => import("./widgets/MapSummaryWidget"), { ssr: false });
|
||||
// const MapTestWidget = dynamic(() => import("./widgets/MapTestWidget"), { ssr: false });
|
||||
const MapTestWidgetV2 = dynamic(() => import("./widgets/MapTestWidgetV2"), { ssr: false });
|
||||
const ChartTestWidget = dynamic(() => import("./widgets/ChartTestWidget"), { ssr: false });
|
||||
const ListTestWidget = dynamic(
|
||||
|
|
@ -27,7 +27,7 @@ const ListTestWidget = dynamic(
|
|||
const CustomMetricTestWidget = dynamic(() => import("./widgets/CustomMetricTestWidget"), { ssr: false });
|
||||
const RiskAlertTestWidget = dynamic(() => import("./widgets/RiskAlertTestWidget"), { ssr: false });
|
||||
const StatusSummaryWidget = dynamic(() => import("./widgets/StatusSummaryWidget"), { ssr: false });
|
||||
const RiskAlertWidget = dynamic(() => import("./widgets/RiskAlertWidget"), { ssr: false });
|
||||
// const RiskAlertWidget = dynamic(() => import("./widgets/RiskAlertWidget"), { ssr: false });
|
||||
const WeatherWidget = dynamic(() => import("./widgets/WeatherWidget"), { ssr: false });
|
||||
const WeatherMapWidget = dynamic(() => import("./widgets/WeatherMapWidget"), { ssr: false });
|
||||
const ExchangeWidget = dynamic(() => import("./widgets/ExchangeWidget"), { ssr: false });
|
||||
|
|
@ -51,10 +51,10 @@ const ClockWidget = dynamic(
|
|||
() => import("@/components/admin/dashboard/widgets/ClockWidget").then((mod) => ({ default: mod.ClockWidget })),
|
||||
{ ssr: false },
|
||||
);
|
||||
const ListWidget = dynamic(
|
||||
() => import("@/components/admin/dashboard/widgets/ListWidget").then((mod) => ({ default: mod.ListWidget })),
|
||||
{ ssr: false },
|
||||
);
|
||||
// const ListWidget = dynamic(
|
||||
// () => import("@/components/admin/dashboard/widgets/ListWidget").then((mod) => ({ default: mod.ListWidget })),
|
||||
// { ssr: false },
|
||||
// );
|
||||
|
||||
const YardManagement3DWidget = dynamic(() => import("@/components/admin/dashboard/widgets/YardManagement3DWidget"), {
|
||||
ssr: false,
|
||||
|
|
@ -68,9 +68,9 @@ const CustomStatsWidget = dynamic(() => import("./widgets/CustomStatsWidget"), {
|
|||
ssr: false,
|
||||
});
|
||||
|
||||
const CustomMetricWidget = dynamic(() => import("./widgets/CustomMetricWidget"), {
|
||||
ssr: false,
|
||||
});
|
||||
// const CustomMetricWidget = dynamic(() => import("./widgets/CustomMetricWidget"), {
|
||||
// ssr: false,
|
||||
// });
|
||||
|
||||
/**
|
||||
* 위젯 렌더링 함수 - DashboardSidebar의 모든 subtype 처리
|
||||
|
|
@ -91,10 +91,10 @@ function renderWidget(element: DashboardElement) {
|
|||
return <CalculatorWidget element={element} />;
|
||||
case "clock":
|
||||
return <ClockWidget element={element} />;
|
||||
case "map-summary":
|
||||
return <MapSummaryWidget element={element} />;
|
||||
case "map-test":
|
||||
return <MapTestWidget element={element} />;
|
||||
// case "map-summary":
|
||||
// return <MapSummaryWidget element={element} />;
|
||||
// case "map-test":
|
||||
// return <MapTestWidget element={element} />;
|
||||
case "map-summary-v2":
|
||||
return <MapTestWidgetV2 element={element} />;
|
||||
case "chart":
|
||||
|
|
@ -105,14 +105,14 @@ function renderWidget(element: DashboardElement) {
|
|||
return <CustomMetricTestWidget element={element} />;
|
||||
case "risk-alert-v2":
|
||||
return <RiskAlertTestWidget element={element} />;
|
||||
case "risk-alert":
|
||||
return <RiskAlertWidget element={element} />;
|
||||
// case "risk-alert":
|
||||
// return <RiskAlertWidget element={element} />;
|
||||
case "calendar":
|
||||
return <CalendarWidget element={element} />;
|
||||
case "status-summary":
|
||||
return <StatusSummaryWidget element={element} />;
|
||||
case "custom-metric":
|
||||
return <CustomMetricWidget element={element} />;
|
||||
// case "custom-metric":
|
||||
// return <CustomMetricWidget element={element} />;
|
||||
|
||||
// === 운영/작업 지원 ===
|
||||
case "todo":
|
||||
|
|
@ -122,8 +122,8 @@ function renderWidget(element: DashboardElement) {
|
|||
return <BookingAlertWidget element={element} />;
|
||||
case "document":
|
||||
return <DocumentWidget element={element} />;
|
||||
case "list":
|
||||
return <ListWidget element={element} />;
|
||||
// case "list":
|
||||
// return <ListWidget element={element} />;
|
||||
|
||||
case "yard-management-3d":
|
||||
// console.log("🏗️ 야드관리 위젯 렌더링:", {
|
||||
|
|
@ -171,7 +171,7 @@ function renderWidget(element: DashboardElement) {
|
|||
// === 기본 fallback ===
|
||||
default:
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-muted to-muted-foreground p-4 text-white">
|
||||
<div className="from-muted to-muted-foreground flex h-full w-full items-center justify-center bg-gradient-to-br p-4 text-white">
|
||||
<div className="text-center">
|
||||
<div className="mb-2 text-3xl">❓</div>
|
||||
<div className="text-sm">알 수 없는 위젯 타입: {element.subtype}</div>
|
||||
|
|
@ -212,7 +212,7 @@ export function DashboardViewer({
|
|||
dataUrl: string,
|
||||
format: "png" | "pdf",
|
||||
canvasWidth: number,
|
||||
canvasHeight: number
|
||||
canvasHeight: number,
|
||||
) => {
|
||||
if (format === "png") {
|
||||
console.log("💾 PNG 다운로드 시작...");
|
||||
|
|
@ -274,6 +274,7 @@ export function DashboardViewer({
|
|||
|
||||
console.log("📸 html-to-image 로딩 중...");
|
||||
// html-to-image 동적 import
|
||||
// @ts-expect-error - html-to-image 타입 선언 누락
|
||||
const { toPng } = await import("html-to-image");
|
||||
|
||||
console.log("📸 캔버스 캡처 중...");
|
||||
|
|
@ -297,7 +298,7 @@ export function DashboardViewer({
|
|||
height: rect.height,
|
||||
left: rect.left,
|
||||
top: rect.top,
|
||||
bottom: rect.bottom
|
||||
bottom: rect.bottom,
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn("⚠️ WebGL 캔버스 캡처 실패:", error);
|
||||
|
|
@ -333,7 +334,7 @@ export function DashboardViewer({
|
|||
scroll: { width: canvasWidth, height: canvas.scrollHeight },
|
||||
calculated: { width: canvasWidth, height: canvasHeight },
|
||||
maxBottom: maxBottom,
|
||||
webglCount: webglImages.length
|
||||
webglCount: webglImages.length,
|
||||
});
|
||||
|
||||
// html-to-image로 캔버스 캡처 (WebGL 제외)
|
||||
|
|
@ -344,8 +345,8 @@ export function DashboardViewer({
|
|||
pixelRatio: 2, // 고해상도
|
||||
cacheBust: true,
|
||||
skipFonts: false,
|
||||
preferredFontFormat: 'woff2',
|
||||
filter: (node) => {
|
||||
preferredFontFormat: "woff2",
|
||||
filter: (node: Node) => {
|
||||
// WebGL 캔버스는 제외 (나중에 수동으로 합성)
|
||||
if (node instanceof HTMLCanvasElement) {
|
||||
return false;
|
||||
|
|
@ -409,7 +410,8 @@ export function DashboardViewer({
|
|||
alert(`다운로드에 실패했습니다.\n\n에러: ${error instanceof Error ? error.message : String(error)}`);
|
||||
}
|
||||
},
|
||||
[backgroundColor, dashboardTitle],
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[backgroundColor, dashboardTitle, handleDownloadWithDataUrl],
|
||||
);
|
||||
|
||||
// 캔버스 설정 계산
|
||||
|
|
@ -528,11 +530,11 @@ export function DashboardViewer({
|
|||
// 요소가 없는 경우
|
||||
if (elements.length === 0) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center bg-muted">
|
||||
<div className="bg-muted flex h-full items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mb-4 text-6xl">📊</div>
|
||||
<div className="mb-2 text-xl font-medium text-foreground">표시할 요소가 없습니다</div>
|
||||
<div className="text-sm text-muted-foreground">대시보드 편집기에서 차트나 위젯을 추가해보세요</div>
|
||||
<div className="text-foreground mb-2 text-xl font-medium">표시할 요소가 없습니다</div>
|
||||
<div className="text-muted-foreground text-sm">대시보드 편집기에서 차트나 위젯을 추가해보세요</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -541,8 +543,8 @@ export function DashboardViewer({
|
|||
return (
|
||||
<DashboardProvider>
|
||||
{/* 데스크톱: 디자이너에서 설정한 위치 그대로 렌더링 (화면에 맞춰 비율 유지) */}
|
||||
<div className="hidden min-h-screen bg-muted py-8 lg:block" style={{ backgroundColor }}>
|
||||
<div className="mx-auto px-4" style={{ width: '100%', maxWidth: 'none' }}>
|
||||
<div className="bg-muted hidden min-h-screen py-8 lg:block" style={{ backgroundColor }}>
|
||||
<div className="mx-auto px-4" style={{ width: "100%", maxWidth: "none" }}>
|
||||
{/* 다운로드 버튼 */}
|
||||
<div className="mb-4 flex justify-end">
|
||||
<DropdownMenu>
|
||||
|
|
@ -584,7 +586,7 @@ export function DashboardViewer({
|
|||
</div>
|
||||
|
||||
{/* 태블릿 이하: 반응형 세로 정렬 */}
|
||||
<div className="block min-h-screen bg-muted p-4 lg:hidden" style={{ backgroundColor }}>
|
||||
<div className="bg-muted block min-h-screen p-4 lg:hidden" style={{ backgroundColor }}>
|
||||
<div className="mx-auto max-w-3xl space-y-4">
|
||||
{/* 다운로드 버튼 */}
|
||||
<div className="flex justify-end">
|
||||
|
|
@ -646,16 +648,16 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
// 태블릿 이하: 세로 스택 카드 스타일
|
||||
return (
|
||||
<div
|
||||
className="relative overflow-hidden rounded-lg border border-border bg-background shadow-sm"
|
||||
className="border-border bg-background relative overflow-hidden rounded-lg border shadow-sm"
|
||||
style={{ minHeight: "300px" }}
|
||||
>
|
||||
{element.showHeader !== false && (
|
||||
<div className="flex items-center justify-between px-2 py-1">
|
||||
<h3 className="text-xs font-semibold text-foreground">{element.customTitle || element.title}</h3>
|
||||
<h3 className="text-foreground text-xs font-semibold">{element.customTitle || element.title}</h3>
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
|
||||
title="새로고침"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -677,7 +679,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
<div className={element.showHeader !== false ? "p-2" : "p-2"} style={{ minHeight: "250px" }}>
|
||||
{!isMounted ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<div className="border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
|
||||
</div>
|
||||
) : element.type === "chart" ? (
|
||||
<ChartRenderer element={element} data={data} width={undefined} height={250} />
|
||||
|
|
@ -686,10 +688,10 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
)}
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="bg-opacity-75 absolute inset-0 flex items-center justify-center bg-background">
|
||||
<div className="bg-opacity-75 bg-background absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<div className="text-sm text-foreground">업데이트 중...</div>
|
||||
<div className="border-primary mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
|
||||
<div className="text-foreground text-sm">업데이트 중...</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -704,7 +706,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
|
||||
return (
|
||||
<div
|
||||
className="absolute overflow-hidden rounded-lg border border-border bg-background shadow-sm"
|
||||
className="border-border bg-background absolute overflow-hidden rounded-lg border shadow-sm"
|
||||
style={{
|
||||
left: `${leftPercentage}%`,
|
||||
top: element.position.y,
|
||||
|
|
@ -714,11 +716,11 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
>
|
||||
{element.showHeader !== false && (
|
||||
<div className="flex items-center justify-between px-2 py-1">
|
||||
<h3 className="text-xs font-semibold text-foreground">{element.customTitle || element.title}</h3>
|
||||
<h3 className="text-foreground text-xs font-semibold">{element.customTitle || element.title}</h3>
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
|
||||
title="새로고침"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -740,7 +742,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
<div className={element.showHeader !== false ? "h-[calc(100%-32px)] w-full" : "h-full w-full"}>
|
||||
{!isMounted ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<div className="border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
|
||||
</div>
|
||||
) : element.type === "chart" ? (
|
||||
<ChartRenderer
|
||||
|
|
@ -754,10 +756,10 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
|
|||
)}
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="bg-opacity-75 absolute inset-0 flex items-center justify-center bg-background">
|
||||
<div className="bg-opacity-75 bg-background absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<div className="text-sm text-foreground">업데이트 중...</div>
|
||||
<div className="border-primary mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
|
||||
<div className="text-foreground text-sm">업데이트 중...</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -65,6 +65,10 @@ interface PolygonData {
|
|||
}
|
||||
|
||||
export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
|
||||
console.log("🗺️ MapTestWidgetV2 컴포넌트 마운트/렌더링");
|
||||
console.log("📦 element:", element);
|
||||
console.log("📊 dataSources:", element?.dataSources);
|
||||
|
||||
const [markers, setMarkers] = useState<MarkerData[]>([]);
|
||||
const [prevMarkers, setPrevMarkers] = useState<MarkerData[]>([]); // 이전 마커 위치 저장
|
||||
const [polygons, setPolygons] = useState<PolygonData[]>([]);
|
||||
|
|
@ -73,9 +77,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
|
|||
const [geoJsonData, setGeoJsonData] = useState<any>(null);
|
||||
const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
|
||||
|
||||
// // console.log("🧪 MapTestWidgetV2 렌더링!", element);
|
||||
// // console.log("📍 마커:", markers.length, "🔷 폴리곤:", polygons.length);
|
||||
|
||||
// dataSources를 useMemo로 추출 (circular reference 방지)
|
||||
const dataSources = useMemo(() => {
|
||||
return element?.dataSources || element?.chartConfig?.dataSources;
|
||||
|
|
@ -908,36 +909,37 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
|
|||
loadGeoJsonData();
|
||||
}, []);
|
||||
|
||||
// 초기 로드 및 자동 새로고침
|
||||
// 초기 로드 및 자동 새로고침 (마커 데이터만 polling)
|
||||
useEffect(() => {
|
||||
console.log("🔄 지도 위젯 초기화");
|
||||
console.log("🔄 지도 위젯 초기화 useEffect 실행됨!");
|
||||
console.log("📊 dataSources 상태:", dataSources);
|
||||
|
||||
if (!dataSources || dataSources.length === 0) {
|
||||
console.log("⚠️ dataSources가 없거나 비어있음");
|
||||
console.log("⚠️ dataSources가 없거나 비어있음 - polling 시작 안함");
|
||||
setMarkers([]);
|
||||
setPolygons([]);
|
||||
return;
|
||||
}
|
||||
|
||||
// 즉시 첫 로드
|
||||
console.log("📡 초기 데이터 로드");
|
||||
// 즉시 첫 로드 (마커 데이터)
|
||||
console.log("📡 초기 마커 데이터 로드");
|
||||
loadMultipleDataSources();
|
||||
|
||||
// 5초마다 자동 새로고침
|
||||
// 5초마다 마커 데이터만 자동 새로고침 (지도 타일은 안 건드림)
|
||||
const refreshInterval = 5;
|
||||
console.log(`⏱️ 자동 새로고침 설정: ${refreshInterval}초마다`);
|
||||
console.log(`⏱️ 마커 polling 시작: ${refreshInterval}초마다`);
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
console.log("🔄 자동 새로고침 실행");
|
||||
console.log("🔄 마커 자동 새로고침 실행");
|
||||
loadMultipleDataSources();
|
||||
}, refreshInterval * 1000);
|
||||
|
||||
return () => {
|
||||
console.log("⏹️ 자동 새로고침 정리");
|
||||
console.log("⏹️ 마커 polling 정리");
|
||||
clearInterval(intervalId);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
}, [dataSources]);
|
||||
|
||||
// 타일맵 URL (chartConfig에서 가져오기)
|
||||
const tileMapUrl =
|
||||
|
|
@ -986,10 +988,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
|
|||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-destructive text-sm">{error}</p>
|
||||
</div>
|
||||
) : !element?.dataSources || element.dataSources.length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-muted-foreground text-sm">데이터 소스를 연결해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<MapContainer center={center} zoom={13} style={{ width: "100%", height: "100%" }} className="z-0">
|
||||
<TileLayer url={tileMapUrl} attribution="© VWorld" maxZoom={19} />
|
||||
|
|
@ -1244,6 +1242,23 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
|
|||
</Marker>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 데이터 소스 없을 때 안내 메시지 */}
|
||||
{(!element?.dataSources || element.dataSources.length === 0) && (
|
||||
<div
|
||||
className="pointer-events-none absolute left-1/2 top-1/2 z-[1000] -translate-x-1/2 -translate-y-1/2"
|
||||
style={{ zIndex: 1000 }}
|
||||
>
|
||||
<div className="rounded-lg border-2 border-dashed border-primary bg-background/95 p-4 shadow-lg backdrop-blur-sm">
|
||||
<p className="text-center text-sm font-medium">
|
||||
📍 지도가 표시되었습니다
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-1 text-center text-xs">
|
||||
데이터 소스를 연결하면 마커가 표시됩니다
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</MapContainer>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue