diff --git a/src/components/dashboard/platform/AllPlatformTrafficChart.tsx b/src/components/dashboard/platform/AllPlatformTrafficChart.tsx index 82a3dd7e..65c6798b 100644 --- a/src/components/dashboard/platform/AllPlatformTrafficChart.tsx +++ b/src/components/dashboard/platform/AllPlatformTrafficChart.tsx @@ -19,6 +19,10 @@ import { useClickStream } from "@/hooks/dashboard/useClickStream"; import Button from "@/components/common/button/Button"; import { Skeleton } from "@/components/common/skeleton/Skeleton"; +import { + PLATFORM_ALL_TRAFFIC_CHART_ID, + PLATFORM_ALL_TRAFFIC_CONTAINER_ID, +} from "@/components/dashboard/platform/platformTrafficChartDownload.config"; const STREAM_MODE = "dummy" as const; @@ -93,6 +97,7 @@ const AllPlatformTrafficChart = memo(function AllPlatformTrafficChart() { const chartOptions: ApexOptions = { chart: { + id: PLATFORM_ALL_TRAFFIC_CHART_ID, type: "area", toolbar: { show: false }, zoom: { enabled: false }, @@ -211,7 +216,7 @@ const AllPlatformTrafficChart = memo(function AllPlatformTrafficChart() { )} -
+
({ label: PLATFORM_MAP[provider], color: PLATFORM_CHART_COLORS[provider], })); +const PLATFORM_LOGOS: Record = { + GOOGLE: , + NAVER: , + META: , +}; + +function PlatformDetailErrorCard({ provider }: { provider: TProviderType }) { + return ( + +
+
{PLATFORM_LOGOS[provider]}
+

+ {PLATFORM_MAP[provider]} +

+
+
+ 데이터를 불러오지 못했습니다. +
+
+ ); +} + export default function AllPlatformView() { const { data: roasRankings, @@ -47,11 +77,15 @@ export default function AllPlatformView() { } = usePlatformAdCount(); const { - data: platformPerformance, + data: performanceData, isLoading: isPerformanceLoading, isError: isPerformanceError, } = usePlatformPerformance(); + const platformPerformance = performanceData?.platforms; + const failedProviders = performanceData?.failedProviders ?? []; + const hasPartialFailure = failedProviders.length > 0; + return (
@@ -154,7 +188,14 @@ export default function AllPlatformView() { 표시할 성과 데이터가 없습니다.
) : ( - +
+ {hasPartialFailure ? ( +

+ 일부 플랫폼 성과를 불러오지 못했습니다. +

+ ) : null} + +
)} @@ -165,6 +206,7 @@ export default function AllPlatformView() { title="플랫폼별 실시간 클릭수 비교" className="h-120 flex flex-col" description={} + RightElement={} >
@@ -176,7 +218,7 @@ export default function AllPlatformView() { {/* 개별 플랫폼 상세 */}
{isPerformanceLoading ? ( @@ -187,14 +229,21 @@ export default function AllPlatformView() {
데이터를 불러오지 못했습니다.
- ) : platformPerformance.length === 0 ? ( -
- 표시할 플랫폼 데이터가 없습니다. -
) : ( - platformPerformance.map((platform) => ( - - )) + PROVIDER_TYPES.map((provider) => { + const data = platformPerformance.find( + (platform) => platform.provider === provider, + ); + if (data) { + return ; + } + if (failedProviders.includes(provider)) { + return ( + + ); + } + return null; + }) )}
diff --git a/src/components/dashboard/platform/PlatformTrafficChart.tsx b/src/components/dashboard/platform/PlatformTrafficChart.tsx index 87999ea4..244b920c 100644 --- a/src/components/dashboard/platform/PlatformTrafficChart.tsx +++ b/src/components/dashboard/platform/PlatformTrafficChart.tsx @@ -31,6 +31,10 @@ import { parseMinuteToTimestamp } from "@/utils/dashboard/parseMinuteToTimestamp import Button from "@/components/common/button/Button"; import { Skeleton } from "@/components/common/skeleton/Skeleton"; import { useAnomalyMarkerPos } from "@/components/dashboard/charts/useAnomalyMarkerPos"; +import { + PLATFORM_TRAFFIC_CHART_ID, + PLATFORM_TRAFFIC_CONTAINER_ID, +} from "@/components/dashboard/platform/platformTrafficChartDownload.config"; interface IPlatformTrafficChartProps { data: IClickStreamItem | null; @@ -175,6 +179,7 @@ const PlatformTrafficChart = memo(function PlatformTrafficChart({ const chartOptions: ApexOptions = { chart: { + id: PLATFORM_TRAFFIC_CHART_ID, type: "area", toolbar: { show: false }, zoom: { enabled: false }, @@ -428,6 +433,7 @@ const PlatformTrafficChart = memo(function PlatformTrafficChart({ ) : (
+