+
{title && (
{title}
diff --git a/src/components/common/card/StatCard.tsx b/src/components/common/card/StatCard.tsx
index 8d8fcd26..bb8f6917 100644
--- a/src/components/common/card/StatCard.tsx
+++ b/src/components/common/card/StatCard.tsx
@@ -20,6 +20,25 @@ const trendClasses: Record = {
down: "bg-status-blue/[0.08] text-status-blue font-bold",
};
+export function TrendBadge({ direction, value }: ITrend) {
+ return (
+
+ {direction === "up" ? (
+
+ ) : (
+
+ )}
+ {value}
+
+ );
+}
+
export default function StatCard({
title,
value,
@@ -39,22 +58,7 @@ export default function StatCard({
{value}
- {trend && (
-
- {trend.direction === "up" ? (
-
- ) : (
-
- )}
- {trend.value}
-
- )}
+ {trend && }
);
}
diff --git a/src/components/dashboard/charts/BudgetGaugeChart.tsx b/src/components/dashboard/charts/BudgetGaugeChart.tsx
index a36d2ac8..1f56bcbc 100644
--- a/src/components/dashboard/charts/BudgetGaugeChart.tsx
+++ b/src/components/dashboard/charts/BudgetGaugeChart.tsx
@@ -1,7 +1,10 @@
-import { useEffect, useState } from "react";
import { twMerge } from "tailwind-merge";
-import Badge, { type TBadgeVariant } from "@/components/common/badge/Badge";
+import { useIsMounted } from "@/hooks/common/useIsMounted";
+
+import { type TBadgeVariant } from "@/components/common/badge/Badge";
+
+import AlertCircleIcon from "@/assets/icon/common/alert-circle.svg?react";
interface IBudgetGaugeChartProps {
totalBudget: number;
@@ -10,13 +13,25 @@ interface IBudgetGaugeChartProps {
dangerThreshold: number;
}
-const statusBadgeVariant: Record
= {
+export type TBudgetStatus = "안정" | "주의" | "위험";
+
+export function getBudgetStatus(
+ percentage: number,
+ warningThreshold: number,
+ dangerThreshold: number,
+): TBudgetStatus {
+ if (percentage >= dangerThreshold) return "위험";
+ if (percentage >= warningThreshold) return "주의";
+ return "안정";
+}
+
+export const statusBadgeVariant: Record = {
안정: "success",
주의: "syncing",
위험: "inactive",
};
-const statusPointClasses: Record = {
+const statusPointClasses: Record = {
안정: "bg-status-green",
주의: "bg-status-yellow",
위험: "bg-status-red",
@@ -28,6 +43,8 @@ export default function BudgetGaugeChart({
warningThreshold,
dangerThreshold,
}: IBudgetGaugeChartProps) {
+ const mounted = useIsMounted();
+
const percentage =
totalBudget > 0 ? Math.round((spent / totalBudget) * 100) : 0;
const isOverBudget = spent > totalBudget;
@@ -44,139 +61,126 @@ export default function BudgetGaugeChart({
(periodElapsedDays / periodTotalDays) * 100,
);
- const getStatus = () => {
- if (percentage >= dangerThreshold) return "위험";
- if (percentage >= warningThreshold) return "주의";
- return "안정";
- };
-
- const status = getStatus();
-
- const [mounted, setMounted] = useState(false);
- useEffect(() => {
- const raf = requestAnimationFrame(() => setMounted(true));
- return () => cancelAnimationFrame(raf);
- }, []);
+ const status = getBudgetStatus(percentage, warningThreshold, dangerThreshold);
+
+ // 데이터 인사이트 메시지
+ let insightDesc = "";
+
+ if (isOverBudget) {
+ insightDesc = "예산을 초과했습니다. 캠페인 조정이 필요해요.";
+ } else if (
+ percentage >= dangerThreshold ||
+ percentage > periodElapsedRate + 15
+ ) {
+ insightDesc = "예산 소진이 빨라요. 일일 한도 점검을 추천해요.";
+ } else if (
+ percentage >= warningThreshold ||
+ percentage > periodElapsedRate + 5
+ ) {
+ insightDesc = "예산 소진 속도가 다소 높아요. 매체 효율을 확인해 보세요.";
+ } else if (percentage < periodElapsedRate - 5) {
+ insightDesc = "예산이 여유로워요. 효율이 좋은 매체에 더 투자해 보세요.";
+ } else {
+ insightDesc = "계획된 일정에 맞게 예산이 잘 사용되고 있어요.";
+ }
return (
-
-
-
-
-
- {percentage}%
-
-
- 소진
-
-
-
-
- {status}
-
+
+
+
+
+ 이번 달 사용 예산
+
-
-
100
- ? `예산 소진율 ${percentage}%, 예산을 초과했습니다`
- : `예산 소진율 ${Math.max(percentage, 0)}%`
- }
- className="relative h-3 w-full bg-bg-disabled/40 rounded-full overflow-hidden shadow-[inset_0_1px_3px_rgba(0,0,0,0.08)]"
- >
-
-
+
+
+ {percentage}%
+
+
+ 소진
+
-
-
- 총 목표 예산
-
- ₩{totalBudget.toLocaleString()}
-
-
-
-
- 현재 사용액
-
-
- ₩{spent.toLocaleString()}
-
+
+
-
-
기간 진행률
-
- {periodElapsedDays}/{periodTotalDays}일{" "}
-
- ({periodElapsedRate}%)
-
-
+
+
+ ₩{spent.toLocaleString()}
+ ₩{totalBudget.toLocaleString()}
-
-
-
- {isOverBudget ? "초과 지출" : "이번 달 잔액"}
+
+
+
+ 남은 예산
- ₩{remaining.toLocaleString()}
+ {isOverBudget ? "-" : ""}₩{remaining.toLocaleString()}
-
-
-
-
-
- 기간의 {periodElapsedRate}%가 경과했으며, 예산은{" "}
-
- {status}
- {" "}
- 수준으로 운용되고 있습니다.
-
+
+
+
+ 기간 진행률
+
+
+ {periodElapsedRate}%
+
+
+
+ {periodElapsedDays}일
+
+ {" "}
+ / {periodTotalDays}일
+
+
+
+
+
+ 클릭 이상 징후 감지
+
+
+ 구글-캠페인 A-광고 1
+
+ 부정 클릭 의심
+
+
+
+ );
+}
+
export default function TrafficChart() {
- const options = useMemo
(() => {
- const values =
- series[0]?.data.map((d: { x: string; y: number }) => d.y) ?? [];
- const yAxisMax =
- values.length > 0
- ? Math.ceil(Math.max(...values) / 10000) * 10000
- : 10000;
+ const isMounted = useIsMounted();
+ const containerRef = useRef(null);
- return { ...BASE_OPTIONS, yaxis: { ...BASE_OPTIONS.yaxis, max: yAxisMax } };
- }, [series]);
+ // 빨간 점의 컨테이너 기준 좌표
+ const markerPos = useAnomalyMarkerPos(containerRef);
+ const [isAnomalyHovered, setIsAnomalyHovered] = useState(false);
+ const [isAnomalyFocused, setIsAnomalyFocused] = useState(false);
return (
-
+ {isMounted && (
+
({ x: i, y })),
+ },
+ ]}
+ height={400}
+ />
+ )}
+ {markerPos && (
+ <>
+