검수 시 위치 정보를 받아오지 못합니다

개발
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

안녕하세요.

QR / 실기기로 테스트 할 때 useGeolocation 훅으로 위치 정보가 잘 받아와지는 것을 확인했습니다. 문제는 검수 과정에서 위치 정보를 허용하였음에도 현재 위치를 받아오지 못해 관련 로직이 작동하지 않고 있습니다.

검수 환경의 문제인지 확인하기 위해 영상을 요청드렸고, 시뮬레이터 환경의 문제인지 확인 부탁드렸으나 실기기를 미러링 중이라고 하셔서 시뮬레이터 사용의 문제는 아닌 것 같습니다.

권한 미허용의 문제라면 별도의 안내 화면을 표시할 수 있으나, 권한 허용한 실기기에서 location이 null로 오는 것 같아서, 혹시 어떤 경우인지, 또 어떻게 처리하면 될지 문의드립니다.

2

안녕하세요 :slight_smile:
appName 을 알려주실 수 있을까요 ? 직접 테스트 해보려 합니다 :man_bowing:

1개의 좋아요
3

walking 입니다!

4

안녕하세요 :slight_smile:
특정 기기로 말씀주신 미니앱 테스트시 위치 정보가 받아와지지 않는 것을 확인했습니다.

useGeolocation 훅 테스트앱을 만들어서 테스트했는데, 위치 정보 실패했던 기기에서도 잘 받아와지더라구요 :thinking:

코드를 한번 확인해봐주실 수 있을까요 ?

테스트한 코드 공유드립니다.

import { createRoute } from '@granite-js/react-native';
import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { useGeolocation, Accuracy } from '@apps-in-toss/framework';

export const Route = createRoute('/', {
  component: Page,
});

function Page() {
  const [isTracking, setIsTracking] = useState(false);
  
  const location = useGeolocation({
    accuracy: Accuracy.Balanced,
    distanceInterval: 10,
    timeInterval: 1000,
  });

  const handleStartTracking = () => {
    setIsTracking(true);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>위치 정보 테스트</Text>
      
      {!isTracking && (
        <TouchableOpacity
          style={styles.button}
          onPress={handleStartTracking}
        >
          <Text style={styles.buttonText}>내 위치 가져오기</Text>
        </TouchableOpacity>
      )}

      {isTracking && location == null && (
        <Text style={styles.loadingText}>위치 정보를 가져오는 중이에요...</Text>
      )}

      {isTracking && location && (
        <View style={styles.locationContainer}>
          <Text style={styles.locationText}>
            위도: {location.coords.latitude}
          </Text>
          <Text style={styles.locationText}>
            경도: {location.coords.longitude}
          </Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1A202C',
    textAlign: 'center',
    marginBottom: 32,
  },
  button: {
    backgroundColor: '#0064FF',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 8,
    marginBottom: 24,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  loadingText: {
    fontSize: 16,
    color: '#718096',
    textAlign: 'center',
    marginBottom: 24,
  },
  locationContainer: {
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#d4edda',
    borderWidth: 1,
    borderColor: '#c3e6cb',
    borderRadius: 8,
  },
  locationText: {
    fontSize: 18,
    color: '#155724',
    textAlign: 'center',
    marginBottom: 8,
  },
});
5 
import { Accuracy, generateHapticFeedback, useGeolocation } from "@apps-in-toss/framework";
import { useCallback, useEffect, useState } from "react";
import { useMapBridge } from "../MapBridgeContext";

export const useLocator = () => {
  const { subscribe, setLocation, moveToLocation } = useMapBridge();

  const [initialized, setInitialized] = useState(false);

  const location = useGeolocation({
    accuracy: Accuracy.Highest,
    distanceInterval: 5,
    timeInterval: 3000,
  });

  useEffect(() => {
    if (!location?.coords) {
      return;
    }

    setLocation(location.coords);
  }, [location, setLocation]);

  useEffect(() => {
    if (initialized || !location?.coords) {
      return;
    }

    const unsubscribeReady = subscribe("READY", () => {
      moveToLocation(location.coords);
      setLocation(location.coords);
      setInitialized(true);
    });

    return () => {
      unsubscribeReady();
    };
  }, [initialized, location, subscribe, setLocation, moveToLocation]);

  const handlePress = useCallback(() => {
    if (!location?.coords) {
      return;
    }

    generateHapticFeedback({ type: "tap" });
    moveToLocation(location.coords);
  }, [location, moveToLocation]);

  return {
    handlePress,
  };
};

이렇게 되어있는데, 생각해보니 coords가 업데이트 될 때 location 객체 참조가 바뀌지 않으면 문제가 되긴 할 것 같네요. 혹시 그런 케이스가 있을까요?