[TScroller, TVirtualGridList, AutoScrollArea] autofocus 로직 분리, 가독성 향상을 위한 리팩토링

com.twin.app.shoptime/src/components/TScroller/TScroller.jsx

@@ -7,10 +7,20 @@ import { off, on } from "@enact/core/dispatcher";
 import { Job } from "@enact/core/util";
 import Scroller from "@enact/sandstone/Scroller";
 
-import { AUTO_SCROLL_GAP } from "../../utils/Config";
 import AutoScrollArea, { POSITION } from "../AutoScrollArea/AutoScrollArea";
 import css from "./TScroller.module.less";
 
+export const getRelevantPositions = (direction) => {
+  switch (direction) {
+    case "horizontal":
+      return ["left", "right"];
+    case "vertical":
+      return ["top", "bottom"];
+    default:
+      return [];
+  }
+};
+
 export default function TScroller({
   className,
   children,
@@ -32,7 +42,6 @@ export default function TScroller({
   const scrollPosition = useRef("top");
 
   const scrollToRef = useRef(null);
-  const requestIdRef = useRef();
   const scrollHorizontalPos = useRef(0);
   const scrollVerticalPos = useRef(0);
 
@@ -118,62 +127,7 @@ export default function TScroller({
     [cbScrollTo]
   );
 
-  const handleFocusAutoScroll = useCallback((position) => {
-    if (!autoScroll) return;
-
-    const scrollStep =
-      position === POSITION.right || position === POSITION.bottom
-        ? AUTO_SCROLL_GAP
-        : -AUTO_SCROLL_GAP;
-    let start = null;
-
-    const animateScroll = (timestamp) => {
-      if (!start) start = timestamp;
-      const progress = timestamp - start;
-      const step = Math.min(progress / 1000, 1);
-
-      if (direction === "horizontal") {
-        scrollHorizontalPos.current += scrollStep * step;
-        scrollToRef.current({
-          position: { x: scrollHorizontalPos.current },
-          animate: false,
-        });
-      } else if (direction === "vertical") {
-        scrollVerticalPos.current += scrollStep * step;
-        scrollToRef.current({
-          position: { y: scrollVerticalPos.current },
-          animate: false,
-        });
-      }
-
-      if (
-        direction === "horizontal" &&
-        ((position === POSITION.right && scrollPosition.current === "right") ||
-          (position === POSITION.left && scrollPosition.current === "left"))
-      ) {
-        window.cancelAnimationFrame(requestIdRef.current);
-      } else if (
-        direction === "vertical" &&
-        ((position === POSITION.bottom &&
-          scrollPosition.current === "bottom") ||
-          (position === POSITION.top && scrollPosition.current === "top"))
-      ) {
-        window.cancelAnimationFrame(requestIdRef.current);
-      } else {
-        requestIdRef.current = window.requestAnimationFrame(animateScroll);
-      }
-    };
-
-    if (typeof window === "object") {
-      requestIdRef.current = window.requestAnimationFrame(animateScroll);
-    }
-  }, []);
-
-  const handleBlur = useCallback(() => {
-    if (requestIdRef.current && typeof window === "object") {
-      window.cancelAnimationFrame(requestIdRef.current);
-    }
-  }, [autoScroll, direction]);
+  const relevantPositions = getRelevantPositions(direction);
 
   return (
     <div
@@ -208,34 +162,20 @@ export default function TScroller({
       >
         {children}
       </Scroller>
-      {direction === "horizontal" && cursorVisible && autoScroll && (
-        <AutoScrollArea
-          position={POSITION.left}
-          onFocus={() => handleFocusAutoScroll(POSITION.left)}
-          onBlur={handleBlur}
-        />
-      )}
-      {direction === "horizontal" && cursorVisible && autoScroll && (
-        <AutoScrollArea
-          position={POSITION.right}
-          onFocus={() => handleFocusAutoScroll(POSITION.right)}
-          onBlur={handleBlur}
-        />
-      )}
-      {direction === "vertical" && cursorVisible && autoScroll && (
-        <AutoScrollArea
-          position={POSITION.top}
-          onFocus={() => handleFocusAutoScroll(POSITION.top)}
-          onBlur={handleBlur}
-        />
-      )}
-      {direction === "vertical" && cursorVisible && autoScroll && (
-        <AutoScrollArea
-          position={POSITION.bottom}
-          onFocus={() => handleFocusAutoScroll(POSITION.bottom)}
-          onBlur={handleBlur}
-        />
-      )}
+      {cursorVisible &&
+        autoScroll &&
+        relevantPositions.map((pos) => (
+          <AutoScrollArea
+            key={pos}
+            position={POSITION[pos]}
+            autoScroll={autoScroll}
+            scrollHorizontalPos={scrollHorizontalPos}
+            scrollVerticalPos={scrollVerticalPos}
+            scrollToRef={scrollToRef}
+            scrollPosition={scrollPosition}
+            direction={direction}
+          />
+        ))}
     </div>
   );
 }