Merge pull request #77 from frontend-opensource-project/URH-96/use-detect-device

[URH-96] useDetectDevice 문서 신규

Author: bicochan

docs/pages/docs/hooks/_meta.json

@@ -1,5 +1,6 @@
 {
   "useDeepCompareEffect": "useDeepCompareEffect",
+  "useDetectDevice": "useDetectDevice",
   "useKeyCombination": "useKeyCombination",
   "useLongPress": "useLongPress",
   "useMousePosition": "useMousePosition",

docs/pages/docs/hooks/useDetectDevice.mdx

@@ -0,0 +1,53 @@
+# useDetectDevice
+
+## Introduce
+
+현재 디바이스의 유형(moblie, desktop), OS 및 Browser를 감지합니다.
+
+import { Callout } from 'nextra/components';
+
+<Callout type="info">
+  userAgent의 업데이트로 인하여 올바르게 작동하지 않을 수 있습니다. 유의해서
+  사용해주세요.
+</Callout>
+
+```ts
+interface UseDeviceDetectReturns {
+  isMobile: boolean;
+  isDesktop: boolean;
+  os: string;
+  browser: string;
+}
+
+const useDetectDevice = (): UseDeviceDetectReturns
+```
+
+### Returns
+
+- `isMobile` : 사용 중인 디바이스의 Mobile 여부를 나타냅니다.
+- `isDesktop` : 사용 중인 디바이스의 Desktop 여부를 나타냅니다.
+- `os` : 사용 중인 디바이스의 OS 이름(문자열)을 나타냅니다.\
+  cf) Windows, macOS, Linux, Android, iOS
+- `browser` : 사용 중인 브라우저의 이름(문자열)을 나타냅니다.\
+  cf) Chrome, Safari, Whale, Edge, Firefox
+
+## Examples
+
+```tsx copy filename="TestComponent.tsx"
+const TestComponent = () => {
+
+  const { isMobile, os, browser } = useDeviceDetect();
+
+  return (
+    <div>
+      <div>
+        {isMobile && (
+          <>
+            <div>모바일 환경에 최적화된 콘텐츠</div>
+            <div>...</div>
+          </>
+        )}
+    </div>
+  );
+};
+```