✨ feat: 카카오 인앱브라우저에서 외부 브라우저 열기 #301
Conversation
|
🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-ayjuuulhxg.chromatic.com/ |
|
🎮 React Preview 보러가기: https://dnd-10th-4-frontend-c2vx259f8-bbearcookies-projects.vercel.app |
There was a problem hiding this comment.
수고하셨어요~
제 안드로이드 폰에서도 외부 브라우저로 잘 열리네요 😊
다만.. 무조건 프로덕션 환경의 인덱스 페이지로 이어지는 현상이 있네요!
혹시.. 브라우저 이동하는 로직을 index.html 파일이 아닌, main.tsx 에 작성한다면 DOMContentLoaded 이벤트 체크하는 로직을 더 단순화할 수 있을 것 같은데 어떨까요??
아래처럼 작성해보았는데, 잘 작동하는 것 같아요!
const redirectIfInappBrowser = new Promise((resolve, reject) => {
const userAgent = navigator.userAgent.toLowerCase();
const target_url = window.location.href;
if (userAgent.match(/kakaotalk/i)) {
location.href =
'kakaotalk://web/openExternal?url=' + encodeURIComponent(target_url);
reject('외부 브라우저로 연결');
}
resolve(true);
});
Promise.all([enableMocking, redirectIfInappBrowser]).then(() =>
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<ReactQueryDevtools />
</QueryClientProvider>
</React.StrictMode>,
),
);
index.html
Outdated
| } | ||
|
|
||
| var useragt = navigator.userAgent.toLowerCase(); | ||
| var target_url = 'https://oceanletter.site'; |
There was a problem hiding this comment.
앗.. 이 부분에서 무조건 프로덕션 환경의 인덱스 페이지로 연결되는 현상이 있네요..!
예를 들어 편지 상세 페이지의 URL로 접속한다거나, Preview 환경으로 접속해도 해당 페이지가 보이는 게 아니라 무조건 프로덕션 환경의 메인 페이지가 보여지네요..
window.location.href 을 그대로 target_url로 쓰는 건 어떨까요? 😊
There was a problem hiding this comment.
넵 좋습니다! 직접 코드도 작성해주시고 감사합니다! 잘 적용되네요 👍👍👍
🧩 이슈 번호
✅ 작업 사항
https://burndogfather.com/271 해당 블로그 참고해서 카카오 브라우저만 적용해보았습니다.
아이폰에서는 잘 되네요
상훈님 안드로이드에서도 되는 지 확인 부탁드립니다!
RPReplay_Final1713656950.mov
👩💻 공유 포인트 및 논의 사항
다른 브라우저에서는 어떻게 해야 될 지 고민이네요..