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 47c3fd4d..873ac252 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 @@ -75,7 +75,7 @@ export default function LiveChannelContents({ // currentVideoShowId와 일치하는 배너의 인덱스 찾기 const index = liveInfos.findIndex((item) => item.showId === currentVideoShowId); if (index !== -1) { - scrollToRef.current({ index, animate: true, focus: false }); + scrollToRef.current({ index, animate: true, focus: false, alignToStart: true }); } } }, [currentVideoShowId, liveInfos]); diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/TScrollerLiveChannel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/TScrollerLiveChannel.jsx index fc142a58..19070f5c 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/TScrollerLiveChannel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/TScrollerLiveChannel.jsx @@ -82,27 +82,33 @@ export default function TScrollerLiveChannel({ if (!container || !itemsRef.current[index]) return; const item = itemsRef.current[index]; - const { animate = true } = options; + const { animate = true, alignToStart = false } = options; if (direction === 'horizontal') { - // 수평 스크롤: 현재 아이템 + 다음 아이템까지 보이도록 - const itemLeft = item.offsetLeft; - const itemWidth = item.offsetWidth; - const containerWidth = container.clientWidth; + // 수평 스크롤: 스크롤 가능 여부 판단 + const isScrollable = container.scrollWidth > container.clientWidth; - // 다음 아이템도 일부 보일 수 있도록 스크롤 - // 현재 아이템 + 다음 아이템의 일부가 보이는 위치로 스크롤 - const nextItem = itemsRef.current[index + 1]; - let scrollLeft = itemLeft - scaleW(spacing); + let scrollLeft = 0; - if (nextItem) { - // 다음 아이템의 왼쪽 끝이 컨테이너의 오른쪽 끝과 같은 위치가 되도록 - const nextItemLeft = nextItem.offsetLeft; - const nextItemWidth = nextItem.offsetWidth; - const targetScrollLeft = nextItemLeft + nextItemWidth - containerWidth + scaleW(spacing); + if (alignToStart && isScrollable) { + // 첫 번째 위치로 스크롤 + scrollLeft = item.offsetLeft - scaleW(spacing); + } else if (!alignToStart) { + // 기존 로직: 현재 아이템 + 다음 아이템까지 보이도록 + const itemLeft = item.offsetLeft; + const itemWidth = item.offsetWidth; + const containerWidth = container.clientWidth; - // 두 가지 중에서 현재 아이템이 더 잘 보이는 쪽 선택 - scrollLeft = Math.min(scrollLeft, targetScrollLeft); + const nextItem = itemsRef.current[index + 1]; + scrollLeft = itemLeft - scaleW(spacing); + + if (nextItem) { + const nextItemLeft = nextItem.offsetLeft; + const nextItemWidth = nextItem.offsetWidth; + const targetScrollLeft = nextItemLeft + nextItemWidth - containerWidth + scaleW(spacing); + + scrollLeft = Math.min(scrollLeft, targetScrollLeft); + } } // 음수 스크롤 방지 @@ -117,23 +123,30 @@ export default function TScrollerLiveChannel({ container.scrollLeft = scrollLeft; } } else { - // 수직 스크롤: 현재 아이템 + 다음 아이템까지 보이도록 - const itemTop = item.offsetTop; - const itemHeight = item.offsetHeight; - const containerHeight = container.clientHeight; + // 수직 스크롤: 스크롤 가능 여부 판단 + const isScrollable = container.scrollHeight > container.clientHeight; - // 다음 아이템도 일부 보일 수 있도록 스크롤 - const nextItem = itemsRef.current[index + 1]; - let scrollTop = itemTop - scaleH(spacing); + let scrollTop = 0; - if (nextItem) { - // 다음 아이템의 위쪽 끝이 컨테이너의 아래쪽 끝과 같은 위치가 되도록 - const nextItemTop = nextItem.offsetTop; - const nextItemHeight = nextItem.offsetHeight; - const targetScrollTop = nextItemTop + nextItemHeight - containerHeight + scaleH(spacing); + if (alignToStart && isScrollable) { + // 첫 번째 위치로 스크롤 + scrollTop = item.offsetTop - scaleH(spacing); + } else if (!alignToStart) { + // 기존 로직: 현재 아이템 + 다음 아이템까지 보이도록 + const itemTop = item.offsetTop; + const itemHeight = item.offsetHeight; + const containerHeight = container.clientHeight; - // 두 가지 중에서 현재 아이템이 더 잘 보이는 쪽 선택 - scrollTop = Math.min(scrollTop, targetScrollTop); + const nextItem = itemsRef.current[index + 1]; + scrollTop = itemTop - scaleH(spacing); + + if (nextItem) { + const nextItemTop = nextItem.offsetTop; + const nextItemHeight = nextItem.offsetHeight; + const targetScrollTop = nextItemTop + nextItemHeight - containerHeight + scaleH(spacing); + + scrollTop = Math.min(scrollTop, targetScrollTop); + } } // 음수 스크롤 방지 @@ -156,9 +169,9 @@ export default function TScrollerLiveChannel({ useEffect(() => { if (cbScrollTo) { cbScrollTo((options) => { - const { index, animate = true, focus = true } = options; + const { index, animate = true, focus = true, alignToStart = false } = options; if (typeof index === 'number' && index >= 0 && index < dataSize) { - scrollToIndex(index, { animate }); + scrollToIndex(index, { animate, alignToStart }); } }); }