From 1c96da8fa9466ce938eb5b9cbfef5e12c90727e8 Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Wed, 4 Dec 2024 10:02:33 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix:=20=EC=B0=A8=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B2=94=EC=9C=84=20=EB=B0=96=EC=97=90=EC=84=9C=20=ED=99=95?=
 =?UTF-8?q?=EB=8C=80/=EC=B6=95=EC=86=8C=EA=B0=80=20=EB=90=98=EB=8D=98=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/StocksDetail/Chart.tsx | 5 ++---
 FE/src/hooks/useMouseWheel.ts            | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/FE/src/components/StocksDetail/Chart.tsx b/FE/src/components/StocksDetail/Chart.tsx
index 8aa0f27..3e28aa6 100644
--- a/FE/src/components/StocksDetail/Chart.tsx
+++ b/FE/src/components/StocksDetail/Chart.tsx
@@ -114,11 +114,10 @@ export default function Chart({ code }: StocksDetailChartProps) {
         ref={containerRef}
         className='mt-2 flex h-[200px] w-full flex-col'
         onMouseMove={getCanvasMousePosition}
-        onWheel={handleWheel}
       >
         {/* Upper 차트 영역 */}
         <div className='flex flex-row'>
-          <canvas ref={upperChartCanvasRef} />
+          <canvas ref={upperChartCanvasRef} onWheel={handleWheel} />
           <canvas ref={upperChartY} />
           <div className='absolute flex w-[520px] flex-col gap-1'>
             <div className={'relative flex flex-row items-center gap-1'}>
@@ -195,7 +194,7 @@ export default function Chart({ code }: StocksDetailChartProps) {
         </div>
         {/* Lower 차트 영역 */}
         <div className='flex flex-row'>
-          <canvas ref={lowerChartCanvasRef} />
+          <canvas ref={lowerChartCanvasRef} onWheel={handleWheel} />
           <canvas ref={lowerChartY} />
         </div>
         {/* X축 영역 */}
diff --git a/FE/src/hooks/useMouseWheel.ts b/FE/src/hooks/useMouseWheel.ts
index d1468d5..db1a896 100644
--- a/FE/src/hooks/useMouseWheel.ts
+++ b/FE/src/hooks/useMouseWheel.ts
@@ -9,7 +9,7 @@ export const useMouseWheel = (data: StockChartUnit[] | undefined) => {
   const minDisplayData = 20;
 
   const handleWheel = useCallback(
-    (e: WheelEvent<HTMLDivElement>) => {
+    (e: WheelEvent<HTMLCanvasElement>) => {
       if (!data) return;
 
       const wheelPower = 0.1;