카카오톡 알림톡을 통해 서비스 링크를 전달했을 때, 사용자들이 카카오톡의 인앱브라우저에서 링크를 여는 경우 다음과 같은 문제가 발생했습니다:
이 문제를 해결하기 위해 InAppBrowserRedirect 컴포넌트를 다음과 같이 구현했습니다:
'use client';
import { useEffect } from 'react';
export default function InAppBrowserRedirect({
children,
}: {
children: React.ReactNode;
}) {
useEffect(() => {
// 이미 리다이렉트 된 경우 체크
if (sessionStorage.getItem('redirected')) return;
const ua = window.navigator.userAgent.toLowerCase();
const currentUrl = window.location.href;
if (/(?:iphone|ipad|android).* kakaotalk/i.test(ua)) {
sessionStorage.setItem('redirected', 'true');
window.location.href = `kakaotalk://web/openExternal?url=${encodeURIComponent(currentUrl)}`;
} else if (/(?:iphone|ipad|android).* line\\//i.test(ua)) {
sessionStorage.setItem('redirected', 'true');
window.location.href = `${currentUrl}${currentUrl.includes('?') ? '&' : '?'}openExternalBrowser=1`;
} else if (
/inapp|naver|snapchat|wirtschaftswoche|thunderbird|instagram|everytimeapp|whatsapp|electron|wadiz|aliapp|zumapp|kakaostory|band|twitter|daumapps|daumdevice\\/mobile|fb_iab|fb4a|fban|fbios|fbss|trill/i.test(
ua,
)
) {
sessionStorage.setItem('redirected', 'true');
if (/android/i.test(ua)) {
window.location.href = currentUrl.replace(
/^(https?):\\/\\/(.*)$/,
'intent://$2#Intent;scheme=$1;package=com.android.chrome;end',
);
} else if (/i(?:phone|pad)/i.test(ua)) {
window.location.href = `x-web-search://?${encodeURIComponent(currentUrl)}`;
}
}
}, []);
return <>{children}</>;
}