[251026] feat: modal 모드에서 비디오 1px 축소/복구 기능 구현

- PlayerPanel useEffect에서 shouldShrinkTo1px 플래그로 인라인 스타일 제거
- shrinkVideoTo1px/expandVideoFrom1px 액션 추가 (배너 정보 playerState에 저장)
- PlayerPanel.module.less에 .shrinkTo1px 클래스 추가
- HomePanel onScroll에서 스크롤 방향 감지하여 축소/확대 제어
- RandomUnit onBlur에서의 축소 로직은 주석 처리 (스크롤로 제어)
This commit is contained in:
2025-10-26 21:44:13 +09:00
parent a7e9f4f0a0
commit 9f3cd62549
5 changed files with 143 additions and 5 deletions

View File

@@ -26,7 +26,7 @@ import {
import { sendLogGNB, sendLogTotalRecommend } from '../../actions/logActions';
import { getSubCategory, getTop20Show } from '../../actions/mainActions';
import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
import { finishVideoPreview } from '../../actions/playActions';
import { finishVideoPreview, shrinkVideoTo1px, expandVideoFrom1px } from '../../actions/playActions';
import { getBestSeller } from '../../actions/productActions';
import TBody from '../../components/TBody/TBody';
import TButton, { TYPES } from '../../components/TButton/TButton';
@@ -152,6 +152,7 @@ const HomePanel = ({ isOnTop }) => {
}, [sortedHomeLayoutInfo]);
const cbChangePageRef = useRef(null);
const prevScrollTopRef = useRef(0); // 이전 scrollTop 추적
const focusedContainerIdRef = usePrevious(focusedContainerId);
@@ -410,9 +411,22 @@ const HomePanel = ({ isOnTop }) => {
}, []);
const _onScroll = (e) => {
if (e.scrollTop !== 0) {
dispatch(finishVideoPreview());
const currentScrollTop = e.scrollTop;
const prevScrollTop = prevScrollTopRef.current;
// 스크롤 방향 감지
if (currentScrollTop > prevScrollTop) {
// 아래로 스크롤: 비디오를 1px로 축소
console.log('[HomePanel] Scrolling down - shrinking video');
dispatch(shrinkVideoTo1px());
} else if (currentScrollTop < prevScrollTop && currentScrollTop > 0) {
// 위로 스크롤 (0이 아닌): 비디오를 원래 크기로 복구
console.log('[HomePanel] Scrolling up - expanding video');
dispatch(expandVideoFrom1px());
}
// 이전 scrollTop 업데이트
prevScrollTopRef.current = currentScrollTop;
};
const _onFocusedContainerId = useCallback(