분석레포트 타임라인 표시

frontend/src/hooks/useHorizontalWheelScroll.ts

@@ -0,0 +1,29 @@
+import { useEffect, type RefObject } from 'react';
+
+/** 가로 overflow 컨테이너 — 세로 휠을 좌우 스크롤로 변환 */
+export function useHorizontalWheelScroll(
+  ref: RefObject<HTMLElement | null>,
+  enabled = true,
+): void {
+  useEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+
+    const onWheel = (e: WheelEvent) => {
+      if (el.scrollWidth <= el.clientWidth + 1) return;
+
+      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+      if (delta === 0) return;
+
+      const prev = el.scrollLeft;
+      el.scrollLeft += delta;
+      if (el.scrollLeft !== prev) {
+        e.preventDefault();
+      }
+    };
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [enabled, ref]);
+}