From 08de7888c7efdc95e335d000129f3af2261c4308 Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Tue, 18 Nov 2025 20:35:55 +0900
Subject: [PATCH] [251118] feat: LiveChannelNext done
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🕐 커밋 시간: 2025. 11. 18. 20:35:55

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +42줄
  • 삭제: -12줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx (javascript):
    🔄 Modified: Spottable()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx (javascript):
    🔄 Modified: Spottable()
---
 .../PlayerOverlay/PlayerOverlayContents.jsx   |  5 ++-
 .../src/views/PlayerPanel/PlayerPanel.jsx     |  5 ++-
 .../PlayerTabContents/v2/LiveChannelNext.jsx  |  4 +-
 .../v2/LiveChannelNext.module.less            |  6 +--
 .../PlayerTabContents/v2/TabContainer.v2.jsx  | 41 +++++++++++++++++--
 5 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
index a333f5e3..d3ea63e5 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
@@ -218,7 +218,8 @@ function PlayerOverlayContents({
   return (
     <>
       <Container className={css.overlayContainer} onKeyDownCapture={handleOverlayKeyDownCapture}>
-        {shouldShowExtendedControls && playListInfo.length > 1 && noLiveContentsVisible && (
+        {/* 251118 임시로 unvisible */}
+        {/* {shouldShowExtendedControls && playListInfo.length > 1 && noLiveContentsVisible && (
           <>
             <div className={css.indicatorUpButton}>
               <SpottableBtn
@@ -261,7 +262,7 @@ function PlayerOverlayContents({
               />
             </div>
           </>
-        )}
+        )} */}
 
         {currentSideButtonStatus && !videoVerticalVisible && (
           <PlayerTabButton
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
index 13262ce6..95189c96 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -1464,7 +1464,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       panelInfo.modalContainerId &&
       (lastPanelAction === 'previewPush' || lastPanelAction === 'previewUpdate')
     ) {
-      console.log('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', { lastPanelAction });
+      console.log('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', {
+        lastPanelAction,
+      });
       const node = document.querySelector(`[data-spotlight-id="${panelInfo.modalContainerId}"]`);
       if (node) {
         const { width, height, top, left } = node.getBoundingClientRect();
@@ -2381,6 +2383,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
             tabIndex={tabIndexV2}
             onShopNowButtonClick={() => setTabIndexV2(0)}
             onLiveChannelButtonClick={() => setTabIndexV2(2)}
+            onLiveNext={handleIndicatorDownClick}
             onTabClose={(newTabIndex) => setTabIndexV2(newTabIndex)}
             tabVisible={belowContentsVisible}
           />
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
index 2beaf527..a309a304 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
@@ -43,10 +43,10 @@ export default function LiveChannelNext({
             )}
           </div>
         </div>
-        <Marquee className={css.channelName} marqueeOn="focus">
+        <Marquee className={css.channelName} marqueeOn="render">
           {channelName}
         </Marquee>
-        <Marquee className={css.programName} marqueeOn="focus">
+        <Marquee className={css.programName} marqueeOn="render">
           {programName}
         </Marquee>
         {/* <div className={css.iconWrapper}>
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less
index 15e953a9..bb107a75 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less
@@ -78,8 +78,7 @@
   white-space: nowrap;
   overflow: hidden;
   min-width: 0;
-  max-width: 100px; // 최대 너비 제한
-  text-overflow: ellipsis;
+  max-width: 120px; // 최대 너비 제한 완화
 }
 
 .programName {
@@ -92,8 +91,7 @@
   flex: 1;
   min-width: 0;
   overflow: hidden;
-  max-width: 150px; // 최대 너비 제한
-  text-overflow: ellipsis;
+  max-width: 180px; // 최대 너비 제한 완화
 }
 
 
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
index 2c5f0f5d..0c8bdfb0 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
@@ -38,11 +38,39 @@ export default function TabContainerV2({
   tabIndex = 1, // tabIndex prop으로 제어 (0: ShopNow, 1: LiveChannel, 2: ShopNowButton)
   onShopNowButtonClick,
   onLiveChannelButtonClick,
+  onLiveNext,
   onTabClose, // 탭 닫기 콜백 함수
   tabVisible,
 }) {
   const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);
 
+  // 다음 재생 가능한 쇼 찾기
+  const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => {
+    if (!currentPlayList || currentPlayList.length === 0) return null;
+
+    let nextIndex = currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1;
+    let initialIndex = nextIndex;
+    let attempts = 0;
+
+    // 유효한 showId를 가진 다음 쇼 찾기
+    while (!currentPlayList[nextIndex]?.showId && attempts < currentPlayList.length) {
+      nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1;
+      attempts++;
+      if (nextIndex === initialIndex) break;
+    }
+
+    if (currentPlayList[nextIndex]?.showId) {
+      return currentPlayList[nextIndex];
+    }
+
+    return null;
+  }, []);
+
+  // 다음 쇼 정보 계산
+  const nextShowInfo = useMemo(() => {
+    return findNextPlayableShow(playListInfo, selectedIndex);
+  }, [playListInfo, selectedIndex, findNextPlayableShow]);
+
   // ✨ DEBUG: youmaylikeInfos 데이터 로그
   useEffect(() => {
     console.log('[DEBUG] TabContainerV2 - youmaylikeInfos:', {
@@ -242,9 +270,14 @@ export default function TabContainerV2({
       {tabVisible && tabIndex === 2 && (
         <>
           <LiveChannelNext
-            channelName={playListInfo?.[0]?.showNm || 'ShopLC'}
-            programName={playListInfo?.[0]?.title || 'Live Channel'}
-            onClick={onLiveChannelButtonClick}
+            channelLogo={nextShowInfo?.patncLogoPath}
+            channelName={nextShowInfo?.patncNm || 'ShopLC'}
+            programName={nextShowInfo?.showNm || 'Live Channel'}
+            backgroundColor={
+              nextShowInfo?.dfltThumbnailImgPath ||
+              'linear-gradient(180deg, #284998 0%, #06B0EE 100%)'
+            }
+            onClick={onLiveNext}
           />
           <ShopNowButton onClick={onShopNowButtonClick} />
         </>