{title &&
{RightElement}
diff --git a/src/components/common/card/StatCard.tsx b/src/components/common/card/StatCard.tsx
index d851d43d..8d8fcd26 100644
--- a/src/components/common/card/StatCard.tsx
+++ b/src/components/common/card/StatCard.tsx
@@ -16,8 +16,8 @@ export interface IStatCardProps extends HTMLAttributes{title}
} {description && ( -{description}
+{description}
)}
-
+ );
+}
diff --git a/src/components/common/drawer/Drawer.tsx b/src/components/common/drawer/Drawer.tsx
new file mode 100644
index 00000000..c6cd2727
--- /dev/null
+++ b/src/components/common/drawer/Drawer.tsx
@@ -0,0 +1,139 @@
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { twMerge } from "tailwind-merge";
+
+import { DropdownMenu } from "@/components/common/dropdownmenu/DropdownMenu";
+
+import CloseIcon from "@/assets/icon/ai-report/close.svg?react";
+import MoreIcon from "@/assets/icon/ai-report/more.svg?react";
+
+export interface IDrawerProps {
+ isOpen: boolean;
+ onClose: () => void;
+ title?: ReactNode;
+ children: ReactNode;
+ className?: string;
+ hideHeader?: boolean;
+ dropdownItems?: { label: string; icon?: ReactNode; onClick: () => void }[];
+ disableScroll?: boolean;
+}
+
+export default function Drawer({
+ isOpen,
+ onClose,
+ title,
+ children,
+ className,
+ hideHeader = false,
+ dropdownItems,
+ disableScroll = false,
+}: IDrawerProps) {
+ const [isMounted, setIsMounted] = useState(false);
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "";
+ }
+ return () => {
+ document.body.style.overflow = "";
+ };
+ }, [isOpen]);
+
+ if (!isMounted) return null;
+
+ return createPortal(
+ {title}
-{value}
+{title}
++ {value} +
{trend && ( + {items.map((item, index) => ( +
+
+
+ {item.label}
+
+
+ ))}
+
+
+
,
+ document.body,
+ );
+}
diff --git a/src/components/common/dropdownmenu/DropdownMenu.tsx b/src/components/common/dropdownmenu/DropdownMenu.tsx
index 14af28a9..d7432324 100644
--- a/src/components/common/dropdownmenu/DropdownMenu.tsx
+++ b/src/components/common/dropdownmenu/DropdownMenu.tsx
@@ -57,7 +57,7 @@ export function DropdownMenu({
+ {!hideHeader && (
+
+
+ {title ? (
+ <>
+ {typeof title === "string" ? (
+
+ )}
+ + {title} +
+ ) : ( + title + )} +
+ {dropdownItems && dropdownItems.length > 0 && (
+
+
+ ) : (
+ <>
+
+ {dropdownItems && (
+
+ {children}
+
+
{items.map((it, idx) => (
@@ -70,10 +70,10 @@ export function DropdownMenu({
setOpen(false);
}}
className={twMerge(
- "group flex w-full items-center gap-3 rounded-component-md px-5 py-4 text-left font-body1 transition-fast",
+ "group flex w-full items-center gap-3 rounded-component-md px-5 py-4 text-left font-body2 transition-fast",
it.active
? "bg-brand-300 text-status-blue"
- : "text-text-main hover:bg-brand-300 hover:text-status-blue",
+ : "text-text-disabled hover:bg-brand-300 hover:text-status-blue",
)}
>
{it.icon ? (
diff --git a/src/components/common/toast/Toast.tsx b/src/components/common/toast/Toast.tsx
new file mode 100644
index 00000000..c93c8ac6
--- /dev/null
+++ b/src/components/common/toast/Toast.tsx
@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { twMerge } from "tailwind-merge";
+
+export type TToastVariant = "success" | "error";
+
+export interface IToastProps {
+ message: string;
+ variant?: TToastVariant;
+ duration?: number; // ms, 기본 2500
+ onClose: () => void;
+}
+
+const variantClasses: Record = {
+ success: "bg-[#1a1a1a] text-white",
+ error: "bg-status-red text-white",
+};
+
+export default function Toast({
+ message,
+ variant = "success",
+ duration = 2500,
+ onClose,
+}: IToastProps) {
+ useEffect(() => {
+ const timer = setTimeout(onClose, duration);
+ return () => clearTimeout(timer);
+ }, [duration, onClose]);
+
+ return createPortal(
+ = {
+ 안정: "bg-status-green/[0.08] text-status-green",
+ 주의: "bg-status-yellow/[0.08] text-status-yellow",
+ 위험: "bg-status-red/[0.08] text-status-red",
+};
+
+const statusPointClasses: Record = {
+ 안정: "bg-status-green",
+ 주의: "bg-status-yellow",
+ 위험: "bg-status-red",
+};
+
+export default function BudgetGaugeChart({
+ totalBudget,
+ spent,
+ warningThreshold,
+ dangerThreshold,
+}: IBudgetGaugeChartProps) {
+ const percentage = Math.round((spent / totalBudget) * 100);
+ const remaining = totalBudget - spent;
+
+ const getStatus = () => {
+ if (percentage >= dangerThreshold) return "위험";
+ if (percentage >= warningThreshold) return "주의";
+ return "안정";
+ };
+
+ const status = getStatus();
+
+ return (
+
+ {message}
+
,
+ document.body,
+ );
+}
diff --git a/src/components/dashboard/charts/BudgetGaugeChart.tsx b/src/components/dashboard/charts/BudgetGaugeChart.tsx
new file mode 100644
index 00000000..aee7200e
--- /dev/null
+++ b/src/components/dashboard/charts/BudgetGaugeChart.tsx
@@ -0,0 +1,131 @@
+import { twMerge } from "tailwind-merge";
+
+interface IBudgetGaugeChartProps {
+ totalBudget: number;
+ spent: number;
+ warningThreshold: number;
+ dangerThreshold: number;
+}
+
+const statusBadgeClasses: Record
+
+ );
+}
diff --git a/src/components/dashboard/charts/TrafficChart.tsx b/src/components/dashboard/charts/TrafficChart.tsx
new file mode 100644
index 00000000..6067ba92
--- /dev/null
+++ b/src/components/dashboard/charts/TrafficChart.tsx
@@ -0,0 +1,93 @@
+import ReactApexChart from "react-apexcharts";
+import type { ApexOptions } from "apexcharts";
+
+import { trafficChartMock } from "./trafficChart.mock";
+
+const { labels, clicks } = trafficChartMock;
+
+// x축 시간대
+const LABEL_HOURS = new Set(["00:00", "06:00", "12:00", "18:00", "24:00"]);
+
+const yAxisMax = Math.ceil(Math.max(...clicks) / 10000) * 10000;
+
+const options: ApexOptions = {
+ chart: {
+ type: "area",
+ toolbar: { show: false }, // 우측 상단 툴바 표시 안함
+ zoom: { enabled: false },
+ fontFamily: "Pretendard",
+ animations: { enabled: true, dynamicAnimation: { enabled: false } },
+ },
+ dataLabels: { enabled: false }, // 각 포인트 위 숫자 레이블 숨김
+ stroke: { curve: "monotoneCubic", width: 1.5 },
+ // 라인 아래 그라데이션
+ fill: {
+ type: "gradient",
+ gradient: {
+ shadeIntensity: 1,
+ opacityFrom: 0.5,
+ opacityTo: 0.5,
+ stops: [0, 90, 100],
+ },
+ },
+ colors: ["#0084fe"], // --color-status-blue
+ markers: { size: 0 }, // 데이터 포인트 마커 숨김
+ xaxis: {
+ type: "category",
+ categories: labels, // 00:00 ~ 24:00
+ tickAmount: 24, // 1시간 간격 tick 생성
+ labels: {
+ // LABEL_HOURS에 해당하는 시간대만 표시, 나머지는 빈 문자열
+ formatter: (val: string) => (LABEL_HOURS.has(val) ? val : ""),
+ style: { colors: "#8b8b8f", fontSize: "12px" }, // --color-text-sub
+ rotate: 0, // 레이블 수평 고정
+ rotateAlways: false, // 자동 회전 방지
+ },
+ axisBorder: { show: false }, // x축 하단 경계선 숨김
+ axisTicks: { show: false }, // tick 눈금 숨김
+ tooltip: { enabled: false }, // 호버 시 x축 tooltip 숨김
+ },
+ yaxis: {
+ min: 0,
+ max: yAxisMax, // 데이터 기반 동적 최대값
+ tickAmount: 6, // 1만 단위 눈금
+ labels: {
+ // 0은 숨기고, 나머지는 K 단위로 변환
+ formatter: (val: number) =>
+ val === 0 ? "" : `${(val / 1000).toFixed(0)}K`,
+ style: { colors: "#8b8b8f", fontSize: "12px" }, // --color-text-sub
+ },
+ },
+ grid: {
+ borderColor: "#f2f4f6", // --color-chart-inactive
+ xaxis: { lines: { show: false } }, // 세로 그리드선 숨김
+ yaxis: { lines: { show: true } }, // 가로 그리드선 표시
+ padding: { left: 16, right: 8 }, // y축 레이블와 차트 사이 여백 줌
+ },
+ tooltip: {
+ x: { show: false }, // 상단 시간 헤더 숨김
+ y: {
+ title: { formatter: () => "클릭수: " }, // 시리즈 이름 대신 고정 텍스트
+ formatter: (val: number) => val.toLocaleString(), // 쉼표 포맷
+ },
+ style: { fontFamily: "Pretendard" }, // 폰트 통일
+ },
+};
+
+const series = [
+ {
+ name: "클릭수",
+ data: labels.map((label, i) => ({ x: label, y: clicks[i] })),
+ },
+];
+
+export default function TrafficChart() {
+ return (
+
+
+
+
+
+
+
+
+ {percentage}%
+
+
+ 소진
+
+
+
+
+ {status}
+
+
+
+
+
+
+
+
+ 총 목표 예산
+
+ ₩{totalBudget.toLocaleString()}
+
+
+
+
+ 현재 사용액
+
+
+ ₩{spent.toLocaleString()}
+
+
+
+
+
+ 이번 달 잔액
+
+ ₩{remaining.toLocaleString()}
+
+
+
+
+
+
+
+
+ + 현재{" "} + + {status} + {" "} + 수준으로 운용되고 있습니다. +
+
+
+ );
+}
diff --git a/src/components/dashboard/platform/PlatformComparisonChart.tsx b/src/components/dashboard/platform/PlatformComparisonChart.tsx
new file mode 100644
index 00000000..454a170c
--- /dev/null
+++ b/src/components/dashboard/platform/PlatformComparisonChart.tsx
@@ -0,0 +1,147 @@
+import ReactApexChart from "react-apexcharts";
+import type { ApexOptions } from "apexcharts";
+
+import { platformComparisonMock } from "./platformComparison.mock";
+
+import googleWordmarkUrl from "@/assets/icon/ads/google-wordmark.svg?url";
+import kakaoWordmarkUrl from "@/assets/icon/ads/kakao-wordmark.svg?url";
+import naverWordmarkUrl from "@/assets/icon/ads/naver-wordmark.svg?url";
+
+const PLATFORM_WORDMARKS = [
+ { name: "Google", src: googleWordmarkUrl, height: 20 },
+ { name: "NAVER", src: naverWordmarkUrl, height: 13 },
+ { name: "kakao", src: kakaoWordmarkUrl, height: 16 },
+];
+
+// Y축 레이블 영역 고정 너비 — wordmark 정렬의 단일 기준값
+const YAXIS_LABEL_WIDTH = 42;
+
+const LEGEND_ITEMS = [
+ { label: "클릭률", color: "#0084fe" },
+ { label: "전환률", color: "#22c55e" },
+ { label: "노출수", color: "#CBD5E1" },
+];
+
+const options: ApexOptions = {
+ chart: {
+ type: "bar",
+ toolbar: { show: false },
+ fontFamily: "Pretendard",
+ animations: {
+ enabled: true,
+ speed: 800,
+ dynamicAnimation: { enabled: true, speed: 350 },
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: "75%",
+ borderRadius: 8,
+ borderRadiusApplication: "end",
+ },
+ },
+ dataLabels: { enabled: false },
+ colors: ["#0084fe", "#22c55e", "#CBD5E1"],
+ stroke: { show: true, width: 2, colors: ["transparent"] },
+ xaxis: {
+ categories: platformComparisonMock.map((p) => p.name),
+ axisBorder: { show: false },
+ axisTicks: { show: false },
+ labels: { show: false },
+ },
+ yaxis: {
+ min: 0,
+ max: 100,
+ tickAmount: 4,
+ labels: {
+ minWidth: YAXIS_LABEL_WIDTH,
+ maxWidth: YAXIS_LABEL_WIDTH,
+ formatter: (val: number) => `${val}%`,
+ style: { colors: "#b0b8c1", fontSize: "11px", fontWeight: 500 },
+ },
+ },
+ fill: { opacity: 1 },
+ grid: {
+ borderColor: "#F2F4F6",
+ strokeDashArray: 4,
+ xaxis: { lines: { show: false } },
+ yaxis: { lines: { show: true } },
+ padding: { left: 0, right: 0, top: -10 },
+ },
+ legend: { show: false },
+ tooltip: {
+ shared: true,
+ intersect: false,
+ y: { formatter: (val: number) => `${val}%` },
+ style: { fontFamily: "Pretendard" },
+ theme: "light",
+ },
+ states: {
+ hover: {
+ filter: { type: "darken" },
+ },
+ },
+};
+
+const series = [
+ { name: "클릭률", data: platformComparisonMock.map((p) => p.clickRate) },
+ { name: "전환률", data: platformComparisonMock.map((p) => p.conversionRate) },
+ { name: "노출수", data: platformComparisonMock.map((p) => p.impressionRate) },
+];
+
+export default function PlatformComparisonChart() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/dashboard/platform/PlatformRoasTable.tsx b/src/components/dashboard/platform/PlatformRoasTable.tsx
new file mode 100644
index 00000000..e3771cc0
--- /dev/null
+++ b/src/components/dashboard/platform/PlatformRoasTable.tsx
@@ -0,0 +1,72 @@
+import { useNavigate } from "react-router-dom";
+
+import { platformRoasRanking } from "./platformComparison.mock";
+
+import GoogleLogo from "@/assets/icon/ads/google-circle.svg?react";
+import KakaoLogo from "@/assets/icon/ads/kakao-circle.svg?react";
+import NaverLogo from "@/assets/icon/ads/naver-circle.svg?react";
+
+const platformLogoMap = {
+ Google:
+
+
+ + 플랫폼 순위 +
+
+ {LEGEND_ITEMS.map(({ label, color }) => (
+
+
+
+
+ {label}
+
+
+ ))}
+
+
+
+
+ {PLATFORM_WORDMARKS.map(({ name, src, height }) => (
+
+
+ 
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/dashboard/platform/platformComparison.mock.ts b/src/components/dashboard/platform/platformComparison.mock.ts
new file mode 100644
index 00000000..a8f99508
--- /dev/null
+++ b/src/components/dashboard/platform/platformComparison.mock.ts
@@ -0,0 +1,44 @@
+export interface IPlatformStats {
+ name: "Google" | "NAVER" | "kakao";
+ clickRate: number; // 클릭률 (%)
+ conversionRate: number; // 전환률 (%)
+ impressionRate: number; // 노출수 (%)
+ roas: number; // ROAS (%)
+ revenue: number; // 매출 (원)
+ adCost: number; // 광고비 (원)
+}
+
+export const platformComparisonMock: IPlatformStats[] = [
+ {
+ name: "Google",
+ clickRate: 45,
+ conversionRate: 50,
+ impressionRate: 62,
+ roas: 320,
+ revenue: 12300000,
+ adCost: 3840000,
+ },
+ {
+ name: "NAVER",
+ clickRate: 42,
+ conversionRate: 55,
+ impressionRate: 65,
+ roas: 210,
+ revenue: 9100000,
+ adCost: 4330000,
+ },
+ {
+ name: "kakao",
+ clickRate: 40,
+ conversionRate: 48,
+ impressionRate: 60,
+ roas: 95,
+ revenue: 2300000,
+ adCost: 2420000,
+ },
+];
+
+// ROAS 기준 내림차순 정렬
+export const platformRoasRanking = [...platformComparisonMock].sort(
+ (a, b) => b.roas - a.roas,
+);
diff --git a/src/index.css b/src/index.css
index 71d8cfb9..47326a4b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -332,5 +332,49 @@ button {
background-size: 200% 100%;
animation: shimmer 1.5s infinite linear;
}
+
+ /* AI 리포트 인쇄 — 드로어 패널 외 모든 요소 숨김 */
+ @media print {
+ body.ai-report-printing > *:not([data-drawer-portal]) {
+ display: none !important;
+ }
+
+ body.ai-report-printing [data-drawer-portal] {
+ position: static !important;
+ display: block !important;
+ }
+
+ body.ai-report-printing [data-print-hide] {
+ display: none !important;
+ }
+
+ body.ai-report-printing [data-drawer-portal] > div:last-child {
+ box-shadow: none !important;
+ border-radius: 0 !important;
+ max-width: 100% !important;
+ height: auto !important;
+ transform: none !important;
+ }
+
+ @page {
+ margin: 16mm;
+ }
+ }
+
+ /* 토스트 애니메이션 */
+ @keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translate(-50%, 12px);
+ }
+ to {
+ opacity: 1;
+ transform: translate(-50%, 0);
+ }
+ }
+
+ .animate-fade-in-up {
+ animation: fade-in-up 0.2s var(--ease-out) both;
+ }
}
diff --git a/src/pages/dashboard/overview/OverviewAiReportPanel.tsx b/src/pages/dashboard/overview/OverviewAiReportPanel.tsx
new file mode 100644
index 00000000..613c3bf3
--- /dev/null
+++ b/src/pages/dashboard/overview/OverviewAiReportPanel.tsx
@@ -0,0 +1,62 @@
+import { aiReportMockData } from "./aiReport.mock";
+
+import SparkleIcon from "@/assets/icon/ai-report/sparkle.svg?react";
+import SparkleCircleIcon from "@/assets/icon/ai-report/sparkle-circle.svg?react";
+import WarningIcon from "@/assets/icon/ai-report/warning.svg?react";
+
+export default function OverviewAiReportPanel() {
+ const data = aiReportMockData;
+
+ return (
+
+
+
+ + 성과 순위 +
++ ROAS(%) = 매출 ÷ 광고비 × 100 +
+
+
+
+ 순위
+ 플랫폼
+ ROAS(%)
+ 매출 / 광고비
+
+
+
+ {platformRoasRanking.map((platform, index) => (
+
+ navigate("/platform")}
+ className="group grid grid-cols-[2.5rem_9rem_5rem_1fr] gap-4 items-center px-3 py-4 rounded-component-lg transition-all duration-300 hover:bg-bg-surface hover:shadow-Medium border border-transparent hover:border-white active:scale-[0.98] cursor-pointer"
+ >
+
+ {index + 1}
+
+
+ ))}
+
+
+
+ {platform.roas}%
+
+
+ {platformLogoMap[platform.name]}
+
+
+ {platform.name}
+
+
+
+ ₩{platform.revenue.toLocaleString()}
+
+
+ ₩{platform.adCost.toLocaleString()}
+
+
+
+
+ );
+}
diff --git a/src/pages/dashboard/overview/OverviewDashboard.tsx b/src/pages/dashboard/overview/OverviewDashboard.tsx
index 0bfec86f..40d6c56d 100644
--- a/src/pages/dashboard/overview/OverviewDashboard.tsx
+++ b/src/pages/dashboard/overview/OverviewDashboard.tsx
@@ -1,53 +1,177 @@
-import { Fragment } from "react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
import Button from "@/components/common/button/Button";
import Card from "@/components/common/card/Card";
import StatCard from "@/components/common/card/StatCard";
+import ChartLegend from "@/components/common/chart/ChartLegend";
+import Drawer from "@/components/common/drawer/Drawer";
+import Toast from "@/components/common/toast/Toast";
+import BudgetGaugeChart from "@/components/dashboard/charts/BudgetGaugeChart";
+import { budgetGaugeChartMock } from "@/components/dashboard/charts/budgetGaugeChart.mock";
+import TrafficChart from "@/components/dashboard/charts/TrafficChart";
+import PlatformComparison from "@/components/dashboard/platform/PlatformComparison";
import { overviewMockData } from "./overview.mock";
+import OverviewAiReportPanel from "./OverviewAiReportPanel";
+
+import DownloadIcon from "@/assets/icon/ai-report/download.svg?react";
+import LinkIcon from "@/assets/icon/ai-report/link.svg?react";
+import ChevronDoubleRightIcon from "@/assets/icon/common/chevron-double-right.svg?react";
+import AiButtonSvg from "@/assets/logo/ai-요약버튼.svg?react";
export default function OverviewDashboard() {
+ const navigate = useNavigate();
+ const [isAiPanelOpen, setIsAiPanelOpen] = useState(false);
+ const [toast, setToast] = useState<{
+ message: string;
+ variant: "success" | "error";
+ } | null>(null);
+
+ const showToast = (
+ message: string,
+ variant: "success" | "error" = "success",
+ ) => {
+ setToast({ message, variant });
+ };
+
return (
-
+ {/* 타이틀 */}
+
+
+
+
+ {/* 전략 제안 */}
+
+
+ + {data.title} +
+
+
+
+
+
+ {/* 성과 요약 */}
+
+
+ + {data.strategySuggestion.content} +
+
+ {data.sections.map((section, idx) => (
+
+
+ {/* 주의 */}
+
+
+ ))}
+ + {section.title} +
+
+ {section.content}
+
+
+
+
+
+
+
+ + {data.warning.content} +
+
+
-
-
- 통합 대시보드
-- 데이터 기준 | 2026.01.06 09:13 +
+
- {/* TODO: AI 요약 버튼 */}
+
+ 통합 대시보드 +
++ 데이터 기준 ·{" "} + {new Date().toLocaleString("ko-KR", { + year: "numeric", + month: "2-digit", + day: "2-digit", + hour: "2-digit", + minute: "2-digit", + })}
- {overviewMockData.kpis.map((kpi, index) => (
-
- {index > 0 && (
-
- )}
-
+ >;
+ export default ReactComponent;
+}
+
declare module "*.md?raw" {
const content: string;
export default content;
diff --git a/vite.config.ts b/vite.config.ts
index e1212f21..bf19cacb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,6 +26,12 @@ export default defineConfig(({ mode }) => {
alias: {
"@": "/src",
},
+ dedupe: ["react", "react-dom"],
+ },
+
+ // 사전 번들링 최적화
+ optimizeDeps: {
+ include: ["react-apexcharts", "apexcharts"],
},
// 배포 시 콘솔 로그 제거
-
-
+ {overviewMockData.kpis.map((kpi) => (
+
-
- 플랫폼 대시보드 보기}
- />
+ RightElement={
+
+ }
+ >
+
+
+ setIsAiPanelOpen(false)}
+ hideHeader={false}
+ disableScroll={false}
+ className="w-full sm:max-w-160"
+ dropdownItems={[
+ {
+ label: "링크 공유하기",
+ icon: (
+
+
+ {toast && (
+ setToast(null)}
+ />
+ )}
);
}
diff --git a/src/pages/dashboard/overview/aiReport.mock.ts b/src/pages/dashboard/overview/aiReport.mock.ts
new file mode 100644
index 00000000..7a759677
--- /dev/null
+++ b/src/pages/dashboard/overview/aiReport.mock.ts
@@ -0,0 +1,31 @@
+export const aiReportMockData = {
+ label: "오늘의 데이터 분석 중",
+ title: "AI가 오늘의 데이터를 중심으로 요약했어요",
+ strategySuggestion: {
+ title: "전략 제안",
+ content:
+ "성과가 안정적으로 유지되고 있는 만큼,\n현재 성과가 좋은 캠페인과 소재를 중심으로 예산 배분 상태를 점검해볼 수 있습니다.\n동시에 전환 효율이 낮았던 시간대에 대해서는\n추가적인 테스트 또는 예산 분산 여부를 검토해보는 것이 도움이 될 수 있습니다.",
+ },
+ sections: [
+ {
+ title: "성과 요약",
+ content:
+ "오늘은 클릭과 노출이 안정적으로 유지되고 있으며,\n일부 시간대에서 전환 효율이 개선되는 흐름을 보이고 있습니다.",
+ },
+ {
+ title: "왜 이렇게 나왔을까?",
+ content:
+ "오늘 클릭수 증가는 상위 성과 캠페인의 노출 비중이 확대된 영향으로 보입니다.\n특히 오후 시간대에 클릭이 집중되면서 전체 트래픽이 증가했으나,\n같은 구간에서 전환수는 상대적으로 완만한 증가세를 보였습니다.\n이는 클릭 대비 전환 효율이 시간대별로 다르게 나타났기 때문으로 추정됩니다.",
+ },
+ {
+ title: "성과 포인트",
+ content:
+ "1월 16일 기준, 클릭수는 전일 대비 약 13% 증가하며 가장 높은 수준을 기록했습니다.\n이 시점에서 전환율 또한 평균 이상을 유지해,\n트래픽 증가가 단순 노출 확대로만 이어지지 않았음을 확인할 수 있습니다.",
+ },
+ ],
+ warning: {
+ title: "주의가 필요한 부분",
+ content:
+ "다만, 일부 매체에서는 클릭 증가 대비 전환 효율이 소폭 하락하는 흐름이 나타났습니다.\n특히 18시 이후 시간대에서는 예산 소진 속도가 빨라졌으나,\n전환 성과는 이에 비례해 증가하지는 않았습니다.\n해당 구간에 대한 추가적인 모니터링이 필요해 보입니다.",
+ },
+};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index d341e6e1..e1d54387 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,6 +1,12 @@
///
+