모바일 UX 개선과 네트워크 상태 감지 기능 추가

🤖 1631 in / 836 out / 2467 total tokens

v0.23.0에서 모바일 경험을 크게 개선했다. 버튼 크기를 w-12/h-12에서 w-14/h-14로 키우고, BottomSheet 드래그 핸들과 드래그 영역도 확대했다. FAB는 하단 여백 24px을 확보해 손가락이 닿기 더 편해졌다.

로딩 상태도 개선했다. ResultListSkeleton에 shimmer 효과를 적용해 부드러운 그라데이션 애니메이션이 흐르도록 했다. 단순한 pulse 대신 시각적으로 더 깔끔한 피드백을 준다.

새로운 useNetworkStatus 훅을 만들었다. 실시간 온라인/오프라인 감지와 2G/slow-2g 같은 느린 연결을 감지해 경고를 표시한다. 모바일 검색바에 네트워크 상태 배너가 표시된다.

export function useNetworkStatus() {
  const [isOnline, setIsOnline] = useState(() => {
    if (typeof window === 'undefined') return true;
    return navigator.onLine;
  });
  
  const [isSlowConnection, setIsSlowConnection] = useState(() => {
    if (typeof window === 'undefined') return false;
    const conn = (navigator as any).connection;
    return conn?.effectiveType?.includes('2g');
  });
  // ... 이벤트 리스너로 상태 동기화
}

672개 테스트 전부 통과, 타입/린트 에러 제로. 브레이킹 체인지 없이 자연스럽게 적용된다.