Skip to content

fix(web): 인증번호 재발송을 3분 제한 추가 #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ParkSungju01 wants to merge 1 commit into
base: develop
Choose a base branch
from
+120 −32
Open

fix(web): 인증번호 재발송을 3분 제한 추가 #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/FindIdPage/Mobile/EmailPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ function MobileFindIdEmailPage() {
isTimer,
timerValue,
stopTimer,
isResendLocked,
resendButtonText,
} = useEmailVerification({ email });

const onClickSendVerificationButton = () => {
Expand Down Expand Up @@ -79,8 +81,8 @@ function MobileFindIdEmailPage() {
message={emailMessage}
isButton
disabled={isVerified}
buttonText="인증번호 발송"
buttonDisabled={!field.value || isDisabled || isVerified}
buttonText={resendButtonText('인증번호 발송')}
buttonDisabled={!field.value || isDisabled || isVerified || isResendLocked}
buttonOnClick={() => checkEmailExists({ email: field.value })}
>
{emailMessage?.type === 'success' && (
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/FindIdPage/Mobile/PhonePage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ function MobileFindIdPhonePage() {
isTimer,
timerValue,
stopTimer,
isResendLocked,
resendButtonText,
} = usePhoneVerificationInFindId({ phoneNumber });

const isFormFilled = phoneNumber && verificationCode;
Expand Down Expand Up @@ -81,8 +83,8 @@ function MobileFindIdPhonePage() {
message={phoneMessage}
isButton
disabled={isVerified}
buttonText="인증번호 발송"
buttonDisabled={!field.value || isDisabled || isVerified}
buttonText={resendButtonText('인증번호 발송')}
buttonDisabled={!field.value || isDisabled || isVerified || isResendLocked}
buttonOnClick={() => checkPhoneExists({ phone_number: phoneNumber })}
>
{phoneMessage?.type === 'default' && (
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/FindIdPage/PC/EmailPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ function FindIdEmailPage() {
isTimer,
timerValue,
stopTimer,
isResendLocked,
resendButtonText,
} = useEmailVerification({ email });

const onClickSendVerificationButton = () => {
Expand Down Expand Up @@ -108,9 +110,9 @@ function FindIdEmailPage() {
type="button"
onClick={() => checkEmailExists({ email })}
className={styles['check-button']}
disabled={!field.value || isDisabled || isVerified}
disabled={!field.value || isDisabled || isVerified || isResendLocked}
>
인증번호 발송
{resendButtonText('인증번호 발송')}
</button>
</div>
)}
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/FindIdPage/PC/PhonePage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ function FindIdPhonePage() {
isTimer,
timerValue,
stopTimer,
isResendLocked,
resendButtonText,
} = usePhoneVerificationInFindId({ phoneNumber });

const isFormFilled = phoneNumber && verificationCode;
Expand Down Expand Up @@ -108,9 +110,9 @@ function FindIdPhonePage() {
type="button"
onClick={() => checkPhoneExists({ phone_number: phoneNumber })}
className={styles['check-button']}
disabled={!field.value || isDisabled || isVerified}
disabled={!field.value || isDisabled || isVerified || isResendLocked}
>
인증번호 발송
{resendButtonText('인증번호 발송')}
</button>
</div>
)}
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/FindPasswordPage/Mobile/MobileVerifyEmail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ function MobileVerifyEmail({ onNext, setContactType }: MobileFindPasswordProps)
checkIdMatchEmail,
idMessage,
setIdMessage,
isResendLocked,
resendButtonText,
} = useEmailVerification({ email, onNext });

const onClickSendVerificationButton = () => {
Expand Down Expand Up @@ -104,8 +106,8 @@ function MobileVerifyEmail({ onNext, setContactType }: MobileFindPasswordProps)
message={emailMessage}
isButton
disabled={isVerified}
buttonText="인증번호 발송"
buttonDisabled={!field.value || isDisabled || isVerified}
buttonText={resendButtonText('인증번호 발송')}
buttonDisabled={!field.value || isDisabled || isVerified || isResendLocked}
onChange={(e) => {
field.onChange(e);
setEmailMessage(null);
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/FindPasswordPage/Mobile/MobileVerifyPhone/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ function MobileVerifyPhone({ onNext, goToEmailStep, setContactType }: MobileFind
checkIdExists,
checkIdMatchPhone,
setIdMessage,
isResendLocked,
resendButtonText,
} = usePhoneVerification({ phoneNumber, onNext });

const onClickSendVerificationButton = () => {
Expand Down Expand Up @@ -107,8 +109,8 @@ function MobileVerifyPhone({ onNext, goToEmailStep, setContactType }: MobileFind
message={phoneMessage}
isButton
disabled={isVerified}
buttonText="인증번호 발송"
buttonDisabled={!field.value || isDisabled || isVerified}
buttonText={resendButtonText('인증번호 발송')}
buttonDisabled={!field.value || isDisabled || isVerified || isResendLocked}
onChange={(e) => {
field.onChange(e);
setPhoneMessage(null);
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/FindPasswordPage/PC/PCVerifyEmail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ function PCVerifyEmail({ onNext, onBack, setContactType }: FindPasswordProps) {
checkIdMatchEmail,
idMessage,
setIdMessage,
isResendLocked,
resendButtonText,
} = useEmailVerification({ email, onNext });

const onClickSendVerificationButton = () => {
Expand Down Expand Up @@ -156,9 +158,9 @@ function PCVerifyEmail({ onNext, onBack, setContactType }: FindPasswordProps) {
checkEmailExists({ email });
}}
className={styles['check-button']}
disabled={!field.value || isDisabled || isVerified}
disabled={!field.value || isDisabled || isVerified || isResendLocked}
>
{isSendingVerification ? '...' : buttonText}
{isSendingVerification ? '...' : resendButtonText(buttonText)}
</button>
</div>
)}
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/FindPasswordPage/PC/PCVerifyPhone/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ function PCVerifyPhone({ onNext, onBack, goToEmailStep, setContactType }: FindPa
stopTimer,
checkIdExists,
checkIdMatchPhone,
isResendLocked,
resendButtonText,
} = usePhoneVerification({ phoneNumber, onNext });

const onClickSendVerificationButton = () => {
Expand Down Expand Up @@ -167,9 +169,9 @@ function PCVerifyPhone({ onNext, onBack, goToEmailStep, setContactType }: FindPa
setIsVerificationSent(true);
}}
className={styles['check-button']}
disabled={!field.value || isDisabled || isVerified}
disabled={!field.value || isDisabled || isVerified || isResendLocked}
>
{isSendingVerification ? '...' : buttonText}
{isSendingVerification ? '...' : resendButtonText(buttonText)}
</button>
</div>
{!isVerificationSent && !isCorrect && (
Expand Down
16 changes: 12 additions & 4 deletions apps/web/src/components/Auth/SignupPage/Steps/MobileVerificationStep/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { InputMessage } from 'interfaces/InputMessage';
import { GENDER_OPTIONS, MESSAGES, REGEX } from 'static/auth';
import ROUTES from 'static/routes';
import { useSessionLogger } from 'utils/hooks/analytics/useSessionLogger';
import useResendLock from 'utils/hooks/auth/useResendLock';
import useBooleanState from 'utils/hooks/state/useBooleanState';
import useCountdownTimer from 'utils/hooks/ui/useCountdownTimer';

Expand Down Expand Up @@ -67,6 +68,12 @@ function MobileVerification({ onNext }: MobileVerificationProps) {
},
});

const { isResendLocked, markSent, withResendLock, resendButtonText } = useResendLock(
phoneNumber,
isTimer,
timerValue,
);

const clearVerificationMessageTimer = () => {
if (verificationMessageTimerRef.current) {
clearTimeout(verificationMessageTimerRef.current);
Expand All @@ -76,7 +83,8 @@ function MobileVerification({ onNext }: MobileVerificationProps) {

const { mutate: sendSMSToUser } = useMutation({
mutationFn: smsSend,
onSuccess: (data: SmsSendResponse) => {
onSuccess: (data: SmsSendResponse, { phone_number }) => {
markSent(phone_number);
clearVerificationMessageTimer();
setPhoneMessage({ type: 'success', content: MESSAGES.PHONE.CODE_SENT });
runTimer();
Expand Down Expand Up @@ -236,9 +244,9 @@ function MobileVerification({ onNext }: MobileVerificationProps) {
message={phoneMessage}
isButton
disabled={isVerified}
buttonText="인증번호 발송"
buttonDisabled={!field.value || isDisabled || isVerified}
buttonOnClick={() => checkPhoneNumber(phoneNumber)}
buttonText={resendButtonText('인증번호 발송')}
buttonDisabled={!field.value || isDisabled || isVerified || isResendLocked}
buttonOnClick={withResendLock(() => checkPhoneNumber(phoneNumber))}
maxLength={11}
>
{phoneMessage?.type === 'success' && (
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/Auth/SignupPage/Steps/VerificationStep/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ function Verification({ onNext, onBack, setUserType }: VerificationProps) {
timerValue,
stopTimer,
checkPhoneNumber,
isResendLocked,
resendButtonText,
} = usePhoneVerification({ phoneNumber, onNext });

const onClickSendVerificationButton = () => {
Expand Down Expand Up @@ -228,9 +230,9 @@ function Verification({ onNext, onBack, setUserType }: VerificationProps) {
});
}}
className={styles['check-button']}
disabled={!field.value || isDisabled || isVerified}
disabled={!field.value || isDisabled || isVerified || isResendLocked}
>
{isSendingVerification ? '...' : buttonText}
{isSendingVerification ? '...' : resendButtonText(buttonText)}
</button>
</div>
</div>
Expand Down
10 changes: 8 additions & 2 deletions apps/web/src/utils/hooks/auth/useEmailVerification.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { isKoinError } from 'interfaces/APIError';
import type { InputMessage } from 'interfaces/InputMessage';
import { MESSAGES, STORAGE_KEY } from 'static/auth';
import ROUTES from 'static/routes';
import useResendLock from 'utils/hooks/auth/useResendLock';
import useBooleanState from 'utils/hooks/state/useBooleanState';
import { useSessionStorage } from 'utils/hooks/state/useWebStorage';
import useCountdownTimer from 'utils/hooks/ui/useCountdownTimer';
Expand Down Expand Up @@ -54,6 +55,8 @@ function useEmailVerification({ email, onNext }: UseEmailVerificationProps) {
},
});

const { isResendLocked, markSent, withResendLock, resendButtonText } = useResendLock(email, isTimer, timerValue);

const resetVerificationState = () => {
disableButton();
disableVerified();
Expand All @@ -66,7 +69,8 @@ function useEmailVerification({ email, onNext }: UseEmailVerificationProps) {

const { mutate: sendVerificationEmail, isPending: isSendingVerification } = useMutation({
mutationFn: verificationEmailSend,
onSuccess: ({ total_count, remaining_count, current_count }) => {
onSuccess: ({ total_count, remaining_count, current_count }, { email: sentEmail }) => {
markSent(sentEmail);
setEmailMessage({ type: 'success', content: MESSAGES.EMAIL.CODE_SENT });
runTimer();
setEmailSendCountData({ total_count, remaining_count, current_count });
Expand Down Expand Up @@ -151,9 +155,11 @@ function useEmailVerification({ email, onNext }: UseEmailVerificationProps) {

return {
emailMessage,
checkEmailExists,
checkEmailExists: withResendLock(checkEmailExists),
checkVerificationEmailVerify,
isSendingVerification,
isResendLocked,
resendButtonText,
findEmail,
isDisabled,
disableButton,
Expand Down
19 changes: 15 additions & 4 deletions apps/web/src/utils/hooks/auth/usePhoneVerification.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { InputMessage } from 'interfaces/InputMessage';
import { MESSAGES, STORAGE_KEY } from 'static/auth';
import ROUTES from 'static/routes';
import { useSessionLogger } from 'utils/hooks/analytics/useSessionLogger';
import useResendLock from 'utils/hooks/auth/useResendLock';
import useBooleanState from 'utils/hooks/state/useBooleanState';
import { useSessionStorage } from 'utils/hooks/state/useWebStorage';
import useCountdownTimer from 'utils/hooks/ui/useCountdownTimer';
Expand Down Expand Up @@ -59,6 +60,12 @@ function usePhoneVerification({ phoneNumber, onNext, step }: UsePhoneVerificatio
},
});

const { isResendLocked, markSent, withResendLock, resendButtonText } = useResendLock(
phoneNumber,
isTimer,
timerValue,
);

const resetVerificationState = () => {
disableButton();
disableVerified();
Expand All @@ -71,7 +78,8 @@ function usePhoneVerification({ phoneNumber, onNext, step }: UsePhoneVerificatio

const { mutate: sendVerificationSms, isPending: isSendingVerification } = useMutation({
mutationFn: smsSend,
onSuccess: ({ total_count, remaining_count, current_count }) => {
onSuccess: ({ total_count, remaining_count, current_count }, { phone_number }) => {
markSent(phone_number);
setPhoneMessage({ type: 'success', content: MESSAGES.PHONE.CODE_SENT });
setValue('phoneMessage', { type: 'success', content: MESSAGES.PHONE.CODE_SENT });
runTimer();
Expand Down Expand Up @@ -155,7 +163,8 @@ function usePhoneVerification({ phoneNumber, onNext, step }: UsePhoneVerificatio

const { mutate: sendSMSToUser } = useMutation({
mutationFn: smsSend,
onSuccess: (data: SmsSendResponse) => {
onSuccess: (data: SmsSendResponse, { phone_number }) => {
markSent(phone_number);
setPhoneMessage({ type: 'success', content: MESSAGES.PHONE.CODE_SENT });
setValue('phoneMessage', { type: 'success', content: MESSAGES.PHONE.CODE_SENT });
runTimer();
Expand Down Expand Up @@ -239,9 +248,11 @@ function usePhoneVerification({ phoneNumber, onNext, step }: UsePhoneVerificatio

return {
phoneMessage,
checkPhoneExists,
checkPhoneExists: withResendLock(checkPhoneExists),
checkVerificationSmsVerify,
isSendingVerification,
isResendLocked,
resendButtonText,
findId,
isDisabled,
disableButton,
Expand All @@ -260,7 +271,7 @@ function usePhoneVerification({ phoneNumber, onNext, step }: UsePhoneVerificatio
checkIdMatchPhone,
idMessage,
setIdMessage,
checkPhoneNumber,
checkPhoneNumber: withResendLock(checkPhoneNumber),
};
}

Expand Down
19 changes: 15 additions & 4 deletions apps/web/src/utils/hooks/auth/usePhoneVerificationInFindId.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { isKoinError } from 'interfaces/APIError';
import type { InputMessage } from 'interfaces/InputMessage';
import { MESSAGES, STORAGE_KEY } from 'static/auth';
import ROUTES from 'static/routes';
import useResendLock from 'utils/hooks/auth/useResendLock';
import useBooleanState from 'utils/hooks/state/useBooleanState';
import { useSessionStorage } from 'utils/hooks/state/useWebStorage';
import useCountdownTimer from 'utils/hooks/ui/useCountdownTimer';
Expand Down Expand Up @@ -53,9 +54,16 @@ function usePhoneVerificationInFindId({ phoneNumber, onNext }: UsePhoneVerificat
},
});

const { isResendLocked, markSent, withResendLock, resendButtonText } = useResendLock(
phoneNumber,
isTimer,
timerValue,
);

const { mutate: sendVerificationSms } = useMutation({
mutationFn: smsSend,
onSuccess: ({ total_count, remaining_count, current_count }) => {
onSuccess: ({ total_count, remaining_count, current_count }, { phone_number }) => {
markSent(phone_number);
setPhoneMessage({ type: 'success', content: MESSAGES.PHONE.CODE_SENT });
runTimer();
setSmsSendCountData({ total_count, remaining_count, current_count });
Expand Down Expand Up @@ -113,7 +121,8 @@ function usePhoneVerificationInFindId({ phoneNumber, onNext }: UsePhoneVerificat

const { mutate: sendSMSToUser } = useMutation({
mutationFn: smsSend,
onSuccess: (data: SmsSendResponse) => {
onSuccess: (data: SmsSendResponse, { phone_number }) => {
markSent(phone_number);
setPhoneMessage({ type: 'success', content: MESSAGES.PHONE.CODE_SENT });
runTimer();
setSmsSendCountData({
Expand Down Expand Up @@ -187,8 +196,10 @@ function usePhoneVerificationInFindId({ phoneNumber, onNext }: UsePhoneVerificat

return {
phoneMessage,
checkPhoneExists,
checkPhoneExists: withResendLock(checkPhoneExists),
checkVerificationSmsVerify,
isResendLocked,
resendButtonText,
findId,
isDisabled,
disableButton,
Expand All @@ -207,7 +218,7 @@ function usePhoneVerificationInFindId({ phoneNumber, onNext }: UsePhoneVerificat
checkIdMatchPhone,
idMessage,
setIdMessage,
checkPhoneNumber,
checkPhoneNumber: withResendLock(checkPhoneNumber),
};
}

Expand Down
Loading
Loading