[FE] 토스/카카오톡 앱이 없을 때 앱스토어로 이동할 수 있도록 개선

client/src/hooks/useSendPage.ts

@@ -2,6 +2,7 @@ import {useLocation} from 'react-router-dom';
 import {useEffect, useState} from 'react';
 
 import {isMobileDevice} from '@utils/detectDevice';
+import navigateApp from '@utils/navigateApp';
 
 import {SendInfo} from './useReportsPage';
 import toast from './useToast/toast';
@@ -54,16 +55,32 @@ const useSendPage = () => {
   const onTossClick = () => {
     trackSendMoney({eventName, eventToken, amount, sendMethod: 'toss'});
 
-    const tossUrl = `supertoss://send?amount=${amount}&bank=${bankName}&accountNo=${accountNumber}`;
-    window.location.href = tossUrl;
+    navigateApp({
+      android: {
+        appScheme: `supertoss://send?amount=${amount}&bank=${bankName}&accountNo=${accountNumber}`,
+        storeUrl: 'intent://details?id=viva.republica.toss#Intent;scheme=market;package=com.android.vending;end;',
+      },
+      ios: {
+        appScheme: `supertoss://send?amount=${amount}&bank=${bankName}&accountNo=${accountNumber}`,
+        storeUrl: 'https://apps.apple.com/kr/app/%ED%86%A0%EC%8A%A4/id839333328',
+      },
+    });
   };
 
   const onKakaoPayClick = async () => {
     await window.navigator.clipboard.writeText(copyText);
     trackSendMoney({eventName, eventToken, amount, sendMethod: 'kakaopay'});
 
-    const kakaoPayUrl = 'kakaotalk://kakaopay/home';
-    window.location.href = kakaoPayUrl;
+    navigateApp({
+      android: {
+        appScheme: `kakaotalk://kakaopay/home`,
+        storeUrl: 'intent://details?id=com.kakao.talk#Intent;scheme=market;package=com.android.vending;end;',
+      },
+      ios: {
+        appScheme: `kakaotalk://kakaopay/home`,
+        storeUrl: 'https://apps.apple.com/kr/app/kakaotalk/id362057947',
+      },
+    });
   };
 
   const buttonText: Record<SendMethod, string> = {

client/src/utils/navigateApp.ts

@@ -0,0 +1,44 @@
+import {isIOS, isMobileDevice} from '@utils/detectDevice';
+
+import toast from '../hooks/useToast/toast';
+
+type NavigateAppArgs = {
+  android: AppUrl;
+  ios: AppUrl;
+  options?: NavigateAppOptions;
+};
+
+type NavigateAppOptions = {
+  delayBeforeCheckTime?: number; // 앱 실행 후 설치 여부를 확인하기 전까지의 대기 시간.
+  installThresholdTime?: number; // 설치 여부를 판단하는 기준 시간.
+};
+
+const DEFAULT_DELAY_BEFORE_CHECK_TIME = 1000;
+const DEFAULT_INSTALL_THRESHOLD_TIME = 1500;
+
+type AppUrl = {
+  appScheme: string;
+  storeUrl: string;
+};
+
+const navigateApp = ({android, ios, options}: NavigateAppArgs) => {
+  if (!isMobileDevice()) {
+    toast.error('모바일 기기에서만 앱 실행이 가능해요\n 모바일 환경에서 이용해 주세요.');
+    return;
+  }
+
+  const url = isIOS() ? ios.appScheme : android.appScheme;
+  const storeUrl = isIOS() ? ios.storeUrl : android.storeUrl;
+
+  const now = Date.now();
+  window.location.href = url;
+
+  setTimeout(() => {
+    if (Date.now() - now < (options?.installThresholdTime ?? DEFAULT_INSTALL_THRESHOLD_TIME)) {
+      toast.error('앱이 설치되지 않았어요. 설치 후 이용해주세요');
+      window.location.href = storeUrl;
+    }
+  }, options?.delayBeforeCheckTime ?? DEFAULT_DELAY_BEFORE_CHECK_TIME);
+};
+
+export default navigateApp;