[롤링유닛 변경건]

- 선택약관 미동의시 링크가 남아 다른걸 눌러도 저스트 포유 페이지로 들어가는 문제가 발견되어 수정.

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

@@ -115,11 +115,16 @@ export default function RollingUnit({
   const previousTimeRef = useRef();
   const arrRef = useRef([]);
   const bannerDataRef = useRef(bannerData);
-  const rollingDataRef = useRef(rollingData);
+  const filteredRollingDataRef = useRef(filteredRollingData);
+
+  // filteredRollingDataRef 업데이트
+  useEffect(() => {
+    filteredRollingDataRef.current = filteredRollingData;
+  }, [filteredRollingData]);
 
   const topContentsLogInfo = useMemo(() => {
-    if (rollingDataRef.current) {
+    if (filteredRollingDataRef.current && filteredRollingDataRef.current.length > 0) {
-      const currentRollingData = rollingDataRef.current[startIndex];
+      const currentRollingData = filteredRollingDataRef.current[startIndex];
 
       let contId, contNm;
 
@@ -172,9 +177,10 @@ export default function RollingUnit({
 
     return {};
   }, [shptmTmplCd, startIndex]);
+  
   const sendBannerLog = useCallback(
     (bannerClick) => {
-      const data = rollingDataRef.current[startIndex];
+      const data = filteredRollingDataRef.current[startIndex];
       const newParams =
         bannerData.banrLctnNo === '2'
           ? {
@@ -183,7 +189,7 @@ export default function RollingUnit({
           : {
               bannerType: 'Vertical',
             };
-      if (rollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) {
+      if (filteredRollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) {
         const logParams = {
           contextName: LOG_CONTEXT_NAME.HOME,
           messageId: bannerClick ? LOG_MESSAGE_ID.BANNER_CLICK : LOG_MESSAGE_ID.BANNER,
@@ -305,12 +311,13 @@ export default function RollingUnit({
 
   const categoryData = useMemo(() => {
     if (
-      Object.keys(rollingData[startIndex]).length > 0 &&
+      filteredRollingData.length > 0 &&
-      rollingData[startIndex].shptmLnkTpCd === LINK_TYPES.CATEGORY
+      Object.keys(filteredRollingData[startIndex]).length > 0 &&
+      filteredRollingData[startIndex].shptmLnkTpCd === LINK_TYPES.CATEGORY
     ) {
       if (homeCategory && homeCategory.length > 0) {
         const foundCategory = homeCategory.find(
-          (data) => data.lgCatCd === rollingData[startIndex].lgCatCd
+          (data) => data.lgCatCd === filteredRollingData[startIndex].lgCatCd
         );
         if (foundCategory) {
           return {
@@ -321,10 +328,10 @@ export default function RollingUnit({
       }
     }
     return {};
-  }, [homeCategory, rollingData, startIndex]);
+  }, [homeCategory, filteredRollingData, startIndex]);
 
   const { originalPrice, discountedPrice, discountRate, offerInfo } =
-    usePriceInfo(rollingData[startIndex].priceInfo) || {};
+    usePriceInfo(filteredRollingData.length > 0 ? filteredRollingData[startIndex].priceInfo : {}) || {};
 
   const handlePushPanel = useCallback(
     (name, panelInfo) => {
@@ -350,10 +357,16 @@ export default function RollingUnit({
   );
 
   const imageBannerClick = useCallback(() => {
+    // 필터링된 데이터가 비어있으면 return
+    if (!filteredRollingData || filteredRollingData.length === 0) {
+      return;
+    }
+
     if (bannerId) {
       dispatch(setBannerIndex(bannerId, startIndex));
     }
-    const currentData = rollingData[startIndex];
+    
+    const currentData = filteredRollingData[startIndex];
     const linkType = currentData.shptmLnkTpCd;
     const bannerType = currentData.shptmBanrTpNm;
 
@@ -432,7 +445,7 @@ export default function RollingUnit({
       })
     );
   }, [
-    rollingData,
+    filteredRollingData,
     startIndex,
     bannerId,
     dispatch,
@@ -443,6 +456,11 @@ export default function RollingUnit({
   ]);
 
   const videoClick = useCallback(() => {
+    // 필터링된 데이터가 비어있으면 return
+    if (!filteredRollingData || filteredRollingData.length === 0) {
+      return;
+    }
+
     const lastFocusedTargetId = getContainerId(Spotlight.getCurrent());
     const currentSpot = Spotlight.getCurrent();
 
@@ -463,7 +481,7 @@ export default function RollingUnit({
       dispatch(setBannerIndex(bannerId, startIndex));
     }
 
-    const currentData = rollingData[startIndex];
+    const currentData = filteredRollingData[startIndex];
 
     handleStartVideoPlayer({
       showUrl: currentData.showUrl,
@@ -485,7 +503,7 @@ export default function RollingUnit({
         logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
       })
     );
-  }, [rollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]);
+  }, [filteredRollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]);
 
   // 10초 롤링
   useEffect(() => {
@@ -537,7 +555,7 @@ export default function RollingUnit({
 
   useEffect(() => {
     sendBannerLog();
-  }, [rollingDataRef, nowMenu, startIndex]);
+  }, [filteredRollingDataRef, nowMenu, startIndex]);
 
   useEffect(() => {
     if (nowMenu !== LOG_MENU.HOME_TOP) {
@@ -551,7 +569,7 @@ export default function RollingUnit({
       spotlightId={`container-${spotlightId}`}
       onFocus={shelfFocus}
     >
-      {filteredRollingData !== 1 ? (
+      {filteredRollingData.length !== 1 ? (
         <SpottableComponent
           className={classNames(css.arrow, css.leftBtn)}
           onClick={handlePrev}
@@ -564,7 +582,7 @@ export default function RollingUnit({
         />
       ) : null}
 
-      {filteredRollingData && filteredRollingData[startIndex].shptmBanrTpNm === 'Image Banner' ? (
+      {filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'Image Banner' ? (
         <SpottableComponent
           className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
           onClick={imageBannerClick}
@@ -582,7 +600,7 @@ export default function RollingUnit({
             <img src={filteredRollingData[startIndex].tmnlImgPath} />
           </div>
         </SpottableComponent>
-      ) : filteredRollingData[startIndex].shptmBanrTpNm === 'LIVE' ? (
+      ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'LIVE' ? (
         <SpottableComponent
           className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
           onClick={videoClick}
@@ -634,7 +652,7 @@ export default function RollingUnit({
             />
           </p>
         </SpottableComponent>
-      ) : filteredRollingData[startIndex].shptmBanrTpNm === 'VOD' ? (
+      ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'VOD' ? (
         <SpottableComponent
           className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
           onClick={videoClick}
@@ -682,7 +700,7 @@ export default function RollingUnit({
             )}
           </div>
         </SpottableComponent>
-      ) : filteredRollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
+      ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
         <SpottableComponent
           className={classNames(
             css.itemBox,
@@ -738,7 +756,7 @@ export default function RollingUnit({
         </SpottableComponent>
       ) : null}
 
-      {filteredRollingData !== 1 ? (
+      {filteredRollingData.length !== 1 ? (
         <SpottableComponent
           className={classNames(css.arrow, css.rightBtn)}
           onClick={handleNext}