[No Jira Issue] IF-LGSP-LOG-005 (GNB 이력) Magic Mouse 대응 (TrendingNowPanel 1차)

1. deepLinkHandler.js 2. SpotlightIds.js 3. BestSeller.jsx 4. PopularShow.jsx 5. TrendingNowPanel.jsx 6. PopularShowIndicator.jsx 7. PopularProductList.jsx 8. PopularVideoCard.jsx
2024-11-13 18:02:50 +09:00
parent f9cf2b3f30
commit 18f4e2dafc
8 changed files with 270 additions and 321 deletions
--- a/com.twin.app.shoptime/src/App/deepLinkHandler.js
+++ b/com.twin.app.shoptime/src/App/deepLinkHandler.js
@@ -184,6 +184,9 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
          // "PS": Popular Shows
          // V3_진입경로코드_진입경로명_PS_노출순번
          panelName = panel_names.TRENDING_NOW_PANEL;
+          panelInfo = {
+            pageName: "PS",
+          };
          break;

        case "SC":
--- a/com.twin.app.shoptime/src/utils/SpotlightIds.js
+++ b/com.twin.app.shoptime/src/utils/SpotlightIds.js
@@ -13,6 +13,16 @@ export const SpotlightIds = {
  BRAND_QUICK_MENU: "brandQuickMenu",
  BRAND_TOP_BUTTON: "brandTopButton",

+  // TrendingNowPanel
+  TRENDING_NOW_VERTICAL_PAGINATOR: "trendingNowVerticalPaginator",
+  TRENDING_NOW_POPULAR_SHOW: "trendingNowPopularShow",
+  TRENDING_NOW_POPULAR_VIDEO: "trendingNowPopularVideo",
+  TRENDING_NOW_POPULAR_GRID_LIST: "trendingNowVirtualGridList",
+  TRENDING_NOW_PREV_INDICATOR: "trendingNowPrevIndicator",
+  TRENDING_NOW_NEXT_INDICATOR: "trendingNowNextIndicator",
+  TRENDING_NOW_BEST_SELLER: "trendingNowBestSeller",
+  TRENDING_NOW_TOP_BUTTON: "trendingNowTopButton",
+
  // myPagePanel
  MY_PAGE_FAVORITES_BOX: "myPageFavoritesBox",
  MY_PAGE_REMINDRES_BOX: "myPageRemindresBox",
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
@@ -14,6 +14,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import { panel_names } from "../../../utils/Config";
 import { $L, scaleW } from "../../../utils/helperMethods";
+import { SpotlightIds } from "../../../utils/SpotlightIds";
 import css from "./BestSeller.module.less";

 const SpottableComponent = Spottable("div");
@@ -64,7 +65,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
        name: panel_names.TRENDING_NOW_PANEL,
        panelInfo: {
          pageName: "BS",
-          focusedContainerId: "trandingnow_bestseller",
+          focusedContainerId: SpotlightIds.TRENDING_NOW_BEST_SELLER,
        },
      })
    );
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
@@ -18,6 +18,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import { panel_names } from "../../../utils/Config";
 import { $L, scaleW } from "../../../utils/helperMethods";
+import { SpotlightIds } from "../../../utils/SpotlightIds";
 import css from "../PopularShow/PopularShow.module.less";

 const SpottableComponent = Spottable("div");
