homeOnSale, OnSale API 분리

2024-06-04 10:17:35 +09:00
parent b84100a051
commit 8b69984ba6
7 changed files with 277 additions and 215 deletions
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/com.twin.app.shoptime/src/actions/actionTypes.js
@@ -99,6 +99,7 @@ export const types = {
  CLEAR_RECENTLY_VIEWED_INFO: "CLEAR_RECENTLY_VIEWED_INFO",

  // onSale actions
+  GET_HOME_ON_SALE_INFO: "GET_HOME_ON_SALE_INFO",
  GET_ON_SALE_INFO: "GET_ON_SALE_INFO",
  COPY_CATEGORY_INFO: "COPY_CATEGORY_INFO",

--- a/com.twin.app.shoptime/src/actions/onSaleActions.js
+++ b/com.twin.app.shoptime/src/actions/onSaleActions.js
@@ -3,54 +3,72 @@ import { TAxios } from "../api/TAxios";
 import { types } from "./actionTypes";
 import { changeAppStatus } from "./commonActions";

-// On Sale 조회 IF-LGSP-086
-export const getOnSaleInfo =
-  (props, showLoadingPanel = false) =>
-  (dispatch, getState) => {
-    const { categoryIncFlag, homeSaleInfosIncFlag, lgCatCd, saleInfosIncFlag } =
-      props;
+// On Sale 조회 IF-LGSP-086 (Home)
+export const getHomeOnSaleInfo = (props) => (dispatch, getState) => {
+  const { categoryIncFlag, homeSaleInfosIncFlag, lgCatCd, saleInfosIncFlag } =
+    props;

-    if (showLoadingPanel) {
-      dispatch(
-        changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
-      );
-    }
+  const onSuccess = (response) => {
+    console.log("getHomeOnSaleInfo onSuccess ", response.data);

-    const onSuccess = (response) => {
-      console.log("getOnSaleInfo onSuccess ", response.data);
-
-      dispatch({
-        type: types.GET_ON_SALE_INFO,
-        payload: {
-          data: response.data.data,
-        },
-      });
-
-      if (showLoadingPanel) {
-        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
-      }
-    };
-
-    const onFail = (error) => {
-      console.error("getOnSaleInfo onFail", error);
-
-      if (showLoadingPanel) {
-        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
-      }
-    };
-
-    TAxios(
-      dispatch,
-      getState,
-      "get",
-      URLS.GET_ON_SALE_INFO,
-      { categoryIncFlag, homeSaleInfosIncFlag, lgCatCd, saleInfosIncFlag },
-      {},
-      onSuccess,
-      onFail
-    );
+    dispatch({
+      type: types.GET_HOME_ON_SALE_INFO,
+      payload: {
+        data: response.data.data,
+      },
+    });
  };

+  const onFail = (error) => {
+    console.error("getHomeOnSaleInfo onFail", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "get",
+    URLS.GET_ON_SALE_INFO,
+    { categoryIncFlag, homeSaleInfosIncFlag, lgCatCd, saleInfosIncFlag },
+    {},
+    onSuccess,
+    onFail
+  );
+};
+
+// On Sale 조회 IF-LGSP-086 (OnSale)
+export const getOnSaleInfo = (props) => (dispatch, getState) => {
+  const { categoryIncFlag, lgCatCd, saleInfosIncFlag } = props;
+
+  dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
+
+  const onSuccess = (response) => {
+    console.log("getOnSaleInfo onSuccess ", response.data);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+    dispatch({
+      type: types.GET_ON_SALE_INFO,
+      payload: {
+        data: response.data.data,
+      },
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getOnSaleInfo onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "get",
+    URLS.GET_ON_SALE_INFO,
+    { categoryIncFlag, lgCatCd, saleInfosIncFlag },
+    {},
+    onSuccess,
+    onFail
+  );
+};
+
 export const copyCategoryInfos = (categoryInfos) => ({
  type: types.COPY_CATEGORY_INFO,
  payload: categoryInfos,
--- a/com.twin.app.shoptime/src/reducers/onSaleReducer.js
+++ b/com.twin.app.shoptime/src/reducers/onSaleReducer.js
@@ -1,6 +1,10 @@
 import { types } from "../actions/actionTypes";

 const initialState = {
+  homeOnSaleData: {
+    data: {},
+  },
+
  onSaleData: {
    data: {},
  },
@@ -10,6 +14,12 @@ const initialState = {

 export const onSaleReducer = (state = initialState, action) => {
  switch (action.type) {
+    case types.GET_HOME_ON_SALE_INFO:
+      return {
+        ...state,
+        homeOnSaleData: action.payload,
+      };
+
    case types.GET_ON_SALE_INFO:
      return {
        ...state,
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
@@ -17,8 +17,13 @@ const Container = SpotlightContainerDecorator(
  "div"
 );

-const HomeOnSale = ({ order, scrollTopBody, handleItemFocus,spotlightId, ...rest }) => {
-
+const HomeOnSale = ({
+  order,
+  scrollTopBody,
+  handleItemFocus,
+  spotlightId,
+  ...rest
+}) => {
  const { getScrollTo, scrollLeft } = useScrollTo();
  const { handleScrollReset, handleStopScrolling } = useScrollReset(
    scrollLeft,
@@ -26,7 +31,7 @@ const HomeOnSale = ({ order, scrollTopBody, handleItemFocus,spotlightId, ...rest
  );

  const homeOnSaleInfos = useSelector(
-    (state) => state.onSale.onSaleData?.data.homeOnSaleInfos
+    (state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos
  );
  const { cursorVisible } = useSelector((state) => state.common.appStatus);

@@ -64,7 +69,7 @@ const HomeOnSale = ({ order, scrollTopBody, handleItemFocus,spotlightId, ...rest
      handleScrollReset,
      handleScrollRight,
      homeOnSaleInfos?.length,
-      scrollTopBody
+      scrollTopBody,
    ]
  );

@@ -84,7 +89,13 @@ const HomeOnSale = ({ order, scrollTopBody, handleItemFocus,spotlightId, ...rest
  }, [handleItemFocus]);

  return (
-    <Container {...rest} className={css.container} style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
+    <Container
+      {...rest}
+      className={css.container}
+      style={orderStyle}
+      spotlightId={spotlightId}
+      data-wheel-point={true}
+    >
      <div className={css.onSaleWrap}>
        <SectionTitle
          className={css.subTitle}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";

 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
@@ -18,7 +24,7 @@ import {
  updateSpotlightId,
 } from "../../actions/homeActions";
 import { getSubCategory, getTop20Show } from "../../actions/mainActions";
-import { getOnSaleInfo } from "../../actions/onSaleActions";
+import { getHomeOnSaleInfo } from "../../actions/onSaleActions";
 import { getBestSeller } from "../../actions/productActions";
 import TBody from "../../components/TBody/TBody";
 import TButton, { TYPES } from "../../components/TButton/TButton";
@@ -76,7 +82,7 @@ export default function HomePanel({ isOnTop }) {
    (state) => state.home.mainContentsData.homeTopDisplayInfos
  );
  const categoryInfos = useSelector(
-    (state) => state.onSale.onSaleData?.data.categoryInfos
+    (state) => state.onSale.homeOnSaleData?.data.categoryInfos
  );

  const { popupVisible, activePopup } = useSelector(
@@ -90,31 +96,35 @@ export default function HomePanel({ isOnTop }) {
  const webOSVersion = useSelector(
    (state) => state.common.appStatus.webOSVersion
  );
-  const [focusedContainerId, setFocusedContainerId] = useState(homeSpotlight?.focusedContainerId);
+  const [focusedContainerId, setFocusedContainerId] = useState(
+    homeSpotlight?.focusedContainerId
+  );
  const focusedContainerIdRef = usePrevious(focusedContainerId);
  const cbChangePageRef = useRef(null);
-  const selectTemplate = useMemo(()=>{
+  const selectTemplate = useMemo(() => {
    if (homeTopDisplayInfos) {
      return homeTopDisplayInfos[0].shptmTmplCd;
    }
    return null;
-  },[homeTopDisplayInfos]);
+  }, [homeTopDisplayInfos]);

-  const sortedHomeLayoutInfo = useMemo(()=>{
-    if(selectTemplate && homeLayoutInfo && homeLayoutInfo.homeLayoutInfo){
-      const sorted = [...homeLayoutInfo.homeLayoutInfo].sort((x, y) => x.expsOrd - y.expsOrd);
+  const sortedHomeLayoutInfo = useMemo(() => {
+    if (selectTemplate && homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
+      const sorted = [...homeLayoutInfo.homeLayoutInfo].sort(
+        (x, y) => x.expsOrd - y.expsOrd
+      );
      return sorted;
    }
    return [];
-  },[homeLayoutInfo, selectTemplate]);
+  }, [homeLayoutInfo, selectTemplate]);

-  const pageSpotIds = useMemo(()=>{
+  const pageSpotIds = useMemo(() => {
    const spots = [];
-    for(let i=0;i<sortedHomeLayoutInfo.length;i++){
+    for (let i = 0; i < sortedHomeLayoutInfo.length; i++) {
      spots.push(sortedHomeLayoutInfo[i].shptmApphmDspyOptCd);
    }
    return spots;
-  },[sortedHomeLayoutInfo]);
+  }, [sortedHomeLayoutInfo]);

  const onCancel = useCallback(() => {
    if (!isOnTop) {
@@ -142,7 +152,7 @@ export default function HomePanel({ isOnTop }) {
      if (Spotlight.focus("banner01")) {
        spotId = "banner01";
      }
-      if(cbChangePageRef.current){
+      if (cbChangePageRef.current) {
        cbChangePageRef.current(0, true);
      }
      return Spotlight.focus(spotId);
@@ -152,7 +162,7 @@ export default function HomePanel({ isOnTop }) {
      if (Spotlight.focus("banner03")) {
        spotId = "banner03";
      }
-      if(cbChangePageRef.current){
+      if (cbChangePageRef.current) {
        cbChangePageRef.current(0, true);
      }
      return Spotlight.focus(spotId);
@@ -163,7 +173,7 @@ export default function HomePanel({ isOnTop }) {
    dispatch(getHomeLayout());
    dispatch(getHomeMainContents());
    dispatch(
-      getOnSaleInfo({
+      getHomeOnSaleInfo({
        homeSaleInfosIncFlag: "Y",
        categoryIncFlag: "Y",
        saleInfosIncFlag: "N",
@@ -241,32 +251,36 @@ export default function HomePanel({ isOnTop }) {
    }
  }, [firstSpot]);

-  const doSendLogGNB = useCallback((containerId)=>{
-    let nowMenu = null;
-    switch(containerId){
-      case TEMPLATE_CODE_CONF.TOP:
-        nowMenu=LOG_MENU.HOME_TOP;
-        break;
-      case TEMPLATE_CODE_CONF.CATEGORY_ITEM:
-        nowMenu=LOG_MENU.HOME_CATEGORY;
-        break;
-      case TEMPLATE_CODE_CONF.ON_SALE:
-        nowMenu=LOG_MENU.HOME_ON_SALE;
-        break;
-      case TEMPLATE_CODE_CONF.POPULAR_SHOW:
-        nowMenu=LOG_MENU.HOME_POPULAR_SHOWS;
-        break;
-      case TEMPLATE_CODE_CONF.BEST_SELLER:
-        nowMenu=LOG_MENU.HOME_BEST_SELLER;
-        break;
-    }
-    if(nowMenu){
-      sendLogGNB(nowMenu);
-    }
-  },[pageSpotIds, sendLogGNB]);
+  const doSendLogGNB = useCallback(
+    (containerId) => {
+      let nowMenu = null;
+      switch (containerId) {
+        case TEMPLATE_CODE_CONF.TOP:
+          nowMenu = LOG_MENU.HOME_TOP;
+          break;
+        case TEMPLATE_CODE_CONF.CATEGORY_ITEM:
+          nowMenu = LOG_MENU.HOME_CATEGORY;
+          break;
+        case TEMPLATE_CODE_CONF.ON_SALE:
+          nowMenu = LOG_MENU.HOME_ON_SALE;
+          break;
+        case TEMPLATE_CODE_CONF.POPULAR_SHOW:
+          nowMenu = LOG_MENU.HOME_POPULAR_SHOWS;
+          break;
+        case TEMPLATE_CODE_CONF.BEST_SELLER:
+          nowMenu = LOG_MENU.HOME_BEST_SELLER;
+          break;
+      }
+      if (nowMenu) {
+        sendLogGNB(nowMenu);
+      }
+    },
+    [pageSpotIds, sendLogGNB]
+  );

-  const handleItemFocus = useCallback((containerId)=> () => {
-    doSendLogGNB(containerId);
+  const handleItemFocus = useCallback(
+    (containerId) => () => {
+      doSendLogGNB(containerId);
    },
    [doSendLogGNB]
  );
@@ -274,13 +288,12 @@ export default function HomePanel({ isOnTop }) {
    doSendLogGNB(focusedContainerId);
  }, [focusedContainerId]);

-  const renderPageItem = useCallback(()=>{
+  const renderPageItem = useCallback(() => {
    return (
      <>
-      {
-        sortedHomeLayoutInfo.map((el, idx)=>{
-          switch(el.shptmApphmDspyOptCd){
-            case TEMPLATE_CODE_CONF.TOP:{
+        {sortedHomeLayoutInfo.map((el, idx) => {
+          switch (el.shptmApphmDspyOptCd) {
+            case TEMPLATE_CODE_CONF.TOP: {
              return (
                <HomeBanner
                  key={el.shptmApphmDspyOptCd}
@@ -290,87 +303,97 @@ export default function HomePanel({ isOnTop }) {
                  className={css.homeBannerWrap}
                  handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
                />
-              )
+              );
+            }
+            case TEMPLATE_CODE_CONF.CATEGORY_ITEM: {
+              return (
+                <SubCategory
+                  key={el.shptmApphmDspyOptCd}
+                  spotlightId={el.shptmApphmDspyOptCd}
+                  catCd={cateCd}
+                  cateNm={cateNm}
+                  handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
+                />
+              );
+            }
+            case TEMPLATE_CODE_CONF.ON_SALE: {
+              return (
+                <HomeOnSale
+                  key={el.shptmApphmDspyOptCd}
+                  spotlightId={el.shptmApphmDspyOptCd}
+                  handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
+                />
+              );
+            }
+            case TEMPLATE_CODE_CONF.POPULAR_SHOW: {
+              return (
+                <PopularShow
+                  key={el.shptmApphmDspyOptCd}
+                  spotlightId={el.shptmApphmDspyOptCd}
+                  handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
+                />
+              );
+            }
+            case TEMPLATE_CODE_CONF.BEST_SELLER: {
+              return (
+                <BestSeller
+                  key={el.shptmApphmDspyOptCd}
+                  spotlightId={el.shptmApphmDspyOptCd}
+                  handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
+                />
+              );
            }
-          case TEMPLATE_CODE_CONF.CATEGORY_ITEM:{
-            return (
-              <SubCategory
-                key={el.shptmApphmDspyOptCd}
-                spotlightId={el.shptmApphmDspyOptCd}
-                catCd={cateCd}
-                cateNm={cateNm}
-                handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
-              />
-            )
          }
-          case TEMPLATE_CODE_CONF.ON_SALE:{
-            return (
-              <HomeOnSale
-                key={el.shptmApphmDspyOptCd}
-                spotlightId={el.shptmApphmDspyOptCd}
-                handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
-              />
-            )
-          }
-          case TEMPLATE_CODE_CONF.POPULAR_SHOW:{
-            return (
-              <PopularShow
-                key={el.shptmApphmDspyOptCd}
-                spotlightId={el.shptmApphmDspyOptCd}
-                handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
-              />
-            )
-          }
-          case TEMPLATE_CODE_CONF.BEST_SELLER:{
-            return (
-              <BestSeller
-                key={el.shptmApphmDspyOptCd}
-                spotlightId={el.shptmApphmDspyOptCd}
-                handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
-              />
-            )
-          }
-          }
-        })
-      }
-      <TButton
-        className={css.tButton}
-        onClick={handleTopButtonClick}
-        size={null}
-        type={TYPES.topButton}
-        spotlightId={"home-top-btn"}
-        spotlightDisabled={btnDisabled}
-        aria-label="Move to Top, Button"
-      />
-    </>
+        })}
+        <TButton
+          className={css.tButton}
+          onClick={handleTopButtonClick}
+          size={null}
+          type={TYPES.topButton}
+          spotlightId={"home-top-btn"}
+          spotlightDisabled={btnDisabled}
+          aria-label="Move to Top, Button"
+        />
+      </>
    );
-  },[sortedHomeLayoutInfo, selectTemplate, cateCd,cateNm, handleItemFocus, handleTopButtonClick, btnDisabled]);
+  }, [
+    sortedHomeLayoutInfo,
+    selectTemplate,
+    cateCd,
+    cateNm,
+    handleItemFocus,
+    handleTopButtonClick,
+    btnDisabled,
+  ]);

  const onScrollStatusChanged = useCallback((status) => {
-    if(status === 'end'){
+    if (status === "end") {
      setArrowBottom(false);
-    }else{
+    } else {
      setArrowBottom(true);
    }
  }, []);
-  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);
-        }
+  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);
-      }, 0);
-    } else if(!firstSpot){
-      setBtnDisabled(false);
-    }
-  }, [homeSpotlight, firstSpot]);
+      }
+    },
+    [homeSpotlight, firstSpot]
+  );

  return (
    <>
@@ -383,13 +406,14 @@ export default function HomePanel({ isOnTop }) {
          >
            <TVerticalPagenator
              className={css.tVerticalPagenator}
-              spotlightId={'home_verticalPagenator'}
+              spotlightId={"home_verticalPagenator"}
              defaultContainerId={homeSpotlight?.focusedContainerId}
              disabled={!isOnTop}
              onScrollStatusChanged={onScrollStatusChanged}
              onFocusedContainerId={onFocusedContainerId}
              cbChangePageRef={cbChangePageRef}
-              topMargin={36}>
+              topMargin={36}
+            >
              {renderPageItem()}
            </TVerticalPagenator>
          </TBody>
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
@@ -56,8 +56,6 @@ const SubCategory = ({

  const { sendLogCuration } = useLogService();

-
-
  const { getScrollTo, scrollLeft } = useScrollTo();

  const { handleScrollReset, handleStopScrolling } = useScrollReset(
@@ -66,7 +64,7 @@ const SubCategory = ({
  );

  const categoryInfos = useSelector(
-    (state) => state.onSale.onSaleData?.data.categoryInfos
+    (state) => state.onSale.homeOnSaleData?.data.categoryInfos
  );

  const categoryItemInfos = useSelector(
@@ -209,12 +207,7 @@ const SubCategory = ({
        return;
      }
    },
-    [
-      cursorVisible,
-      _handleItemFocus,
-      handleScrollReset,
-      scrollTopBody
-    ]
+    [cursorVisible, _handleItemFocus, handleScrollReset, scrollTopBody]
  );

  const handleScrollRight = (e) => {
@@ -231,7 +224,11 @@ const SubCategory = ({
    }
  }, [handleItemFocus]);
  return (
-    <Container style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
+    <Container
+      style={orderStyle}
+      spotlightId={spotlightId}
+      data-wheel-point={true}
+    >
      <ContainerBasic>
        <CategoryNav
          categoryInfos={categoryInfos}
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
@@ -79,7 +79,7 @@ export default function OnSalePanel({ panelInfo }) {
        props = { ...props, lgCatCd: panelInfo?.lgCatCd };
      }

-      dispatch(getOnSaleInfo(props, true));
+      dispatch(getOnSaleInfo(props));
      setIsInitialRendered(false);
    }
  }, [
@@ -126,7 +126,7 @@ export default function OnSalePanel({ panelInfo }) {
      // );

      dispatch(
-        getOnSaleInfo({ lgCatCd: selectedLgCatCd, saleInfosIncFlag: "Y" }, true)
+        getOnSaleInfo({ lgCatCd: selectedLgCatCd, saleInfosIncFlag: "Y" })
      );
    }
  }, [dispatch, selectedLgCatCd]);
@@ -197,7 +197,7 @@ export default function OnSalePanel({ panelInfo }) {
    isReadyForInitialFocusTarget,
    panelInfo,
    previousPanelIsDetail,
-    previousPanelIsHome
+    previousPanelIsHome,
  ]);

  useEffect(() => {
@@ -286,7 +286,7 @@ export default function OnSalePanel({ panelInfo }) {
  }, [dispatch]);

  const handleTopButtonClick = useCallback(() => {
-    if(cbChangePageRef.current){
+    if (cbChangePageRef.current) {
      cbChangePageRef.current(0, true, true);
    }
    if (!firstFocusableTarget) {
@@ -328,40 +328,41 @@ export default function OnSalePanel({ panelInfo }) {
          />

          <TBody className={css.tBody} scrollable={false}>
-            {saleInfos &&
-            <TVerticalPagenator
-              className={css.tVerticalPagenator}
-              spotlightId={'onSale_verticalPagenator'}
-              enableFocusAction={false}
-              defaultContainerId={panelInfo?.focusedContainerId}
-              onFocusedContainerId={onFocusedContainerId}
-              cbChangePageRef={cbChangePageRef}
-              topMargin={36}>
-                  <>
-                    {saleInfos.map(
-                      ({ saleNm, saleProductInfos }, contentsIndex) => (
-                        <OnSaleContents
-                          contentsIndex={contentsIndex}
-                          isTopButtonClicked={isTopButtonClicked}
-                          key={"sale-info-" + contentsIndex}
-                          spotlightId={"sale-info-" + contentsIndex}
-                          saleNm={saleNm}
-                          saleProductInfos={saleProductInfos}
-                          selectedLgCatCd={selectedLgCatCd}
-                        />
-                      )
-                    )}
-                    {saleInfos.length > 1 && (
-                      <TButton
-                        onClick={handleTopButtonClick}
-                        size={null}
-                        type={TYPES.topButton}
-                        ariaLabel="Move to Top"
+            {saleInfos && (
+              <TVerticalPagenator
+                className={css.tVerticalPagenator}
+                spotlightId={"onSale_verticalPagenator"}
+                enableFocusAction={false}
+                defaultContainerId={panelInfo?.focusedContainerId}
+                onFocusedContainerId={onFocusedContainerId}
+                cbChangePageRef={cbChangePageRef}
+                topMargin={36}
+              >
+                <>
+                  {saleInfos.map(
+                    ({ saleNm, saleProductInfos }, contentsIndex) => (
+                      <OnSaleContents
+                        contentsIndex={contentsIndex}
+                        isTopButtonClicked={isTopButtonClicked}
+                        key={"sale-info-" + contentsIndex}
+                        spotlightId={"sale-info-" + contentsIndex}
+                        saleNm={saleNm}
+                        saleProductInfos={saleProductInfos}
+                        selectedLgCatCd={selectedLgCatCd}
                      />
-                    )}
-                  </>
-            </TVerticalPagenator>
-          }
+                    )
+                  )}
+                  {saleInfos.length > 1 && (
+                    <TButton
+                      onClick={handleTopButtonClick}
+                      size={null}
+                      type={TYPES.topButton}
+                      ariaLabel="Move to Top"
+                    />
+                  )}
+                </>
+              </TVerticalPagenator>
+            )}
          </TBody>
        </>
      )}