[SHOPTIME-3177] On Sale / 상품 이동 시 화면이 밀리는 현상

변경 파일:
1. TVirtualGridList.jsx
2. TVirtualGridList.module.less

변경 내용:
1. 브라우저 버전 or webOS 버전 변수 선언
2. 브라우저 버전 or webOS 버전이 낮을 경우, overflow: hidden 선언

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

@@ -1,22 +1,14 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useMemo
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
-import classNames from 'classnames';
-import { useSelector } from 'react-redux';
+import classNames from "classnames";
+import { useSelector } from "react-redux";
 
-import { VirtualGridList } from '@enact/sandstone/VirtualList';
+import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import Spotlight from "@enact/spotlight";
 
-import {
-  scaleH,
-  scaleW,
-} from '../../utils/helperMethods';
-import AutoScrollArea, { POSITION } from '../AutoScrollArea/AutoScrollArea';
-import css from './TVirtualGridList.module.less';
-import Spotlight from '@enact/spotlight';
+import { scaleH, scaleW } from "../../utils/helperMethods";
+import AutoScrollArea, { POSITION } from "../AutoScrollArea/AutoScrollArea";
+import css from "./TVirtualGridList.module.less";
 
 export default function TVirtualGridList({
   defaultSpotlightId,
@@ -40,7 +32,12 @@ export default function TVirtualGridList({
   autoScroll = direction === "horizontal",
   ...rest
 }) {
-  const { cursorVisible } = useSelector((state) => state.common.appStatus);
+  const cursorVisible = useSelector(
+    (state) => state.common.appStatus.cursorVisible
+  );
+  const webOSVersion = useSelector(
+    (state) => state.common.appStatus.webOSVersion
+  );
 
   const isScrolling = useRef(false);
   const scrollPosition = useRef("top");
@@ -49,42 +46,61 @@ export default function TVirtualGridList({
   const defaultFocusTargetRef = useRef(null);
   const scrollHorizontalPos = useRef(0);
   const scrollVerticalPos = useRef(0);
-  const visibleIndexRef = useRef({firstVisibleIndex:0, lastVisibleIndex:0});
+  const visibleIndexRef = useRef({ firstVisibleIndex: 0, lastVisibleIndex: 0 });
 
   const gridlistParentRef = useRef(null);
 
   const handleWheel = useCallback((ev) => {
     ev.stopPropagation();
     ev.preventDefault();
-    const targetIndex = ev.deltaY > 0 ? visibleIndexRef.current.firstVisibleIndex+1: visibleIndexRef.current.firstVisibleIndex-1;
-    scrollToRef.current && scrollToRef.current({ index:targetIndex, animate: true});
+    const targetIndex =
+      ev.deltaY > 0
+        ? visibleIndexRef.current.firstVisibleIndex + 1
+        : visibleIndexRef.current.firstVisibleIndex - 1;
+    scrollToRef.current &&
+      scrollToRef.current({ index: targetIndex, animate: true });
   }, []);
 
   useEffect(() => {
     const listRef = gridlistParentRef.current.childNodes[0];
-    if(spotlightId &&defaultSpotlightId && defaultSpotlightId.indexOf(spotlightId) === 0){
+    if (
+      spotlightId &&
+      defaultSpotlightId &&
+      defaultSpotlightId.indexOf(spotlightId) === 0
+    ) {
       let matched = defaultSpotlightId.match(/\d+$/); //find index
-      if(matched){
-        defaultFocusTargetRef.current = {spotlightId: defaultSpotlightId, index: Number(matched[0]), left: restorePositionX};
-        if(restorePositionX){
-          scrollToRef.current({position: {x: Math.floor(restorePositionX), y: 0}, animate: false, focus: false});
-        }else{
-          scrollToRef.current({index: Number(matched[0]), animate: false, focus: false});
+      if (matched) {
+        defaultFocusTargetRef.current = {
+          spotlightId: defaultSpotlightId,
+          index: Number(matched[0]),
+          left: restorePositionX,
+        };
+        if (restorePositionX) {
+          scrollToRef.current({
+            position: { x: Math.floor(restorePositionX), y: 0 },
+            animate: false,
+            focus: false,
+          });
+        } else {
+          scrollToRef.current({
+            index: Number(matched[0]),
+            animate: false,
+            focus: false,
+          });
         }
       }
     }
-    if(direction === 'vertical'){
+    if (direction === "vertical") {
       listRef.addEventListener("wheel", handleWheel, true);
     }
     return () => {
       scrollToRef.current = null;
-      if(direction === 'vertical'){
-        listRef.removeEventListener('wheel', handleWheel);
+      if (direction === "vertical") {
+        listRef.removeEventListener("wheel", handleWheel);
       }
     };
   }, []);
 
-
   const _onScrollStart = useCallback(
     (e) => {
       if (onScrollStart) {
@@ -102,13 +118,18 @@ export default function TVirtualGridList({
         onScrollStop(e);
       }
       isScrolling.current = false;
-      if(defaultFocusTargetRef.current){
-        if((defaultFocusTargetRef.current.index >= e.moreInfo.firstVisibleIndex
-          && defaultFocusTargetRef.current.index <= e.moreInfo.lastVisibleIndex)
-          || (defaultFocusTargetRef.left>=0 && defaultFocusTargetRef.left > e.scrollLeft) ){
-            Spotlight.focus(defaultFocusTargetRef.current.spotlightId);
-            defaultFocusTargetRef.current = null;
-          }
+      if (defaultFocusTargetRef.current) {
+        if (
+          (defaultFocusTargetRef.current.index >=
+            e.moreInfo.firstVisibleIndex &&
+            defaultFocusTargetRef.current.index <=
+              e.moreInfo.lastVisibleIndex) ||
+          (defaultFocusTargetRef.left >= 0 &&
+            defaultFocusTargetRef.left > e.scrollLeft)
+        ) {
+          Spotlight.focus(defaultFocusTargetRef.current.spotlightId);
+          defaultFocusTargetRef.current = null;
+        }
       }
       if (e.reachedEdgeInfo) {
         if (e.reachedEdgeInfo.top) {
@@ -143,7 +164,7 @@ export default function TVirtualGridList({
     },
     [cbScrollTo]
   );
-  const relevantPositions = useMemo(()=>{
+  const relevantPositions = useMemo(() => {
     switch (direction) {
       case "horizontal":
         return ["left", "right"];
@@ -152,8 +173,26 @@ export default function TVirtualGridList({
       default:
         return [];
     }
-  },[direction]);
+  }, [direction]);
 
+  const isLowerBrowser = useMemo(() => {
+    if (typeof window === "object") {
+      // tv
+      if (window.PalmSystem) {
+        return Number(webOSVersion) < 5;
+      }
+
+      // local
+      const userAgent = window.navigator.userAgent;
+      const chromeMatch = userAgent.match(/Chrome\/([0-9]+)\./);
+      if (chromeMatch) {
+        const n = parseInt(chromeMatch[1], 10);
+        return n < 68;
+      }
+    }
+
+    return false;
+  }, [webOSVersion]);
   return (
     <div
       className={classNames(
@@ -163,7 +202,10 @@ export default function TVirtualGridList({
       ref={gridlistParentRef}
     >
       <VirtualGridList
-        className={classNames(css.tVirtualGridList)}
+        className={classNames(
+          css.tVirtualGridList,
+          isLowerBrowser && css.lowVersionBr
+        )}
         onScrollStart={_onScrollStart}
         onScrollStop={_onScrollStop}
         direction={direction}

com.twin.app.shoptime/src/components/TVirtualGridList/TVirtualGridList.module.less

@@ -8,4 +8,10 @@
       overflow: unset !important;
     }
   }
+
+  .lowVersionBr {
+    > div {
+      overflow: hidden !important;
+    }
+  }
 }