[251202] fix: VOD-FeaturedShows

🕐 커밋 시간: 2025. 12. 02. 17:54:40

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +48줄
  • 삭제: -15줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

🔧 주요 변경 내용:
  • 소규모 기능 개선

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

@@ -2588,11 +2588,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         dlog('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 콘텐츠 타입에 따라 설정');
         if (tabContainerVersion === 2) {
           if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
-            setTabIndexV2(2);
+            setTabIndexV2(1);
-            dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
+            dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 1로 설정됨 (FeaturedShowContents 표시)');
           } else {
             setTabIndexV2(1);
-            dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
+            dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨 (LiveChannelContents 표시)');
           }
         }
       } else {
@@ -2651,11 +2651,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       );
 
       if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') {
-        setTabIndexV2(2);
+        setTabIndexV2(1);
-        dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
+        dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 1로 설정됨 (FeaturedShowContents 표시)');
       } else {
         setTabIndexV2(1);
-        dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
+        dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨 (LiveChannelContents 표시)');
       }
     }
   }, [isOnTop, panelInfo.modal, videoVerticalVisible, tabContainerVersion]);

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx

@@ -12,7 +12,8 @@ import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../.
 import { $L, removeSpecificTags } from '../../../../utils/helperMethods';
 import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
 import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
-import css from './LiveChannelContents.module.less';
+import css from './FeaturedShowContents.module.less';
+import cssV2 from './FeaturedShowContents.v2.module.less';
 import { getMainCategoryShowDetail } from '../../../../actions/mainActions';
 import { sendLogTotalRecommend } from '../../../../actions/logActions';
 // =======
@@ -44,6 +45,8 @@ export default function FeaturedShowContents({
   handleItemFocus,
   tabTitle,
   panelInfo,
+  direction = 'vertical',
+  version = 1,
 }) {
   const dispatch = useDispatch();
   const isClickBlocked = useRef(false);
@@ -138,6 +141,16 @@ export default function FeaturedShowContents({
           patnerName={patncNm}
           onClick={handleItemClick}
           onFocus={handleFocus()}
+          onSpotlightUp={
+            version === 2 && index === 0
+              ? (e) => {
+                  // v2에서 첫 번째 아이템일 때 위로 가면 FEATURED SHOWS 버튼으로
+                  e.stopPropagation();
+                  e.preventDefault();
+                  Spotlight.focus('below-tab-featured-show-button');
+                }
+              : undefined
+          }
           type={TYPES.featuredHorizontal}
           spotlightId={`tabChannel-video-${index}`}
           videoVerticalVisible={videoVerticalVisible}
@@ -166,17 +179,19 @@ export default function FeaturedShowContents({
     };
   }, []);
 
+  const containerClass = version === 2 ? cssV2.container : css.container;
+
   return (
     <>
-      <div className={css.container}>
+      <div className={containerClass}>
         {featuredShowsInfos && featuredShowsInfos.length > 0 ? (
           <TVirtualGridList
             dataSize={featuredShowsInfos.length}
-            direction="vertical"
+            direction={direction}
             renderItem={renderItem}
-            itemWidth={videoVerticalVisible ? 540 : 600}
+            itemWidth={version === 2 ? 470 : videoVerticalVisible ? 540 : 600}
-            itemHeight={176}
+            itemHeight={version === 2 ? 155 : 176}
-            spacing={12}
+            spacing={version === 2 ? 30 : 12}
           />
         ) : (
           <ListEmptyContents tabIndex={tabIndex} />

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less

@@ -0,0 +1,22 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  width: 100%;
+  height: 155px;
+
+  > div:nth-child(1) {
+    .size(@w: 100%, @h: 100%);
+  }
+}
+
+.channelList {
+  width: 100%;
+  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start);
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  > * + * {
+    margin-left: 30px;
+  }
+}

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

@@ -21,6 +21,7 @@ import { $L } from '../../../../utils/helperMethods';
 import { SpotlightIds } from '../../../../utils/SpotlightIds';
 import usePrevious from '../../../../hooks/usePrevious';
 import LiveChannelContents from '../TabContents/LiveChannelContents';
+import FeaturedShowContents from '../TabContents/FeaturedShowContents';
 import ShopNowContents from '../TabContents/ShopNowContents';
 import ShopNowButton from './ShopNowButton';
 import LiveChannelNext from './LiveChannelNext';
@@ -272,17 +273,17 @@ export default function TabContainerV2({
           <SpottableDiv
             className={css.liveChannelButton}
             onClick={onLiveChannelButtonClick}
-            spotlightId="below-tab-live-channel-button"
+            spotlightId={panelInfo?.shptmBanrTpNm === 'LIVE' ? 'below-tab-live-channel-button' : 'below-tab-featured-show-button'}
             onSpotlightUp={handleSpotlightUpToBackButton}
             onSpotlightDown={(e) => {
               // 첫 번째 PlayerItem으로 포커스 이동
               Spotlight.focus('tabChannel-video-0');
             }}
             onSpotlightFocus={() => {
-              console.log('[TabContainerV2] below-tab-live-channel-button focused');
+              console.log('[TabContainerV2] below-tab button focused');
             }}
           >
-            <span className={css.buttonText}>LIVE CHANNEL</span>
+            <span className={css.buttonText}>{tabList[1]}</span>
             <div className={css.arrowIcon}>
               <img src={icon_arrow_dwon} alt="arrow down" />
             </div>
@@ -304,6 +305,23 @@ export default function TabContainerV2({
               direction="horizontal"
             />
           )}
+
+          {panelInfo?.shptmBanrTpNm === 'VOD' && playListInfo && (
+            <FeaturedShowContents
+              tabTitle={tabList}
+              featuredShowsInfos={playListInfo}
+              currentVideoInfo={playListInfo[selectedIndex]}
+              setSelectedIndex={setSelectedIndex}
+              selectedIndex={selectedIndex}
+              videoVerticalVisible={videoVerticalVisible}
+              currentVideoShowId={playListInfo[selectedIndex]?.showId}
+              tabIndex={tabIndex}
+              handleItemFocus={_handleItemFocus}
+              panelInfo={panelInfo}
+              version={2}
+              direction="horizontal"
+            />
+          )}
         </>
       )}