[251215] merge: Soft merge gitlab/develop_si

다음 변경사항들을 merge:
- [영상내 shopnow 수정]
- [라이브 채널 넥스트 버튼 수정]

충돌 없이 성공적으로 merge 완료

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

@@ -1,16 +1,13 @@
 import React from 'react';
 
+import classNames from 'classnames';
 import { compose } from 'ramda/src/compose';
 
 import Spotlight from '@enact/spotlight';
 import Spottable from '@enact/spotlight/Spottable';
-import {
+import { Marquee, MarqueeController } from '@enact/ui/Marquee';
-  Marquee,
-  MarqueeController,
-} from '@enact/ui/Marquee';
 
-import icon_arrow_dwon
+import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
-  from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
 import CustomImage from '../../../../components/CustomImage/CustomImage';
 import { SpotlightIds } from '../../../../utils/SpotlightIds';
 import css from './LiveChannelNext.module.less';
@@ -55,9 +52,19 @@ export default function LiveChannelNext({
         onSpotlightRight={handleSpotlightRight}
       >
         <div className={css.logoWrapper}>
-          <div className={css.logoBackground} style={{ background: backgroundColor }}>
+          <div
+            className={css.logoBackground}
+            style={{ background: backgroundColor }}
+          >
             {channelLogo ? (
-              <CustomImage src={channelLogo} alt={channelName} className={css.logoImage} />
+              <CustomImage
+                src={channelLogo}
+                alt={channelName}
+                className={classNames(
+                  css.logoImage,
+                  channelName === 'QVC' && css.qvcLogoImg
+                )}
+              />
             ) : (
               <div className={css.logoPlaceholder} />
             )}

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

@@ -1,5 +1,5 @@
-@import "../../../../style/CommonStyle.module.less";
+@import '../../../../style/CommonStyle.module.less';
-@import "../../../../style/utils.module.less";
+@import '../../../../style/utils.module.less';
 
 .container {
   position: fixed;
@@ -51,13 +51,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(180deg, #284998 0%, #06B0EE 100%);
 }
 
 .logoImage {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  &.qvcLogoImg {
+    width: 70%;
+    height: 70%;
+  }
 }
 
 .logoPlaceholder {
@@ -69,7 +72,7 @@
 .channelName {
   color: #fcfcfc;
   font-size: 25px;
-  font-family: "LG Smart UI";
+  font-family: 'LG Smart UI';
   font-weight: 700;
   line-height: 35px;
   white-space: nowrap;
@@ -81,7 +84,7 @@
 .programName {
   color: rgba(234, 234, 234, 0.7);
   font-size: 25px;
-  font-family: "LG Smart UI";
+  font-family: 'LG Smart UI';
   font-weight: 600;
   line-height: 35px;
   white-space: nowrap;
@@ -91,7 +94,6 @@
   max-width: 180px; // 최대 너비 제한 완화
 }
 
-
 .arrowIcon {
   display: flex;
   align-items: center;

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

@@ -7,27 +7,28 @@ import Spotlight from '@enact/spotlight';
 import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
+// import icon_arrow_right from '../../../../../assets/images/icons';
+import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
+import usePrevious from '../../../../hooks/usePrevious';
+import { LOG_MENU } from '../../../../utils/Config';
 import { createDebugHelpers } from '../../../../utils/debug';
+import { $L } from '../../../../utils/helperMethods';
+import { SpotlightIds } from '../../../../utils/SpotlightIds';
+import FeaturedShowContents from '../TabContents/FeaturedShowContents';
+import LiveChannelContents from '../TabContents/LiveChannelContents';
+import ShopNowContents from '../TabContents/ShopNowContents';
+import LiveChannelNext from './LiveChannelNext';
+import ShopNowButton from './ShopNowButton';
+import css from './TabContainer.v2.module.less';
 
 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
 const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
 
-// import icon_arrow_right from '../../../../../assets/images/icons';
+const Container = SpotlightContainerDecorator(
-import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
+  { enterTo: 'last-focused' },
-import icon_shop_now from '../../../../../assets/images/player/icon_tabcontainer_shopnow.png';
+  'div'
-import { LOG_MENU } from '../../../../utils/Config';
+);
-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';
-import css from './TabContainer.v2.module.less';
-
-const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
 
 const SpottableDiv = Spottable('div');
 
@@ -50,18 +51,22 @@ export default function TabContainerV2({
   onTabClose, // 탭 닫기 콜백 함수
   tabVisible,
 }) {
-  const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);  
+  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 nextIndex =
+      currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1;
     let initialIndex = nextIndex;
     let attempts = 0;
 
     // 유효한 showId를 가진 다음 쇼 찾기
-    while (!currentPlayList[nextIndex]?.showId && attempts < currentPlayList.length) {
+    while (
+      !currentPlayList[nextIndex]?.showId &&
+      attempts < currentPlayList.length
+    ) {
       nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1;
       attempts++;
       if (nextIndex === initialIndex) break;
@@ -87,13 +92,18 @@ export default function TabContainerV2({
       data: youmaylikeInfos,
       shopNowInfo_length: shopNowInfo?.length,
       shouldShowYouMayAlso:
-        shopNowInfo && shopNowInfo.length < 3 && youmaylikeInfos && youmaylikeInfos.length > 0,
+        shopNowInfo &&
+        shopNowInfo.length < 3 &&
+        youmaylikeInfos &&
+        youmaylikeInfos.length > 0,
     });
   }, [youmaylikeInfos, shopNowInfo]);
 
   const tabList = [
     $L('SHOP NOW'),
-    panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'),
+    panelInfo?.shptmBanrTpNm === 'LIVE'
+      ? $L('LIVE CHANNEL')
+      : $L('FEATURED SHOWS'),
   ];
 
   useEffect(() => {
@@ -105,7 +115,9 @@ export default function TabContainerV2({
 
     if (tabIndex === 1) {
       const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
-      nowMenu = isLive ? LOG_MENU.FULL_LIVE_CHANNELS : LOG_MENU.FULL_FEATURED_SHOWS;
+      nowMenu = isLive
+        ? LOG_MENU.FULL_LIVE_CHANNELS
+        : LOG_MENU.FULL_FEATURED_SHOWS;
     }
 
     if (nowMenu) {
@@ -160,7 +172,9 @@ export default function TabContainerV2({
 
   // 하나의 함수에서 모든 tabIndex 변화 처리
   const handleTabIndexChange = useCallback((newTabIndex, oldTabIndex) => {
-    console.log(`[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`);
+    console.log(
+      `[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`
+    );
 
     if (newTabIndex === 0) {
       // tabIndex = 0 (ShopNow)
@@ -220,8 +234,18 @@ export default function TabContainerV2({
                   Spotlight.focus('shop-now-item-0');
                 }}
               >
-                <div className={css.shopNowIconWrapper}>
+                <div
-                  <img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
+                  className={classNames(
+                    css.shopNowIconWrapper,
+                    playListInfo[selectedIndex]?.patncNm === 'QVC' &&
+                      css.shopNowQvcIconWrapper
+                  )}
+                >
+                  <img
+                    src={playListInfo[selectedIndex]?.patncLogoPath}
+                    alt="shop now icon"
+                    className={css.shopNowIcon}
+                  />
                 </div>
                 <div className={css.shopNowHeaderText}>SHOP NOW</div>
                 <div className={css.arrowIcon}>
@@ -250,7 +274,9 @@ export default function TabContainerV2({
               youmaylikeInfos &&
               youmaylikeInfos.length > 0 && (
                 <div className={css.youMayAlsoLikeHeader}>
-                  <div className={css.youMayAlsoLikeText}>You may also like</div>
+                  <div className={css.youMayAlsoLikeText}>
+                    You may also like
+                  </div>
                 </div>
               )}
           </div>
@@ -273,7 +299,11 @@ export default function TabContainerV2({
           <SpottableDiv
             className={css.liveChannelButton}
             onClick={onLiveChannelButtonClick}
-            spotlightId={panelInfo?.shptmBanrTpNm === 'LIVE' ? 'below-tab-live-channel-button' : 'below-tab-featured-show-button'}
+            spotlightId={
+              panelInfo?.shptmBanrTpNm === 'LIVE'
+                ? 'below-tab-live-channel-button'
+                : 'below-tab-featured-show-button'
+            }
             onSpotlightUp={handleSpotlightUpToBackButton}
             onSpotlightDown={(e) => {
               // 첫 번째 PlayerItem으로 포커스 이동

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

@@ -1,5 +1,5 @@
-@import "../../../../style/CommonStyle.module.less";
+@import '../../../../style/CommonStyle.module.less';
-@import "../../../../style/utils.module.less";
+@import '../../../../style/utils.module.less';
 
 .tabContainer {
   .position(@position: fixed, @bottom: 0, @left: 0);
@@ -61,7 +61,7 @@
     }
 
     &::before {
-      content: "";
+      content: '';
       .position(@position: absolute, @top: 0, @left: 0);
       .size(@w: 100%, @h: 100%);
       background: linear-gradient(
@@ -113,10 +113,17 @@
   background: white;
   border-radius: 100px;
   .flex(@display: flex, @justifyCenter: center, @alignCenter: center);
+  &.shopNowQvcIconWrapper {
+    border-radius: 0;
+    .shopNowIcon {
+      .size(@w: 40px, @h: 40px);
+      object-fit: contain;
+    }
+  }
 }
 
 .shopNowIcon {
-  .size(@w: 20.67px, @h: 20.67px);
+  .size(@w: 40px, @h: 40px);
   object-fit: contain;
 }
 
@@ -265,7 +272,7 @@
 
 .youMayAlsoLikeText {
   margin-right: 15px;
-  color: #EAEAEA;
+  color: #eaeaea;
   font-size: 24px;
   font-family: @baseFont;
   font-weight: 700;