docs: update documentation for useBodyScrollLock, useNetworkStatus, usePageVisibility, and useScrollDirection hooks (toss#311)

Author: kimyouknow

docs/index.md

@@ -3,7 +3,7 @@ layout: home
 
 hero:
   name: 'react-simplikit'
-  text: 'React utility library family'
+  text: 'Lightweight and powerful React utility library'
   image:
     src: /images/symbol.svg
     alt: react-simplikit
@@ -16,10 +16,10 @@ hero:
       link: /core/intro
 
 features:
-  - title: '@react-simplikit/mobile'
-    details: Mobile-optimized hooks for web views and hybrid apps. Handle keyboard, viewport, scroll issues.
-    link: /mobile/intro
-  - title: react-simplikit
-    details: Core utilities, hooks, and components for React applications. Zero dependencies.
-    link: /core/intro
+  - title: 'Zero dependencies'
+    details: No external libraries are needed, making your project lightweight, faster, and easier to maintain. Effortlessly reduce bundle size and improve performance.
+  - title: 100% Test Coverage
+    details: Every function and branch is rigorously tested, ensuring robust and reliable code for any use case.
+  - title: Comprehensive Documentation
+    details: Each feature includes clear JSDoc comments, beginner-friendly guides, and practical examples. Start quickly with detailed and easy-to-follow instructions.
 ---

docs/ko/index.md

@@ -3,7 +3,7 @@ layout: home
 
 hero:
   name: 'react-simplikit'
-  text: 'React 유틸리티 라이브러리 패밀리'
+  text: '가볍고 강력한 React 유틸리티 라이브러리'
   image:
     src: /images/symbol.svg
     alt: react-simplikit
@@ -16,10 +16,10 @@ hero:
       link: /ko/core/intro
 
 features:
-  - title: '@react-simplikit/mobile'
-    details: 모바일 웹뷰와 하이브리드 앱을 위한 최적화된 훅. 키보드, 뷰포트, 스크롤 이슈를 해결합니다.
-    link: /ko/mobile/intro
-  - title: react-simplikit
-    details: React 애플리케이션을 위한 핵심 유틸리티, 훅, 컴포넌트. 의존성 없음.
-    link: /ko/core/intro
+  - title: '의존성이 전혀 없어요'
+    details: 추가 라이브러리가 필요 없어서 프로젝트가 가볍고 빠르며 유지보수가 쉬워요. 번들 크기를 줄이고 성능을 손쉽게 개선할 수 있어요.
+  - title: 100% 테스트 커버리지
+    details: 모든 함수와 분기를 꼼꼼히 테스트해서 어떤 상황에서도 안정적이고 신뢰할 수 있는 코드를 보장해요.
+  - title: 풍부한 문서
+    details: 각 기능에 대해 명확한 JSDoc, 초보자도 이해하기 쉬운 가이드, 실용적인 예제가 포함되어 있어요. 자세하고 따라 하기 쉬운 설명으로 바로 시작할 수 있어요.
 ---

packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md

@@ -1,7 +1,5 @@
 # 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
 
 ```ts
@@ -10,50 +8,20 @@ function useBodyScrollLock(): void;
 
 ### Parameters
 
-This hook takes no parameters.
-
 ### Return Value
 
-This hook returns `void` (no return value).
+This hook does not return anything.
 
-## Examples
-
-### Basic Usage
+## Example
 
+````tsx
 ```tsx
 function Modal() {
   useBodyScrollLock();
   return <div className="modal">Modal content</div>;
 }
-```
-
-### 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 && <BodyScrollLock />}
-      {showModal1 && <Modal1 />}
-      {showModal2 && <Modal2 />}
-    </>
-  );
-}
 ```
 
-## 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.
+```

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',
 },

packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md

@@ -1,7 +1,5 @@
 # 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
 
 ```ts
@@ -10,99 +8,42 @@ function useNetworkStatus(): NetworkStatus;
 
 ### Parameters
 
-This hook takes no parameters.
-
 ### Return Value
 
 <Interface
-name=""
-type="NetworkStatus"
-description="object with network connection data."
-:nested="[
-{
-name: 'effectiveType',
-type: \"'slow-2g' | '2g' | '3g' | '4g' | undefined\",
-required: false,
-description: 'Connection quality indicator - undefined if API not supported',
-},
-{
-name: 'type',
-type: \"'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax' | undefined\",
-required: false,
-description: 'Physical connection type - undefined if API not supported',
-},
-{
-name: 'downlink',
-type: 'number | undefined',
-required: false,
-description: 'Downlink speed in Mbps - undefined if API not supported',
-},
-{
-name: 'rtt',
-type: 'number | undefined',
-required: false,
-description: 'Round-trip time in milliseconds - undefined if API not supported',
-},
-{
-name: 'saveData',
-type: 'boolean | undefined',
-required: false,
-description: \"User's data saver preference - undefined if API not supported\",
-},
-]"
+  name=""
+  type="NetworkStatus"
+  description="status information"
+  :nested="[
+    {
+      name: '',
+      type: 'effectiveType',
+      required: false,
+      description:
+        'Connection quality<br />  : \'slow-2g\' | \'2g\' | \'3g\' | \'4g\' - <code>type</code> - Physical connection<br />  : \'wifi\' | \'cellular\' | \'ethernet\' | etc. - <code>downlink</code> - Downlink speed in Mbps - <code>rtt</code> - Round-trip time in milliseconds - <code>saveData</code> - User\'s data saver preference.',
+    },
+  ]"
 />
 
