[Feature/#74] 통합 대시보드 UI 구현

package.json

@@ -17,9 +17,11 @@
     "@hookform/resolvers": "^5.2.2",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.90.17",
+    "apexcharts": "^5.7.0",
     "axios": "^1.13.4",
     "clsx": "^2.1.1",
     "react": "^19.2.0",
+    "react-apexcharts": "^2.0.1",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.71.1",
     "react-markdown": "^10.1.0",

src/components/ads/CampaignRow.tsx

@@ -5,9 +5,9 @@ import type { TCampaignStatus, TPlatform } from "@/types/ads/campaign";
 import Badge from "../common/badge/Badge";
 import ProgressBar from "../common/progressbar/ProgressBar";
 
-import GoogleLogo from "@/assets/icon/ads/google-logo.svg?react";
-import KakaoLogo from "@/assets/icon/ads/kakao-logo.svg?react";
-import NaverLogo from "@/assets/icon/ads/naver-logo.svg?react";
+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";
 
 interface ICampaignRowProps {
   platforms: TPlatform[];

src/components/common/card/Card.tsx

@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
 
 export interface ICardProps extends HTMLAttributes<HTMLDivElement> {
   title?: string;
-  description?: string;
+  description?: ReactNode;
   RightElement?: ReactNode;
 }
 
@@ -20,7 +20,7 @@ export default function Card({
   return (
     <div
       className={twMerge(
-        "bg-white rounded-component-md border border-chart-inactive p-5",
+        "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)]",
         className,
       )}
       {...rest}
@@ -30,7 +30,7 @@ export default function Card({
           <div className="flex flex-col gap-0.5">
             {title && <h3 className="font-body1 text-text-main">{title}</h3>}
             {description && (
-              <p className="font-caption text-text-sub">{description}</p>
+              <div className="font-caption text-text-sub">{description}</div>
             )}
           </div>
           {RightElement}

src/components/common/card/StatCard.tsx

@@ -16,8 +16,8 @@ export interface IStatCardProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const trendClasses: Record<ITrend["direction"], string> = {
-  up: "bg-status-red/10 text-status-red",
-  down: "bg-status-blue/10 text-status-blue",
+  up: "bg-status-red/[0.08] text-status-red font-bold",
+  down: "bg-status-blue/[0.08] text-status-blue font-bold",
 };
 
 export default function StatCard({
@@ -30,13 +30,15 @@ export default function StatCard({
   return (
     <div
       className={twMerge(
-        "bg-white rounded-component-md border border-chart-inactive p-5 flex flex-col gap-2",
+        "bg-white/80 backdrop-blur-sm rounded-[24px] shadow-[0_4px_20px_rgba(0,0,0,0.03)] p-7 flex flex-col gap-4 border border-white/40 transition-all duration-300 hover:shadow-[0_12px_40px_rgba(33,130,246,0.08)]",
         className,
       )}
       {...rest}
     >
-      <p className="font-body2 text-text-main">{title}</p>
-      <p className="font-heading2 text-text-main">{value}</p>
+      <p className="font-body2 text-text-sub font-medium">{title}</p>
+      <p className="font-heading1 text-text-main font-extrabold tracking-tight">
+        {value}
+      </p>
       {trend && (
         <span
           aria-label={`${trend.value} ${trend.direction === "up" ? "상승" : "하락"}`}

src/components/common/chart/ChartLegend.tsx

@@ -0,0 +1,28 @@
+import { twMerge } from "tailwind-merge";
+
+export interface IChartLegendItem {
+  label: string;
+  colorClass: string;
+}
+
+export interface IChartLegendProps {
+  items: IChartLegendItem[];
+  className?: string;
+}
+
+export default function ChartLegend({ items, className }: IChartLegendProps) {
+  return (
+    <div className={twMerge("flex items-center gap-4", className)}>
+      {items.map((item, index) => (
+        <div key={index} className="flex items-center gap-1.5">
+          <div
+            className={twMerge("w-1.5 h-1.5 rounded-full", item.colorClass)}
+          />
+          <span className="font-caption font-bold text-text-sub">
+            {item.label}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}