Merge branch 'detail_v3' of github.com:optrader8/github-shoptime into detail_v3

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

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

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

@@ -0,0 +1,92 @@
+<div
+  style={{
+    width: '100%',
+    height: '100%',
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 10,
+    paddingRight: 20,
+    background: 'rgba(0, 0, 0, 0.30)',
+    borderRadius: 100,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: 15,
+    display: 'inline-flex',
+  }}
+>
+  <div style={{ width: 72, height: 72, position: 'relative' }}>
+    <div
+      style={{
+        width: 71.11,
+        height: 71.11,
+        left: 0.38,
+        top: 0.88,
+        position: 'absolute',
+        background: 'linear-gradient(180deg, #284998 0%, #06B0EE 100%)',
+      }}
+    />
+    <div
+      style={{
+        width: 57.35,
+        height: 19.86,
+        left: 7.33,
+        top: 27.58,
+        position: 'absolute',
+        background: 'white',
+      }}
+    />
+  </div>
+  <div
+    style={{
+      color: '#FCFCFC',
+      fontSize: 25,
+      fontFamily: 'LG Smart UI',
+      fontWeight: '700',
+      lineHeight: 35,
+      wordWrap: 'break-word',
+    }}
+  >
+    ShopLC
+  </div>
+  <div
+    style={{
+      color: 'rgba(234.30, 234.30, 234.30, 0.70)',
+      fontSize: 25,
+      fontFamily: 'LG Smart UI',
+      fontWeight: '600',
+      lineHeight: 35,
+      wordWrap: 'break-word',
+    }}
+  >
+    Sandal Black...
+  </div>
+  <div
+    style={{
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      gap: 10,
+      display: 'inline-flex',
+    }}
+  >
+    <div
+      style={{
+        width: 50,
+        height: 50,
+        paddingLeft: 3,
+        paddingRight: 3,
+        paddingTop: 2,
+        paddingBottom: 2,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 10,
+        display: 'flex',
+      }}
+    >
+      <div
+        style={{ width: 24.67, height: 11.76, outline: '4px #EAEAEA solid', outlineOffset: '-2px' }}
+      />
+    </div>
+  </div>
+</div>;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import Spotlight from '@enact/spotlight';
+import Spottable from '@enact/spotlight/Spottable';
+import { Marquee, MarqueeController } from '@enact/ui/Marquee';
+import { compose } from 'ramda/src/compose';
+
+import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
+import CustomImage from '../../../../components/CustomImage/CustomImage';
+import { SpotlightIds } from '../../../../utils/SpotlightIds';
+import css from './LiveChannelButton.module.less';
+
+const SpottableDiv = Spottable('div');
+
+export default function LiveChannelButton({
+  channelLogo,
+  channelName = 'ShopLC',
+  programName = 'Sandal Black...',
+  backgroundColor = 'linear-gradient(180deg, #284998 0%, #06B0EE 100%)',
+  onClick,
+  spotlightId = 'live-channel-button',
+}) {
+  const handleSpotlightUp = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
+  };
+
+  return (
+    <div className={css.container}>
+      <SpottableDiv
+        className={css.liveChannelButton}
+        onClick={onClick}
+        spotlightId={spotlightId}
+        onSpotlightUp={handleSpotlightUp}
+      >
+        <div className={css.logoWrapper}>
+          <div className={css.logoBackground} style={{ background: backgroundColor }}>
+            {channelLogo ? (
+              <CustomImage src={channelLogo} alt={channelName} className={css.logoImage} />
+            ) : (
+              <div className={css.logoPlaceholder} />
+            )}
+          </div>
+        </div>
+        <Marquee className={css.channelName} marqueeOn="focus">
+          {channelName}
+        </Marquee>
+        <Marquee className={css.programName} marqueeOn="focus">
+          {programName}
+        </Marquee>
+        {/* <div className={css.iconWrapper}>
+          <div className={css.playIcon} />
+        </div> */}
+        <div className={css.arrowIcon}>
+          <img src={icon_arrow_dwon} alt="arrow down" />
+        </div>
+      </SpottableDiv>
+    </div>
+  );
+}

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

