From c994b90d5c0860dbc25d17e8671aa73f8a2b47ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?=
 <dongyoung@godong-yeong-ui-noteubug.local>
Date: Fri, 14 Jun 2024 18:29:09 +0900
Subject: [PATCH] =?UTF-8?q?[PlayerPanel]=20=EC=84=B8=EB=A1=9C=ED=98=95=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=B0=A9=EC=86=A1=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=8C=EC=B1=84=EB=84=90=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PlayerPanel/PlayerItemCard/PlayerItemCard.jsx  | 12 ++++++++++--
 .../PlayerItemCard/PlayerItemCard.module.less      | 14 +++++++++++++-
 .../TabContents/LiveChannelContents.jsx            |  5 +++--
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
index ec57aebb..80c5e09b 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
@@ -106,11 +106,14 @@ export default memo(function PlayerItemCard({
 
   const progressStyle = useMemo(() => ({ width: `${percent}%` }), [percent]);
   const ariaLabel = "Selected, " + patnerName + " " + productName;
+
+  console.log("#liveInfo", liveInfo);
   return (
     <SpottableComponent
       className={classNames(
         css[type],
-        videoVerticalVisible && css.videoVertical
+        !liveInfo && videoVerticalVisible && css.vodVideoVertical,
+        liveInfo && videoVerticalVisible && css.liveVideoVertical
       )}
       onBlur={_onBlur}
       onClick={_onClick}
@@ -143,7 +146,12 @@ export default memo(function PlayerItemCard({
         </div>
         <h3 className={css.title}>{productName}</h3>
         {liveInfo && (
-          <div className={css.progressBarWrap}>
+          <div
+            className={classNames(
+              css.progressBarWrap,
+              videoVerticalVisible && css.videoVerticalProgress
+            )}
+          >
             <div className={css.progressBar}>
               <div
                 className={classNames(css.gauge, focused && css.focused)}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.module.less
index 31de5a06..2b6d8607 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.module.less
@@ -10,9 +10,13 @@
   border: solid 1px @COLOR_GRAY02;
   background-color: @COLOR_WHITE;
 
-  &.videoVertical {
+  &.vodVideoVertical {
     .size(@w: 540px, @h: 176px);
   }
+
+  &.liveVideoVertical {
+    .size(@w: 540px, @h: 236px);
+  }
   .imageWrap {
     position: relative;
     .size(@w: 200px, @h: 200px);
@@ -84,6 +88,14 @@
           }
         }
       }
+
+      &.videoVerticalProgress {
+        .size(@w: 284px , @h: 8px);
+
+        > div {
+          max-width: 284px;
+        }
+      }
     }
   }
 
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
index e31bc499..51ac2ff5 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
@@ -15,6 +15,7 @@ export default function LiveChannelContents({
   liveInfos,
   selectedIndex,
   setSelectedIndex,
+  videoVerticalVisible,
   tabIndex,
   handleItemFocus,
 }) {
@@ -62,6 +63,7 @@ export default function LiveChannelContents({
           imageAlt={prdtId}
           logo={patncLogoPath}
           imageSource={thumbnailUrl ? thumbnailUrl : dfltThumbnailImgPath}
+          videoVerticalVisible={videoVerticalVisible}
           productName={showNm}
           patnerName={patncNm}
           onClick={handleItemClick}
@@ -83,10 +85,9 @@ export default function LiveChannelContents({
             dataSize={liveInfos.length}
             direction="vertical"
             renderItem={renderItem}
-            itemWidth={600}
+            itemWidth={videoVerticalVisible ? 540 : 600}
             itemHeight={236}
             spacing={12}
-            className={css.itemList}
             noScrollByWheel={false}
           />
         ) : (