[URH-62] usePermission 신규

[jeongbaebang]

👾 Pull Request

• 티켓: usePermission 신규
• 상태: 신규

1️⃣ Spec

• 사용자의 권한 상태를 확인하고 추적하는 커스텀 훅.

2️⃣ 변경 사항

• 해당 사항 없음

3️⃣ 예시 코드

import React, { useState } from 'react';
import usePermission from './hooks/usePermission';

const LocationComponent: React.FC = () => {
  const { status } = usePermission({ permission: 'geolocation' });
  const [location, setLocation] = useState<{
    latitude: number;
    longitude: number;
  } | null>(null);

  const handleGetLocation = () => {
    if (status === 'prompt' || status === 'granted') {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setLocation({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          });
        },
        (error) => {
          console.error('위치 정보를 가져오는데 실패했습니다.', error);
        }
      );
    } else {
      alert('위치 정보 권한이 필요합니다.');
    }
  };

  return (
    <div>
      <h2>위치 정보 권한 상태: {status}</h2>
      <button onClick={handleGetLocation}>위치 정보 가져오기</button>
      {location && (
        <div>
          <p>위도: {location.latitude}</p>
          <p>경도: {location.longitude}</p>
        </div>
      )}
      {status === 'prompt' && <p>위치 정보 접근 권한을 요청 중입니다...</p>}
      {status === 'denied' && (
        <p>
          위치 정보 접근 권한이 거부되었습니다. 설정에서 권한을 허용해 주세요.
        </p>
      )}
      {status === 'notSupported' && (
        <p>이 브라우저는 위치 정보 접근 권한을 지원하지 않습니다.</p>
      )}
    </div>
  );
};

export default LocationComponent;

4️⃣ 관련 문서 (선택 사항)

• https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API