[Home] Live영상 useEffect 추가, popular Show 영상 코드 수정

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import classNames from "classnames";
 import { useDispatch } from "react-redux";
@@ -42,6 +42,8 @@ export default function RandomUnit({
   const [videoIndex, setVideoIndex] = useState([]);
   const [videoError, setVideoError] = useState(false);
   const [randomNumber, setRandomNumber] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const timerRef = useRef();
   const { handleScrollReset, handleStopScrolling } =
     useScrollReset(scrollTopBody);
 
@@ -85,16 +87,17 @@ export default function RandomUnit({
     );
   };
 
-  // 포커스 인
-  const onFocus = useCallback(
-    (ev) => {
-      handleScrollReset();
+  useEffect(() => {
     if (
       randomData.shptmBanrTpNm == "LIVE" ||
       randomData.shptmBanrTpNm == "VOD"
     ) {
+      if (isFocused) {
+        timerRef.current = setTimeout(
+          () =>
             dispatch(
               startVideoPlayer({
+                showUrl: randomData.showUrl,
                 patnrId: randomData.patnrId,
                 showId: randomData.showId,
                 shptmBanrTpNm: randomData.shptmBanrTpNm,
@@ -104,21 +107,30 @@ export default function RandomUnit({
                 modalContainerId: spotlightId, //to calc width, height, left, top
                 modalClassName: css.videoModal,
               })
+            ),
+          1000
         );
+      } else {
+        dispatch(finishVideoPreview());
       }
-    },
-    [randomData]
-  );
+    }
+
+    return () => {
+      clearTimeout(timerRef.current);
+    };
+  }, [isFocused, dispatch]);
+
+  // 포커스 인
+  const onFocus = (ev) => {
+    setIsFocused(true);
+    handleScrollReset();
+  };
 
   // 포커스 아웃
   const onBlur = (ev) => {
-    if (
-      randomData.shptmBanrTpNm == "LIVE" ||
-      randomData.shptmBanrTpNm == "VOD"
-    ) {
-      dispatch(finishVideoPreview());
-    }
+    setIsFocused(false);
     handleStopScrolling();
+    clearTimeout(timerRef.current);
   };
 
   // 이미지 배너 클릭

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

@@ -146,11 +146,11 @@
         }
       }
     }
-    // &:focus {
-    //   &::after {
-    //     .focused(@boxShadow:22px, @borderRadius: 12px);
-    //   }
-    // }
+    &:focus {
+      &::after {
+        .focused(@boxShadow:0, @borderRadius: 12px);
+      }
+    }
   }
 
   .arrow {
@@ -187,7 +187,7 @@
 }
 .videoModal {
   &::after {
-    .focused(@boxShadow:22px, @borderRadius: 12px);
+    .focused(@boxShadow:0, @borderRadius: 12px);
   }
   > div {
     border-radius: 12px;

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -18,6 +18,7 @@ import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
 import { panel_names } from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "../PopularShow/PopularShow.module.less";
+import { startVideoPlayer } from "../../../actions/playActions";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -43,19 +44,14 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
 
   const handleCardClick = useCallback((patnrId, showId, catCd, showUrl) => {
     dispatch(
-      pushPanel(
-        {
-          name: panel_names.PLAYER_PANEL,
-          panelInfo: {
-            patnrId: patnrId,
-            showId: showId,
-            lgCatCd: catCd,
+      startVideoPlayer({
+        showId,
+        patnrId,
         shptmBanrTpNm: "VOD",
+        lgCatCd: catCd,
+        modal: false,
         showUrl: showUrl,
-          },
-        },
-        [dispatch]
-      )
+      })
     );
   });