[홈패널] 롤링/랜돔 로직 변경

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

@@ -7,6 +7,9 @@ import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png";
+import emptyHorImage from "../../../../assets/images/img-home-banner-empty-hor.png";
+import emptyVerImage from "../../../../assets/images/img-home-banner-empty-ver.png";
 import liveShow from "../../../../assets/images/tag-liveshow.png";
 import { pushPanel } from "../../../actions/panelActions";
 import TVideoPlayer from "../../../components/TVideoPlayer/TVideoPlayer";
@@ -262,9 +265,18 @@ export default function RandomUnit({
                   isHorizontal && css.isHorizontal
                 )}
               >
-                {randomData.tmnlImgPath !== null ? (
+                {/* {randomData.tmnlImgPath !== null ? (
                   <img src={randomData.tmnlImgPath} />
-                ) : null}
+                ) : null} */}
+                {randomData.tmnlImgPath == null ? (
+                  <img
+                    src={
+                      randomData.vtctpYn === "Y" ? emptyVerImage : emptyHorImage
+                    }
+                  />
+                ) : (
+                  <img src={randomData.tmnlImgPath} />
+                )}
               </div>
             ) : (
               <TVideoPlayer

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

@@ -7,9 +7,11 @@ import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png";
+import emptyHorImage from "../../../../assets/images/img-home-banner-empty-hor.png";
+import emptyVerImage from "../../../../assets/images/img-home-banner-empty-ver.png";
 import liveShow from "../../../../assets/images/tag-liveshow.png";
 import { pushPanel } from "../../../actions/panelActions";
-import TVideoPlayer from "../../../components/TVideoPlayer/TVideoPlayer";
 import useScrollReset from "../../../hooks/useScrollReset";
 import { panel_names } from "../../../utils/Config";
 import css from "./RollingUnit.module.less";
@@ -44,30 +46,6 @@ export default function RollingUnit({
 
   const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
 
-  // 비디오 인덱스 서치
-  const videoIndexSearch = useCallback(() => {
-    let tempArray = [];
-
-    for (let i = 0; i < rollingData.length; i++) {
-      if (rollingData[i].shptmBanrTpNm === "LIVE") {
-        tempArray.push(i);
-      }
-    }
-    const upDataArray = [...videoIndex, tempArray];
-    setVideoIndex(upDataArray);
-  }, [videoIndex]);
-
-  const videoErrorCheck = (errorCheck) => {
-    setVideoError(errorCheck);
-
-    // 비디오 오류시, 다음 비디오로 이동
-    // for (let i = 0; i < videoIndex.length; i++) {
-    //   if (startIndex != videoIndex[i]) {
-    //     return setStartIndex(i);
-    //   }
-    // }
-  };
-
   // 비디오 에러일시, 클릭 이동
   const videoErrorClick = () => {
     dispatch(
@@ -278,10 +256,6 @@ export default function RollingUnit({
     }
   }, [count, rollingFocus]);
 
-  useEffect(() => {
-    videoIndexSearch();
-  }, []);
-
   return (
     <Container
       className={classNames(
@@ -321,69 +295,46 @@ export default function RollingUnit({
         rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
         <SpottableComponent
           className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
-          onClick={
+          onClick={videoClick}
-            videoError === true &&
-            rollingData[startIndex].shptmBanrTpNm === "LIVE"
-              ? videoErrorClick
-              : videoClick
-          }
           onFocus={onFocus}
           onBlur={onBlur}
           spotlightId={spotlightId}
           spotlightDisabled={contentsFocus}
         >
-          {rollingData[startIndex].shptmBanrTpNm === "LIVE" &&
+          <p className={css.liveIcon}>
-          videoError === false ? (
+            <img src={liveShow} />
-            <p className={css.liveIcon}>
+          </p>
-              <img src={liveShow} />
-            </p>
-          ) : null}
 
-          {/* 비디오 오류, 비디오 포커스 상태, 라이브 일 경우 */}
+          <div
-          {videoError === true &&
+            className={classNames(
-          rollingFocus === true &&
+              css.itemBox,
-          rollingData[startIndex].shptmBanrTpNm === "LIVE" ? (
+              isHorizontal && css.isHorizontal
-            <div className={css.errorContents}>
+            )}
-              <div>
+          >
-                <img
+            {rollingData[startIndex].tmnlImgPath == null ? (
-                  className={css.errorlogo}
+              <img
-                  src={rollingData[startIndex].patncLogoPath}
+                src={
-                />
+                  rollingData[startIndex].vtctpYn === "Y"
-                <p className={css.errorText}>
+                    ? emptyVerImage
-                  Click the screen to see more products!
+                    : emptyHorImage
-                </p>
+                }
-              </div>
+              />
-            </div>
+            ) : (
-          ) : null}
+              <img src={rollingData[startIndex].tmnlImgPath} />
+            )}
 
-          {rollingFocus === false ? (
+            <div className={css.btnPlay}>
-            <div
+              {rollingData[startIndex].tmnlImgPath == null ? (
-              className={classNames(
+                ""
-                css.itemBox,
+              ) : (
-                isHorizontal && css.isHorizontal
+                <img src={btnPlay} />
               )}
-            >
-              {rollingData[startIndex].tmnlImgPath !== null ? (
-                <img src={rollingData[startIndex].tmnlImgPath} />
-              ) : null}
             </div>
-          ) : (
+          </div>
-            <TVideoPlayer
-              showUrl={rollingData[startIndex].showUrl}
-              className={""}
-              width={rollingData[startIndex].vtctpYn === "Y" ? 486 : 744}
-              height={rollingData[startIndex].vtctpYn === "Y" ? 858 : 420}
-              videoIsPlaying={rollingFocus}
-              videoErrorCheck={videoErrorCheck}
-              videoType={rollingData[startIndex].shptmBanrTpNm}
-            />
-          )}
 
-          {videoError === false ? (
+          <p className={css.brandIcon}>
-            <p className={css.brandIcon}>
+            <img src={rollingData[startIndex].patncLogoPath} />
-              <img src={rollingData[startIndex].patncLogoPath} />
+          </p>
-            </p>
-          ) : null}
         </SpottableComponent>
       ) : rollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
         <SpottableComponent

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

@@ -25,6 +25,19 @@
         .size(@w: 486px, @h: 858px);
       }
     }
+    .btnPlay {
+      .size(@w: 100%, @h: 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 2;
+      > img {
+        .size(@w: 120px, @h: 120px);
+      }
+    }
     &.isHorizontal {
       .size(@w: 744px, @h: 420px);
       .imgBanner {
@@ -39,8 +52,8 @@
       align-items: center;
       justify-content: center;
       .errorlogo {
-        width: 200px;
+        width: 120px;
-        height: 200px;
+        height: 120px;
         object-fit: cover;
       }