From a3ef8792c385f6efce53d5b2766b069aea9ade55 Mon Sep 17 00:00:00 2001 From: kimyouknow Date: Tue, 10 Feb 2026 00:00:20 +0900 Subject: [PATCH 01/12] docs: update documentation for useBodyScrollLock, useNetworkStatus, usePageVisibility, and useScrollDirection hooks - Refined descriptions and examples for clarity and consistency. - Improved parameter and return value sections across all hooks. - Removed outdated examples and notes to streamline documentation. - Enhanced Korean translations for useNetworkStatus and usePageVisibility hooks. --- .../useBodyScrollLock/useBodyScrollLock.md | 41 +------- .../useNetworkStatus/ko/useNetworkStatus.md | 4 +- .../useNetworkStatus/useNetworkStatus.md | 97 ++++--------------- .../usePageVisibility/ko/usePageVisibility.md | 2 +- .../usePageVisibility/usePageVisibility.md | 64 +++--------- .../ko/useScrollDirection.md | 2 +- .../useScrollDirection/useScrollDirection.md | 69 +++---------- 7 files changed, 54 insertions(+), 225 deletions(-) diff --git a/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md b/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md index be78ed7c..31b06fdb 100644 --- a/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md +++ b/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md @@ -1,6 +1,6 @@ # useBodyScrollLock -A React hook that locks body scroll when mounted and automatically unlocks when unmounted. This is particularly useful for modals, drawers, and other overlay components that should prevent background scrolling. + ## Interface @@ -10,50 +10,17 @@ function useBodyScrollLock(): void; ### Parameters -This hook takes no parameters. ### Return Value -This hook returns `void` (no return value). - -## Examples - -### Basic Usage +This hook does not return anything. +## Example +```tsx ```tsx function Modal() { useBodyScrollLock(); return
Modal content
; } ``` - -### Multiple Modals - Single Lock Pattern - -When you have multiple overlapping modals, use a single lock at the parent level instead of applying the lock to each modal individually. - -```tsx -// Multiple modals - single lock pattern -function BodyScrollLock() { - useBodyScrollLock(); - return null; -} - -function App() { - const hasModal = showModal1 || showModal2; - - return ( - <> - {hasModal && } - {showModal1 && } - {showModal2 && } - - ); -} ``` - -## Notes - -- **SSR Safety**: This hook uses `useEffect`, which only runs on the client side, making it safe for server-side rendering (SSR). -- **Automatic Cleanup**: The scroll lock is automatically removed when the component unmounts, ensuring proper cleanup. -- **Multiple Modals**: For scenarios with multiple overlapping modals, implement a single lock at the parent level rather than applying locks to each modal individually. This prevents conflicts and ensures consistent behavior. -- **Browser Support**: Works in all modern browsers that support the underlying CSS modifications applied by the `enableBodyScrollLock` and `disableBodyScrollLock` utilities. diff --git a/packages/mobile/src/hooks/useNetworkStatus/ko/useNetworkStatus.md b/packages/mobile/src/hooks/useNetworkStatus/ko/useNetworkStatus.md index 60b485ee..a430ee06 100644 --- a/packages/mobile/src/hooks/useNetworkStatus/ko/useNetworkStatus.md +++ b/packages/mobile/src/hooks/useNetworkStatus/ko/useNetworkStatus.md @@ -21,13 +21,13 @@ description="네트워크 연결 데이터를 담은 객체예요." :nested="[ { name: 'effectiveType', -type: \"'slow-2g' | '2g' | '3g' | '4g' | undefined\", +type: "'slow-2g' | '2g' | '3g' | '4g' | undefined", required: false, description: '연결 품질 지표 - API가 지원되지 않으면 undefined', }, { name: 'type', -type: \"'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax' | undefined\", +type: "'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax' | undefined", required: false, description: '물리적 연결 타입 - API가 지원되지 않으면 undefined', }, diff --git a/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md b/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md index 0f7e026b..8f0526a9 100644 --- a/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md +++ b/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md @@ -1,6 +1,6 @@ # useNetworkStatus -React hook to access Network Information API. Provides raw network connection data including connection type, quality, speed, and user preferences. Returns undefined for all properties if the API is not supported (e.g., Safari, Firefox). + ## Interface @@ -10,52 +10,27 @@ function useNetworkStatus(): NetworkStatus; ### Parameters -This hook takes no parameters. ### Return Value -## Examples - -### Adaptive Image Quality +## Example +```tsx ```tsx function AdaptiveImage() { const { effectiveType, saveData } = useNetworkStatus(); @@ -64,45 +39,11 @@ function AdaptiveImage() { const useHighQuality = effectiveType === '4g' && !saveData; return ( - Content + Content ); } ``` - -### Conditional Video Autoplay - -```tsx -function VideoPlayer() { - const { type, downlink } = useNetworkStatus(); - - // Custom logic: only autoplay on wifi with good bandwidth - const shouldAutoplay = type === 'wifi' && (downlink ?? 0) > 5; - - return