From daac18afa800adc6ff69f9ada13d386c790f3077 Mon Sep 17 00:00:00 2001 From: optrader Date: Wed, 17 Dec 2025 20:11:19 +0900 Subject: [PATCH] =?UTF-8?q?[251217]=20fix:=20LiveChannelContents=20PageUp/?= =?UTF-8?q?Down=EC=8B=9C=20=EC=B2=AB=EB=B2=88=EC=A7=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=B0=B0=EB=84=88=EC=9C=84=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit πŸ• 컀밋 μ‹œκ°„: 2025. 12. 17. 20:11:18 πŸ“Š λ³€κ²½ 톡계: β€’ 총 파일: 2개 β€’ μΆ”κ°€: +46쀄 β€’ μ‚­μ œ: -33쀄 πŸ“ μˆ˜μ •λœ 파일: ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/TScrollerLiveChannel.jsx πŸ”§ μ£Όμš” λ³€κ²½ λ‚΄μš©: β€’ μ†Œκ·œλͺ¨ κΈ°λŠ₯ κ°œμ„  β€’ μ½”λ“œ 정리 및 μ΅œμ ν™” --- .../TabContents/LiveChannelContents.jsx | 2 +- .../TabContents/TScrollerLiveChannel.jsx | 77 +++++++++++-------- 2 files changed, 46 insertions(+), 33 deletions(-) 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 }); } }); }