[SHOPTIME-2988] 로딩 추가 및 포커스 수정

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

@@ -44,10 +44,10 @@ export default function RandomUnit({
   handleItemFocus,
   randomNumber,
 }) {
-  const bannerDetailInfos = bannerData.bannerDetailInfos;
-
   const dispatch = useDispatch();
 
+  const bannerDetailInfos = bannerData.bannerDetailInfos;
+
   const shptmTmplCd = useSelector(
     (state) => state.home?.bannerData?.shptmTmplCd
   );
@@ -72,6 +72,8 @@ export default function RandomUnit({
   const bannerDataRef = useRef(bannerData);
   const randomDataRef = useRef(bannerDetailInfos[randomNumber]);
 
+  const loadingComplete = useSelector((state) => state.common?.loadingComplete);
+
   const topContentsLogInfo = useMemo(() => {
     if (randomDataRef.current) {
       const currentRandomData = randomDataRef.current;
@@ -325,6 +327,8 @@ export default function RandomUnit({
       })
     );
 
+    dispatch(finishVideoPreview());
+
     dispatch(
       sendLogTopContents({
         ...topContentsLogInfo,
@@ -332,7 +336,6 @@ export default function RandomUnit({
         logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
       })
     );
-    dispatch(finishVideoPreview());
   }, [dispatch, randomData?.patnrId, randomData?.prdtId, topContentsLogInfo]);
 
   // 비디오 클릭
@@ -472,8 +475,8 @@ export default function RandomUnit({
               />
             </div>
           </SpottableComponent>
-        ) : randomData?.shptmBanrTpNm == "LIVE" ||
+        ) : (loadingComplete && randomData?.shptmBanrTpNm == "LIVE") ||
-          randomData?.shptmBanrTpNm == "VOD" ? (
+          (loadingComplete && randomData?.shptmBanrTpNm == "VOD") ? (
           <SpottableComponent
             className={classNames(
               css.itemBox,

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

@@ -202,9 +202,9 @@ export default function RollingUnit({
     if (handleItemFocus) {
       handleItemFocus();
     }
-
     rollingStart(true);
     setRollingFocus(true);
+    dispatch(finishVideoPreview());
   }, [handleItemFocus, rollingStart]);
 
   // 배너 포커스 아웃