[Deploy] AWS S3·CloudFront main 배포 파이프라인 동작 검증

src/components/dashboard/platform/PlatformRoasTable.tsx

@@ -5,21 +5,21 @@ import type { IPlatformRankingItem } from "@/types/dashboard/overview";
 import { TrendBadge } from "@/components/common/card/StatCard";
 
 import GoogleLogo from "@/assets/logo/social-logo/circle/google-circle.svg?react";
+import MetaLogo from "@/assets/logo/social-logo/circle/meta-circle.svg?react";
 import NaverLogo from "@/assets/logo/social-logo/circle/naver-circle.svg?react";
-import KakaoLogo from "@/assets/logo/social-logo/plain/kakao.svg?react";
 
 const platformLogoMap = {
   Google: <GoogleLogo className="h-7 w-auto" />,
   NAVER: <NaverLogo className="h-7 w-auto" />,
-  Kakao: <KakaoLogo className="h-7 w-auto" />,
+  Meta: <MetaLogo className="h-7 w-auto" />,
 };
 
 type TPlatformName = keyof typeof platformLogoMap;
 
 const providerDisplayMap: Record<string, string> = {
   GOOGLE: "Google",
   NAVER: "NAVER",
-  KAKAO: "Kakao",
+  META: "Meta",
 };
 
 function getDisplayName(provider: string): string {

src/components/dashboard/platform/SinglePlatformView.tsx

@@ -1,9 +1,14 @@
 import React, { useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 
+import type { TPlatformProvider } from "@/types/dashboard/platform";
+
+import { usePlatformBudget } from "@/hooks/dashboard/usePlatformBudget";
+import { usePlatformMetrics } from "@/hooks/dashboard/usePlatformMetrics";
+
 import Badge from "@/components/common/badge/Badge";
 import Card from "@/components/common/card/Card";
-import StatCard from "@/components/common/card/StatCard";
+import StatCard, { type ITrend } from "@/components/common/card/StatCard";
 import ChartLegend from "@/components/common/chart/ChartLegend";
 import { Skeleton } from "@/components/common/skeleton/Skeleton";
 import BudgetGaugeChart, {
@@ -17,8 +22,6 @@ import GoogleLogo from "@/assets/logo/social-logo/wordmark/google-wordmark.svg?r
 import MetaLogo from "@/assets/logo/social-logo/wordmark/meta-wordmark.svg?react";
 import NaverLogo from "@/assets/logo/social-logo/wordmark/naver-wordmark.svg?react";
 import {
-  budgetStatusMock,
-  performanceEfficiencyMock,
   platformDailyPerformanceMock,
   platformTrafficMock,
 } from "@/pages/dashboard/platform/platformDashboard.mock";
@@ -43,66 +46,51 @@ export default function SinglePlatformView({
 }: ISinglePlatformViewProps) {
   const [viewRange, setViewRange] = React.useState<7 | 30>(7);
 
-  const platformData = useMemo(() => {
-    return performanceEfficiencyMock.find(
-      (p) => p.provider.toUpperCase() === platform.toUpperCase(),
-    );
-  }, [platform]);
+  const {
+    data: platformData,
+    isLoading: isMetricsLoading,
+    isError: isMetricsError,
+  } = usePlatformMetrics(platform.toUpperCase() as TPlatformProvider);
+
+  const toTrend = (changeRate: number): ITrend => ({
+    direction: changeRate >= 0 ? "up" : "down",
+    value: `${Math.abs(changeRate).toFixed(2)}%`,
+  });
 
   const kpis = useMemo(() => {
     if (!platformData) return [];
 
     return [
-      {
-        title: "클릭수(CTR)",
-        value: platformData.clicks.toLocaleString(),
-        trend: {
-          direction: platformData.clickChangeRate >= 0 ? "up" : "down",
-          value: `${Math.abs(platformData.clickChangeRate * 100).toFixed(2)}%`,
-        },
-      },
       {
         title: "노출수",
         value: platformData.impressions.toLocaleString(),
-        trend: {
-          direction: platformData.impressionChangeRate >= 0 ? "up" : "down",
-          value: `${Math.abs(platformData.impressionChangeRate * 100).toFixed(2)}%`,
-        },
+        trend: toTrend(platformData.impressionChangeRate),
+      },
+      {
+        title: "클릭수 (CTR)",
+        value: platformData.clicks.toLocaleString(),
+        trend: toTrend(platformData.clickChangeRate),
       },
       {
-        title: "전환율(CVR)",
+        title: "전환율 (CVR)",
         value: `${platformData.conversion}%`,
-        trend: {
-          direction: platformData.cvrChangeRate >= 0 ? "up" : "down",
-          value: `${Math.abs(platformData.cvrChangeRate * 100).toFixed(2)}%`,
-        },
+        trend: toTrend(platformData.cvrChangeRate),
       },
       {
-        title: "광고비 대비 매출(ROAS)",
+        title: "광고비 대비 매출 (ROAS)",
         value: `${platformData.ROAS}%`,
-        trend: {
-          direction: platformData.ROASChangeRate >= 0 ? "up" : "down",
-          value: `${Math.abs(platformData.ROASChangeRate * 100).toFixed(2)}%`,
-        },
+        trend: toTrend(platformData.ROASChangeRate),
       },
     ];
   }, [platformData]);
 
   const logoInfo = PLATFORM_LOGOS[platform.toUpperCase()];
 
-  const budget = useMemo(() => {
-    const data = budgetStatusMock.find(
-      (b) => b.providerType.toUpperCase() === platform.toUpperCase(),
-    );
-    if (!data) return null;
-
-    return {
-      totalBudget: data.totalBudget,
-      spent: data.totalSpend,
-      warningThreshold: 50,
-      dangerThreshold: 75,
-    };
-  }, [platform]);
+  const {
+    data: budget,
+    isLoading: isBudgetLoading,
+    isError: isBudgetError,
+  } = usePlatformBudget(platform.toUpperCase() as TPlatformProvider);
 
   const budgetPct = budget
     ? Math.round((budget.spent / budget.totalBudget) * 100)
@@ -148,25 +136,35 @@ export default function SinglePlatformView({
 
       {/* top */}
       <div className="grid grid-cols-4 tablet:grid-cols-2 gap-4">
-        {isLoading
-          ? Array.from({ length: 4 }).map((_, i) => (
-              <div
-                key={i}
-                className="rounded-[24px] border border-surface-100/40 bg-surface-100/80 p-7 shadow-card backdrop-blur-sm flex flex-col gap-4"
-              >
-                <Skeleton className="h-4 w-16" />
-                <Skeleton className="h-8 w-24" />
-                <Skeleton className="h-6 w-14 rounded-full" />
-              </div>
-            ))
-          : kpis.map((kpi) => (
-              <StatCard
-                key={kpi.title}
-                title={kpi.title}
-                value={kpi.value}
-                trend={kpi.trend as any}
-              />
-            ))}
+        {isLoading || isMetricsLoading ? (
+          Array.from({ length: 4 }).map((_, i) => (
+            <div
+              key={i}
+              className="rounded-[24px] border border-surface-100/40 bg-surface-100/80 p-7 shadow-card backdrop-blur-sm flex flex-col gap-4"
+            >
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-8 w-24" />
+              <Skeleton className="h-6 w-14 rounded-full" />
+            </div>
+          ))
+        ) : isMetricsError ? (
+          <div className="col-span-4 flex items-center justify-center py-8 text-center font-body2 text-text-muted">
+            지표 데이터를 불러오지 못했습니다.
+          </div>
+        ) : !platformData ? (
+          <div className="col-span-4 flex items-center justify-center py-8 text-center font-body2 text-text-muted">
+            표시할 지표 데이터가 없습니다.
+          </div>
+        ) : (
+          kpis.map((kpi) => (
+            <StatCard
+              key={kpi.title}
+              title={kpi.title}
+              value={kpi.value}
+              trend={kpi.trend}
+            />
+          ))
+        )}
       </div>
 
       {/* mid */}
@@ -213,13 +211,21 @@ export default function SinglePlatformView({
             )
           }
         >
-          {budget ? (
-            <div className="flex-1 flex flex-col">
+          {isLoading || isBudgetLoading ? (
+            <div className="flex flex-1 items-center justify-center p-8">
+              <Skeleton className="h-32 w-full rounded-2xl" />
+            </div>
+          ) : isBudgetError ? (
+            <div className="flex flex-1 items-center justify-center px-4 py-4 text-center font-body2 text-info-red">
+              예산 데이터를 불러오지 못했습니다.
+            </div>
+          ) : budget ? (
+            <div className="flex flex-1 flex-col">
               <BudgetGaugeChart {...budget} />
             </div>
           ) : (
-            <div className="flex items-center justify-center h-full text-text-muted">
-              데이터가 없습니다.
+            <div className="flex flex-1 items-center justify-center px-4 py-4 text-center font-body2 text-text-muted">
+              표시할 예산 데이터가 없습니다.
             </div>
           )}
         </Card>

src/hooks/dashboard/useOverviewRoasRankings.ts

@@ -8,31 +8,32 @@ import { useCoreQuery } from "@/hooks/customQuery";
 import { getOverview, getRoasRankings } from "@/api/dashboard/overview";
 import useWorkspaceStore from "@/store/useWorkspaceStore";
 
-const PROVIDERS: TProviderType[] = ["GOOGLE", "NAVER", "KAKAO"];
+const PROVIDERS: TProviderType[] = ["GOOGLE", "NAVER", "META"];
 
-// 플랫폼별 ROAS 순위 + CTR/CVR 지표 병렬 조회 후 병합
 export function useOverviewRoasRankings() {
   const orgId = useWorkspaceStore((s) => s.selectedOrgId);
 
   return useCoreQuery(
     ["overview", "roasRankings", orgId],
     async (): Promise<IPlatformRankingItem[]> => {
+      // ROAS 순위 + 플랫폼별 지표 병렬 조회
       const [rankingsRes, ...metricsResults] = await Promise.all([
-        // TODO: 백엔드 빈 배열 이슈 확인용 임시 날짜 범위 — 정상화 후 제거
+        // TODO: 백엔드 빈 배열 이슈 — 임시 날짜 범위
         getRoasRankings(orgId!, {
           startDate: "2026-01-22",
           endDate: "2026-03-22",
         }),
         ...PROVIDERS.map((p) => getOverview(orgId!, p).catch(() => null)),
       ]);
 
+      // provider → metrics 매핑
       const metricsMap = Object.fromEntries(
         PROVIDERS.map((p, i) => [p, metricsResults[i]]),
       );
 
       return rankingsRes.rankings.map((item) => {
         const metrics = metricsMap[item.provider.toUpperCase()];
-        // CTR = 클릭수 / 노출수 * 100
+        // CTR = 클릭수 ÷ 노출수 × 100
         const clickRate =
           metrics && metrics.impressions > 0
             ? (metrics.clicks / metrics.impressions) * 100

src/hooks/dashboard/usePlatformAdCount.ts

@@ -1,33 +1,17 @@
-import type {
-  IAdStatusData,
-  TPlatformProvider,
-} from "@/types/dashboard/platform";
+import type { IAdStatusData } from "@/types/dashboard/platform";
 
 import { useCoreQuery } from "@/hooks/customQuery";
 
 import { getAdCount } from "@/api/dashboard/platform";
 import useWorkspaceStore from "@/store/useWorkspaceStore";
 
-// TODO: 추후 제거
-const normalizeProvider = (provider: string): TPlatformProvider =>
-  provider === "KAKAO" ? "META" : (provider as TPlatformProvider);
-
 // 광고 소재 현황
 export function usePlatformAdCount() {
   const orgId = useWorkspaceStore((s) => s.selectedOrgId);
 
   return useCoreQuery<IAdStatusData>(
     ["platform", "adCount", orgId],
     () => getAdCount(orgId!),
-    {
-      enabled: !!orgId,
-      select: (data): IAdStatusData => ({
-        ...data,
-        providerCount: data.providerCount.map((item) => ({
-          ...item,
-          provider: normalizeProvider(item.provider),
-        })),
-      }),
-    },
+    { enabled: !!orgId },
   );
 }

src/hooks/dashboard/usePlatformBudget.ts

@@ -0,0 +1,29 @@
+import type { TProviderType } from "@/types/dashboard/overview";
+import type { TPlatformProvider } from "@/types/dashboard/platform";
+
+import { useCoreQuery } from "@/hooks/customQuery";
+
+import { getBudget } from "@/api/dashboard/overview";
+import useWorkspaceStore from "@/store/useWorkspaceStore";
+
+const WARNING_THRESHOLD = 50;
+const DANGER_THRESHOLD = 75;
+
+// 단일 플랫폼 예산 소진 현황
+export function usePlatformBudget(provider: TPlatformProvider) {
+  const orgId = useWorkspaceStore((s) => s.selectedOrgId);
+
+  return useCoreQuery(
+    ["platform", "budget", orgId, provider],
+    () => getBudget(orgId!, provider as TProviderType),
+    {
+      enabled: !!orgId && !!provider,
+      select: (data) => ({
+        totalBudget: data.totalBudget,
+        spent: data.totalSpend,
+        warningThreshold: WARNING_THRESHOLD,
+        dangerThreshold: DANGER_THRESHOLD,
+      }),
+    },
+  );
+}

src/hooks/dashboard/usePlatformMetrics.ts

@@ -0,0 +1,23 @@
+import type {
+  IMetricsResponse,
+  TProviderType,
+} from "@/types/dashboard/overview";
+import type { TPlatformProvider } from "@/types/dashboard/platform";
+
+import { useCoreQuery } from "@/hooks/customQuery";
+
+import { getOverview } from "@/api/dashboard/overview";
+import useWorkspaceStore from "@/store/useWorkspaceStore";
+
+// 단일 플랫폼 지표 조회
+export function usePlatformMetrics(provider: TPlatformProvider) {
+  const orgId = useWorkspaceStore((s) => s.selectedOrgId);
+
+  return useCoreQuery<IMetricsResponse>(
+    ["platform", "metrics", orgId, provider],
+    () => getOverview(orgId!, provider as TProviderType),
+    {
+      enabled: !!orgId && !!provider,
+    },
+  );
+}

src/hooks/dashboard/usePlatformPerformance.ts

@@ -1,19 +1,12 @@
 import type { TProviderType } from "@/types/dashboard/overview";
-import type {
-  IPlatformPerformance,
-  TPlatformProvider,
-} from "@/types/dashboard/platform";
+import type { IPlatformPerformance } from "@/types/dashboard/platform";
 
 import { useCoreQuery } from "@/hooks/customQuery";
 
 import { getOverview } from "@/api/dashboard/overview";
 import useWorkspaceStore from "@/store/useWorkspaceStore";
 
-// TODO: 추후 제거
-const normalizeProvider = (provider: string): TPlatformProvider =>
-  provider === "KAKAO" ? "META" : (provider as TPlatformProvider);
-
-const PROVIDERS: TProviderType[] = ["GOOGLE", "NAVER", "KAKAO"];
+const PROVIDERS: TProviderType[] = ["GOOGLE", "NAVER", "META"];
 
 // 플랫폼별 성과 효율 (3개 플랫폼 병렬 조회 후 병합)
 export function usePlatformPerformance() {
@@ -26,7 +19,7 @@ export function usePlatformPerformance() {
         PROVIDERS.map((provider) =>
           getOverview(orgId!, provider).then((metrics) => ({
             ...metrics,
-            provider: normalizeProvider(provider),
+            provider,
           })),
         ),
       );