[SHOPTIME-3799] Search / Show Full 화면 진입 / 검정 화면 일시 노출

수정 내용: useLayoutEffect 적용

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
 
 import classNames from "classnames";
 import { useDispatch } from "react-redux";
@@ -1933,6 +1939,14 @@ const PlayerPanel = ({
     };
   }, [sideContentsVisible]);
 
+  useLayoutEffect(() => {
+    const videoContainer = document.querySelector(`.${css.videoContainer}`);
+
+    if (panelInfo.thumbnail) {
+      videoContainer.style.background = `url(${panelInfo.thumbnail}) center center/cover`;
+    }
+  }, [panelInfo.thumbnail]);
+
   return (
     <TPanel
       isTabActivated={false}

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less

@@ -6,6 +6,7 @@
   position: absolute;
   background-color: @videoBackgroundColor;
   z-index: 21;
+
   .playButton {
     .size(@w: 60px, @h: 60px);
     background-image: url("../../../assets/images/btn/btn-video-play-nor@3x.png");

com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx

@@ -7,13 +7,13 @@ import Spottable from "@enact/spotlight/Spottable";
 
 import defaultShowImage from "../../../../../assets/images/img-thumb-empty-product@3x.png";
 import IcLiveShow from "../../../../../assets/images/tag/tag-liveshow.svg";
+import { sendLogSearchClick } from "../../../../actions/logActions";
 import { pushPanel, updatePanel } from "../../../../actions/panelActions";
 import CustomImage from "../../../../components/CustomImage/CustomImage";
 import { LOG_TP_NO, panel_names } from "../../../../utils/Config";
 import { getTranslate3dValueByDirection } from "../../../../utils/helperMethods";
 import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import css from "./SearchShowCard.module.less";
-import { sendLogSearchClick } from "../../../../actions/logActions";
 
 const CardContainer = Spottable("div");
 
@@ -78,6 +78,7 @@ export default memo(function SearchShowCard({
             showId,
             chanId: showId,
             linkTpCd,
+            thumbnail,
             shptmBanrTpNm: liveFlag === "Y" ? "LIVE" : "VOD",
           },
         })
@@ -137,7 +138,12 @@ export default memo(function SearchShowCard({
             </span>
           )}
 
-          <CustomImage alt={title} delay={0} src={thumbnail} fallbackSrc={defaultShowImage} />
+          <CustomImage
+            alt={title}
+            delay={0}
+            src={thumbnail}
+            fallbackSrc={defaultShowImage}
+          />
         </div>
         <p className={css.title}>{title}</p>
       </div>