Auth Kit

인증 기능 키트. 로그인, 회원가입, 비밀번호 찾기를 지원합니다.

기술 스택

ZustandAxiosReact Hook FormZodTypeScript

기능

  • 로그인 (이메일/비밀번호)
  • 회원가입 (폼 유효성 검사)
  • 로그아웃
  • 비밀번호 찾기 (이메일 발송)
  • 비밀번호 재설정
  • 토큰 자동 갱신 (Refresh Token)
  • 인증 상태 유지 (Zustand Persist)

파일 구조

설치

1. 의존성 설치

2. 코드 복사

아래 코드 탭에서 필요한 파일들을 복사합니다.

3. API 주소 변경

코드

사용 예시

접근성

  • 폼 필드에 label 연결 필수
  • 오류 메시지는 aria-describedby로 연결
  • 비밀번호 표시/숨기기 토글에 aria-pressed 적용
  • 로딩 상태에 aria-busy 속성 적용
  • 비밀번호 강도 표시기에 시각적 + 텍스트 피드백 제공