@@ -79,7 +80,7 @@ const PopularShow = ({
          name: panel_names.TRENDING_NOW_PANEL,
          panelInfo: {
            pageName: "PS",
-            focusedContainerId: "trandingnow_popularcontainer",
+            focusedContainerId: SpotlightIds.TRENDING_NOW_POPULAR_SHOW,
          },
        },
        [dispatch]
--- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx
+++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx
@@ -1,28 +1,27 @@
-import React, { useCallback, useState } from "react";
+import React, { memo, useCallback } from "react";

-import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

 import { LOG_MENU } from "../../../utils/Config";
+import { SpotlightIds } from "../../../utils/SpotlightIds";
 import css from "./PopularShowIndicator.module.less";
 import PopularProductList from "./PopularShowVerticalContents/PopularProductList";
 import PopularVideoCard from "./PopularVideoCard/PopularVideoCard";

 const Container = SpotlightContainerDecorator(
-  {
-    enterTo: "last-focused",
-  },
+  { enterTo: "last-focused" },
  "div"
 );

-export default function PopularShowIndicator({
-  onSpotlightDown,
+const PopularShowIndicator = ({
  topInfos,
  selectedIndex,
+  onSpotlightDown,
+  onSpotlightRight,
  handleItemFocus,
  handleItemClick,
  isOnTop,
-}) {
+}) => {
  const {
    thumbnailUrl960,
    showNm,
@@ -41,10 +40,6 @@ export default function PopularShowIndicator({

  const isVertical = Boolean(vtctpYn === "Y");

-  const onSpotlightRight = () => {
-    Spotlight.focus("popular-next-arrow");
-  };
-
  const _handleItemFocus = useCallback(() => {
    if (handleItemFocus) {
      handleItemFocus(LOG_MENU.TRENDING_NOW_POPULAR_SHOWS);
@@ -59,7 +54,6 @@ export default function PopularShowIndicator({

  return (
    <div className={css.popularContainer}>
-      {topInfos && topInfos.length > 0 && (
      <div className={css.popularContents}>
        <Container>
          <PopularVideoCard
@@ -72,7 +66,7 @@ export default function PopularShowIndicator({
            isVertical={isVertical}
            popularShowInfos={topInfos[selectedIndex]}
            showUrl={showUrl}
-              spotlightId="popular_video"
+            spotlightId={SpotlightIds.TRENDING_NOW_POPULAR_VIDEO}
            onSpotlightDown={onSpotlightDown}
            showId={showId}
            patnrId={patnrId}
@@ -98,7 +92,8 @@ export default function PopularShowIndicator({
          />
        </Container>
      </div>
-      )}
    </div>
  );
-}
+};
+
+export default memo(PopularShowIndicator);
--- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowVerticalContents/PopularProductList.jsx
+++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowVerticalContents/PopularProductList.jsx
@@ -12,6 +12,7 @@ import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGr
 import useScrollTo from "../../../../hooks/useScrollTo";
 import { panel_names } from "../../../../utils/Config";
 import { scaleH } from "../../../../utils/helperMethods";
+import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import css from "./PopularProductList.module.less";

 export default function PopularProductList({
@@ -131,7 +132,7 @@ export default function PopularProductList({
          spacing={12}
          renderItem={renderItem}
          noScrollByWheel={false}
-          spotlightId="popular-productList"
+          spotlightId={SpotlightIds.TRENDING_NOW_POPULAR_GRID_LIST}
        />
      )}
    </div>
--- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx
+++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx
@@ -11,9 +11,11 @@ import { Marquee } from "@enact/ui/Marquee";
 import ic_crown from "../../../../../assets/images/icons/ic-crown-badge@3x.png";
 import ic_warning from "../../../../../assets/images/icons/ic-warning@3x.png";
 import ic_call from "../../../../../assets/images/icons/ic-wh-call@3x.png";
-import { finishVideoPreview, startVideoPlayer } from "../../../../actions/playActions";
+import {
+  finishVideoPreview,
+  startVideoPlayer,
+} from "../../../../actions/playActions";
 import CustomImage from "../../../../components/CustomImage/CustomImage";
-import { $L } from "../../../../utils/helperMethods";
 import css from "./PopularVideoCard.module.less";

 const SpottableComponent = Spottable("div");
@@ -52,7 +54,9 @@ export default function PopularVideoCard({
  const videoFocusTimeoutJob = useRef(new Job((func) => func(), 1000));
  const isFullScreenModeActivedRef = useRef(false);

-  const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
+  const cursorVisible = useSelector(
+    (state) => state.common.appStatus.cursorVisible
+  );

  useEffect(() => {
    if (isFullScreenModeActivedRef.current && isOnTop) {
@@ -91,7 +95,6 @@ export default function PopularVideoCard({
    }
  }, [isFocused, dispatch, showId]);

-  // 포커스 인
  const onFocus = useCallback(() => {
    setIsFocused(true);
    if (handleItemFocus) {
@@ -99,12 +102,10 @@ export default function PopularVideoCard({
    }
  }, [handleItemFocus]);

-  // 포커스 아웃
  const onBlur = useCallback(() => {
    setIsFocused(false);
  }, []);

-  // 비디오 클릭
  const onClick = useCallback(() => {
    setIsFocused(false);

@@ -148,7 +149,14 @@ export default function PopularVideoCard({
      aria-label={"SHOW " + showNm}
    >
      <figure className={css[thumbnailType]}>
-        {thumbnailImgPath && <CustomImage delay={0} src={thumbnailImgPath} animationSpeed="fast" alt={showNm} />}
+        {thumbnailImgPath && (
+          <CustomImage
+            delay={0}
+            src={thumbnailImgPath}
+            animationSpeed="fast"
+            alt={showNm}
+          />
+        )}
      </figure>
      <div className={classNames(css.videoDesc, isFocused && css.descFocused)}>
        <div>
--- a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx
+++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx
@@ -1,34 +1,28 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";

 import classNames from "classnames";
 import { useDispatch } from "react-redux";

 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import {
-  notifyEnterContainer,
-  setContainerLastFocusedElement,
-} from "@enact/spotlight/src/container";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";

 import { sendLogGNB } from "../../actions/logActions";
 import { getTop20Show } from "../../actions/mainActions";
-import { popPanel, pushPanel, updatePanel } from "../../actions/panelActions";
+import { pushPanel, updatePanel } from "../../actions/panelActions";
 import { finishVideoPreview } from "../../actions/playActions";
 import { getBestSeller } from "../../actions/productActions";
 import SectionTitle from "../../components/SectionTitle/SectionTitle";
 import TBody from "../../components/TBody/TBody";
 import TButton, { TYPES } from "../../components/TButton/TButton";
-import TItemCard, {
-  removeDotAndColon,
-} from "../../components/TItemCard/TItemCard";
+import TItemCard from "../../components/TItemCard/TItemCard";
 import TPanel from "../../components/TPanel/TPanel";
 import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
 import usePrevious from "../../hooks/usePrevious";
-import useScrollReset from "../../hooks/useScrollReset";
-import useScrollTo from "../../hooks/useScrollTo";
 import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";
 import { LOG_MENU, panel_names } from "../../utils/Config";
-import { $L, scaleH } from "../../utils/helperMethods";
+import { $L } from "../../utils/helperMethods";
+import { SpotlightIds } from "../../utils/SpotlightIds";
 import PopularShowIndicator from "./PopularShow/PopularShowIndicator";
 import css from "./TrendingNowPanel.module.less";

@@ -44,6 +38,7 @@ const STRING_CONF = {
  POPULAR_SHOW: "POPULAR SHOW",
  BEST_SELLER: "BEST SELLER",
 };
+
 const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
  const dispatch = useDispatch();
  const { USE_SELECTOR, USE_STATE } = useWhyDidYouUpdate(spotlightId, {
@@ -51,50 +46,109 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
    isOnTop,
    ...rest,
  });
+
  const topInfos = USE_SELECTOR(
    "topInfos",
    (state) => state.main.top20ShowData?.topInfos
  );
-  const bestSellerDatas = USE_SELECTOR(
-    "bestSellerDatas",
+  const bestSeller = USE_SELECTOR(
+    "bestSeller",
    (state) => state.product?.bestSellerData?.bestSeller
  );

-  const {
-    getScrollTo: getScrollToBody,
-    scrollTop: scrollTopBody,
-    scrollLeft,
-  } = useScrollTo();
-
-  const { handleScrollReset, handleStopScrolling } = useScrollReset(
-    scrollLeft,
-    true
-  );
-
-  const [targetId, setTargetId] = USE_STATE("targetId", null);
-  const [firstChk, setFirstChk] = USE_STATE("firstChk", false);
  const [showButton, setShowButton] = USE_STATE("showButton", true);
-  const timerRef = useRef();
-  const { cursorVisible } = USE_SELECTOR(
-    "cursorVisible",
-    (state) => state.common.appStatus
-  );
  const [selectedIndex, setSelectedIndex] = USE_STATE("selectedIndex", 0);
+
  const cbChangePageRef = useRef(null);
+  const isInitialRef = useRef(true);
  const focusedContainerIdRef = useRef(panelInfo?.focusedContainerId);

-  const handleCardClick = useCallback(
-    (item) => {
-      const c = Spotlight.getCurrent();
-      let targetSpotlightId = null;
-      if (c) {
-        targetSpotlightId = c.getAttribute("data-spotlight-id");
+  useEffect(() => {
+    if (!topInfos) dispatch(getTop20Show());
+    if (!bestSeller) dispatch(getBestSeller());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isInitialRef.current && !panelInfo?.currentSpot) {
+      if (topInfos && bestSeller) {
+        const target =
+          panelInfo?.pageName === "BS"
+            ? SpotlightIds.TRENDING_NOW_BEST_SELLER
+            : SpotlightIds.TRENDING_NOW_POPULAR_SHOW;
+
+        Spotlight.focus(target);
+        isInitialRef.current = false;
      }
+    }
+  }, [topInfos, bestSeller]);
+
+  useEffect(() => {
+    if (panelInfo?.currentSpot) Spotlight.focus(panelInfo.currentSpot);
+  }, [panelInfo?.currentSpot]);
+
+  useEffect(() => {
+    if (panelInfo?.selectedIndex) setSelectedIndex(panelInfo.selectedIndex);
+  }, [panelInfo?.selectedIndex]);
+
+  useEffect(() => {
+    if (isOnTop && panelInfo?.focusedContainerId) {
+      const menu =
+        panelInfo?.focusedContainerId === SpotlightIds.TRENDING_NOW_POPULAR_SHOW
+          ? LOG_MENU.TRENDING_NOW_POPULAR_SHOWS
+          : LOG_MENU.TRENDING_NOW_BEST_SELLER;
+
+      dispatch(sendLogGNB(menu));
+    }
+  }, [isOnTop && panelInfo?.focusedContainerId]);
+
+  const onFocusedContainerId = useCallback((containerId) => {
+    focusedContainerIdRef.current = containerId;
+  }, []);
+
+  const handleScroll = useCallback((e) => {
+    setShowButton(e.scrollTop === 0);
+    if (e.scrollTop !== 0) dispatch(finishVideoPreview());
+  }, []);
+
+  const handleSpotlight = useCallback(
+    (spotlightId) => (e) => {
+      e.stopPropagation();
+      if (spotlightId) Spotlight.focus(spotlightId);
+    },
+    []
+  );
+
+  const handleIndicatorClick = useCallback(
+    (direction) => () => {
+      if (!topInfos) return;
+
+      const isPrev = direction === "prev";
+      const isNext = direction === "next";
+      const isEdgeIndex =
+        (isPrev && selectedIndex === 1) ||
+        (isNext && selectedIndex === topInfos.length - 2);
+
+      if (isEdgeIndex) Spotlight.focus(SpotlightIds.TRENDING_NOW_POPULAR_VIDEO);
+
+      setSelectedIndex((prev) => prev + (isPrev ? -1 : isNext ? 1 : 0));
+      setContainerLastFocusedElement(null, [
+        SpotlightIds.TRENDING_NOW_POPULAR_GRID_LIST,
+      ]);
+    },
+    [selectedIndex, topInfos]
+  );
+
+  const handleBestSellerClick = useCallback(
+    ({ patnrId, prdtId }) =>
+      () => {
+        const currentSpot =
+          Spotlight.getCurrent()?.getAttribute("data-spotlight-id") || null;
+
        dispatch(
          updatePanel({
            name: panel_names.TRENDING_NOW_PANEL,
            panelInfo: {
-            currentSpot: targetSpotlightId,
+              currentSpot,
              focusedContainerId: focusedContainerIdRef.current,
              selectedIndex,
            },
@@ -104,196 +158,80 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
        dispatch(
          pushPanel({
            name: panel_names.DETAIL_PANEL,
-          panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
+            panelInfo: { patnrId, prdtId },
          })
        );
      },
-    [dispatch, selectedIndex]
-  );
-
-  useEffect(() => {
-    if (!topInfos && !bestSellerDatas) {
-      dispatch(getTop20Show());
-      dispatch(getBestSeller());
-    }
-  }, [dispatch]);
-
-  const handlePrevClick = useCallback(() => {
-    if (topInfos) {
-      if (selectedIndex > 0) {
-        setSelectedIndex((prev) => prev - 1);
-        setContainerLastFocusedElement(null, ["popular-productList"]);
-        if (selectedIndex === 1) {
-          Spotlight.focus("popular_video");
-        }
-      }
-    }
-  }, [selectedIndex, topInfos]);
-
-  const handleNextClick = useCallback(() => {
-    if (topInfos) {
-      if (selectedIndex < topInfos.length - 1) {
-        setSelectedIndex((prev) => prev + 1);
-        setContainerLastFocusedElement(null, ["popular-productList"]);
-        if (selectedIndex === topInfos.length - 2) {
-          Spotlight.focus("popular_video");
-        }
-      }
-    }
-  }, [selectedIndex, topInfos]);
-
-  const indicatorLeftonSpotlight = useCallback(
-    (e) => {
-      e.stopPropagation();
-      Spotlight.focus("popular_video");
-    },
    [selectedIndex]
  );

-  const _onScroll = (e) => {
-    if (e.scrollTop !== 0) {
-      dispatch(finishVideoPreview());
-      setShowButton(false);
-    } else {
-      setShowButton(true);
-    }
-  };
+  const handleBestSellerFocus = useCallback(() => {
+    handleItemFocus(LOG_MENU.TRENDING_NOW_BEST_SELLER);
+  }, [handleItemFocus]);

-  useEffect(() => {
-    if (panelInfo.currentSpot) {
-      setTargetId(panelInfo.currentSpot);
-    }
-  }, [panelInfo]);
+  const handleItemClick = useCallback(() => {
+    const currentSpot =
+      Spotlight.getCurrent()?.getAttribute("data-spotlight-id") || null;

-  useEffect(() => {
-    if (isOnTop) {
-      timerRef.current = setTimeout(() => {
-        Spotlight.focus(targetId);
-      }, 0);
-    }
-    return () => clearTimeout(timerRef.current);
-  }, [targetId]);
+    dispatch(
+      updatePanel({
+        name: panel_names.TRENDING_NOW_PANEL,
+        panelInfo: {
+          currentSpot,
+          focusedContainerId: focusedContainerIdRef.current,
+          selectedIndex,
+        },
+      })
+    );
+  }, [selectedIndex]);
+
+  const handleItemFocus = useCallback((nowMenu) => {
+    setTimeout(() => dispatch(sendLogGNB(nowMenu)));
+  }, []);

  const handleTopButtonClick = useCallback(() => {
    if (cbChangePageRef.current) {
      cbChangePageRef.current(0, true);
    }

-    if (topInfos && topInfos.length > 0) {
-      Spotlight.focus("popular_video");
-    } else {
-      if (bestSellerDatas && bestSellerDatas.length > 0) {
-        Spotlight.focus(
-          "bs-spotlightId-" + removeDotAndColon(bestSellerDatas[0]?.prdtId)
-        );
-      } else return;
+    let target = SpotlightIds.TRENDING_NOW_POPULAR_VIDEO;
+
+    if (!topInfos && bestSeller && bestSeller.length > 0) {
+      target = SpotlightIds.TRENDING_NOW_BEST_SELLER;
    }

-    setContainerLastFocusedElement(null, ["trandingnow_bestseller"]);
-  }, [targetId, bestSellerDatas, topInfos]);
-
-  useEffect(() => {
-    if (panelInfo.currentSpot) {
-      Spotlight.focus(panelInfo.currentSpot);
-    }
-  }, [panelInfo?.currentSpot]);
-
-  useEffect(() => {
-    if (topInfos && bestSellerDatas) {
-      if (panelInfo?.pageName === "BS") {
-        if (panelInfo?.linkTpCd) {
-          Spotlight.focus("trandingnow_bestseller");
-        } else {
-          Spotlight.focus(panelInfo?.focusedContainerId);
-        }
-      } else {
-        if (!firstChk && !panelInfo.currentSpot) {
-          Spotlight.focus("popular_video");
-          setFirstChk(true);
-        }
-      }
-    }
-  }, [
-    firstChk,
-    topInfos,
-    bestSellerDatas,
-    panelInfo?.focusedContainerId,
-    panelInfo.currentSpot,
-    panelInfo?.pageName,
-    panelInfo?.linkTpCd,
+    Spotlight.focus(target);
+    setContainerLastFocusedElement(null, [
+      SpotlightIds.TRENDING_NOW_BEST_SELLER,
    ]);
+  }, [bestSeller, topInfos]);

-  const onItemSpotlightDown = useCallback((e) => {
-    e.stopPropagation();
-    Spotlight.focus("trandingnow_bestseller");
-  }, []);
-
-  const handleBlur = useCallback((itemIndex) => {
-    if (itemIndex === 0) {
-      handleStopScrolling();
+  const getFirstLabel = useCallback((rankOrder) => {
+    switch (rankOrder) {
+      case 1:
+        return `${rankOrder}st,`;
+      case 2:
+        return `${rankOrder}nd,`;
+      case 3:
+        return `${rankOrder}rd,`;
+      default:
+        return `${rankOrder}th,`;
    }
  }, []);

-  const handleFocus = useCallback(
-    (index) => () => {
-      handleItemFocus(LOG_MENU.TRENDING_NOW_BEST_SELLER);
-
-      if (cursorVisible) {
-        return;
-      }
-    },
-    [cursorVisible, handleItemFocus]
-  );
-
-  const handleSpotlightRight = useCallback((e) => {
-    e.stopPropagation();
-    Spotlight.focus("spotlightId-trendingNowTopBtn");
-  }, []);
-
-  const handleItemFocus = useCallback((nowMenu) => {
-    setTimeout(() => dispatch(sendLogGNB(nowMenu)));
-  }, []);
-
-  const handleItemClick = useCallback(
-    (e) => {
-      const c = Spotlight.getCurrent();
-      let targetSpotlightId = null;
-      if (c) {
-        targetSpotlightId = c.getAttribute("data-spotlight-id");
-      }
-      dispatch(
-        updatePanel({
-          name: panel_names.TRENDING_NOW_PANEL,
-          panelInfo: {
-            currentSpot: targetSpotlightId,
-            focusedContainerId: focusedContainerIdRef.current,
-            selectedIndex,
-          },
-        })
-      );
-    },
-    [selectedIndex]
-  );
-
-  const onFocusedContainerId = useCallback((containerId) => {
-    focusedContainerIdRef.current = containerId;
-  }, []);
-
-  useEffect(() => {
-    if (panelInfo && panelInfo?.selectedIndex) {
-      setSelectedIndex(panelInfo?.selectedIndex);
-    }
-  }, [panelInfo?.selectedIndex]);
-
  return (
    <div className={css.trendingNowWrap}>
      {selectedIndex >= 1 && showButton && (
        <TButton
          className={classNames(css.button, css.prevBtn)}
-          onClick={handlePrevClick}
-          spotlightId="popular-prev-arrow"
-          onSpotlightRight={indicatorLeftonSpotlight}
-          onSpotlightDown={onItemSpotlightDown}
+          onClick={handleIndicatorClick("prev")}
+          onSpotlightRight={handleSpotlight(
+            SpotlightIds.TRENDING_NOW_POPULAR_VIDEO
+          )}
+          onSpotlightDown={handleSpotlight(
+            SpotlightIds.TRENDING_NOW_BEST_SELLER
+          )}
+          spotlightId={SpotlightIds.TRENDING_NOW_PREV_INDICATOR}
          ariaLabel="Move to left Button"
        />
      )}
@@ -305,9 +243,9 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
        >
          <TVerticalPagenator
            className={css.tVerticalPagenator}
-            spotlightId={"trandingnow_verticalPagenator"}
+            spotlightId={SpotlightIds.TRENDING_NOW_VERTICAL_PAGINATOR}
            defaultContainerId={panelInfo?.focusedContainerId}
-            onScroll={_onScroll}
+            onScroll={handleScroll}
            onFocusedContainerId={onFocusedContainerId}
            cbChangePageRef={cbChangePageRef}
            topMargin={36}
@@ -315,7 +253,7 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
            {topInfos && topInfos?.length > 0 && (
              <Container
                className={css.popularContainer}
-                spotlightId={"trandingnow_popularcontainer"}
+                spotlightId={SpotlightIds.TRENDING_NOW_POPULAR_SHOW}
                data-wheel-point={true}
              >
                <SectionTitle
@@ -323,72 +261,62 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
                  label="POPULAR SHOW, Heading1"
                />
                <PopularShowIndicator
-                  onSpotlightDown={onItemSpotlightDown}
                  topInfos={topInfos}
                  selectedIndex={selectedIndex}
+                  onSpotlightDown={handleSpotlight(
+                    SpotlightIds.TRENDING_NOW_BEST_SELLER
+                  )}
+                  onSpotlightRight={handleSpotlight(
+                    SpotlightIds.TRENDING_NOW_NEXT_INDICATOR
+                  )}
                  handleItemFocus={handleItemFocus}
                  handleItemClick={handleItemClick}
                  isOnTop={isOnTop}
                />
              </Container>
            )}
-            {bestSellerDatas && bestSellerDatas?.length > 0 && (
+            {bestSeller && bestSeller?.length > 0 && (
              <BestSellerContainer
                className={css.bestContainer}
-                spotlightId={"trandingnow_bestseller"}
-                data-wheel-point={true}
+                spotlightId={SpotlightIds.TRENDING_NOW_BEST_SELLER}
+                data-wheel-point
              >
                <SectionTitle
                  title={$L(STRING_CONF.BEST_SELLER)}
                  data-title-index="TNBestSellerTitle"
                />
                <div className={css.itemList}>
-                  {bestSellerDatas.map((item, index) => {
-                    const rankText =
-                      item.rankOrd === 1
-                        ? item.rankOrd + "st,"
-                        : item.rankOrd === 2
-                        ? item.rankOrd + "nd,"
-                        : item.rankOrd === 3
-                        ? item.rankOrd + "rd,"
-                        : item.rankOrd + "th,";
-                    return (
+                  {bestSeller.map((item, index) => (
                    <TItemCard
                      key={item.prdtId}
                      imageAlt={item.prdtId}
                      imageSource={item.imgUrl}
                      priceInfo={item.priceInfo}
                      productName={item.prdtNm}
-                        isBestSeller={true}
+                      isBestSeller
                      rank={item.rankOrd}
-                        onFocus={handleFocus(index)}
-                        onBlur={() => handleBlur(index)}
-                        onClick={() => handleCardClick(item)}
+                      onFocus={handleBestSellerFocus}
+                      onClick={handleBestSellerClick(item)}
                      offerInfo={item.offerInfo}
                      productId={item.prdtId}
-                        firstLabel={rankText}
-                        label={index * 1 + 1 + " of " + bestSellerDatas.length}
+                      firstLabel={getFirstLabel(item.rankOrd)}
+                      label={index * 1 + 1 + " of " + bestSeller.length}
                      lastLabel=" go to detail, button"
-                        spotlightId={
-                          "bs-spotlightId-" + removeDotAndColon(item.prdtId)
-                        }
                      data-wheel-point={index >= 5}
                    />
-                    );
-                  })}
+                  ))}
                </div>
              </BestSellerContainer>
            )}
            <Container>
              {((topInfos && topInfos?.length > 0) ||
-                (bestSellerDatas && bestSellerDatas?.length > 10)) && (
+                (bestSeller && bestSeller?.length > 10)) && (
                <TButton
                  onClick={handleTopButtonClick}
-                  onSpotlightRight={handleSpotlightRight}
                  size={null}
-                  spotlightId="spotlightId-trendingNowTopBtn"
+                  spotlightId={SpotlightIds.TRENDING_NOW_TOP_BUTTON}
                  ariaLabel="Move to Top Button"
-                  data-wheel-point={true}
+                  data-wheel-point
                  type={TYPES.topButton}
                />
              )}
@@ -402,9 +330,11 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
        showButton && (
          <TButton
            className={classNames(css.button, css.nextBtn)}
-            onClick={handleNextClick}
-            spotlightId="popular-next-arrow"
-            onSpotlightDown={onItemSpotlightDown}
+            onClick={handleIndicatorClick("next")}
+            onSpotlightDown={handleSpotlight(
+              SpotlightIds.TRENDING_NOW_BEST_SELLER
+            )}
+            spotlightId={SpotlightIds.TRENDING_NOW_NEXT_INDICATOR}
            ariaLabel="Move to right Button"
          />
        )}