[포유] 수정 사항들 업로드

- 홈배너부분에서 강제로 넣어주는 부분 제거.
 - 선택약관 부분 수정처리.

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

@@ -1,21 +1,41 @@
-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';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
 import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 import { getContainerId } from '@enact/spotlight/src/container';
 
 import btnPlay from '../../../../assets/images/btn/btn-play-thumb-nor.png';
-import defaultLogoImg from '../../../../assets/images/ic-tab-partners-default@3x.png';
-import emptyHorImage from '../../../../assets/images/img-home-banner-empty-hor.png';
-import emptyVerImage from '../../../../assets/images/img-home-banner-empty-ver.png';
-import defaultImageItem from '../../../../assets/images/img-thumb-empty-product@3x.png';
+import defaultLogoImg
+  from '../../../../assets/images/ic-tab-partners-default@3x.png';
+import emptyHorImage
+  from '../../../../assets/images/img-home-banner-empty-hor.png';
+import emptyVerImage
+  from '../../../../assets/images/img-home-banner-empty-ver.png';
+import defaultImageItem
+  from '../../../../assets/images/img-thumb-empty-product@3x.png';
 import liveShow from '../../../../assets/images/tag-liveshow.png';
-import { setBannerIndex, updateHomeInfo } from '../../../actions/homeActions';
-import { sendLogTopContents, sendLogTotalRecommend } from '../../../actions/logActions';
+import {
+  setBannerIndex,
+  updateHomeInfo,
+} from '../../../actions/homeActions';
+import {
+  sendLogTopContents,
+  sendLogTotalRecommend,
+} from '../../../actions/logActions';
 import { pushPanel } from '../../../actions/panelActions';
 import { startVideoPlayer } from '../../../actions/playActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
@@ -27,24 +47,31 @@ import {
   LOG_TP_NO,
   panel_names,
 } from '../../../utils/Config';
-import { $L, formatGMTString } from '../../../utils/helperMethods';
+import {
+  $L,
+  formatGMTString,
+} from '../../../utils/helperMethods';
 import { TEMPLATE_CODE_CONF } from '../HomePanel';
 import css from './RollingUnit.module.less';
 
-const SpottableComponent = Spottable('div');
+const SpottableComponent = Spottable("div");
 
