계정 복구 디자인 명세¶

요지¶

복구 화면은 로그인하지 못한 사람을 위한 전용 페이지라, 평소 UI와 분리해 헤더·본문·푸터 3영역의 단계별 폼으로 단순하게 짰다. 복구 유형 선택 → 본인 인증 → 결과/재설정으로 흐르고, 로딩·에러·토큰 만료 같은 상황을 인라인과 토스트로 나눠 알린다.

상위 PRD¶

요구사항과 범위는 prd, 구현과 메시지 키는 frd, 회원 도메인은 member.

사용자 플로우¶

상단 헤더(로고·홈) / 본문(단계별 복구 폼) / 푸터(약관·개인정보).

로그인 [계정 복구] → 복구 페이지 → 복구 유형 선택
  ├ 이메일 찾기 → 이메일 입력 → /auth/verify → 아이디 노출 → 로그인
  └ 비밀번호 재설정 → 인증 정보 → /auth/verify → 재설정 폼 → /auth/reset-password → 완료 토스트 → 로그인

화면 · 컴포넌트 (Figma 링크)¶

화면은 복구 유형 선택, 본인 인증 입력(이메일/휴대폰), 비밀번호 재설정 폼(신규+확인), 결과 표시(아이디 노출 또는 완료 토스트)로 이뤄진다. 컬러 토큰과 에러 색은 design-system을, 실제 에셋은 원본(Notion)을 따른다.

인터랙션 · 상태¶

인증이나 변경 요청 중에는 스피너를 띄우고, 입력이 비면 CTA를 잠가 두며, 인증 실패·계정 불일치·서버 오류는 상황에 맞는 메시지를 보여준다. 재설정에 성공하면 "비밀번호 변경 완료" 토스트를 띄우고 로그인 페이지로 보낸다.

오류는 어디에 띄우느냐가 중요하다. 사용자가 고칠 수 있는 입력 오류는 폼 안 인라인에, 흐름 자체를 다시 타야 하는 토큰 만료·서버 오류는 토스트로 띄워 다음 행동을 다르게 안내한다(메시지 키는 frd).

상황	노출 위치	후속
인증 코드 불일치	폼 하단 인라인	입력 초기화·재입력 유도
등록 계정 없음	폼 하단 인라인	재입력, 인증 요청 불가
비밀번호 불일치	비번 칸 하단	확인 필드로 포커스 이동
입력값 누락	폼 하단	CTA 비활성 유지
토큰 만료	토스트	인증 초기화 → 첫 단계 복귀
서버 오류	토스트	프로세스 중단·재시도 유도

접근성¶

오류 role=alert·aria-live, 첫 오류 필드 포커스 이동, 비활성 버튼 대비 같은 폼 접근성은 로그인·회원가입과 같은 패턴을 쓰므로 로그인 디자인 명세·회원가입 디자인 명세을 따른다. 화면 크기별 원칙은 responsive.

개발 핸드오프 노트¶

전달 규약은 dev-handoff, 구현·API·메시지 키는 frd를 본다.