🔧 fix: 차트 범위 밖에서 확대/축소가 되던 문제 해결

boostcampwm-2024 · Dec 4, 2024 · 1c96da8 · 1c96da8
1 parent c6a158e
commit 1c96da8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git 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
@@ -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;