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

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

🔧 주요 변경 내용:
  • 소규모 기능 개선
  • 코드 정리 및 최적화

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

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

@@ -82,28 +82,34 @@ 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 isScrollable = container.scrollWidth > container.clientWidth;
+
+        let scrollLeft = 0;
+
+        if (alignToStart && isScrollable) {
+          // 첫 번째 위치로 스크롤
+          scrollLeft = item.offsetLeft - scaleW(spacing);
+        } else if (!alignToStart) {
+          // 기존 로직: 현재 아이템 + 다음 아이템까지 보이도록
           const itemLeft = item.offsetLeft;
           const itemWidth = item.offsetWidth;
           const containerWidth = container.clientWidth;
 
-        // 다음 아이템도 일부 보일 수 있도록 스크롤
-        // 현재 아이템 + 다음 아이템의 일부가 보이는 위치로 스크롤
           const nextItem = itemsRef.current[index + 1];
-        let scrollLeft = itemLeft - scaleW(spacing);
+          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);
           }
+        }
 
         // 음수 스크롤 방지
         scrollLeft = Math.max(0, scrollLeft);
@@ -117,24 +123,31 @@ export default function TScrollerLiveChannel({
           container.scrollLeft = scrollLeft;
         }
       } else {
-        // 수직 스크롤: 현재 아이템 + 다음 아이템까지 보이도록
+        // 수직 스크롤: 스크롤 가능 여부 판단
+        const isScrollable = container.scrollHeight > container.clientHeight;
+
+        let scrollTop = 0;
+
+        if (alignToStart && isScrollable) {
+          // 첫 번째 위치로 스크롤
+          scrollTop = item.offsetTop - scaleH(spacing);
+        } else if (!alignToStart) {
+          // 기존 로직: 현재 아이템 + 다음 아이템까지 보이도록
           const itemTop = item.offsetTop;
           const itemHeight = item.offsetHeight;
           const containerHeight = container.clientHeight;
 
-        // 다음 아이템도 일부 보일 수 있도록 스크롤
           const nextItem = itemsRef.current[index + 1];
-        let scrollTop = itemTop - scaleH(spacing);
+          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);
           }
+        }
 
         // 음수 스크롤 방지
         scrollTop = Math.max(0, scrollTop);
@@ -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 });
         }
       });
     }