From 1ceaaef3f6aa474b7eefdb48d56c64e4907d4ebf Mon Sep 17 00:00:00 2001
From: "hyunwoo93.cha" <hyunwoo93.cha@lgepartners.com>
Date: Fri, 14 Mar 2025 16:31:08 +0900
Subject: [PATCH] =?UTF-8?q?[SHOPTIME-3799]=20Search=20/=20Show=20Full=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=A7=84=EC=9E=85=20/=20=EA=B2=80?=
 =?UTF-8?q?=EC=A0=95=20=ED=99=94=EB=A9=B4=20=EC=9D=BC=EC=8B=9C=20=EB=85=B8?=
 =?UTF-8?q?=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

수정 내용: useLayoutEffect 적용
---
 .../src/views/PlayerPanel/PlayerPanel.jsx        | 16 +++++++++++++++-
 .../views/PlayerPanel/PlayerPanel.module.less    |  1 +
 .../SearchResults/SearchCard/SearchShowCard.jsx  | 10 ++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
index 41b786a0..44953191 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/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}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less
index 0763500e..13b3e93b 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less
+++ b/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");
diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx
index 968e9d1b..97c09c1f 100644
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx
+++ b/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>