diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx index f3234e0f..47c3fd4d 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx @@ -23,6 +23,7 @@ export default function LiveChannelContents({ liveInfos, currentTime, setSelectedIndex, + selectedIndex, videoVerticalVisible, currentVideoShowId, tabIndex, @@ -66,6 +67,19 @@ export default function LiveChannelContents({ } }, [isFilteredByPatnr19]); + // currentVideoShowId 변경 시 해당 배너가 보이도록 스크롤 + // (LiveChannelButton에서 PageUp/PageDown으로 동영상 변경 시) + // currentVideoShowId 기반으로 스크롤하면 포커스 이동 없이 배너만 화면에 보임 + useEffect(() => { + if (currentVideoShowId && liveInfos && liveInfos.length > 0 && scrollToRef.current) { + // currentVideoShowId와 일치하는 배너의 인덱스 찾기 + const index = liveInfos.findIndex((item) => item.showId === currentVideoShowId); + if (index !== -1) { + scrollToRef.current({ index, animate: true, focus: false }); + } + } + }, [currentVideoShowId, liveInfos]); + const renderItem = useCallback( ({ index, ...rest }) => { const {