[Feature/#88] 통합 대시보드 디자인 개선 및 Custom Tooltip 적용

.gitignore

@@ -26,3 +26,6 @@ dist-ssr
 node_modules/
 *storybook.log
 storybook-static
+
+# Claude Code
+.claude/

src/components/common/card/Card.tsx

@@ -20,14 +20,14 @@ export default function Card({
   return (
     <div
       className={twMerge(
-        "bg-white/80 backdrop-blur-sm rounded-[24px] shadow-[0_4px_20px_rgba(0,0,0,0.03)] p-7 border border-white/40 transition-all duration-300 hover:shadow-[0_12px_45px_rgba(0,0,0,0.06)]",
+        "bg-white/80 backdrop-blur-sm rounded-[24px] shadow-[0_4px_20px_rgba(0,0,0,0.03)] p-7 border border-white/40 transition-all duration-300 hover:shadow-[0_12px_45px_rgba(0,0,0,0.06)] relative",
         className,
       )}
       {...rest}
     >
       {hasHeader && (
         <div className="flex flex-wrap items-start justify-between gap-2 mb-4">
-          <div className="flex flex-col gap-0.5">
+          <div className="flex flex-col gap-1">
             {title && (
               <h3 className="font-heading4 font-semibold! text-text-main">
                 {title}

src/components/common/card/StatCard.tsx

@@ -20,6 +20,25 @@ const trendClasses: Record<ITrend["direction"], string> = {
   down: "bg-status-blue/[0.08] text-status-blue font-bold",
 };
 
+export function TrendBadge({ direction, value }: ITrend) {
+  return (
+    <span
+      aria-label={`${value} ${direction === "up" ? "상승" : "하락"}`}
+      className={twMerge(
+        "inline-flex items-center gap-1 px-2 py-1 rounded-full font-caption w-fit",
+        trendClasses[direction],
+      )}
+    >
+      {direction === "up" ? (
+        <TrendUpIcon aria-hidden className="w-4 h-4" />
+      ) : (
+        <TrendDownIcon aria-hidden className="w-4 h-4" />
+      )}
+      {value}
+    </span>
+  );
+}
+
 export default function StatCard({
   title,
   value,
@@ -39,22 +58,7 @@ export default function StatCard({
       <p className="font-heading1 text-text-main font-extrabold tracking-tight">
         {value}
       </p>
-      {trend && (
-        <span
-          aria-label={`${trend.value} ${trend.direction === "up" ? "상승" : "하락"}`}
-          className={twMerge(
-            "inline-flex items-center gap-1 px-2 py-1 rounded-full font-caption w-fit",
-            trendClasses[trend.direction],
-          )}
-        >
-          {trend.direction === "up" ? (
-            <TrendUpIcon aria-hidden className="w-4 h-4" />
-          ) : (
-            <TrendDownIcon aria-hidden className="w-4 h-4" />
-          )}
-          {trend.value}
-        </span>
-      )}
+      {trend && <TrendBadge {...trend} />}
     </div>
   );
 }

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<string, TBadgeVariant> = {
+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<TBudgetStatus, TBadgeVariant> = {
   안정: "success",
   주의: "syncing",
   위험: "inactive",
 };
 
-const statusPointClasses: Record<string, string> = {
+const statusPointClasses: Record<TBudgetStatus, string> = {
   안정: "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 (
-    <div className="flex flex-col w-full h-full justify-between font-pretendard">
-      <div className="flex flex-col gap-4 mb-6">
-        <div className="flex items-baseline justify-between">
-          <div className="flex items-baseline gap-1">
-            <span className="font-heading1 text-text-main font-extrabold tracking-tight leading-none">
-              {percentage}%
-            </span>
-            <span className="font-caption text-text-sub font-semibold">
-              소진
-            </span>
-          </div>
-
-          <Badge variant={statusBadgeVariant[status]} size="sm">
-            {status}
-          </Badge>
+    <div className="flex flex-col w-full h-full font-pretendard pt-6">
+      <div className="flex flex-col mb-8">
+        <div className="flex items-center mb-3">
+          <span className="font-body2 font-semibold text-text-auth-sub">
+            이번 달 사용 예산
+          </span>
         </div>
 
-        <div className="relative py-1.5">
-          <div
-            role="progressbar"
-            aria-valuenow={Math.min(Math.max(percentage, 0), 100)}
-            aria-valuemin={0}
-            aria-valuemax={100}
-            aria-label="예산 소진율"
-            aria-valuetext={
-              percentage > 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)]"
-          >
-            <div
-              className={twMerge(
-                "absolute top-0 left-0 h-full w-full rounded-full transition-transform duration-1000 ease-out origin-left",
-                status === "안정"
-                  ? "bg-linear-to-r from-status-green/50 to-status-green"
-                  : status === "주의"
-                    ? "bg-linear-to-r from-status-yellow/50 to-status-yellow"
-                    : "bg-linear-to-r from-status-red/50 to-status-red",
-              )}
-              style={{
-                transform: `scaleX(${mounted ? Math.min(percentage, 100) / 100 : 0})`,
-              }}
-            >
-              <div className="absolute inset-0 rounded-full bg-linear-to-b from-white/30 to-transparent" />
-            </div>
-          </div>
+        <div className="flex items-baseline gap-2">
+          <span className="font-heading1 font-extrabold text-text-main tracking-tight leading-none tabular-nums">
+            {percentage}%
+          </span>
+          <span className="font-body2 font-bold text-text-sub tracking-tight tabular-nums">
+            소진
+          </span>
         </div>
       </div>
 
-      <div className="flex flex-col gap-3 py-5 border-y border-bg-surface mb-6">
-        <div className="flex justify-between items-center">
-          <span className="font-body2 text-text-sub">총 목표 예산</span>
-          <span className="font-body2 text-text-main tracking-tight">
-            ₩{totalBudget.toLocaleString()}
-          </span>
-        </div>
-        <div className="flex justify-between items-center">
-          <span className="font-body2 text-text-sub font-medium opacity-80">
-            현재 사용액
-          </span>
-          <span className="font-body2 text-text-main font-bold font-mono tracking-tight">
-            ₩{spent.toLocaleString()}
-          </span>
+      <div className="relative mb-10 w-full">
+        <div
+          role="progressbar"
+          aria-label="이번 달 사용 예산 소진율"
+          aria-valuenow={Math.min(Math.max(percentage, 0), 100)}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          className="relative h-3 w-full bg-bg-surface rounded-full overflow-hidden"
+        >
+          <div
+            className="absolute top-0 bottom-0 w-0.5 bg-white/60 z-10"
+            style={{ left: `${warningThreshold}%` }}
+          />
+          <div
+            className="absolute top-0 bottom-0 w-0.5 bg-white/60 z-10"
+            style={{ left: `${dangerThreshold}%` }}
+          />
+
+          <div
+            className={twMerge(
+              "absolute top-0 left-0 h-full w-full rounded-full transition-transform duration-1000 ease-smooth origin-left",
+              statusPointClasses[status],
+            )}
+            style={{
+              transform: `scaleX(${mounted ? Math.min(percentage, 100) / 100 : 0})`,
+            }}
+          />
         </div>
-        <div className="flex justify-between items-center">
-          <span className="font-body2 text-text-sub">기간 진행률</span>
-          <span className="font-body2 text-text-main tracking-tight">
-            {periodElapsedDays}/{periodTotalDays}일{" "}
-            <span className="text-text-sub font-medium">
-              ({periodElapsedRate}%)
-            </span>
-          </span>
+
+        <div className="flex justify-between items-center mt-3 font-body2 text-text-sub">
+          <span className="tabular-nums">₩{spent.toLocaleString()}</span>
+          <span className="tabular-nums">₩{totalBudget.toLocaleString()}</span>
         </div>
       </div>
 
-      <div className="bg-bg-surface/40 rounded-component-lg p-6 flex flex-col gap-4 border border-white/40 mt-auto">
-        <div className="flex flex-col gap-1">
-          <span className="font-body2 text-text-sub">
-            {isOverBudget ? "초과 지출" : "이번 달 잔액"}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-5">
+        <div className="flex flex-col gap-1.5 p-4 rounded-2xl bg-bg-surface/50">
+          <span className="font-caption font-medium text-text-auth-sub">
+            남은 예산
           </span>
           <span
             className={twMerge(
-              "font-heading2 font-extrabold tracking-tight leading-none pt-1",
+              "font-body1 font-bold tracking-tight tabular-nums",
               isOverBudget ? "text-status-red" : "text-text-main",
             )}
           >
-            ₩{remaining.toLocaleString()}
+            {isOverBudget ? "-" : ""}₩{remaining.toLocaleString()}
           </span>
         </div>
 
-        <div className="h-px bg-white/60 w-full" />
-
-        <div className="flex items-start gap-1.5">
-          <div
-            className={twMerge(
-              "w-1.5 h-1.5 rounded-full mt-1.5 shrink-0 motion-safe:animate-pulse",
-              statusPointClasses[status],
-            )}
-          />
-          <p className="font-caption text-text-sub leading-relaxed">
-            기간의 {periodElapsedRate}%가 경과했으며, 예산은{" "}
-            <span
-              className={twMerge(
-                "font-bold",
-                status === "위험"
-                  ? "text-status-red"
-                  : status === "주의"
-                    ? "text-status-yellow"
-                    : "text-status-green",
-              )}
-            >
-              {status}
-            </span>{" "}
-            수준으로 운용되고 있습니다.
-          </p>
+        <div className="flex flex-col gap-1 p-4 rounded-2xl bg-bg-surface/50">
+          <div className="flex items-center justify-between">
+            <span className="font-caption font-medium text-text-auth-sub">
+              기간 진행률
+            </span>
+            <span className="font-caption font-semibold text-text-sub tabular-nums">
+              {periodElapsedRate}%
+            </span>
+          </div>
+          <span className="font-body1 font-bold text-text-main tabular-nums text-right mt-0.5">
+            {periodElapsedDays}일
+            <span className="font-caption font-medium text-text-auth-sub">
+              {" "}
+              / {periodTotalDays}일
+            </span>
+          </span>
         </div>
       </div>
+
+      <div className="mt-auto px-5 py-4 flex items-center gap-3 rounded-[16px] bg-[#F2F4F6]">
+        <AlertCircleIcon
+          className="w-5 h-5 text-[#8B95A1] shrink-0"
+          aria-hidden="true"
+        />
+        <p className="font-body2 text-[#4E5968] font-medium leading-snug break-keep">
+          {insightDesc}
+        </p>
+      </div>
     </div>
   );
 }