optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[251008] feat v2 탭 컨테이너 추가 및 UI 조정

Browse Source 
v2 탭 컨테이너를 도입하고, 아이템 크기와 간격을 조정해 UI를 개선했습니다.

🕐 커밋 시간: 2025. 10. 08. 21:38:17

📊 변경 통계:
  • 총 파일: 11개
  • 추가: +56줄
  • 삭제: -22줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/components/TItemCard/TItemCard.v2.module.less
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.v2.module.less
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.v2.module.less
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.v2.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선
  • 모듈 구조 개선
This commit is contained in:
hyeon soo noh
2025-10-08 21:38:22 +09:00
parent a8289c905e
commit 7f66fd9735
11 changed files with 581 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -55,9 +55,10 @@ import PlayerOverlayQRCode from './PlayerOverlay/PlayerOverlayQRCode';
import css from './PlayerPanel.module.less';
import PlayerTabButton from './PlayerTabContents/TabButton/PlayerTabButton';
import TabContainer from './PlayerTabContents/TabContainer';
import LiveShowContainer from './PlayerTabContents/v2/LiveShowContainer';
import ShopNowContainer from './PlayerTabContents/v2/ShopNowContainer';
import ShopNowButton from './PlayerTabContents/v2/ShopNowButton';
import TabContainerV2 from './PlayerTabContents/v2/TabContainer.v2';
// import LiveShowContainer from './PlayerTabContents/v2/LiveShowContainer';
// import ShopNowContainer from './PlayerTabContents/v2/ShopNowContainer';
// import ShopNowButton from './PlayerTabContents/v2/ShopNowButton';
const Container = SpotlightContainerDecorator(
{ enterTo: 'default-element', preserveld: true },
@@ -203,6 +204,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
});
const [isVODPaused, setIsVODPaused] = USE_STATE('isVODPaused', false);
const [belowTabMode, setBelowTabMode] = USE_STATE('belowTabMode', 'liveShow');
const [tabIndexV2, setTabIndexV2] = USE_STATE('tabIndexV2', 1); // 0: ShopNow, 1: LiveChannel, 2: ShopNowButton
const panels = USE_SELECTOR('panels', (state) => state.panels.panels);
const chatData = USE_SELECTOR('chatData', (state) => state.play.chatData);
@@ -2076,7 +2078,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
/>
)}
{shouldShowBelowTab && (
{/* {shouldShowBelowTab && (
<>
{belowTabMode === 'liveShow' && (
<LiveShowContainer
@@ -2111,6 +2113,25 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
/>
)}
</>
)} */}
{shouldShowBelowTab && (
<TabContainerV2
panelInfo={panelInfo}
playListInfo={playListInfo}
shopNowInfo={shopNowInfo}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
liveChannelInfos={liveChannelInfos || liveShowInfos}
videoVerticalVisible={videoVerticalVisible}
handleItemFocus={handleItemFocus}
prevChannelIndex={prevChannelIndex}
currentTime={currentTime}
spotlightId="tab-container-v2-spotlight-id"
tabIndex={tabIndexV2}
onShopNowButtonClick={() => setTabIndexV2(0)}
onLiveChannelButtonClick={() => setTabIndexV2(2)}
/>
)}
</Container>