Skip to content

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

Open
ParkSungju01 wants to merge 1 commit into
developfrom
fix/85-verification-resend-cooldown
Open

ParkSungju01 wants to merge 1 commit into
developfrom
fix/85-verification-resend-cooldown

Conversation

@ParkSungju01

@ParkSungju01 ParkSungju01 commented Nov 14, 2026 •

Copy link
Copy Markdown
Collaborator

변경

회원가입, 아이디 찾기, 비밀번호 찾기의 인증번호 재발송 버튼을 제한 없이 누를 수 있어, 짧은 시간에 하루 발송 한도를 모두 쓸 수 있었습니다. 기존에는 발송 직후 3초만 버튼이 막혔고, 회원가입 PC 화면은 그마저도 없었습니다.

같은 번호·이메일로 인증번호를 보낸 뒤 인증 타이머(3분)가 끝날 때까지 재발송을 막았습니다.

  • useResendLock (utils/hooks/auth/useResendLock.ts): 마지막으로 보낸 대상과 현재 입력값이 같고 타이머가 도는 중이면 잠급니다. 잠금 상태를 따로 켜고 끄지 않고 매번 계산해서, 타이머 만료·상태 초기화·입력값 변경 시 자동으로 풀립니다.
    • markSent: 발송 API 성공 응답의 요청 값으로 보낸 대상을 기록합니다. 실패하면 기록하지 않아 바로 재시도할 수 있습니다.
    • withResendLock: 발송 함수를 감싸 잠긴 동안 API를 호출하지 않습니다. 버튼 비활성화와 별개로 한 번 더 막습니다.
    • resendButtonText: 잠긴 동안 버튼 문구를 「재발송 02:13」처럼 남은 시간으로 바꿉니다.
  • 공통 훅 연결: usePhoneVerification(회원가입·비밀번호 찾기 휴대폰), usePhoneVerificationInFindId(아이디 찾기 휴대폰), useEmailVerification(아이디·비밀번호 찾기 이메일). 회원가입 모바일 단계는 자체 발송 로직이라 같은 훅을 직접 붙였습니다.
  • 화면: 회원가입·아이디 찾기·비밀번호 찾기의 PC·모바일, 휴대폰·이메일 발송 버튼 10곳에 잠금과 남은 시간 문구를 적용했습니다.

바꾸지 않은 것

  • 기존 isDisabled(발송 직후 3초 잠금)는 그대로 둡니다. 회원가입 PC와 비밀번호 찾기 PC 휴대폰 화면에서 같은 값이 인증 완료 후 번호 입력칸을 고정하는 데도 쓰여서, 바꾸면 그 동작까지 달라집니다. 두 용도를 나누는 정리는 따로 하겠습니다.
  • 내 정보 수정과 주문 연락처 인증은 이번 범위에서 제외했습니다.
  • 서버 쪽 재발송 제한은 백엔드에서 처리합니다.

ScreenShot

image

검증

  • pnpm typecheck, pnpm lint, pnpm format:check, pnpm --filter @koin/web test 통과.
  • 로컬 pnpm dev:web에서 아이디 찾기 PC 휴대폰 화면으로 발송 후 버튼이 막히고 남은 시간이 표시되는 것, 번호를 바꾸면 바로 풀리는 것을 확인했습니다.

회원가입, 아이디 찾기, 비밀번호 찾기의 인증번호 발송 버튼을
같은 번호·이메일로 보낸 뒤 인증 타이머(3분)가 끝날 때까지 막는다.
막힌 동안 버튼에 남은 시간을 보여주고, 입력값을 바꾸면 바로 다시 보낼 수 있다.
발송 함수도 함께 감싸 버튼 상태와 관계없이 잠긴 동안 API를 호출하지 않는다.

Closes #85
@ParkSungju01 ParkSungju01 self-assigned this Nov 14, 2026
@coderabbitai

coderabbitai Bot commented Nov 14, 2026

Copy link
Copy Markdown

Important

  • Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration

  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 91795e2b-2dda-42af-8388-72f7c94a58ee
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs
koin-web be4d9bf Nov 14 2026, 08:01 AM

@ParkSungju01 ParkSungju01 changed the title fix(web): 인증번호 재발송을 3분 동안 막고 남은 시간을 보여준다 fix(web): 인증번호 재발송을 3분 제한 추가 Nov 14, 2026
@bcsd-united-error-publisher

bcsd-united-error-publisher Bot commented Nov 14, 2026 •

Copy link
Copy Markdown
Contributor

자동 리뷰 결과 (claude-opus-5-5, 독립 검증)

  • 리뷰 head: be4d9bfa2d847d115471b00b5c1d4ff09629fef1
  • 발행 head: be4d9bfa2d847d115471b00b5c1d4ff09629fef1
  • base(develop): 4d32208b818794bfc8ad906ae04e11938222f32c
  • manifest sha256: ad301433f67ec7108b54797ac5d7a61df8c92f62fa52ae631da3f49731576ac3
  • 판정: approved (P1 0 / P2 0 / P3 0)

발견 사항

  • 없음

적용된 수정

  • 없음 (리뷰 head 유지)

독립 검증 통과 항목

  • pr-head-pinned
  • native-fixture-tests
  • typecheck
  • autofix-security-tests
  • lint
  • build
  • runtime-route-smoke

주의

  • 리뷰 판정은 GitHub approval이 아닙니다. merge 여부는 아래 자동 merge 정책으로 별도 결정하며 main 승격과 배포는 수동입니다. PR 제목/본문/diff와 모델 출력은 신뢰할 수 없는 입력으로 취급했습니다.
  • 수정 커밋은 리뷰 head를 부모로 하는 fast-forward만 적용했으며 사람의 변경을 덮어쓰지 않습니다.

자동 merge

  • skipped: 변경 파일 10개 또는 변경 줄 300줄 제한을 넘었거나 통계를 확인할 수 없습니다.

@jenna1030 jenna1030 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!
작은 이슈 하나 남겨두었으니 확인 부탁드립니다.

*/
function useResendLock(target: string, isTimerRunning: boolean, secondsLeft: number) {
const [sentTarget, setSentTarget] = useState<string | null>(null);
const isResendLocked = isTimerRunning && sentTarget !== null && sentTarget === target;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

입력값 변경 시 기존 코드에서 stopTimer()를 호출해서 재발송 잠금도 함께 풀리는 것 같습니다.
발송 후 번호 끝자리를 지웠다가 같은 숫자를 다시 입력하면 3분이 지나지 않아도 같은 번호로 재발송이 가능할 것 같은데 1. 발송한 번호와 만료 시각 저장 2. 별도 타이머를 두고 입력값 변경 시에도 멈추지 않는 식으로 해야할거같습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[공통] 회원가입·아이디/비밀번호 찾기 인증번호 재발송을 제한 없이 누를 수 있음

2 participants