[SHOPTIME-2988] 로딩 추가

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

@@ -29,6 +29,7 @@ import usePriceInfo from "../../../hooks/usePriceInfo";
 import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config";
 import { $L, formatGMTString } from "../../../utils/helperMethods";
 import css from "./RandomUnit.module.less";
+import { changeAppStatus } from "../../../actions/commonActions";
 
 const SpottableComponent = Spottable("div");
 
@@ -74,6 +75,10 @@ export default function RandomUnit({
 
   const loadingComplete = useSelector((state) => state.common?.loadingComplete);
 
+  const { showLoadingPanel, isLoading } = useSelector(
+    (state) => state.common.appStatus
+  );
+
   const topContentsLogInfo = useMemo(() => {
     if (randomDataRef.current) {
       const currentRandomData = randomDataRef.current;
@@ -158,6 +163,7 @@ export default function RandomUnit({
     clearTimeout(timerRef.current);
 
     dispatch(finishVideoPreview());
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   }, [isFocused]);
 
   // DSP00501 : Featured Brands
@@ -389,7 +395,15 @@ export default function RandomUnit({
     if (bannerData) {
       setRandomData(bannerDetailInfos[randomNumber]);
     }
-  }, [bannerData]);
+
+    dispatch(
+      changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
+    );
+
+    setTimeout(() => {
+      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+    }, 0);
+  }, [bannerData, dispatch]);
 
   useEffect(() => {
     if (randomData && randomData.priceInfo !== null) {
@@ -475,8 +489,8 @@ export default function RandomUnit({
               />
             </div>
           </SpottableComponent>
-        ) : (loadingComplete && randomData?.shptmBanrTpNm == "LIVE") ||
-          (loadingComplete && randomData?.shptmBanrTpNm == "VOD") ? (
+        ) : (!isLoading && randomData?.shptmBanrTpNm == "LIVE") ||
+          (!isLoading && randomData?.shptmBanrTpNm == "VOD") ? (
           <SpottableComponent
             className={classNames(
               css.itemBox,

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

@@ -27,7 +27,6 @@ import usePriceInfo from "../../../hooks/usePriceInfo";
 import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config";
 import { formatGMTString } from "../../../utils/helperMethods";
 import css from "./RollingUnit.module.less";
-import { finishVideoPreview } from "../../../actions/playActions";
 
 const SpottableComponent = Spottable("div");
 
@@ -204,7 +203,6 @@ export default function RollingUnit({
     }
     rollingStart(true);
     setRollingFocus(true);
-    dispatch(finishVideoPreview());
   }, [handleItemFocus, rollingStart]);
 
   // 배너 포커스 아웃