-const Container = SpotlightContainerDecorator({ enterTo: 'last-focused', preserveId: true }, 'div');
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "div"
+);
 
 const LINK_TYPES = {
-  FEATURED_BRANDS: 'DSP00501',
-  TRENDING_NOW: 'DSP00502',
-  HOT_PICKS: 'DSP00503',
-  ON_SALE: 'DSP00504',
-  CATEGORY: 'DSP00505',
-  PRODUCT_DETAIL: 'DSP00506',
-  VOD: 'DSP00507',
-  SHOW_DETAIL: 'DSP00508',
-  THEME: 'DSP00509',
+  FEATURED_BRANDS: "DSP00501",
+  TRENDING_NOW: "DSP00502",
+  HOT_PICKS: "DSP00503",
+  ON_SALE: "DSP00504",
+  CATEGORY: "DSP00505",
+  PRODUCT_DETAIL: "DSP00506",
+  VOD: "DSP00507",
+  SHOW_DETAIL: "DSP00508",
+  THEME: "DSP00509",
+  JUSTFORYOU: "DSP00510",
 };
 
 const createPanelInfo = (data, categoryData = {}) => ({
@@ -69,23 +96,39 @@ export default function RollingUnit({
   videoPlayerable = false,
 }) {
   const rollingData = bannerData.bannerDetailInfos;
-  const rollingDataLength = bannerData.bannerDetailInfos.length;
 
   const dispatch = useDispatch();
 
   const { curationId, curationTitle } = useSelector((state) => state.home);
   const curtNm = useSelector((state) => state.home?.bannerData?.curtNm);
-  const shptmTmplCd = useSelector((state) => state.home?.bannerData?.shptmTmplCd);
+  const shptmTmplCd = useSelector(
+    (state) => state.home?.bannerData?.shptmTmplCd
+  );
   const nowMenu = useSelector((state) => state.common.menu.nowMenu);
   const entryMenu = useSelector((state) => state.common.menu.entryMenu);
-
-  const homeCategory = useSelector((state) => state.home.menuData?.data?.homeCategory);
+  const introTermsAgree = useSelector(
+    (state) => state.common.termsFlag.optionalTerms
+  );
+  const homeCategory = useSelector(
+    (state) => state.home.menuData?.data?.homeCategory
+  );
   const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
 
   const bannerId = `banner-${bannerData.banrLctnNo}`;
   const savedIndex = useSelector((state) => state.home.bannerIndices[bannerId]);
 
-  const [startIndex, setStartIndex] = useState(savedIndex !== undefined ? savedIndex : 0);
+  // 컴포넌트 상단에서 필터링
+  const filteredRollingData = useMemo(() => {
+    return rollingData.filter(
+      (item) => introTermsAgree === "Y" || item.shptmLnkTpCd !== "DSP00510"
+    );
+  }, [rollingData, introTermsAgree]);
+
+  // 이후 filteredRollingData 사용
+  const rollingDataLength = filteredRollingData.length;
+  const [startIndex, setStartIndex] = useState(
+    savedIndex !== undefined ? savedIndex : 0
+  );
   const lastIndexRef = useRef(rollingDataLength - 1);
   const doRollingRef = useRef(false);
   const [unitHasFocus, setUnitHasFocus] = useState(false);
@@ -107,14 +150,14 @@ export default function RollingUnit({
 
       switch (currentRollingData?.shptmBanrTpCd) {
         // case: "LIVE" or "VOD"
-        case 'DSP00301':
-        case 'DSP00302':
+        case "DSP00301":
+        case "DSP00302":
           contId = currentRollingData?.showId;
           contNm = currentRollingData?.showNm;
           break;
 
         // case: "Image Banner"
-        case 'DSP00303':
+        case "DSP00303":
           contId = currentRollingData?.shptmLnkTpCd;
           contNm = currentRollingData?.shptmLnkTpNm;
           break;
@@ -127,27 +170,27 @@ export default function RollingUnit({
       }
 
       if (
-        currentRollingData?.shptmLnkTpCd === 'DSP00503' || // "Hot Picks"
-        currentRollingData?.shptmLnkTpCd === 'DSP00509' // "Theme"
+        currentRollingData?.shptmLnkTpCd === "DSP00503" || // "Hot Picks"
+        currentRollingData?.shptmLnkTpCd === "DSP00509" // "Theme"
       ) {
-        contNm = contNm + ' | ' + currentRollingData?.lnkCurationId;
+        contNm = contNm + " | " + currentRollingData?.lnkCurationId;
       }
 
       return {
         banrNo: `${currentRollingData?.banrDpOrd}`,
         banrTpNm: currentRollingData?.vtctpYn
-          ? currentRollingData.vtctpYn === 'Y'
-            ? 'Vertical'
-            : 'Horizontal'
-          : '',
+          ? currentRollingData.vtctpYn === "Y"
+            ? "Vertical"
+            : "Horizontal"
+          : "",
         contId,
         contNm,
-        contTpNm: currentRollingData?.shptmBanrTpNm ?? '',
-        dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? '',
-        expsOrd: bannerDataRef.current?.banrLctnNo ?? '',
-        linkTpCd: '',
-        patncNm: currentRollingData?.patncNm ?? '',
-        patnrId: currentRollingData?.patnrId ?? '',
+        contTpNm: currentRollingData?.shptmBanrTpNm ?? "",
+        dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? "",
+        expsOrd: bannerDataRef.current?.banrLctnNo ?? "",
+        linkTpCd: "",
+        patncNm: currentRollingData?.patncNm ?? "",
+        patnrId: currentRollingData?.patnrId ?? "",
         tmplCd: shptmTmplCd,
       };
     }
@@ -158,17 +201,19 @@ export default function RollingUnit({
     (bannerClick) => {
       const data = rollingDataRef.current[startIndex];
       const newParams =
-        bannerData.banrLctnNo === '2'
+        bannerData.banrLctnNo === "2"
           ? {
-              bannerType: 'Horizontal',
+              bannerType: "Horizontal",
             }
           : {
-              bannerType: 'Vertical',
+              bannerType: "Vertical",
             };
       if (rollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) {
         const logParams = {
           contextName: LOG_CONTEXT_NAME.HOME,
-          messageId: bannerClick ? LOG_MESSAGE_ID.BANNER_CLICK : LOG_MESSAGE_ID.BANNER,
+          messageId: bannerClick
+            ? LOG_MESSAGE_ID.BANNER_CLICK
+            : LOG_MESSAGE_ID.BANNER,
           curationId: curationId,
           curationTitle: curationTitle,
           contentType: data.shptmBanrTpNm,
@@ -176,7 +221,7 @@ export default function RollingUnit({
           contentTitle: data.showNm,
           productId: data.prdtId,
           productTitle: data.prdtNm,
-          displayType: 'button',
+          displayType: "button",
           partner: data.patncNm,
           brand: data.brndNm,
           location: bannerData.banrLctnNo,
@@ -199,14 +244,16 @@ export default function RollingUnit({
       const deltaTime = time - previousTimeRef.current;
 
       if (deltaTime >= 10000 && doRollingRef.current) {
-        setStartIndex((prevIndex) => (prevIndex === lastIndexRef.current ? 0 : prevIndex + 1));
+        setStartIndex((prevIndex) =>
+          prevIndex === lastIndexRef.current ? 0 : prevIndex + 1
+        );
         previousTimeRef.current = time;
       }
     } else {
       previousTimeRef.current = time;
     }
 
-    if (typeof window === 'object') {
+    if (typeof window === "object") {
       requestRef.current = window.requestAnimationFrame(animate);
     }
   }, []);
@@ -244,7 +291,7 @@ export default function RollingUnit({
 
   // 인디케이터 아래키 누를시 [<]
   const prevKeyDown = (event) => {
-    if (event.key === 'ArrowDown') {
+    if (event.key === "ArrowDown") {
       setNextFocus(true);
       setContentsFocus(true);
     }
@@ -252,7 +299,7 @@ export default function RollingUnit({
 
   // 인디케이터 아래키 누를시 [>]
   const nextKeyDown = (event) => {
-    if (event.key === 'ArrowDown') {
+    if (event.key === "ArrowDown") {
       setPrevFocus(true);
       setContentsFocus(true);
     }
@@ -336,7 +383,7 @@ export default function RollingUnit({
       dispatch(
         sendLogTopContents({
           ...topContentsLogInfo,
-          inDt: formatGMTString(new Date()) ?? '',
+          inDt: formatGMTString(new Date()) ?? "",
           logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
         })
       );
@@ -346,17 +393,23 @@ export default function RollingUnit({
     switch (linkType) {
       case LINK_TYPES.FEATURED_BRANDS:
         handlePushPanel(panel_names.FEATURED_BRANDS_PANEL, {
-          from: 'gnb',
+          from: "gnb",
           patnrId: currentData.patnrId,
         });
         break;
 
       case LINK_TYPES.TRENDING_NOW:
-        handlePushPanel(panel_names.TRENDING_NOW_PANEL, createPanelInfo(currentData));
+        handlePushPanel(
+          panel_names.TRENDING_NOW_PANEL,
+          createPanelInfo(currentData)
+        );
         break;
 
       case LINK_TYPES.HOT_PICKS:
-        handlePushPanel(panel_names.HOT_PICKS_PANEL, createPanelInfo(currentData));
+        handlePushPanel(
+          panel_names.HOT_PICKS_PANEL,
+          createPanelInfo(currentData)
+        );
         break;
 
       case LINK_TYPES.ON_SALE:
@@ -367,7 +420,10 @@ export default function RollingUnit({
 
       case LINK_TYPES.CATEGORY:
         if (Object.keys(categoryData).length > 0) {
-          handlePushPanel(panel_names.CATEGORY_PANEL, createPanelInfo(currentData, categoryData));
+          handlePushPanel(
+            panel_names.CATEGORY_PANEL,
+            createPanelInfo(currentData, categoryData)
+          );
         }
         break;
 
@@ -387,7 +443,12 @@ export default function RollingUnit({
           curationId: currentData.lnkCurationId,
         });
         break;
-
+      case LINK_TYPES.JUSTFORYOU:
+        handlePushPanel(
+          panel_names.JUST_FOR_YOU_TEST_PANEL,
+          createPanelInfo(currentData)
+        );
+        break;
       default:
         return;
     }
@@ -395,7 +456,7 @@ export default function RollingUnit({
     dispatch(
       sendLogTopContents({
         ...topContentsLogInfo,
-        inDt: formatGMTString(new Date()) ?? '',
+        inDt: formatGMTString(new Date()) ?? "",
         logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
       })
     );
@@ -421,7 +482,7 @@ export default function RollingUnit({
           panelInfo: {
             lastFocusedTargetId,
             focusedContainerId: TEMPLATE_CODE_CONF.TOP,
-            currentSpot: currentSpot?.getAttribute('data-spotlight-id'),
+            currentSpot: currentSpot?.getAttribute("data-spotlight-id"),
           },
         })
       );
@@ -437,7 +498,7 @@ export default function RollingUnit({
       showUrl: currentData.showUrl,
       patnrId: currentData.patnrId,
       showId: currentData.showId,
-      shptmBanrTpNm: currentData.showId ? currentData.shptmBanrTpNm : 'MEDIA',
+      shptmBanrTpNm: currentData.showId ? currentData.shptmBanrTpNm : "MEDIA",
       lgCatCd: currentData.lgCatCd,
       chanId: currentData.brdcChnlId,
       modal: false,
@@ -449,11 +510,18 @@ export default function RollingUnit({
     dispatch(
       sendLogTopContents({
         ...topContentsLogInfo,
-        inDt: formatGMTString(new Date()) ?? '',
+        inDt: formatGMTString(new Date()) ?? "",
         logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
       })
     );
-  }, [rollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]);
+  }, [
+    rollingData,
+    startIndex,
+    bannerId,
+    dispatch,
+    handleStartVideoPlayer,
+    topContentsLogInfo,
+  ]);
 
   // 10초 롤링
   useEffect(() => {
@@ -462,20 +530,20 @@ export default function RollingUnit({
     previousTimeRef.current = undefined;
     if (rollingDataLength <= 1 || unitHasFocus) {
       doRollingRef.current = false;
-      if (typeof window === 'object') {
+      if (typeof window === "object") {
         window.cancelAnimationFrame(requestRef.current);
       }
       return;
     }
 
     doRollingRef.current = true;
-    if (typeof window === 'object') {
+    if (typeof window === "object") {
       requestRef.current = window.requestAnimationFrame(animate);
     }
 
     return () => {
       doRollingRef.current = false;
-      if (typeof window === 'object') {
+      if (typeof window === "object") {
         window.cancelAnimationFrame(requestRef.current);
       }
     };
@@ -489,7 +557,7 @@ export default function RollingUnit({
       const params = {
         ...topContentsLogInfo,
         entryMenu: _entryMenu,
-        inDt: formatGMTString(new Date()) ?? '',
+        inDt: formatGMTString(new Date()) ?? "",
         logTpNo: LOG_TP_NO.TOP_CONTENTS.VIEW,
         nowMenu: _nowMenu,
       };
@@ -515,24 +583,28 @@ export default function RollingUnit({
 
   return (
     <Container
-      className={classNames(css.rollingWrap, isHorizontal && css.isHorizontalWrap)}
+      className={classNames(
+        css.rollingWrap,
+        isHorizontal && css.isHorizontalWrap
+      )}
       spotlightId={`container-${spotlightId}`}
       onFocus={shelfFocus}
     >
-      {rollingDataLength !== 1 ? (
+      {filteredRollingData !== 1 ? (
         <SpottableComponent
           className={classNames(css.arrow, css.leftBtn)}
           onClick={handlePrev}
           onFocus={indicatorFocus}
           onBlur={indicatorBlur}
-          spotlightId={spotlightId + 'Prev'}
+          spotlightId={spotlightId + "Prev"}
           spotlightDisabled={prevFocus}
           onKeyDown={prevKeyDown}
           aria-label="Move to left Button"
         />
       ) : null}
 
-      {rollingData && rollingData[startIndex].shptmBanrTpNm === 'Image Banner' ? (
+      {filteredRollingData &&
+      filteredRollingData[startIndex].shptmBanrTpNm === "Image Banner" ? (
         <SpottableComponent
           className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
           onClick={imageBannerClick}
@@ -541,16 +613,16 @@ export default function RollingUnit({
           spotlightId={spotlightId}
           spotlightDisabled={contentsFocus}
           aria-label={
-            rollingData[startIndex].prdtNm
-              ? rollingData[startIndex].prdtNm
-              : rollingData[startIndex].tmnlImgNm
+            filteredRollingData[startIndex].prdtNm
+              ? filteredRollingData[startIndex].prdtNm
+              : filteredRollingData[startIndex].tmnlImgNm
           }
         >
           <div className={css.imgBanner}>
-            <img src={rollingData[startIndex].tmnlImgPath} />
+            <img src={filteredRollingData[startIndex].tmnlImgPath} />
           </div>
         </SpottableComponent>
-      ) : rollingData[startIndex].shptmBanrTpNm === 'LIVE' ? (
+      ) : filteredRollingData[startIndex].shptmBanrTpNm === "LIVE" ? (
         <SpottableComponent
           className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
           onClick={videoClick}
@@ -558,34 +630,52 @@ export default function RollingUnit({
           onBlur={onBlur}
           spotlightId={spotlightId}
           spotlightDisabled={contentsFocus}
-          aria-label={'LIVE ' + rollingData[startIndex].showNm}
+          aria-label={"LIVE " + filteredRollingData[startIndex].showNm}
         >
           <p className={css.liveIcon}>
-            <CustomImage delay={0} src={liveShow} animationSpeed="fast" ariaLabel="LIVE icon" />
+            <CustomImage
+              delay={0}
+              src={liveShow}
+              animationSpeed="fast"
+              ariaLabel="LIVE icon"
+            />
           </p>
 
-          <div className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}>
-            {rollingData[startIndex].tmnlImgPath == null ? (
+          <div
+            className={classNames(
+              css.itemBox,
+              isHorizontal && css.isHorizontal
+            )}
+          >
+            {filteredRollingData[startIndex].tmnlImgPath == null ? (
               <CustomImage
                 delay={0}
-                src={rollingData[startIndex].vtctpYn === 'Y' ? emptyVerImage : emptyHorImage}
-                ariaLabel={rollingData[startIndex].tmnlImgNm}
+                src={
+                  filteredRollingData[startIndex].vtctpYn === "Y"
+                    ? emptyVerImage
+                    : emptyHorImage
+                }
+                ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
                 fallbackSrc={isHorizontal ? emptyHorImage : emptyVerImage}
               />
             ) : (
               <CustomImage
                 delay={0}
-                src={rollingData[startIndex].tmnlImgPath}
-                ariaLabel={rollingData[startIndex].tmnlImgNm}
+                src={filteredRollingData[startIndex].tmnlImgPath}
+                ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
                 fallbackSrc={isHorizontal ? emptyHorImage : emptyVerImage}
               />
             )}
 
             <div className={css.btnPlay}>
-              {rollingData[startIndex].tmnlImgPath == null ? (
-                ''
+              {filteredRollingData[startIndex].tmnlImgPath == null ? (
+                ""
               ) : (
-                <CustomImage delay={0} src={btnPlay} ariaLabel="Play video Button" />
+                <CustomImage
+                  delay={0}
+                  src={btnPlay}
+                  ariaLabel="Play video Button"
+                />
               )}
             </div>
           </div>
@@ -593,14 +683,14 @@ export default function RollingUnit({
           <p className={css.brandIcon}>
             <CustomImage
               delay={0}
-              src={rollingData[startIndex].patncLogoPath}
+              src={filteredRollingData[startIndex].patncLogoPath}
               fallbackSrc={defaultLogoImg}
               animationSpeed="fast"
-              ariaLabel={rollingData[startIndex].brdcChnlId}
+              ariaLabel={filteredRollingData[startIndex].brdcChnlId}
             />
           </p>
         </SpottableComponent>
-      ) : rollingData[startIndex].shptmBanrTpNm === 'VOD' ? (
+      ) : filteredRollingData[startIndex].shptmBanrTpNm === "VOD" ? (
         <SpottableComponent
           className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
           onClick={videoClick}
@@ -608,51 +698,64 @@ export default function RollingUnit({
           onBlur={onBlur}
           spotlightId={spotlightId}
           spotlightDisabled={contentsFocus}
-          aria-label={rollingData[startIndex].showNm}
+          aria-label={filteredRollingData[startIndex].showNm}
         >
-          <div className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}>
-            {rollingData[startIndex].tmnlImgPath == null ? (
+          <div
+            className={classNames(
+              css.itemBox,
+              isHorizontal && css.isHorizontal
+            )}
+          >
+            {filteredRollingData[startIndex].tmnlImgPath == null ? (
               <CustomImage
                 delay={0}
-                src={rollingData[startIndex].vtctpYn === 'Y' ? emptyVerImage : emptyHorImage}
-                ariaLabel={rollingData[startIndex].tmnlImgNm}
+                src={
+                  filteredRollingData[startIndex].vtctpYn === "Y"
+                    ? emptyVerImage
+                    : emptyHorImage
+                }
+                ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
               />
             ) : (
               <CustomImage
                 delay={0}
-                src={rollingData[startIndex].tmnlImgPath}
-                ariaLabel={rollingData[startIndex].tmnlImgNm}
+                src={filteredRollingData[startIndex].tmnlImgPath}
+                ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
               />
             )}
 
             <div className={css.btnPlay}>
-              {rollingData[startIndex].tmnlImgPath == null ? (
-                ''
+              {filteredRollingData[startIndex].tmnlImgPath == null ? (
+                ""
               ) : (
-                <CustomImage delay={0} src={btnPlay} ariaLabel="Play video Button" />
+                <CustomImage
+                  delay={0}
+                  src={btnPlay}
+                  ariaLabel="Play video Button"
+                />
               )}
             </div>
 
-            {rollingData[startIndex]?.patncLogoPath && (
+            {filteredRollingData[startIndex]?.patncLogoPath && (
               <p className={css.brandIcon}>
                 <CustomImage
                   delay={0}
-                  src={rollingData[startIndex].patncLogoPath}
+                  src={filteredRollingData[startIndex].patncLogoPath}
                   fallbackSrc={defaultLogoImg}
                   animationSpeed="fast"
-                  ariaLabel={rollingData[startIndex].brdcChnlId}
+                  ariaLabel={filteredRollingData[startIndex].brdcChnlId}
                 />
               </p>
             )}
           </div>
         </SpottableComponent>
-      ) : rollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
+      ) : filteredRollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
         <SpottableComponent
           className={classNames(
             css.itemBox,
             css.todaysDeals,
-            countryCode === 'RU' ? css.ru : '',
-            countryCode === 'DE' ? css.de : '',
+            countryCode === "RU" ? css.ru : "",
+            countryCode === "DE" ? css.de : "",
             isHorizontal && css.isHorizontal
           )}
           onClick={imageBannerClick}
@@ -661,9 +764,9 @@ export default function RollingUnit({
           spotlightId={spotlightId}
           spotlightDisabled={contentsFocus}
           aria-label={
-            rollingData[startIndex].prdtNm
-              ? rollingData[startIndex].prdtNm
-              : rollingData[startIndex].tmnlImgNm
+            filteredRollingData[startIndex].prdtNm
+              ? filteredRollingData[startIndex].prdtNm
+              : filteredRollingData[startIndex].tmnlImgNm
           }
         >
           <div className={css.productInfo}>
@@ -671,12 +774,12 @@ export default function RollingUnit({
             <div
               className={css.textBox}
               dangerouslySetInnerHTML={{
-                __html: `${rollingData[startIndex].prdtNm}`,
+                __html: `${filteredRollingData[startIndex].prdtNm}`,
               }}
             />
             <div className={css.accBox}>
-              {parseFloat(originalPrice?.replace('$', '')) === 0
-                ? rollingData[startIndex].offerInfo
+              {parseFloat(originalPrice?.replace("$", "")) === 0
+                ? filteredRollingData[startIndex].offerInfo
                 : discountRate
                   ? discountedPrice
                   : originalPrice}
@@ -684,9 +787,10 @@ export default function RollingUnit({
                 <span className={css.saleAccBox}>{originalPrice}</span>
               )}
             </div>
-            {isHorizontal && parseFloat(originalPrice?.replace('$', '')) !== 0 && (
-              <span className={css.saleAccBox}>{originalPrice}</span>
-            )}
+            {isHorizontal &&
+              parseFloat(originalPrice?.replace("$", "")) !== 0 && (
+                <span className={css.saleAccBox}>{originalPrice}</span>
+              )}
           </div>
 
           <div className={css.itemImgBox}>
@@ -694,21 +798,21 @@ export default function RollingUnit({
               alt=""
               delay={0}
               animationSpeed="fast"
-              src={rollingData[startIndex].tmnlImgPath}
+              src={filteredRollingData[startIndex].tmnlImgPath}
               fallbackSrc={defaultImageItem}
-              ariaLabel={rollingData[startIndex].tmnlImgNm}
+              ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
             />
           </div>
         </SpottableComponent>
       ) : null}
 
-      {rollingDataLength !== 1 ? (
+      {filteredRollingData !== 1 ? (
         <SpottableComponent
           className={classNames(css.arrow, css.rightBtn)}
           onClick={handleNext}
           onFocus={indicatorFocus}
           onBlur={indicatorBlur}
-          spotlightId={spotlightId + 'Next'}
+          spotlightId={spotlightId + "Next"}
           spotlightDisabled={nextFocus}
           onKeyDown={nextKeyDown}
           aria-label="Move to right Button"