[PlayerPanel] 세로형 라이브방송 라이브채널 css

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)}

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;
+        }
+      }
     }
   }
 

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}
           />
         ) : (