[S1] 인증번호 요청 버튼 클릭 시, n초 간 버튼 비활성화

[Arooming]

🔥 Related Issues

resolved #621

💜 작업 내용

• 인증번호 요청 버튼 클릭 시, n초 간 버튼 비활성화

✅ PR Point

• 무슨 이유로 어떻게 코드를 변경했는지
  • 인증번호 요청 버튼이 계속해서 눌리게 되면, 서버 통신도 그만큼 이뤄지기 때문에 인증번호 문자 요금도 계속 청구
  • setTimeout과 isDisabled라는 상태를 만들어서 해결했습니다.
    • 버튼 클릭 후, 서버 통신이 제대로 이뤄졌다면 setIsDisabled(true) -> 통신이 모두 끝난 이후 setTimeout 실행
    • setTimeout 내부 -> setIsDisabled(false)로 바꿔줌.
    • 시간을 체크해보니 문자가 오기까지 대략 5초 내외의 시간이 걸림 + 문자가 도착하기 전에 버튼 비활성화가 풀리면 안된다고 판단하여 7초의 시간제한을 줬습니다. (테스트 결과 10초는 너무 길다고 느껴짐)

☀️ 스크린샷 / GIF / 화면 녹화

• 여러 번 버튼 클릭했지만, 비활성화 되어있기 때문에 문자는 하나만 옴 !

2024-02-26.9.33.58.mov

[netlify]

✅ Deploy Preview for tattour ready!

Name	Link
🔨 Latest commit	eeac29d
🔍 Latest deploy log	https://app.netlify.com/sites/tattour/deploys/65dc85eee269be00089fe69e
😎 Deploy Preview	https://deploy-preview-622--tattour.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[urjimyu]

시간 기준으로 버튼 비활성화 걸어두어서 전보다 훨씬 사용성이 좋아졌네요👍 실제로 여러 서비스 쓰면서 문자 인증 여러 번 눌렀다가 문자 폭탄으로 혼란스러웠던 적이 종종 있었어서 넘 좋아요!! 고생하셨습니다~!