[URH-100] useWindowSize docs 작성

docs/pages/hooks/_meta.json

@@ -8,11 +8,13 @@
   "useGeolocation": "useGeolocation",
   "useHover": "useHover",
   "useInterval": "useInterval",
+  "useIntersectionObserver": "useIntersectionObserver",
   "useKeyCombination": "useKeyCombination",
+  "useKeyDown": "useKeyDown",
   "useLongPress": "useLongPress",
   "useMousePosition": "useMousePosition",
-  "useIntersectionObserver": "useIntersectionObserver",
   "useOnlineStatus": "useOnlineStatus",
+  "useOutsideClick": "useOutsideClick",
   "usePrefersColorScheme": "usePrefersColorScheme",
   "usePreventCopy": "usePreventCopy",
   "useScrollLock": "useScrollLock",
@@ -22,8 +24,7 @@
   "useToggle": "useToggle",
   "useTranslation": "useTranslation",
   "useUnmountEffect": "useUnmountEffect",
-  "useOutsideClick": "useOutsideClick",
-  "useKeyDown": "useKeyDown",
+  "useWindowSize": "useWindowSize",
   "_template": {
     "display": "hidden"
   }

docs/pages/hooks/useWindowSize.mdx

@@ -0,0 +1,43 @@
+# useWindowSize
+
+## Introduce
+
+브라우저의 너비와 높이를 반환하는 훅입니다. 브라우저 창의 크기가 변경될 때마다 업데이트된 값을 반환합니다.
+
+```ts
+interface UseWindowSizeReturns {
+  width: number | null;
+  height: number | null;
+}
+
+const useWindowSize = <T extends number>(
+  delayTime: PositiveInteger<T>
+): UseWindowSizeReturns
+```
+
+### Props
+
+- `delayTime`: 과도한 이벤트 실행을 방지하기 위해 resize 이벤트를 지연시키는 시간(ms)
+  - default: 200
+
+### Returns
+
+- `width`: 브라우저의 너비
+- `height`: 브라우저의 높이
+
+## Examples
+
+```tsx copy filename="TestComponent.tsx"
+import { useWindowSize } from '@frontend-opensource/use-react-hooks';
+
+function TestComponent() {
+  const { width, height } = useWindowSize();
+
+  return (
+    <div>
+      <p>width: {width}px</p>
+      <p>height: {height}px</p>
+    </div>
+  );
+}
+```

src/hooks/useWindowSize/useWindowSize.ts

@@ -2,12 +2,15 @@ import { useEffect, useState } from 'react';
 import { PositiveInteger, UseWindowSizeReturns } from './type';
 
 /**
- * useWindowSize : 브라우저의 너비와 높이를 제공하는 훅
- * @param {number} [delayTime=200] 지연 시간(ms). 리사이즈 이벤트 딜레이 설정. Default=200
- * @returns {{ width: number, height: number }} 브라우저의 너비와 높이를 담은 객체
- * @description
- * 브라우저 창의 사이즈가 변경될 때마다 해당 창의 너비와 높이를 업데이트합니다.
- * UI의 세밀한 조작 등 동적인 변화에 유용합니다.
+ * 브라우저의 너비와 높이를 반환하는 훅
+ *
+ * @param {number} [delayTime=200] 과도한 이벤트 실행을 방지하기 위해 resize 이벤트를 지연시키는 시간(ms)
+ *
+ * @returns {{ width: number, height: number }}
+ * - width: 브라우저의 너비
+ * - height: 브라우저의 높이
+ *
+ * @description 브라우저 창의 크기가 변경될 때마다 업데이트된 값을 반환합니다.
  */
 
 const useWindowSize = <T extends number>(