nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

탭바 스크롤 동작 개선 및 opacity 제거

Browse Source 
- Safe area bottom 고려하여 완전히 숨김 처리
- 스크롤 속도 증가 (0.5 -> 0.8)
- SCROLL_THRESHOLD 조건 제거로 자유로운 스크롤 구현
- 드래그 중 opacity 변화 제거
- 스냅은 드래그 종료 시에만 적용

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-10-17 12:41:12 +09:00
parent b47dba057f
commit 5be4d3b0cf
1 changed files with 17 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/widgets/navigation/footer.tsx
View File

@@ -101,9 +101,13 @@ export const FooterNavigation = ({
if (!tabbar) return;
const TABBAR_HEIGHT = 70;
const SAFE_AREA_BOTTOM = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sab')) || 34;
const TOTAL_HIDE_HEIGHT = TABBAR_HEIGHT + SAFE_AREA_BOTTOM;
const SCROLL_THRESHOLD = 50;
const SNAP_THRESHOLD = 0.5; // 50% 보이면 표시, 아니면 숨김
const SCROLL_MULTIPLIER = 0.5; // 스크롤의 50%만큼 이동
const SCROLL_MULTIPLIER = 0.8; // 스크롤의 80%만큼 이동
console.log('TABBAR_HEIGHT:', TABBAR_HEIGHT, 'SAFE_AREA_BOTTOM:', SAFE_AREA_BOTTOM, 'TOTAL_HIDE_HEIGHT:', TOTAL_HIDE_HEIGHT);
let lastScrollY = 0;
let currentTranslateY = 0; // 별도로 추적
@@ -124,10 +128,9 @@ export const FooterNavigation = ({
}
// 스크롤 방향에 따라 translateY 조정
if (currentScrollY > SCROLL_THRESHOLD) {
// 스크롤 다운
if (scrollDelta > 0) {
currentTranslateY = Math.min(currentTranslateY + scrollDelta * SCROLL_MULTIPLIER, TABBAR_HEIGHT);
currentTranslateY = Math.min(currentTranslateY + scrollDelta * SCROLL_MULTIPLIER, TOTAL_HIDE_HEIGHT);
}
// 스크롤 업
else {
@@ -136,22 +139,6 @@ export const FooterNavigation = ({
tabbar.style.transform = `translateY(${currentTranslateY}px)`;
// opacity 계산 (0 = 완전히 보임, TABBAR_HEIGHT = 완전히 숨김)
const opacityRatio = 1 - (currentTranslateY / TABBAR_HEIGHT);
const buttons = tabbar.querySelectorAll('.tab-button') as NodeListOf<HTMLElement>;
buttons.forEach(button => {
button.style.opacity = `${Math.max(0.1, opacityRatio)}`;
});
} else {
// 페이지 상단 근처에서는 완전히 표시
currentTranslateY = 0;
tabbar.style.transform = 'translateY(0)';
const buttons = tabbar.querySelectorAll('.tab-button') as NodeListOf<HTMLElement>;
buttons.forEach(button => {
button.style.opacity = '1';
});
}
lastScrollY = currentScrollY;
ticking = false;
});
@@ -165,7 +152,7 @@ export const FooterNavigation = ({
isScrolling = false;
// 현재 위치 확인 후 snap
const visibleRatio = 1 - (currentTranslateY / TABBAR_HEIGHT);
const visibleRatio = 1 - (currentTranslateY / TOTAL_HIDE_HEIGHT);
tabbar.classList.add('snapping');
@@ -173,18 +160,10 @@ export const FooterNavigation = ({
// 50% 이상 보이면 완전히 표시
currentTranslateY = 0;
tabbar.style.transform = 'translateY(0)';
const buttons = tabbar.querySelectorAll('.tab-button') as NodeListOf<HTMLElement>;
buttons.forEach(button => {
button.style.opacity = '1';
});
} else {
// 50% 미만이면 완전히 숨김
currentTranslateY = TABBAR_HEIGHT;
tabbar.style.transform = `translateY(${TABBAR_HEIGHT}px)`;
const buttons = tabbar.querySelectorAll('.tab-button') as NodeListOf<HTMLElement>;
buttons.forEach(button => {
button.style.opacity = '0.1';
});
currentTranslateY = TOTAL_HIDE_HEIGHT;
tabbar.style.transform = `translateY(${TOTAL_HIDE_HEIGHT}px)`;
}
}, 150);
};