로그인 디자인 명세¶

요지¶

로그인은 가입과 달리 한 화면에서 끝낸다 — 히어로와 입력 폼뿐이다. 이미 로그인한 사람에게는 폼을 보여줄 이유가 없어 바로 대시보드로 넘기고, 미인증 사용자에게만 폼을 그린다. 핵심은 실패를 친절히 알리는 것이다. 유효성 실패·계정 잠김·미인증·탈퇴처럼 상황이 다 다르므로, 필드 단위는 인라인으로 서버가 돌려준 상태는 배너로 구분해 보여준다.

상위 PRD¶

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

사용자 플로우¶

헤더(미인증) [로그인] / /login 직접 진입
  → 로그인 폼 렌더 (이미 인증 시 /dashboard 리다이렉트 replace)
  → 입력 → [로그인] → 성공: /dashboard / 실패: 인라인 에러
  → 하단 [회원가입] 링크(/register) · "로그인이 안되시나요?" → 계정 복구

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

히어로: 이미지(img_signup_title) + 텍스트("깔끔한 공부 디에듀, 시작해볼까요?").
폼(Frame 3258): 이메일 Input(type=email), 비밀번호 Input(type=password), 로그인 버튼(type=submit), "로그인 상태 유지" 체크박스, 비밀번호 보기/숨기기 눈 아이콘, 회원가입 링크(/register), "로그인이 안되시나요?" 링크(Frame 1261159243).
컬러 토큰(--primary, 에러 #FF5A5A)과 컴포넌트는 design-system을 따른다. 폼·에러·필수 입력·복구 링크의 Figma 프레임(Frame 3258·Frame 33·Frame 2610287·Frame 1261159243)과 실제 에셋은 원본(Notion)에 있다.

인터랙션 · 상태¶

폼은 기본 → 입력 → (유효성 실패) → 제출 중 → (서버 에러)의 상태를 거친다. 클라이언트에서 형식이 틀리면 아예 서버로 보내지 않고 첫 오류 필드로 포커스를 옮기며, 다시 입력하면 메시지를 지운다. 비밀번호 눈 아이콘은 숨김이 기본이고 누르면 평문으로 토글한다.

서버 에러는 계정 상태에 따라 메시지가 갈린다(미인증·잠김·탈퇴). 특히 잠긴 계정은 비밀번호 필드를 비우고 복구 경로(비밀번호 재설정 링크)를 함께 띄워 다음에 뭘 해야 하는지 알려준다.

접근성¶

오류 메시지는 role=alert·aria-live로 읽어 주고, 검증에 실패하면 첫 오류 필드로 포커스를 옮긴다. 비활성 버튼도 최소 3:1 대비를 지킨다. aria-invalid·aria-describedby 연결 같은 폼 접근성 세부 패턴은 회원가입과 같은 방식을 쓰므로 회원가입 디자인 명세을 따르고, 화면 크기별 레이아웃은 responsive.

개발 핸드오프 노트¶

전달 규약과 토큰 매핑은 dev-handoff, 구현·API는 frd를 본다.