Merge pull request #109 from frontend-opensource-project/URH-111/use-permission

[URH-111] usePermission 문서

Author: bicochan

docs/pages/hooks/_meta.json

@@ -18,6 +18,7 @@
   "useMousePosition": "useMousePosition",
   "useOnlineStatus": "useOnlineStatus",
   "useOutsideClick": "useOutsideClick",
+  "usePermission": "usePermission",
   "usePrefersColorScheme": "usePrefersColorScheme",
   "usePreventCopy": "usePreventCopy",
   "useScrollLock": "useScrollLock",

docs/pages/hooks/usePermission.mdx

@@ -0,0 +1,95 @@
+# usePermission
+
+## Introduce
+
+사용자의 권한 상태의 변화를 감지하고, 권한 요청에 대한 상태를 자동으로 처리하는 훅입니다.
+
+```ts
+interface UsePermissionProps {
+  permission:
+    | 'accessibility-events'
+    | 'accelerometer'
+    | 'ambient-light-sensor'
+    | 'background-fetch'
+    | 'background-sync'
+    | 'bluetooth'
+    | 'camera'
+    | 'captured-surface-control'
+    | 'clipboard-read'
+    | 'clipboard-write'
+    | 'display-capture'
+    | 'fullscreen'
+    | 'geolocation'
+    | 'gyroscope'
+    | 'idle-detection'
+    | 'keyboard-lock'
+    | 'local-fonts'
+    | 'magnetometer'
+    | 'microphone'
+    | 'midi'
+    | 'nfc'
+    | 'notifications'
+    | 'payment-handler'
+    | 'periodic-background-sync'
+    | 'persistent-storage'
+    | 'pointer-lock'
+    | 'push'
+    | 'screen-wake-lock'
+    | 'speaker-selection'
+    | 'storage-access'
+    | 'system-wake-lock'
+    | 'top-level-storage-access'
+    | 'window-management';
+}
+
+interface UsePermissionReturns {
+  status: 'granted' | 'prompt' | 'denied' | 'notSupported';
+}
+
+const useSomethingHook = (props: UsePermissionProps): UsePermissionReturns
+```
+
+- 주어진 권한에 대한 상태를 확인하고, 권한 상태가 변경될 때마다 업데이트합니다.
+
+### Props
+
+- `permission` : 확인하려는 권한의 이름을 입력합니다. `Permission` 타입은 사전 정의된 권한 이름과 문자열 모두 허용됩니다.
+
+import { Callout } from 'nextra/components';
+
+<Callout type="info">
+  사전 정의된 권한은 Firefox, Chromium, WebKit에서 공통으로 사용하는 권한입니다.
+</Callout>
+
+### Returns
+
+- `status` : 현재 권한의 상태를 반환합니다.
+
+<Callout type="info">
+  상태 값은 다음 중 하나일 수 있습니다: `granted` | `prompt` | `denied` |
+  `notSupported`
+</Callout>
+
+<Callout type="error">
+  클라이언트 환경이 아니거나 Permissions API가 지원되지 않는 경우, 권한 상태가
+  'notSupported'로 설정됩니다.
+</Callout>
+
+## Examples
+
+```tsx copy filename="TestComponent.tsx"
+import React from 'react';
+import usePermission from './usePermission';
+
+const TestComponent = () => {
+  const { status } = usePermission({ permission: 'geolocation' }); // prompt
+
+  return (
+    <div>
+      <h1>권한 상태: {status}</h1>
+    </div>
+  );
+};
+
+export default TestComponent;
+```