불필요 파일 제거
This commit is contained in:
@@ -1,2 +1 @@
|
||||
export { useAppBridge } from './useAppBridge';
|
||||
export { useScrollDirection } from './useScrollDirection';
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
|
||||
export const useScrollDirection = () => {
|
||||
const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('up');
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
const [translateY, setTranslateY] = useState(0);
|
||||
const [isScrollingState, setIsScrollingState] = useState(false);
|
||||
|
||||
const lastScrollY = useRef(0);
|
||||
const scrollAccumulator = useRef(0);
|
||||
const isScrolling = useRef(false);
|
||||
const scrollTimeout = useRef<NodeJS.Timeout | null>(null);
|
||||
const lastScrollDirection = useRef<'up' | 'down'>('up');
|
||||
|
||||
useEffect(() => {
|
||||
let ticking = false;
|
||||
|
||||
const updateScrollDirection = () => {
|
||||
const scrollY = window.scrollY;
|
||||
const scrollDiff = scrollY - lastScrollY.current;
|
||||
|
||||
// 스크롤 차이가 너무 작으면 무시
|
||||
if (Math.abs(scrollDiff) < 2) {
|
||||
ticking = false;
|
||||
return;
|
||||
}
|
||||
|
||||
isScrolling.current = true;
|
||||
setIsScrollingState(true);
|
||||
|
||||
// 스크롤 방향 설정 및 마지막 방향 저장
|
||||
if (scrollDiff > 0) {
|
||||
setScrollDirection('down');
|
||||
lastScrollDirection.current = 'down';
|
||||
} else {
|
||||
setScrollDirection('up');
|
||||
lastScrollDirection.current = 'up';
|
||||
}
|
||||
|
||||
// 스크롤 누적량 계산 (최대 100px까지) - 부드러운 보간
|
||||
const dampingFactor = 0.8; // 댐핑 팩터로 부드러운 움직임
|
||||
scrollAccumulator.current += scrollDiff * dampingFactor;
|
||||
scrollAccumulator.current = Math.max(-100, Math.min(100, scrollAccumulator.current));
|
||||
|
||||
// 드래그 중에는 스크롤 누적량에 비례하여 탭바 위치 조정
|
||||
let newTranslateY = 0;
|
||||
if (scrollAccumulator.current > 0) {
|
||||
// 아래로 스크롤: 0 ~ 100px 사이에서 부드럽게 조정
|
||||
newTranslateY = Math.min(100, scrollAccumulator.current);
|
||||
} else {
|
||||
// 위로 스크롤: 0px 고정하고 누적량도 0으로 리셋
|
||||
newTranslateY = 0;
|
||||
scrollAccumulator.current = Math.max(0, scrollAccumulator.current);
|
||||
}
|
||||
|
||||
// 부드러운 업데이트를 위한 RAF 사용
|
||||
requestAnimationFrame(() => {
|
||||
setTranslateY(newTranslateY);
|
||||
});
|
||||
|
||||
lastScrollY.current = scrollY > 0 ? scrollY : 0;
|
||||
|
||||
// 스크롤 종료 감지
|
||||
if (scrollTimeout.current) {
|
||||
clearTimeout(scrollTimeout.current);
|
||||
}
|
||||
|
||||
scrollTimeout.current = setTimeout(() => {
|
||||
isScrolling.current = false;
|
||||
setIsScrollingState(false);
|
||||
|
||||
// 스크롤 종료 시 마지막 드래그 방향에 따라 최종 위치 결정
|
||||
if (Math.abs(scrollAccumulator.current) > 15) {
|
||||
// 충분한 스크롤이 있었을 때만 방향에 따라 결정
|
||||
if (lastScrollDirection.current === 'down') {
|
||||
// 아래로 스크롤했으면 탭바 숨기기
|
||||
setTranslateY(100);
|
||||
setIsVisible(false);
|
||||
scrollAccumulator.current = 100;
|
||||
} else {
|
||||
// 위로 스크롤했으면 탭바 보이기
|
||||
setTranslateY(0);
|
||||
setIsVisible(true);
|
||||
scrollAccumulator.current = 0;
|
||||
}
|
||||
} else {
|
||||
// 스크롤이 미미할 때는 현재 상태 유지
|
||||
if (isVisible) {
|
||||
setTranslateY(0);
|
||||
scrollAccumulator.current = 0;
|
||||
} else {
|
||||
setTranslateY(100);
|
||||
scrollAccumulator.current = 100;
|
||||
}
|
||||
}
|
||||
}, 150);
|
||||
|
||||
ticking = false;
|
||||
};
|
||||
|
||||
const onScroll = () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateScrollDirection);
|
||||
ticking = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
if (scrollTimeout.current) {
|
||||
clearTimeout(scrollTimeout.current);
|
||||
}
|
||||
};
|
||||
}, [isVisible]);
|
||||
|
||||
return { scrollDirection, isVisible, translateY, isScrollingState };
|
||||
};
|
||||
Reference in New Issue
Block a user