pagenator

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

@@ -1,6 +1,6 @@
 /**
  * TVerticalPagenator
- *
+ * checking data-wheel-point and data-spotlight-id
  * @module TVerticalPagenator
  */
 
@@ -13,35 +13,35 @@ import * as HelperMethods from "../../utils/helperMethods";
 import usePrevious from '../../hooks/usePrevious';
 import Spotlight from '@enact/spotlight';
 
+const DEBOUNCE_DELAY = 10;
 
 const TVerticalPagenator = ({
   className,
   spotlightId,
-  defaultPageIndex=0,
+  defaultContainerId=null,
   enableFocusAction=true,
   children,
   disabled,
-  pageSpotIds = [],
+  onScrollStatusChanged,
-  onPageChanged,
+  onFocusedContainerId,
-  visible = "hidden",
+  scrollbarVisible = "hidden",
-  scrollPositionRef,
   cbChangePageRef,
-  scrollTop=false,
   topMargin=0,
   ...rest
 }) => {
-    const [pageIndex, setPageIndex] = useState(!defaultPageIndex ? 0: defaultPageIndex);
+    const [_defaultContainerId,_] = useState(defaultContainerId);
     const pagenatorRef = useRef(null);
-    const pageIndexRef = usePrevious(pageIndex);
     const isScrolling = useRef(false);
-    const scrollTopPositionRef = useRef(0);
+    const scrollTopPositionRef = useRef(-1);
     const scrollTo = useRef(null);
     const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
     const cursorVisibleRef = usePrevious(cursorVisible);
     const disabledRef = usePrevious(disabled);
-    const pageSpotIdsRef = usePrevious(pageSpotIds);
+    const topMarginRef = usePrevious(topMargin);
     const initialRenderedRef = useRef(false);
-    const lastScrollOffset = useRef(0);
+    const onFocusedContainerIdRef = usePrevious(onFocusedContainerId);
+    const scrollStatus = useRef("top");
+    const lastEventTimeRef = useRef(0);
 
     useEffect(() => {
         if(spotlightId){
@@ -49,6 +49,39 @@ const TVerticalPagenator = ({
         }
     }, [spotlightId]);
 
+    const findCurrentWheelPoint = useCallback((node)=>{
+        if(pagenatorRef.current && pagenatorRef.current.contains(node)){
+            return node.closest('[data-wheel-point="true"]');
+        }else{
+            return null;
+        }
+    },[]);
+    const findNextWheelPoint = useCallback((ev)=>{
+        let matchedNode = null;
+        if(pagenatorRef.current){
+            const nodes = pagenatorRef.current.querySelectorAll(`[data-wheel-point="true"]`);
+            for(let i=0; i<nodes.length; i++){
+                if(scrollTopPositionRef.current < (nodes[i].offsetTop-topMarginRef.current)){
+                    matchedNode = nodes[i];
+                    break;
+                }
+            }
+        }
+        return matchedNode;
+    },[]);
+    const findPrevWheelPoint = useCallback((ev)=>{
+        let matchedNode = null;
+        if(pagenatorRef.current){
+            const nodes = pagenatorRef.current.querySelectorAll(`[data-wheel-point="true"]`);
+            for(let i=nodes.length-1; i>=0; i--){
+                if(scrollTopPositionRef.current > (nodes[i].offsetTop-topMarginRef.current)){
+                    matchedNode = nodes[i];
+                    break;
+                }
+            }
+        }
+        return matchedNode;
+    },[]);
     const onFocusItem = useCallback((ev)=>{
         if(!pagenatorRef.current){
             return;
@@ -58,24 +91,33 @@ const TVerticalPagenator = ({
         if (cursorVisibleRef.current) {
             return;
         }
-        pageSpotIds.forEach((element, index) => {
+        const node = findCurrentWheelPoint(ev.target);
-            const pageNode = document.querySelector(`[data-spotlight-id="${element}"]`);
+        if(node){
-            if(pageNode.contains(ev.target))
+            setTimeout(() => {
-                setPageIndex(index);
+                moveToNode(node, true, false);
-            }
+            }, 0);
-        );
+        }
-    },[pageSpotIds]);
+    },[moveToNode]);
 
     const handleWheel = useCallback((ev) => {
+        const now = Date.now();
+        if (now - lastEventTimeRef.current < DEBOUNCE_DELAY) {
+          // <20><><EFBFBD><EFBFBD> <20>ð<EFBFBD> <20>̳<EFBFBD><CCB3><EFBFBD> <20>̺<EFBFBD>Ʈ<EFBFBD><C6AE> <20><><EFBFBD><EFBFBD>
+          return;
+        }
+        lastEventTimeRef.current = now;
+
         if(pagenatorRef.current.contains(ev.target)){
             ev.stopPropagation();
             if(disabledRef.current){
                 return;
             }
-            let newIndex = ev.deltaY > 0 ? pageIndexRef.current+1: pageIndexRef.current -1;
+            const node = ev.deltaY > 0 ? findNextWheelPoint():findPrevWheelPoint();
-            newIndex = Math.max(newIndex, 0);
+            if(node){
-            newIndex = Math.min(newIndex, pageSpotIdsRef.current.length-1);
+                setTimeout(() => {
-            setPageIndex(newIndex);
+                    moveToNode(node, true, true);
+                }, 0);
+            }
         }
     }, []);
 
@@ -91,62 +133,90 @@ const TVerticalPagenator = ({
             document.removeEventListener('wheel', handleWheel);
         };
     }, []);
-
+    const moveToNode = useCallback((node, animate=true, focus=enableFocusAction)=>{
-    const moveToPage = useCallback((index=0, animate=true, focus=enableFocusAction)=>{
+        if(typeof node === 'string'){
-        if(pageSpotIds[index]){
+            node = pagenatorRef.current.querySelector(`[data-spotlight-id="${node}"]`);
-            const currentNode = document.querySelector(
+        }
-            `[data-spotlight-id="${pageSpotIds[index]}"]`
+        if(node){
-            );
+            const distance = Math.round(node.offsetTop - HelperMethods.scaleH(topMarginRef.current));
-            if(currentNode){
+            const targetTop = distance >=0 ? distance:0;
-                const distance = Math.round(currentNode.offsetTop - HelperMethods.scaleH(topMargin));
+            const currentSpot = Spotlight.getCurrent();
-                const targetTop = distance >=0 ? distance:0;
+            if(scrollTopPositionRef.current === targetTop){
-                scrollTo.current && scrollTo.current({ position:{x:0,y: targetTop}, animate: animate, focus: focus });
+                return;
-                if(focus){
+            }
-                    Spotlight.focus(currentNode);
+            scrollTopPositionRef.current = targetTop;
-                }
+            scrollTo.current && scrollTo.current({ position:{x:0,y: targetTop}, animate: animate, focus: focus || !currentSpot, align: 'top' });
+            if(focus || !currentSpot){
+                Spotlight.focus(node);
+            }
+            if(onFocusedContainerIdRef.current){
+                onFocusedContainerIdRef.current(node.getAttribute('data-spotlight-id'));
             }
         }
-        if(onPageChanged){
+    },[enableFocusAction]);
-            onPageChanged(index);
-        }
-    },[topMargin, pageSpotIds, onPageChanged, enableFocusAction]);
 
     useEffect(() => {
+        let node = _defaultContainerId;
+        // console.log('yhcho TVerticalPagenator _defaultContainerId changed ', _defaultContainerId);
+        if(!_defaultContainerId){
+            node = pagenatorRef.current.querySelector(`[data-wheel-point="true"]`); //to top
+        }
         if(!initialRenderedRef.current){
-            moveToPage(pageIndex, false);
+            moveToNode(node, false);
             setTimeout(() => {
-                moveToPage(pageIndex, false);
+                moveToNode(node, false);
             }, 100);
         }else{
-            moveToPage(pageIndex, true);
+            moveToNode(node, true);
         }
         initialRenderedRef.current = true;
-    }, [pageIndex]);
+    }, [_defaultContainerId]);
 
     useEffect(() => {
         if(cbChangePageRef){
-            cbChangePageRef.current = (index, animate=false)=>{
+            cbChangePageRef.current = (_spotlightId, animate=false)=>{
-                moveToPage(index, animate);
+                let node = null;
-                setPageIndex(index ? index : 0);
+                if(!_spotlightId){ //to top
+                    node = pagenatorRef.current.querySelector(`[data-wheel-point="true"]`);
+                }else{
+                    node = pagenatorRef.current.querySelector(`[data-spotlight-id="${_spotlightId}"]`);
+                }
+                if(node){
+                    setTimeout(() => {
+                        moveToNode(node, animate);
+                    }, 0);
+                }
             };
         }
-    }, [cbChangePageRef, moveToPage]);
+    }, [cbChangePageRef]);
 
     const _onScrollStart = useCallback(() => {
         isScrolling.current = true;
     }, []);
 
-    const _onScrollStop = useCallback(() => {
+    const _onScrollStop = useCallback((ev) => {
         isScrolling.current = false;
+        scrollTopPositionRef.current = ev.scrollTop;
     }, []);
 
     const _onScroll = useCallback((ev) => {
         isScrolling.current = true;
-        scrollTopPositionRef.current = ev.scrollTop;
+        let prevScrollStatus = scrollStatus.current;
-        if(scrollPositionRef){
+        const scroller = pagenatorRef.current?.childNodes?.[0];
-            scrollPositionRef.current = ev.scrollTop;
+        if(scroller){
+            if(ev.scrollTop <=0){
+                scrollStatus.current = "top";
+            }else if(ev.scrollTop + scroller.offsetHeight >= scroller.scrollHeight){
+                scrollStatus.current = "end";
+            }else{
+                scrollStatus.current = "middle";
+            }
         }
-    }, [scrollPositionRef]);
+        if(prevScrollStatus !== scrollStatus.current && onScrollStatusChanged){
+            onScrollStatusChanged(scrollStatus.current);
+        }
+    }, [onScrollStatusChanged]);
+
     if(!spotlightId){
         console.warn('TVerticalPagenator has no spotlightId');
         return null;
@@ -157,10 +227,10 @@ const TVerticalPagenator = ({
             id={spotlightId}
             spotlightId={spotlightId}
             className={classNames(css.verticalPagenator, className)}
-            focusableScrollbar={visible !== "hidden"}
+            focusableScrollbar={scrollbarVisible !== "hidden"}
             noScrollByWheel={true}
             noScrollByDrag={true}
-            verticalScrollbar={visible}
+            verticalScrollbar={scrollbarVisible}
             onFocus={onFocusItem}
             cbScrollTo={getScrollTo}
             onScroll={_onScroll}

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -113,7 +113,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
   }, [handleItemFocus]);
 
   return (
-    <Container className={css.bestSellerWrap} style={orderStyle} spotlightId={spotlightId}>
+    <Container className={css.bestSellerWrap} style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
       <SectionTitle
         title={$L("BEST SELLER")}
         data-title-index="homeBestSellerTitle"

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx

@@ -193,7 +193,7 @@ export default function HomeBanner({
   }, [handleItemFocus]);
 
   return (
-    <Container className={css.container} spotlightId={spotlightId} style={orderStyle}>
+    <Container className={css.container} spotlightId={spotlightId} data-wheel-point={true} style={orderStyle} >
       <div className={css.homeTemplateBox}>
         <ContainerBasic
           className={css.smallBox}

com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx

@@ -84,7 +84,7 @@ const HomeOnSale = ({ order, scrollTopBody, handleItemFocus,spotlightId, ...rest
   }, [handleItemFocus]);
 
   return (
-    <Container {...rest} className={css.container} style={orderStyle} spotlightId={spotlightId}>
+    <Container {...rest} className={css.container} style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
       <div className={css.onSaleWrap}>
         <SectionTitle
           className={css.subTitle}

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

@@ -51,11 +51,7 @@ export default function HomePanel({ isOnTop }) {
   const { sendLogGNB } = useLogService();
 
   const dispatch = useDispatch();
-  const [pageIndex, setPageIndex] = useState(0);
+  const [btnDisabled, setBtnDisabled] = useState(true);
-  const pageIndexRef = usePrevious(pageIndex);
-  const spotYoffsetRef = useRef(0);
-  const cbChangePageRef = useRef(null);
-  const [btnActive, setBtnActive] = useState(true);
   const [arrowBottom, setArrowBottom] = useState(true);
   useDebugKey({ isLandingPage: true });
 
@@ -94,7 +90,9 @@ export default function HomePanel({ isOnTop }) {
   const webOSVersion = useSelector(
     (state) => state.common.appStatus.webOSVersion
   );
-
+  const [focusedContainerId, setFocusedContainerId] = useState(homeSpotlight?.focusedContainerId);
+  const focusedContainerIdRef = usePrevious(focusedContainerId);
+  const cbChangePageRef = useRef(null);
   const selectTemplate = useMemo(()=>{
     if (homeTopDisplayInfos) {
       return homeTopDisplayInfos[0].shptmTmplCd;
@@ -155,7 +153,7 @@ export default function HomePanel({ isOnTop }) {
         spotId = "banner03";
       }
       if(cbChangePageRef.current){
-        cbChangePageRef.current(0);
+        cbChangePageRef.current(0, true);
       }
       return Spotlight.focus(spotId);
     }
@@ -207,37 +205,7 @@ export default function HomePanel({ isOnTop }) {
   }, [dispatch, eventPopInfosData]);
 
   useEffect(() => {
-    let timer;
-
-    if (homeSpotlight) {
-      if(cbChangePageRef.current){
-        cbChangePageRef.current(homeSpotlight.pageIndex);
-      }
-
-      timer = setTimeout(() => {
-        Spotlight.resume();
-        if(cbChangePageRef.current){ //call again after some seconds
-          cbChangePageRef.current(homeSpotlight.pageIndex);
-        }
-
-        if (homeSpotlight.currentCatCd) {
-          Spotlight.focus("spotlightId-" + homeSpotlight.currentCatCd);
-        }
-
-        if (homeSpotlight.currentSpot) {
-          Spotlight.focus(homeSpotlight.currentSpot);
-        }
-
-        setBtnActive(false);
-        setFirstSpot(true);
-      }, 300);
-    } else {
-      setBtnActive(false);
-    }
-
     return () => {
-      clearTimeout(timer);
-
       const c = Spotlight.getCurrent();
       let targetSpotlightId = null;
       let targetSpotlightCatcd = null;
@@ -260,7 +228,7 @@ export default function HomePanel({ isOnTop }) {
             currentSpot: currentSpot,
             currentCatCd: targetSpotlightCatcd,
             currentCateName: targetSpotlightCateNm,
-            pageIndex: pageIndexRef.current,
+            focusedContainerId: focusedContainerIdRef.current,
           },
         })
       );
@@ -273,40 +241,38 @@ export default function HomePanel({ isOnTop }) {
     }
   }, [firstSpot]);
 
-  const doSendLogGNB = useCallback((index)=>{
+  const doSendLogGNB = useCallback((containerId)=>{
     let nowMenu = null;
-    if(pageSpotIds[index]){
+    switch(containerId){
-      switch(pageSpotIds[index]){
+      case TEMPLATE_CODE_CONF.TOP:
-        case TEMPLATE_CODE_CONF.TOP:
+        nowMenu=LOG_MENU.HOME_TOP;
-          nowMenu=LOG_MENU.HOME_TOP;
+        break;
-          break;
+      case TEMPLATE_CODE_CONF.CATEGORY_ITEM:
-        case TEMPLATE_CODE_CONF.CATEGORY_ITEM:
+        nowMenu=LOG_MENU.HOME_CATEGORY;
-          nowMenu=LOG_MENU.HOME_CATEGORY;
+        break;
-          break;
+      case TEMPLATE_CODE_CONF.ON_SALE:
-        case TEMPLATE_CODE_CONF.ON_SALE:
+        nowMenu=LOG_MENU.HOME_ON_SALE;
-          nowMenu=LOG_MENU.HOME_ON_SALE;
+        break;
-          break;
+      case TEMPLATE_CODE_CONF.POPULAR_SHOW:
-        case TEMPLATE_CODE_CONF.POPULAR_SHOW:
+        nowMenu=LOG_MENU.HOME_POPULAR_SHOWS;
-          nowMenu=LOG_MENU.HOME_POPULAR_SHOWS;
+        break;
-          break;
+      case TEMPLATE_CODE_CONF.BEST_SELLER:
-        case TEMPLATE_CODE_CONF.BEST_SELLER:
+        nowMenu=LOG_MENU.HOME_BEST_SELLER;
-          nowMenu=LOG_MENU.HOME_BEST_SELLER;
+        break;
-          break;
-      }
     }
     if(nowMenu){
       sendLogGNB(nowMenu);
     }
   },[pageSpotIds, sendLogGNB]);
 
-  const handleItemFocus = useCallback((index)=> () => {
+  const handleItemFocus = useCallback((containerId)=> () => {
-    doSendLogGNB(index);
+    doSendLogGNB(containerId);
     },
     [doSendLogGNB]
   );
   useEffect(() => {
-    doSendLogGNB(pageIndex);
+    doSendLogGNB(focusedContainerId);
-  }, [pageIndex]);
+  }, [focusedContainerId]);
 
   const renderPageItem = useCallback(()=>{
     return (
@@ -322,7 +288,7 @@ export default function HomePanel({ isOnTop }) {
                   selectTemplate={selectTemplate}
                   firstSpot={firstSpot}
                   className={css.homeBannerWrap}
-                  handleItemFocus={handleItemFocus(idx)}
+                  handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
                 />
               )
             }
@@ -333,7 +299,7 @@ export default function HomePanel({ isOnTop }) {
                 spotlightId={el.shptmApphmDspyOptCd}
                 catCd={cateCd}
                 cateNm={cateNm}
-                handleItemFocus={handleItemFocus(idx)}
+                handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
               />
             )
           }
@@ -342,7 +308,7 @@ export default function HomePanel({ isOnTop }) {
               <HomeOnSale
                 key={el.shptmApphmDspyOptCd}
                 spotlightId={el.shptmApphmDspyOptCd}
-                handleItemFocus={handleItemFocus(idx)}
+                handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
               />
             )
           }
@@ -351,7 +317,7 @@ export default function HomePanel({ isOnTop }) {
               <PopularShow
                 key={el.shptmApphmDspyOptCd}
                 spotlightId={el.shptmApphmDspyOptCd}
-                handleItemFocus={handleItemFocus(idx)}
+                handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
               />
             )
           }
@@ -360,7 +326,7 @@ export default function HomePanel({ isOnTop }) {
               <BestSeller
                 key={el.shptmApphmDspyOptCd}
                 spotlightId={el.shptmApphmDspyOptCd}
-                handleItemFocus={handleItemFocus(idx)}
+                handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
               />
             )
           }
@@ -373,21 +339,38 @@ export default function HomePanel({ isOnTop }) {
         size={null}
         type={TYPES.topButton}
         spotlightId={"home-top-btn"}
-        spotlightDisabled={btnActive}
+        spotlightDisabled={btnDisabled}
         aria-label="Move to Top, Button"
       />
     </>
     );
-  },[sortedHomeLayoutInfo, selectTemplate, cateCd,cateNm, handleItemFocus, handleTopButtonClick, btnActive]);
+  },[sortedHomeLayoutInfo, selectTemplate, cateCd,cateNm, handleItemFocus, handleTopButtonClick, btnDisabled]);
 
-  const onPageChanged = useCallback((index) => {
+  const onScrollStatusChanged = useCallback((status) => {
-    if(pageSpotIds.length <=index+1){
+    if(status === 'end'){
       setArrowBottom(false);
     }else{
       setArrowBottom(true);
     }
-    setPageIndex(index);
+  }, []);
-  }, [pageSpotIds]);
+  const onFocusedContainerId = useCallback((containerId) => {
+    setFocusedContainerId(containerId);
+    if (!firstSpot && homeSpotlight) {
+      setTimeout(() => {
+        Spotlight.resume();
+        setFirstSpot(true);
+        if (homeSpotlight.currentCatCd) {
+          Spotlight.focus("spotlightId-" + homeSpotlight.currentCatCd);
+        }
+        if (homeSpotlight?.currentSpot) {
+          Spotlight.focus(homeSpotlight.currentSpot);
+        }
+        setBtnDisabled(false);
+      }, 0);
+    } else if(!firstSpot){
+      setBtnDisabled(false);
+    }
+  }, [homeSpotlight, firstSpot]);
 
   return (
     <>
@@ -401,11 +384,10 @@ export default function HomePanel({ isOnTop }) {
             <TVerticalPagenator
               className={css.tVerticalPagenator}
               spotlightId={'home_verticalPagenator'}
-              defaultPageIndex={homeSpotlight?.pageIndex ?? 0}
+              defaultContainerId={homeSpotlight?.focusedContainerId}
               disabled={!isOnTop}
-              pageSpotIds={pageSpotIds}
+              onScrollStatusChanged={onScrollStatusChanged}
-              onPageChanged={onPageChanged}
+              onFocusedContainerId={onFocusedContainerId}
-              scrollPositionRef={spotYoffsetRef}
               cbChangePageRef={cbChangePageRef}
               topMargin={36}>
               {renderPageItem()}

com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less

@@ -13,7 +13,7 @@
     }
   }
   .tButton {
-    margin-top: 60px;
+    margin-top: -20px;
   }
 }
 .arrow {

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -125,7 +125,7 @@ const PopularShow = ({
   }, [handleItemFocus]);
 
   return (
-    <Container className={css.popularShow} style={orderStyle} spotlightId={spotlightId}>
+    <Container className={css.popularShow} style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
       <SectionTitle
         className={css.subTitle}
         title={$L("POPULAR SHOW")}

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -28,7 +28,7 @@ import css from "../../HomePanel/SubCategory/SubCategory.module.less";
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
   {
-    enterTo: "last-focused",
+    enterTo: null,
   },
   "div"
 );
@@ -231,7 +231,7 @@ const SubCategory = ({
     }
   }, [handleItemFocus]);
   return (
-    <Container style={orderStyle} spotlightId={spotlightId}>
+    <Container style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
       <ContainerBasic>
         <CategoryNav
           categoryInfos={categoryInfos}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleContents/OnSaleContents.jsx

@@ -20,7 +20,7 @@ export default memo(function OnSaleContents({
   selectedLgCatCd,
 }) {
   return (
-    <Container className={css.container} spotlightId={spotlightId}>
+    <Container className={css.container} spotlightId={spotlightId} data-wheel-point={true}>
       <SectionTitle
         data-title-index={contentsIndex}
         title={saleNm}

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

@@ -61,7 +61,7 @@ export default function OnSalePanel({ panelInfo }) {
   const previousPanelIsDetail = Object.keys(panelInfo).length > 4;
 
   const cbChangePageRef = useRef(null);
-  const pageIndexRef = useRef(0);
+  const focusedContainerIdRef = useRef(0);
 
   useEffect(() => {
     sendLogGNB(LOG_MENU.ON_SALE);
@@ -197,7 +197,7 @@ export default function OnSalePanel({ panelInfo }) {
     isReadyForInitialFocusTarget,
     panelInfo,
     previousPanelIsDetail,
-    previousPanelIsHome,
+    previousPanelIsHome
   ]);
 
   useEffect(() => {
@@ -277,7 +277,7 @@ export default function OnSalePanel({ panelInfo }) {
               exprOrd,
               lgCatCd,
               targetId,
-              pageIndex: pageIndexRef.current,
+              focusedContainerId: focusedContainerIdRef.current,
             },
           })
         );
@@ -286,33 +286,22 @@ export default function OnSalePanel({ panelInfo }) {
   }, [dispatch]);
 
   const handleTopButtonClick = useCallback(() => {
-    if (cbChangePageRef.current) {
+    if(cbChangePageRef.current){
-      if (!firstFocusableTarget) {
+      cbChangePageRef.current(0, true);
-        cbChangePageRef.current(0, true);
-        return;
-      }
-
-      setIsTopButtonClicked(true);
-
-      setTimeout(() => {
-        Spotlight.focus(firstFocusableTarget);
-        setIsTopButtonClicked(false);
-      });
     }
+    if (!firstFocusableTarget) {
+      return;
+    }
+    setIsTopButtonClicked(true);
+
+    setTimeout(() => {
+      Spotlight.focus(firstFocusableTarget);
+      setIsTopButtonClicked(false);
+    });
   }, [firstFocusableTarget]);
 
-  const pageSpotIds = useMemo(() => {
+  const onFocusedContainerId = useCallback((containerId) => {
-    const spots = [];
+    focusedContainerIdRef.current = containerId;
-    if (saleInfos) {
-      for (let i = 0; i < saleInfos.length; i++) {
-        spots.push("sale-info-" + i);
-      }
-    }
-    return spots;
-  }, [saleInfos]);
-
-  const onPageChanged = useCallback((index) => {
-    pageIndexRef.current = index;
   }, []);
 
   const onSaleNavClicked = useCallback((ev) => {
@@ -339,40 +328,40 @@ export default function OnSalePanel({ panelInfo }) {
           />
 
           <TBody className={css.tBody} scrollable={false}>
-            {saleInfos && (
+            {saleInfos &&
-              <TVerticalPagenator
+            <TVerticalPagenator
-                className={css.tVerticalPagenator}
+              className={css.tVerticalPagenator}
-                spotlightId={"onSale_verticalPagenator"}
+              spotlightId={'onSale_verticalPagenator'}
-                enableFocusAction={false}
+              enableFocusAction={false}
-                defaultPageIndex={panelInfo?.pageIndex ?? 0}
+              defaultContainerId={panelInfo?.focusedContainerId}
-                pageSpotIds={pageSpotIds}
+              onFocusedContainerId={onFocusedContainerId}
-                onPageChanged={onPageChanged}
+              cbChangePageRef={cbChangePageRef}
-                cbChangePageRef={cbChangePageRef}
+              topMargin={36}>
-                topMargin={36}
+                  <>
-              >
+                    {saleInfos.map(
-                {saleInfos.map(
+                      ({ saleNm, saleProductInfos }, contentsIndex) => (
-                  ({ saleNm, saleProductInfos }, contentsIndex) => (
+                        <OnSaleContents
-                    <OnSaleContents
+                          contentsIndex={contentsIndex}
-                      contentsIndex={contentsIndex}
+                          isTopButtonClicked={isTopButtonClicked}
-                      isTopButtonClicked={isTopButtonClicked}
+                          key={"sale-info-" + contentsIndex}
-                      key={"sale-info-" + contentsIndex}
+                          spotlightId={"sale-info-" + contentsIndex}
-                      spotlightId={"sale-info-" + contentsIndex}
+                          saleNm={saleNm}
-                      saleNm={saleNm}
+                          saleProductInfos={saleProductInfos}
-                      saleProductInfos={saleProductInfos}
+                          selectedLgCatCd={selectedLgCatCd}
-                      selectedLgCatCd={selectedLgCatCd}
+                        />
-                    />
+                      )
-                  )
+                    )}
-                )}
+                    {saleInfos.length > 1 && (
-                {saleInfos.length > 1 && (
+                      <TButton
-                  <TButton
+                        onClick={handleTopButtonClick}
-                    onClick={handleTopButtonClick}
+                        size={null}
-                    size={null}
+                        type={TYPES.topButton}
-                    type={TYPES.topButton}
+                        ariaLabel="Move to Top"
-                    ariaLabel="Move to Top"
+                      />
-                  />
+                    )}
-                )}
+                  </>
-              </TVerticalPagenator>
+            </TVerticalPagenator>
-            )}
+          }
           </TBody>
         </>
       )}