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

- 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>

src/widgets/navigation/footer.tsx

@@ -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;
+          currentTranslateY = TOTAL_HIDE_HEIGHT;
-          tabbar.style.transform = `translateY(${TABBAR_HEIGHT}px)`;
+          tabbar.style.transform = `translateY(${TOTAL_HIDE_HEIGHT}px)`;
-          const buttons = tabbar.querySelectorAll('.tab-button') as NodeListOf<HTMLElement>;
-          buttons.forEach(button => {
-            button.style.opacity = '0.1';
-          });
         }
       }, 150);
     };