[Next js] 위치권한 상태 확인

사용자의 위치권환상태에 따라 서비스를 제공하는데, 위치권한을 허용하지않았을경우 상태와 메세지를 추가하였다.

BF

이 코드는 요청은 원활하지만 단순히 요청허용에 한정으로만 실행된다.
요청거부시 계속로딩되어 사용자에게 불편함을 줄 수 있다.

  // Geolocation API 로 유저의 위도,경도값 추출
  useEffect(() => {
    if ('geolocation' in navigator) {
      //현 브라우저가 Geolocation API를 지원하는지 확인
      navigator.geolocation.getCurrentPosition(
        //사용자의 현재 위치를 요청
        async (position) => {
          const { latitude, longitude } = position.coords;
          setLocation({ lat: latitude, lng: longitude });
          await getAddress(latitude, longitude);
        },
        (err) => {
          showErrorMsg(err.message, setError);
        },
        {
          enableHighAccuracy: true, // 정확도 우선 모드
          timeout: 60000, // 1분 이내에 응답 없으면 에러 발생
          maximumAge: 0 // 항상 최신 위치 정보 수집
        }
      );
    } else {
      console.log('오류가 발생했습니다.');
    }
  }, []);

AF

사용자가 거부했을시 거부했기때문에 서비스를 이용할 수 없다는 메세지를 전달하여 허용해야하는 이유를 설명해주었다.

  useEffect(() => {
    const checkGeolocation = async () => {
      if ('permissions' in navigator) {
        //현 브라우저가 Geolocation API를 지원하는지 확인
        try {
          const result = await navigator.permissions.query({ name: 'geolocation' }); //사용자의 위치정보에 대한 권한을 요청
          if (result.state === 'granted' || result.state === 'prompt') {
            //허용했을때, 처음위치권한요청시
            navigator.geolocation.getCurrentPosition(
              //사용자의 현재 위치를 요청
              async (position) => {
                const { latitude, longitude } = position.coords;
                setLocation({ lat: latitude, lng: longitude });
                await getAddress(latitude, longitude);
              },
              (err) => {
                showErrorMsg(err.message, setError);
                alert('위치 권한이 거부되었습니다. 허용하지 않으면 스탬프를 찍을 수 없습니다.');
              },
              {
                enableHighAccuracy: true, // 정확도 우선 모드
                timeout: 60000, // 1분 이내에 응답 없으면 에러 발생
                maximumAge: 0 // 항상 최신 위치 정보 수집
              }
            );
          } else if (result.state === 'denied') {
            // 위치 권한이 거부된 경우
            alert('위치 권한이 거부되었습니다. 허용하지 않으면 스탬프를 찍을 수 없습니다.');
            showErrorMsg('위치 권한이 거부되었습니다.', setError);
          }
        } catch (error) {
          console.log('권한을 확인하는 중 오류가 발생했습니다.', error);
        }
      } else {
        console.log('Geolocation API를 지원하지 않는 브라우저입니다.');
      }
    };
    checkGeolocation();
  }, []);

• permissions :

• navigator.permissions.query : 위치 권한 상태를 확인

• granted : 허용

• prompt : 권한요청중

• denied : 거부

1. try catch문으로 1차적으로 오류상태와 정상상태를 걸러준다.
2. try중 허용/요청중/거부 상태에 따른 조건문을 추가하여 상태에 따라 코드를 분리한다.

result.state === 'granted' || result.state === 'prompt'
-> 허용 || 권한요청중 => 위치 정보가져오는 기존코드 유지

result.state === 'denied'
-> 거부 => 관련알람메세지, 콘솔에러 출력

참고자료
Using the Permissions API- MDN
geolocation 위치 권한 요청