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

[251217] fix: LiveChannelContents PageUp/Down시 첫번째로 배너위치

Browse Source 
🕐 커밋 시간: 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

🔧 주요 변경 내용:
  • 소규모 기능 개선
  • 코드 정리 및 최적화
This commit is contained in:
hyeon soo noh
2025-12-17 20:11:19 +09:00
parent adfede9b44
commit daac18afa8
2 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
View File

@@ -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]);

77
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/TScrollerLiveChannel.jsx
View File

@@ -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 });
}
});
}