[worklog] 앱 미설치 시 Detail Page로 유도하는 팝업 기능 구현기

기능 구현

특정페이지(ChannelMap, TravelService, LG Channels) 진입시 필요한 앱 미설치시 Detail Page 로 이동할 수 있도록 팝업을 출력하는것이 요구조건이다.. 예를들면, TraverlService 페이지 접속시 TraverlService 설치가 되어 있지 않으면 팝업을 출력하고 팝업에 Ok버튼과 Detail Settings 페이지로 이동할 수 있는 버튼을 추가하는 기능이다.

구현 예제

특정 앱의 Detail Settings 페이지(baseurl/add-on-service/{appID})로 이동하려면 appID가 필요하다.
다만,이름을 통해서 조회가 가능하기 때문에 query에 findAppByName 헬퍼 함수를 등록해서 App정보를 조회 할 수 있는 함수를 추가하였다.

appID 고유하기 때문에 처음에는 API가 아닌 상수로 관리할까 고민을 했는데 stage(dev,qa,qa2,st,op)와 region(aic,kic,eic)등 앱 하나당 최대 5 × 3 = 15개의 appID 조합을 관리해야 하며, 앱이 늘어날수록 상수 관리의 복잡도도 함께 증가하게 되어 동적 조회 방식이 훨씬 더 나을 것 같아 findAppByName 같은 헬퍼 함수를 통해 앱 이름 기반으로 appID를 조회하고, 필요한 페이지로 안전하게 이동할 수 있도록 구현했다.

그리고 나서 useEffect 훅으로 페이지 진입시에 앱설치가 되지 않을 경우 팝업을 출력 하도록 구현을 하였다.

export function useAvailableAppsQuery() {
  const {
    data: availableApps,
    isLoading: isAvailableAppsLoading,
    error: availableAppsError,
    refetch: availableAppsRefetch,
    isFetching: isAvailableAppsFetching,
    isSuccess: isAvailableAppsSuccess,
  } = useQuery({
    queryKey: ['addonservice', 'availableApps'],
    queryFn: fetchAvailableApps,
    select: (data) =>
      data.result.apps
        .filter((app) => app.name !== 'QMS')
        .sort((a, b) => {
          const categoryComparison = b.category.localeCompare(a.category, undefined, { sensitivity: 'base' });
          return categoryComparison !== 0 ? categoryComparison : a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
        }),
    staleTime: 0,
  });


  const findAppByName = (name: string) => {
    return availableApps?.find((app) => app.name === name);
  }; // 새로 추가된 코드


  return {
    totalAppsCount,
    availableApps,
    isAvailableAppsLoading,
    availableAppsError,
    availableAppsRefetch,
    isAvailableAppsFetching,
    isAvailableAppsSuccess,
    findAppByName
  };
}

 useEffect(() => {
    if (lgTravelService?.result && travelServiceAppInfo) {
      if (lgTravelService.result?.options) {
        const { latitude, longitude, currency } = lgTravelService.result.options;
        setCurrency(currency);
        setCity(getNearestCityName(latitude, longitude));
        setToursAllEnabled(true);
      } else {
        setPopup({ // 새롭게 추가된 코드
          open: true,
          type: 'Alert',
          message: t('settings.noTravelService'),
          buttons: [
            {
              type: 'close',
              text: t('button.ok'),
            },
            {
              type: 'close',
              text: t('button.goToPage', { page: t('popup.settings.settings') }),
              callback: async () => {
                navigate({ to: '/add-on-service/$appId', params: { appId: travelServiceAppInfo?.content_id } });
              },
            },
          ],
        });
        setToursAllEnabled(false);
        setCity('');
      }
    }
  }, [lgTravelService?.result, travelServiceAppInfo]);