핫픽스 애니메이션 제거 및 필요없는 job제거

com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx

@@ -56,7 +56,7 @@ export default function HotPicksPanel({ panelInfo }) {
   const { sendLogCuration, sendLogGNB } = useLogService();
 
   const dispatch = useDispatch();
-
+  const spotJob = useRef(new Job((func) => func(), 100));
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
   const themeCurationInfoData = useSelector(
     (state) => state.home?.themeCurationInfoData?.themeInfos
@@ -81,9 +81,6 @@ export default function HotPicksPanel({ panelInfo }) {
   const [popEvntId, setPopEvntId] = useState(null);
   const [popEventInfo, setPopEventInfo] = useState(null);
   const [isCurationEvnt, setIsCurationEvnt] = useState(null);
-  const scrollJob = useRef(new Job((func) => func(), 300));
-  const scrollSetJob = useRef(new Job((func) => func(), 600));
-  const movingPageJob = useRef(new Job((func) => func(), 400));
   const smsRetCode = useSelector((state) => state.appData.sendSms?.retCode);
   let spotlightId = null;
 
@@ -189,26 +186,20 @@ export default function HotPicksPanel({ panelInfo }) {
   ]);
 
   const onItemSpotlightDown = useCallback(() => {
-    const movingPageJobValue = movingPageJob.current;
     if (!movingPage) {
       setMovingPage(true);
 
-      movingPageJobValue.start(() => {
-        Spotlight.focus("hotpicks-next-arrow");
-        setMovingPage(false);
-      });
+      Spotlight.focus("hotpicks-next-arrow");
+      setMovingPage(false);
     }
   }, [movingPage]);
 
   const onItemSpotlightUp = useCallback(() => {
-    const movingPageJobValue = movingPageJob.current;
     if (!movingPage) {
       setMovingPage(true);
 
-      movingPageJobValue.start(() => {
-        Spotlight.focus("hotpicks-prev-arrow");
-        setMovingPage(false);
-      });
+      Spotlight.focus("hotpicks-prev-arrow");
+      setMovingPage(false);
     }
   }, [movingPage]);
 
@@ -334,23 +325,17 @@ export default function HotPicksPanel({ panelInfo }) {
   }, []);
 
   useEffect(() => {
-    const scrollJobValue = scrollJob.current;
     if (typeof window === "object" && scrollToRef.current) {
       scrollToRef.current({
         position: { y: currentPage * window.innerHeight },
-        animate: true,
+        animate: false,
       });
 
-      scrollJobValue.start(() => {
-        if (panelInfo.currentSpot && !oneSpot) {
-          Spotlight.focus(panelInfo.currentSpot);
-          setOneSpot(true);
-        }
-      });
+      if (panelInfo.currentSpot && !oneSpot) {
+        Spotlight.focus(panelInfo.currentSpot);
+        setOneSpot(true);
+      }
     }
-    return () => {
-      scrollJobValue.stop();
-    };
   }, [currentPage, oneSpot, panelInfo.currentSpot, scrollToRef]);
 
   const handleWheel = (e) => {
@@ -385,23 +370,27 @@ export default function HotPicksPanel({ panelInfo }) {
     };
   }, [currentPageRef, dispatch, panelInfo.currentPage]);
   useEffect(() => {
-    const scrollSetJobValue = scrollSetJob.current;
-
-    scrollSetJobValue.start(() => {
-      if (panelInfo?.currentSpot) {
+    const spotJobValue = spotJob.current;
+    if (panelInfo?.currentSpot) {
+      spotJobValue.start(() => {
         Spotlight.focus(panelInfo?.currentSpot);
-        dispatch(
-          updatePanel({
-            name: panel_names.HOT_PICKS_PANEL,
-            panelInfo: {
-              currentSpot: "",
-            },
-          })
-        );
-      } else {
+      });
+      dispatch(
+        updatePanel({
+          name: panel_names.HOT_PICKS_PANEL,
+          panelInfo: {
+            currentSpot: "",
+          },
+        })
+      );
+    } else {
+      spotJobValue.start(() => {
         Spotlight.focus("hotpicks-data-spot" + (currentPage * 1 + 1));
-      }
-    });
+      });
+    }
+    return () => {
+      spotJobValue.stop();
+    };
   }, [currentPage]);
 
   useEffect(() => {