[FE] 토스/카카오톡 앱이 없을 때 앱스토어로 이동할 수 있도록 개선 #873
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 task
pakxe
approved these changes
Dec 24, 2024
|
호오.. 그럴 수도 있겠네요.. 앱으로 연결 시키는 작업이니 에러 처리도 앱 설치로 이동해야지!라는 편견을 갖고 있었는데 생각해보면 그 시간에 자신이 사용하는 은행 앱을 열어서 송금하는 것이 더 빠르겠네요;; 차라리 토스트로 '토스 앱이 설치되지 않았습니다. 다른 방식을 선택해주세요' 와 같은 문구가 더 좋겠네요 |
soi-ha
approved these changes
Dec 27, 2024
| @@ -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({ | |||
There was a problem hiding this comment.
이 부분은 생각하지 못했었는데, 정말 꼼꼼하게 챙겨주셨네요!! 쵝오👍🏻
Comment on lines
+16
to
+17
| const DEFAULT_DELAY_BEFORE_CHECK_TIME = 1000; | ||
| const DEFAULT_INSTALL_THRESHOLD_TIME = 1500; |
There was a problem hiding this comment.
constants 폴더에서 관리해줘도 좋을 것 같아요-!
|
|
||
| const navigateApp = ({android, ios, options}: NavigateAppArgs) => { | ||
| if (!isMobileDevice()) { | ||
| toast.error('모바일 기기에서만 앱 실행이 가능해요\n 모바일 환경에서 이용해 주세요.'); |
There was a problem hiding this comment.
놓치기 쉬운 부분도 섬세하게 챙겨주는 거 진짜 👍🏻👍🏻
Merged
Todari
pushed a commit
that referenced
this pull request
Jan 8, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
issue
구현 사항
토스 / 카카오페이가 설치되지 않은 환경 대응
두 어플을 사용하지 않는 사용자는 송금하기 기능을 이용할 수 없습니다. 그래서 최후의 선택으로 복사하기 기능을 제공하여 사용자가 직접 송금할 수 있는 방법을 두었지만, 토스, 카카오페이를 선택한 후 송금하기를 클릭하면 아무런 반응이 일어나지 않는 에러가 있었습니다. 이 때 사용자에게 적절한 안내를 주어야 한다고 생각했기 때문에 설치를 위한 앱스토어로 이동하도록 기능을 추가했습니다.
모바일이 아닌 환경에서는 앱 실행 할 수 없도록 설정
지금 설정은 노트북에서 토스 송금하기가 보이지 않도록 설정했지만 악의적인 조작으로 보이게 할 수 있습니다. 이 때도 예외처리를 적용하여 아래와 같이 토스트를 보여주도록 했습니다.
클릭한 후 일정 시간을 기다려 앱이 실행되지 않는지 판단
버튼을 클릭한 후 일정 시간을 기다렸지만 앱이 실행되지 않는 경우, 앱이 설치되지 않은 것이라 판단하여 설치 링크로 이동할 수 있도록 기능을 구현했습니다. 여기서 Android와 IOS가 다르게 이동해야 하기 때문에 각각 다른 주소를 넣어줬습니다.
이 때도 '앱이 설치되지 않았어요. 설치 후 이용해주세요' 라는 토스트를 보여줍니다.
🫡 참고사항