diff --git a/src/components/common/PageHeader.tsx b/src/components/common/PageHeader.tsx
index bd990f1d..6acac19b 100644
--- a/src/components/common/PageHeader.tsx
+++ b/src/components/common/PageHeader.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { memo } from "react";
 import { twMerge } from "tailwind-merge";
 
 interface IPageHeaderProps {
@@ -8,7 +9,7 @@ interface IPageHeaderProps {
   className?: string;
 }
 
-export default function PageHeader({
+const PageHeader = memo(function PageHeader({
   title,
   description,
   actions,
@@ -25,4 +26,6 @@ export default function PageHeader({
       {actions && <div>{actions}</div>}
     </header>
   );
-}
+});
+
+export default PageHeader;
diff --git a/src/components/common/card/Card.tsx b/src/components/common/card/Card.tsx
index 9385a354..d9c54ad9 100644
--- a/src/components/common/card/Card.tsx
+++ b/src/components/common/card/Card.tsx
@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from "react";
+import { memo } from "react";
 import { twMerge } from "tailwind-merge";
 
 export interface ICardProps extends HTMLAttributes<HTMLDivElement> {
@@ -7,7 +8,7 @@ export interface ICardProps extends HTMLAttributes<HTMLDivElement> {
   RightElement?: ReactNode;
 }
 
-export default function Card({
+const Card = memo(function Card({
   title,
   description,
   RightElement,
@@ -20,7 +21,7 @@ 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)] relative",
+        "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-shadow duration-300 hover:shadow-[0_12px_45px_rgba(0,0,0,0.06)] relative",
         className,
       )}
       {...rest}
@@ -43,4 +44,6 @@ export default function Card({
       {children}
     </div>
   );
-}
+});
+
+export default Card;
diff --git a/src/components/common/card/StatCard.tsx b/src/components/common/card/StatCard.tsx
index 5245293b..2d9e4a7e 100644
--- a/src/components/common/card/StatCard.tsx
+++ b/src/components/common/card/StatCard.tsx
@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from "react";
+import { memo } from "react";
 import { twMerge } from "tailwind-merge";
 
 import TrendDownIcon from "@/assets/icon/chevron/trend-down.svg?react";
@@ -20,7 +21,10 @@ const trendClasses: Record<ITrend["direction"], string> = {
   down: "bg-status-blue/[0.08] text-status-blue font-bold",
 };
 
-export function TrendBadge({ direction, value }: ITrend) {
+export const TrendBadge = memo(function TrendBadge({
+  direction,
+  value,
+}: ITrend) {
   return (
     <span
       aria-label={`${value} ${direction === "up" ? "상승" : "하락"}`}
@@ -37,9 +41,9 @@ export function TrendBadge({ direction, value }: ITrend) {
       {value}
     </span>
   );
-}
+});
 
-export default function StatCard({
+const StatCard = memo(function StatCard({
   title,
   value,
   trend,
@@ -49,7 +53,7 @@ export default function StatCard({
   return (
     <div
       className={twMerge(
-        "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)]",
+        "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-shadow duration-300 hover:shadow-[0_12px_40px_rgba(33,130,246,0.08)]",
         className,
       )}
       {...rest}
@@ -61,4 +65,6 @@ export default function StatCard({
       {trend && <TrendBadge {...trend} />}
     </div>
   );
-}
+});
+
+export default StatCard;
diff --git a/src/components/common/chart/ChartLegend.tsx b/src/components/common/chart/ChartLegend.tsx
index ad74a8e8..0096aa80 100644
--- a/src/components/common/chart/ChartLegend.tsx
+++ b/src/components/common/chart/ChartLegend.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { twMerge } from "tailwind-merge";
 
 export interface IChartLegendItem {
@@ -10,7 +11,10 @@ export interface IChartLegendProps {
   className?: string;
 }
 
-export default function ChartLegend({ items, className }: IChartLegendProps) {
+const ChartLegend = memo(function ChartLegend({
+  items,
+  className,
+}: IChartLegendProps) {
   return (
     <div className={twMerge("flex items-center gap-4", className)}>
       {items.map((item) => (
@@ -25,4 +29,6 @@ export default function ChartLegend({ items, className }: IChartLegendProps) {
       ))}
     </div>
   );
-}
+});
+
+export default ChartLegend;
diff --git a/src/components/common/drawer/Drawer.tsx b/src/components/common/drawer/Drawer.tsx
index 90d8aed1..33196254 100644
--- a/src/components/common/drawer/Drawer.tsx
+++ b/src/components/common/drawer/Drawer.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import { useEffect, useState } from "react";
+import type { ReactNode, TouchEvent } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { twMerge } from "tailwind-merge";
 
@@ -19,6 +19,9 @@ export interface IDrawerProps {
   disableScroll?: boolean;
 }
 
+const TABLET_MQ = "(max-width: 1024px)";
+const SWIPE_CLOSE_THRESHOLD = 80;
+
 export default function Drawer({
   isOpen,
   onClose,
@@ -30,6 +33,9 @@ export default function Drawer({
   disableScroll = false,
 }: IDrawerProps) {
   const [isMounted, setIsMounted] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const touchStartY = useRef(0);
+  const isDragging = useRef(false);
 
   useEffect(() => {
     setIsMounted(true);
@@ -46,13 +52,50 @@ export default function Drawer({
     };
   }, [isOpen]);
 
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    panel.style.transform = "";
+    panel.style.transition = "";
+  }, [isOpen]);
+
+  const handleTouchStart = (e: TouchEvent) => {
+    if (!window.matchMedia(TABLET_MQ).matches) return;
+    touchStartY.current = e.touches[0].clientY;
+    isDragging.current = true;
+    if (panelRef.current) {
+      panelRef.current.style.transition = "none";
+    }
+  };
+
+  const handleTouchMove = (e: TouchEvent) => {
+    if (!isDragging.current || !panelRef.current) return;
+    const delta = e.touches[0].clientY - touchStartY.current;
+    if (delta < 0) return;
+    panelRef.current.style.transform = `translateY(${delta}px)`;
+  };
+
+  const handleTouchEnd = (e: TouchEvent) => {
+    if (!isDragging.current || !panelRef.current) return;
+    isDragging.current = false;
+    const delta = e.changedTouches[0].clientY - touchStartY.current;
+    panelRef.current.style.transition = "";
+
+    if (delta > SWIPE_CLOSE_THRESHOLD) {
+      panelRef.current.style.transform = "";
+      onClose();
+    } else {
+      panelRef.current.style.transform = "";
+    }
+  };
+
   if (!isMounted) return null;
 
   return createPortal(
     <div
       data-drawer-portal
       className={twMerge(
-        "fixed inset-0 z-50 flex justify-end transition-opacity duration-300",
+        "fixed inset-0 z-50 flex justify-end tablet:items-end transition-opacity duration-300",
         isOpen
           ? "opacity-100 pointer-events-auto"
           : "opacity-0 pointer-events-none",
@@ -65,12 +108,31 @@ export default function Drawer({
         aria-hidden="true"
       />
       <div
+        ref={panelRef}
         className={twMerge(
+          // [데스크톱] 우측 슬라이드
           "relative w-full rounded-l-4xl overflow-hidden max-w-md bg-white shadow-2xl h-full flex flex-col transform transition-transform duration-300 ease-in-out",
-          isOpen ? "translate-x-0" : "translate-x-full",
+          // [태블릿] 하단 bottom sheet
+          "tablet:rounded-t-4xl tablet:h-auto tablet:max-h-[85vh] tablet:max-w-none tablet:border-t tablet:border-bg-disabled",
+          isOpen
+            ? "translate-x-0 tablet:translate-y-0"
+            : "translate-x-full tablet:translate-x-0 tablet:translate-y-full",
           className,
         )}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
       >
+        {/* 태블릿 드래그 핸들 */}
+        <div
+          className="hidden tablet:flex justify-center pt-3 pb-1 shrink-0 cursor-grab active:cursor-grabbing"
+          role="slider"
+          aria-label="아래로 드래그하여 닫기"
+          aria-orientation="vertical"
+          tabIndex={0}
+        >
+          <div className="w-20 h-1 rounded-full bg-bg-disabled" />
+        </div>
         {!hideHeader && (
           <div
             data-print-hide
@@ -96,7 +158,7 @@ export default function Drawer({
                   )}
                   <button
                     onClick={onClose}
-                    className="h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center outline-none"
+                    className="tablet:hidden h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center outline-none"
                     aria-label="닫기"
                   >
                     <CloseIcon className="text-text-disabled" />
@@ -107,18 +169,20 @@ export default function Drawer({
               <>
                 <button
                   onClick={onClose}
-                  className="h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center outline-none"
+                  className="tablet:hidden h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center outline-none"
                   aria-label="닫기"
                 >
                   <CloseIcon className="text-text-disabled" />
                 </button>
                 {dropdownItems && (
-                  <DropdownMenu
-                    trigger={<MoreIcon className="text-text-disabled" />}
-                    aria-label="더보기"
-                    className="h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center"
-                    items={dropdownItems}
-                  />
+                  <div className="ml-auto">
+                    <DropdownMenu
+                      trigger={<MoreIcon className="text-text-disabled" />}
+                      aria-label="더보기"
+                      className="h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center"
+                      items={dropdownItems}
+                    />
+                  </div>
                 )}
               </>
             )}
diff --git a/src/components/dashboard/charts/BudgetGaugeChart.tsx b/src/components/dashboard/charts/BudgetGaugeChart.tsx
index 3248307b..63dd91ad 100644
--- a/src/components/dashboard/charts/BudgetGaugeChart.tsx
+++ b/src/components/dashboard/charts/BudgetGaugeChart.tsx
@@ -1,3 +1,4 @@
+import { memo, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { useIsMounted } from "@/hooks/common/useIsMounted";
@@ -37,7 +38,7 @@ const statusPointClasses: Record<TBudgetStatus, string> = {
   위험: "bg-status-red",
 };
 
-export default function BudgetGaugeChart({
+const BudgetGaugeChart = memo(function BudgetGaugeChart({
   totalBudget,
   spent,
   warningThreshold,
@@ -50,16 +51,21 @@ export default function BudgetGaugeChart({
   const isOverBudget = spent > totalBudget;
   const remaining = isOverBudget ? spent - totalBudget : totalBudget - spent;
 
-  const now = new Date();
-  const periodElapsedDays = now.getDate();
-  const periodTotalDays = new Date(
-    now.getFullYear(),
-    now.getMonth() + 1,
-    0,
-  ).getDate();
-  const periodElapsedRate = Math.round(
-    (periodElapsedDays / periodTotalDays) * 100,
-  );
+  const { periodElapsedDays, periodTotalDays, periodElapsedRate } =
+    useMemo(() => {
+      const now = new Date();
+      const elapsed = now.getDate();
+      const total = new Date(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        0,
+      ).getDate();
+      return {
+        periodElapsedDays: elapsed,
+        periodTotalDays: total,
+        periodElapsedRate: Math.round((elapsed / total) * 100),
+      };
+    }, []);
 
   const status = getBudgetStatus(percentage, warningThreshold, dangerThreshold);
 
@@ -183,4 +189,6 @@ export default function BudgetGaugeChart({
       </div>
     </div>
   );
-}
+});
+
+export default BudgetGaugeChart;
diff --git a/src/components/dashboard/charts/TrafficChart.tsx b/src/components/dashboard/charts/TrafficChart.tsx
index 1d8b9529..e9c100b1 100644
--- a/src/components/dashboard/charts/TrafficChart.tsx
+++ b/src/components/dashboard/charts/TrafficChart.tsx
@@ -1,7 +1,12 @@
-import { useRef, useState } from "react";
-import ReactApexChart from "react-apexcharts";
-
-import { useIsMounted } from "@/hooks/common/useIsMounted";
+import {
+  lazy,
+  memo,
+  Suspense,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import { DropdownMenu } from "@/components/common/dropdownmenu/DropdownMenu";
 
@@ -15,6 +20,16 @@ import { useAnomalyMarkerPos } from "./useAnomalyMarkerPos";
 
 import MoreIcon from "@/assets/icon/common/more.svg?react";
 
+const ReactApexChart = lazy(() => import("react-apexcharts"));
+
+// 모듈 수준 상수 - 렌더마다 재생성 방지
+const series = [
+  {
+    name: "클릭수",
+    data: trafficChartMock.clicks.map((y, i) => ({ x: i, y })),
+  },
+];
+
 // 차트 우측 상단 다운로드 버튼
 export function TrafficChartDownload() {
   return (
@@ -39,35 +54,42 @@ export function TrafficChartDownload() {
   );
 }
 
-// 이상 징후 커스텀 말풍선 툴팁
-function AnomalyBubble({ x, y }: { x: number; y: number }) {
-  const GAP = 16;
+// 이상 징후 커스텀 툴팁
+const AnomalyBubble = memo(function AnomalyBubble({
+  x,
+  y,
+}: {
+  x: number;
+  y: number;
+}) {
+  const GAP = 12;
   return (
     <div
-      className="absolute pointer-events-none"
+      className="absolute pointer-events-none transition-transform duration-200 ease-out"
       style={{
         left: x,
         top: y - GAP,
         transform: "translateX(-50%) translateY(-100%)",
       }}
     >
-      <div className="relative bg-white border-2 border-status-red rounded-2xl px-5 py-3 text-center min-w-37">
-        <p className="text-status-red font-bold text-sm leading-snug">
-          클릭 이상 징후 감지
-        </p>
-        <p className="text-[#555] text-xs mt-1 leading-relaxed">
-          구글-캠페인 A-광고 1
-          <br />
-          부정 클릭 의심
-        </p>
-        <div className="absolute left-1/2 -translate-x-1/2 -bottom-1.75 w-3 h-3 bg-white border-r-2 border-b-2 border-[#ff4560] rotate-45" />
+      <div className="relative bg-white border border-bg-disabled rounded-component-sm px-5 py-4 min-w-40">
+        <div className="flex items-center justify-center gap-1.5 mb-1.5">
+          <span className="inline-block w-2 h-2 rounded-full bg-status-red shrink-0" />
+          <p className="font-body2 text-text-main font-semibold! tracking-tight">
+            클릭 이상 징후 감지
+          </p>
+        </div>
+        <div className="text-center">
+          <p className="text-text-sub font-caption leading-5">
+            구글 · 캠페인 A · 광고 1
+          </p>
+        </div>
       </div>
     </div>
   );
-}
+});
 
-export default function TrafficChart() {
-  const isMounted = useIsMounted();
+const TrafficChart = memo(function TrafficChart() {
   const containerRef = useRef<HTMLDivElement>(null);
 
   // 빨간 점의 컨테이너 기준 좌표
@@ -75,45 +97,77 @@ export default function TrafficChart() {
   const [isAnomalyHovered, setIsAnomalyHovered] = useState(false);
   const [isAnomalyFocused, setIsAnomalyFocused] = useState(false);
 
+  // 스크롤 중 pointer-events 제거 - setState 대신 DOM 직접 조작으로 리렌더 방지
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    let timer: ReturnType<typeof setTimeout>;
+    const handleScroll = () => {
+      container.style.pointerEvents = "none";
+      container.classList.add("is-scrolling");
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        container.style.pointerEvents = "";
+        container.classList.remove("is-scrolling");
+      }, 150);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      clearTimeout(timer);
+    };
+  }, []);
+
+  const handleFocus = useCallback(() => setIsAnomalyFocused(true), []);
+  const handleBlur = useCallback(() => setIsAnomalyFocused(false), []);
+  const handlePointerEnter = useCallback(() => setIsAnomalyHovered(true), []);
+  const handlePointerLeave = useCallback(() => setIsAnomalyHovered(false), []);
+
+  const showBubble = isAnomalyHovered || isAnomalyFocused;
+
   return (
     <div
       id={CHART_CONTAINER_ID}
       ref={containerRef}
       role="group"
       aria-label="실시간 트래픽 변화 차트: 시간대별 클릭수 추이"
-      data-hide-tooltip={isAnomalyHovered || isAnomalyFocused || undefined}
-      className="relative [&_.apexcharts-toolbar]:hidden [&[data-hide-tooltip]_.apexcharts-tooltip]:invisible [&[data-hide-tooltip]_.apexcharts-tooltip]:pointer-events-none"
+      data-hide-tooltip={showBubble || undefined}
+      className="relative will-change-transform [&_.apexcharts-toolbar]:hidden [&[data-hide-tooltip]_.apexcharts-tooltip]:invisible [&[data-hide-tooltip]_.apexcharts-tooltip]:pointer-events-none"
     >
-      {isMounted && (
+      <Suspense fallback={<div className="h-100" />}>
         <ReactApexChart
           type="area"
           options={BASE_OPTIONS}
-          series={[
-            {
-              name: "클릭수",
-              data: trafficChartMock.clicks.map((y, i) => ({ x: i, y })),
-            },
-          ]}
+          series={series}
           height={400}
         />
-      )}
+      </Suspense>
       {markerPos && (
         <>
+          <span
+            className="absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-status-red opacity-60 animate-ping [animation-duration:2s] in-[.is-scrolling]:[animation-play-state:paused] pointer-events-none"
+            style={{ left: markerPos.x, top: markerPos.y }}
+          />
+          <span
+            className="absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-status-red opacity-40 animate-ping [animation-duration:2s] [animation-delay:1s] in-[.is-scrolling]:[animation-play-state:paused] pointer-events-none"
+            style={{ left: markerPos.x, top: markerPos.y }}
+          />
           <button
             type="button"
             className="absolute size-6 -translate-x-1/2 -translate-y-1/2 opacity-0"
             style={{ left: markerPos.x, top: markerPos.y }}
             aria-label="클릭 이상 징후 상세 보기"
-            onFocus={() => setIsAnomalyFocused(true)}
-            onBlur={() => setIsAnomalyFocused(false)}
-            onPointerEnter={() => setIsAnomalyHovered(true)}
-            onPointerLeave={() => setIsAnomalyHovered(false)}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onPointerEnter={handlePointerEnter}
+            onPointerLeave={handlePointerLeave}
           />
-          {(isAnomalyHovered || isAnomalyFocused) && (
-            <AnomalyBubble x={markerPos.x} y={markerPos.y} />
-          )}
+          {showBubble && <AnomalyBubble x={markerPos.x} y={markerPos.y} />}
         </>
       )}
     </div>
   );
-}
+});
+
+export default TrafficChart;
diff --git a/src/components/dashboard/charts/trafficChart.config.ts b/src/components/dashboard/charts/trafficChart.config.ts
index 8adcb897..75cbb301 100644
--- a/src/components/dashboard/charts/trafficChart.config.ts
+++ b/src/components/dashboard/charts/trafficChart.config.ts
@@ -59,26 +59,22 @@ export const BASE_OPTIONS: ApexOptions = {
     zoom: { enabled: false },
     fontFamily: "Pretendard",
     animations: {
-      enabled: true,
-      dynamicAnimation: { enabled: false }, // 데이터 업데이트 시 애니메이션 비활성화
+      enabled: false, // SVG 초기 렌더링 비용 제거
     },
+    redrawOnWindowResize: false, // 윈도우 리사이즈 시 불필요한 재렌더 방지
   },
 
   dataLabels: { enabled: false },
 
   stroke: {
-    curve: "monotoneCubic", // 부드러운 곡선
+    curve: "smooth",
     width: 1.5,
   },
 
-  // 라인 아래 그라데이션 채우기
+  // 라인 아래 단색 채우기
   fill: {
-    type: "gradient",
-    gradient: {
-      shadeIntensity: 1,
-      opacityFrom: 0.5,
-      stops: [0, 90, 100],
-    },
+    type: "solid",
+    opacity: 0.1,
   },
 
   colors: ["#0084fe"],
@@ -95,7 +91,7 @@ export const BASE_OPTIONS: ApexOptions = {
               x: ANOMALY_INDEX,
               y: ANOMALY_Y,
               marker: {
-                size: 5,
+                size: 3,
                 fillColor: "#ff4560",
                 strokeColor: "#ff4560",
                 strokeWidth: 1,
diff --git a/src/components/dashboard/charts/useAnomalyMarkerPos.ts b/src/components/dashboard/charts/useAnomalyMarkerPos.ts
index de8a7d7c..e4f5053a 100644
--- a/src/components/dashboard/charts/useAnomalyMarkerPos.ts
+++ b/src/components/dashboard/charts/useAnomalyMarkerPos.ts
@@ -1,41 +1,48 @@
-import { type RefObject, useCallback, useEffect, useState } from "react";
+import { type RefObject, useEffect, useState } from "react";
 
 // 이상 징후 빨간 점(annotation marker)의 컨테이너 기준 좌표를 반환하는 훅
 export function useAnomalyMarkerPos(
   containerRef: RefObject<HTMLDivElement | null>,
 ) {
-  // 컨테이너 기준 마커 중심 좌표 (null = 아직 못 찾음)
   const [markerPos, setMarkerPos] = useState<{ x: number; y: number } | null>(
     null,
   );
 
-  const updateMarkerPos = useCallback(() => {
-    if (!containerRef.current) return;
-    // DOM에서 ApexCharts annotation 마커 요소 탐색
-    const marker = containerRef.current.querySelector<SVGCircleElement>(
-      ".apexcharts-point-annotation-marker",
-    );
-    if (!marker) return;
-
-    // getBoundingClientRect으로 뷰포트 기준 위치 계산 후 컨테이너 기준으로 변환
-    const markerRect = marker.getBoundingClientRect();
-    const containerRect = containerRef.current.getBoundingClientRect();
-    setMarkerPos({
-      x: markerRect.left + markerRect.width / 2 - containerRect.left,
-      y: markerRect.top + markerRect.height / 2 - containerRect.top,
-    });
-  }, [containerRef]);
-
   // 차트 마운트 후(300ms 대기) 및 리사이즈 시 좌표 갱신
   useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const updateMarkerPos = () => {
+      // DOM에서 ApexCharts annotation 마커 요소 탐색
+      const marker = container.querySelector<SVGCircleElement>(
+        ".apexcharts-point-annotation-marker",
+      );
+      if (!marker) return;
+
+      // getBoundingClientRect으로 뷰포트 기준 위치 계산 후 컨테이너 기준으로 변환
+      const markerRect = marker.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      setMarkerPos({
+        x: markerRect.left + markerRect.width / 2 - containerRect.left,
+        y: markerRect.top + markerRect.height / 2 - containerRect.top,
+      });
+    };
+
     const timer = setTimeout(updateMarkerPos, 300);
-    const observer = new ResizeObserver(updateMarkerPos);
-    if (containerRef.current) observer.observe(containerRef.current);
+
+    let debounceTimer: ReturnType<typeof setTimeout>;
+    const observer = new ResizeObserver(() => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(updateMarkerPos, 300);
+    });
+    observer.observe(container);
     return () => {
       clearTimeout(timer);
+      clearTimeout(debounceTimer);
       observer.disconnect();
     };
-  }, [updateMarkerPos, containerRef]);
+  }, [containerRef]);
 
   return markerPos;
 }
diff --git a/src/components/dashboard/platform/PlatformRoasTable.tsx b/src/components/dashboard/platform/PlatformRoasTable.tsx
index e3c81440..5056d06b 100644
--- a/src/components/dashboard/platform/PlatformRoasTable.tsx
+++ b/src/components/dashboard/platform/PlatformRoasTable.tsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 import { TrendBadge } from "@/components/common/card/StatCard";
 
 import { platformRoasRanking } from "./platformComparison.mock";
@@ -37,7 +39,7 @@ function roasStatusClass(roas: number) {
 }
 
 // 증감률 뱃지 컴포넌트
-function Delta({ value }: { value: number }) {
+const Delta = memo(function Delta({ value }: { value: number }) {
   const isPos = value >= 0;
   return (
     <TrendBadge
@@ -45,13 +47,13 @@ function Delta({ value }: { value: number }) {
       value={`${Math.abs(value).toFixed(1)}%`}
     />
   );
-}
+});
 
 // 테이블 그리드 컬럼 레이아웃 (full: 6열, compact: CTR/CVR 숨김 4열)
 const COL =
   "grid-cols-[32px_1.5fr_2.5fr_1.5fr] @2xl:grid-cols-[32px_1.5fr_2.5fr_1fr_1fr_1.5fr]";
 
-export default function PlatformRoasTable() {
+const PlatformRoasTable = memo(function PlatformRoasTable() {
   return (
     <div className="@container flex flex-col h-full font-pretendard w-full">
       <div className="flex flex-col flex-1 min-w-0">
@@ -71,7 +73,7 @@ export default function PlatformRoasTable() {
           {platformRoasRanking.map((platform, index) => (
             <div
               key={platform.name}
-              className={`group grid ${COL} gap-x-4 items-center px-4 py-4 min-h-20 cursor-default rounded-component-sm transition-all duration-300 hover:bg-[#F2F4F6]`}
+              className={`group grid ${COL} gap-x-4 items-center px-4 py-4 min-h-20 cursor-default rounded-component-sm transition-colors duration-300 hover:bg-[#F2F4F6]`}
             >
               {/* 순위 */}
               <span className="text-center font-caption font-bold text-text-disabled group-hover:text-text-sub transition-colors tabular-nums">
@@ -80,7 +82,7 @@ export default function PlatformRoasTable() {
 
               {/* 플랫폼 이름 */}
               <div className="flex items-center gap-3">
-                <div className="shrink-0 p-1.5 group-hover:scale-105">
+                <div className="shrink-0 p-1.5 hover:will-change-transform group-hover:scale-105">
                   {getPlatformLogo(platform.name)}
                 </div>
                 <span className="font-body1 font-bold text-text-main tracking-tight">
@@ -95,7 +97,7 @@ export default function PlatformRoasTable() {
                 </span>
                 <div className="w-full h-1.5 rounded-full overflow-hidden bg-bg-disabled/40 group-hover:bg-[#E5E8EB] transition-colors duration-300">
                   <div
-                    className={`h-full rounded-full transition-all duration-700 ease-out ${roasStatusClass(platform.roas)}`}
+                    className={`h-full rounded-full transition-colors duration-700 ease-out ${roasStatusClass(platform.roas)}`}
                     style={{
                       width: `${Math.min((platform.roas / maxRoas) * 100, 100)}%`,
                     }}
@@ -141,4 +143,6 @@ export default function PlatformRoasTable() {
       </div>
     </div>
   );
-}
+});
+
+export default PlatformRoasTable;
diff --git a/src/hooks/common/useIsMounted.ts b/src/hooks/common/useIsMounted.ts
index 1b861818..fbf35513 100644
--- a/src/hooks/common/useIsMounted.ts
+++ b/src/hooks/common/useIsMounted.ts
@@ -5,8 +5,7 @@ export function useIsMounted() {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
-    const raf = requestAnimationFrame(() => setIsMounted(true));
-    return () => cancelAnimationFrame(raf);
+    setIsMounted(true);
   }, []);
 
   return isMounted;
diff --git a/src/pages/dashboard/overview/OverviewDashboard.tsx b/src/pages/dashboard/overview/OverviewDashboard.tsx
index 7b692d35..a72af643 100644
--- a/src/pages/dashboard/overview/OverviewDashboard.tsx
+++ b/src/pages/dashboard/overview/OverviewDashboard.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { lazy, Suspense, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -22,7 +22,6 @@ import TrafficChart, {
 import PlatformRoasTable from "@/components/dashboard/platform/PlatformRoasTable";
 
 import { overviewMockData } from "./overview.mock";
-import OverviewAiReportPanel from "./OverviewAiReportPanel";
 
 import ChevronDoubleRightIcon from "@/assets/icon/chevron/chervon-double-right.svg?react";
 import DownloadIcon from "@/assets/icon/common/download.svg?react";
@@ -30,6 +29,8 @@ import LinkIcon from "@/assets/icon/common/link.svg?react";
 import WarnCircleIcon from "@/assets/icon/common/warn-circle.svg?react";
 import AiButtonSvg from "@/assets/logo/service-logo/ai-요약버튼.svg?react";
 
+const OverviewAiReportPanel = lazy(() => import("./OverviewAiReportPanel"));
+
 export default function OverviewDashboard() {
   const navigate = useNavigate();
   const [isAiPanelOpen, setIsAiPanelOpen] = useState(false);
@@ -43,17 +44,15 @@ export default function OverviewDashboard() {
     }),
   );
 
-  const budgetStatusBadge = useMemo(() => {
-    const { totalBudget, spent, warningThreshold, dangerThreshold } =
-      budgetGaugeChartMock;
-    const pct = totalBudget > 0 ? Math.round((spent / totalBudget) * 100) : 0;
-    const status = getBudgetStatus(pct, warningThreshold, dangerThreshold);
-    return (
-      <Badge variant={statusBadgeVariant[status]} size="sm" className="px-2">
-        {status}
-      </Badge>
-    );
-  }, []);
+  const { totalBudget, spent, warningThreshold, dangerThreshold } =
+    budgetGaugeChartMock;
+  const budgetPct =
+    totalBudget > 0 ? Math.round((spent / totalBudget) * 100) : 0;
+  const budgetStatus = getBudgetStatus(
+    budgetPct,
+    warningThreshold,
+    dangerThreshold,
+  );
 
   return (
     <section className="flex flex-col gap-8 w-full min-w-0">
@@ -67,8 +66,8 @@ export default function OverviewDashboard() {
             className="group relative p-2 -mr-2 rounded-2xl outline-none cursor-pointer overflow-hidden"
             aria-label="AI 요약하기"
           >
-            <div className="absolute inset-0 z-20 pointer-events-none -translate-x-full animate-[shimmer_2.5s_infinite_linear] bg-linear-to-r from-transparent via-white/80 to-transparent skew-x-12 mix-blend-overlay" />
-            <div className="relative z-10 transition-all duration-200">
+            <div className="absolute inset-0 z-20 pointer-events-none -translate-x-full group-hover:animate-[shimmer_1.2s_ease-out] bg-linear-to-r from-transparent via-white/80 to-transparent skew-x-12 mix-blend-overlay" />
+            <div className="relative z-10">
               <AiButtonSvg className="[&>path:nth-of-type(4)]:transition-transform [&>path:nth-of-type(4)]:duration-300 group-hover:[&>path:nth-of-type(4)]:translate-x-0.5 [&>path:nth-of-type(5)]:transition-transform [&>path:nth-of-type(5)]:duration-300 group-hover:[&>path:nth-of-type(5)]:translate-x-1" />
             </div>
           </button>
@@ -109,7 +108,15 @@ export default function OverviewDashboard() {
               ]}
             />
           }
-          RightElement={budgetStatusBadge}
+          RightElement={
+            <Badge
+              variant={statusBadgeVariant[budgetStatus]}
+              size="sm"
+              className="px-2"
+            >
+              {budgetStatus}
+            </Badge>
+          }
         >
           <BudgetGaugeChart {...budgetGaugeChartMock} />
         </Card>
@@ -121,12 +128,12 @@ export default function OverviewDashboard() {
           <Button
             variant="tertiary"
             onClick={() => navigate("/platform")}
-            className="group flex items-center gap-1 h-8 px-4 bg-bg-surface/60 border-none hover:bg-bg-surface text-text-sub hover:text-text-auth-sub transition-all rounded-full"
+            className="group flex items-center gap-1 h-8 px-4 bg-bg-surface/60 border-none hover:bg-bg-surface text-text-sub hover:text-text-auth-sub transition-colors rounded-full"
           >
-            <span className="font-caption font-bold pt-0.5">
+            <span className="font-caption font-bold leading-none">
               플랫폼 대시보드 살펴보기
             </span>
-            <ChevronDoubleRightIcon className="w-2.5 h-auto" />
+            <ChevronDoubleRightIcon className="w-4.5 h-4.5" />
           </Button>
         }
         description={
@@ -147,7 +154,7 @@ export default function OverviewDashboard() {
         onClose={() => setIsAiPanelOpen(false)}
         hideHeader={false}
         disableScroll={false}
-        className="w-full max-w-160 tablet:max-w-full"
+        className="w-full max-w-160"
         dropdownItems={[
           {
             label: "링크 공유하기",
@@ -178,7 +185,11 @@ export default function OverviewDashboard() {
           },
         ]}
       >
-        <OverviewAiReportPanel />
+        {isAiPanelOpen && (
+          <Suspense fallback={null}>
+            <OverviewAiReportPanel />
+          </Suspense>
+        )}
       </Drawer>
     </section>
   );