@@ -0,0 +1,114 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+}
+
+.liveChannelButton {
+  width: 100%;
+  max-width: 455px;
+  height: 92px;
+  padding: 10px 10px 10px 10px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(234, 234, 234, 0.3);
+  border-radius: 100px;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.5);
+    border-color: rgba(234, 234, 234, 0.5);
+  }
+
+  &:focus {
+    background: @PRIMARY_COLOR_RED;
+    border-color: @PRIMARY_COLOR_RED;
+
+    &::after {
+      .focused(@boxShadow: 22px, @borderRadius: 100px);
+    }
+  }
+}
+
+.logoWrapper {
+  width: 72px;
+  height: 72px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.logoBackground {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(180deg, #284998 0%, #06B0EE 100%);
+}
+
+.logoImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.logoPlaceholder {
+  width: 57.35px;
+  height: 19.86px;
+  background: white;
+}
+
+.channelName {
+  color: #fcfcfc;
+  font-size: 25px;
+  font-family: "LG Smart UI";
+  font-weight: 700;
+  line-height: 35px;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 100px; // 최대 너비 제한
+  text-overflow: ellipsis;
+}
+
+.programName {
+  color: rgba(234, 234, 234, 0.7);
+  font-size: 25px;
+  font-family: "LG Smart UI";
+  font-weight: 600;
+  line-height: 35px;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  max-width: 150px; // 최대 너비 제한
+  text-overflow: ellipsis;
+}
+
+
+.arrowIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26.25px;
+  height: 15.63px;
+  margin-right: 10px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

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

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import Spotlight from '@enact/spotlight';
+import Spottable from '@enact/spotlight/Spottable';
+import { Marquee, MarqueeController } from '@enact/ui/Marquee';
+import { compose } from 'ramda/src/compose';
+
+import icon_arrow_dwon 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';
+
+const SpottableDiv = Spottable('div');
+
+export default function LiveChannelNext({
+  channelLogo,
+  channelName = 'ShopLC',
+  programName = 'Sandal Black...',
+  backgroundColor = 'linear-gradient(180deg, #284998 0%, #06B0EE 100%)',
+  onClick,
+  spotlightId = 'live-channel-button',
+}) {
+  const handleSpotlightUp = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
+  };
+
+  return (
+    <div className={css.container}>
+      <SpottableDiv
+        className={css.liveChannelButton}
+        onClick={onClick}
+        spotlightId={spotlightId}
+        onSpotlightUp={handleSpotlightUp}
+      >
+        <div className={css.logoWrapper}>
+          <div className={css.logoBackground} style={{ background: backgroundColor }}>
+            {channelLogo ? (
+              <CustomImage src={channelLogo} alt={channelName} className={css.logoImage} />
+            ) : (
+              <div className={css.logoPlaceholder} />
+            )}
+          </div>
+        </div>
+        <Marquee className={css.channelName} marqueeOn="render">
+          {channelName}
+        </Marquee>
+        <Marquee className={css.programName} marqueeOn="render">
+          {programName}
+        </Marquee>
+        {/* <div className={css.iconWrapper}>
+          <div className={css.playIcon} />
+        </div> */}
+        <div className={css.arrowIcon}>
+          <img src={icon_arrow_dwon} alt="arrow down" />
+        </div>
+      </SpottableDiv>
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+}
+
+.liveChannelButton {
+  width: 100%;
+  max-width: 455px;
+  height: 92px;
+  padding: 10px 10px 10px 10px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(234, 234, 234, 0.3);
+  border-radius: 100px;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.5);
+    border-color: rgba(234, 234, 234, 0.5);
+  }
+
+  &:focus {
+    background: @PRIMARY_COLOR_RED;
+    border-color: @PRIMARY_COLOR_RED;
+
+    &::after {
+      .focused(@boxShadow: 22px, @borderRadius: 100px);
+    }
+  }
+}
+
+.logoWrapper {
+  width: 72px;
+  height: 72px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.logoBackground {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(180deg, #284998 0%, #06B0EE 100%);
+}
+
+.logoImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.logoPlaceholder {
+  width: 57.35px;
+  height: 19.86px;
+  background: white;
+}
+
+.channelName {
+  color: #fcfcfc;
+  font-size: 25px;
+  font-family: "LG Smart UI";
+  font-weight: 700;
+  line-height: 35px;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 120px; // 최대 너비 제한 완화
+}
+
+.programName {
+  color: rgba(234, 234, 234, 0.7);
+  font-size: 25px;
+  font-family: "LG Smart UI";
+  font-weight: 600;
+  line-height: 35px;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  max-width: 180px; // 최대 너비 제한 완화
+}
+
+
+.arrowIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26.25px;
+  height: 15.63px;
+  margin-right: 10px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

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';
@@ -16,6 +16,7 @@ import { SpotlightIds } from '../../../../utils/SpotlightIds';
 import LiveChannelContents from '../TabContents/LiveChannelContents';
 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');
@@ -37,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:', {
@@ -238,7 +267,21 @@ export default function TabContainerV2({
         </>
       )}
 
-      {tabVisible && tabIndex === 2 && <ShopNowButton onClick={onShopNowButtonClick} />}
+      {tabVisible && tabIndex === 2 && (
+        <>
+          <LiveChannelNext
+            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} />
+        </>
+      )}
     </Container>
   );
 }