-## Examples
-
-### Adaptive Image Quality
+## Example
 
-```tsx
+````tsx
+```tsxp
 function AdaptiveImage() {
   const { effectiveType, saveData } = useNetworkStatus();
 
   // Determine quality based on your app's needs
   const useHighQuality = effectiveType === '4g' && !saveData;
 
   return (
-    <img src={useHighQuality ? 'high-res.jpg' : 'low-res.jpg'} alt="Content" />
+    <img
+      src={useHighQuality ? 'high-res.jpg' : 'low-res.jpg'}
+      alt="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 <video src="video.mp4" autoPlay={shouldAutoplay} />;
-}
 ```
 
-## Notes
-
-### Browser Support
-
-- **Chrome/Edge (Android)**: Full support for all properties
-- **Chrome/Edge (Desktop)**: Partial support (effectiveType, downlink, rtt, saveData available; type may be undefined)
-- **Firefox**: Not supported (all properties will be undefined)
-- **Safari**: Not supported (all properties will be undefined)
-
-### SSR Safety
-
-This hook is SSR-safe. It returns an empty object `{}` on the server and safely subscribes to network changes only in the browser environment.
-
-### Usage Recommendations
-
-1. Always check for undefined values before using them, as the API may not be supported in all browsers
-2. Provide fallback behavior for browsers that don't support the Network Information API
-3. Use the hook to enhance user experience, not as a required feature
-4. Consider combining `effectiveType` and `saveData` for optimal content delivery decisions
-
-### References
-
-- [Network Information API Specification](https://wicg.github.io/netinfo/)
-- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)
+```

packages/mobile/src/hooks/usePageVisibility/ko/usePageVisibility.md

@@ -29,7 +29,7 @@ description: '페이지가 현재 사용자에게 보이면 <code>true</code>',
 },
 {
 name: 'visibilityState',
-type: \"'visible' | 'hidden'\",
+type: &quot;'visible' | 'hidden'&quot;,
 required: false,
 description: '페이지의 현재 가시성 상태',
 },

packages/mobile/src/hooks/usePageVisibility/usePageVisibility.md

@@ -1,9 +1,5 @@
 # usePageVisibility
 
-React hook to detect page visibility changes.
-
-Monitors when the user switches tabs or minimizes the browser using the Page Visibility API. This is useful for pausing/resuming animations, videos, or background tasks to improve performance and user experience.
-
 ## Interface
 
 ```ts
@@ -12,36 +8,26 @@ function usePageVisibility(): PageVisibility;
 
 ### Parameters
 
-This hook takes no parameters.
-
 ### Return Value
 
 <Interface
-name=""
-type="PageVisibility"
-description="object with page visibility state."
-:nested="[
-{
-name: 'isVisible',
-type: 'boolean',
-required: false,
-description: '<code>true</code> if the page is currently visible to the user',
-},
-{
-name: 'visibilityState',
-type: \"'visible' | 'hidden'\",
-required: false,
-description: 'Current visibility state of the page',
-},
-]"
+  name=""
+  type="PageVisibility"
+  description="visibility information"
+  :nested="[
+    {
+      name: '',
+      type: 'isVisible',
+      required: false,
+      description:
+        'True if page is currently visible to the user - <code>visibilityState</code> - Current visibility state<br />  : \'visible\' | \'hidden\'.',
+    },
+  ]"
 />
 
-## Examples
-
-### Video Player Control
-
-Automatically pause video playback when the user switches to another tab:
+## Example
 
+````tsx
 ```tsx
 function VideoPlayer() {
   const { isVisible } = usePageVisibility();
@@ -58,30 +44,8 @@ function VideoPlayer() {
 
   return <video ref={videoRef} src="video.mp4" />;
 }
-```
-
-### Analytics Tracking
-
-Track when users leave or return to your page:
+````
 
-```tsx
-function Analytics() {
-  const { isVisible, visibilityState } = usePageVisibility();
-
-  useEffect(() => {
-    if (visibilityState === 'hidden') {
-      // Track when user leaves the page
-      analytics.track('page_hidden');
-    }
-  }, [visibilityState]);
-
-  return null;
-}
 ```
 
-## Notes
-
-- **SSR Safety**: During server-side rendering, this hook returns `{ isVisible: true, visibilityState: 'visible' }` as a safe default since the Page Visibility API is not available on the server.
-- **Browser Support**: The Page Visibility API is supported in all modern browsers. See [MDN Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#browser_compatibility) for details.
-- **Performance**: The hook uses the native `visibilitychange` event, which is highly optimized and has minimal performance impact.
-- **Visibility States**: The hook excludes the deprecated `'prerender'` state and only returns `'visible'` or `'hidden'`.
+```

packages/mobile/src/hooks/useScrollDirection/ko/useScrollDirection.md

@@ -38,7 +38,7 @@ description="스크롤 방향과 위치를 담은 객체예요."
 :nested="[
 {
 name: 'direction',
-type: \"'up' | 'down' | null\",
+type: "'up' | 'down' | null",
 required: false,
 description: '현재 스크롤 방향. 초기 렌더링 시에는 <code>null</code>',
 },