이메일 로그인 실패 바텀시트

Update History

1. 화면 구조 개요

LOG-005는 이메일 로그인(LOG-003) 시 비밀번호 불일치로 인증 실패할 때 자동 노출되는 강제 액션형 바텀시트이다. 딤 오버레이 터치로 닫히지 않으며, 반드시 버튼(확인/비밀번호 찾기)을 통해서만 닫힌다. 상단 핸들 인디케이터(36×4px) 있음, X 닫기 버튼 없음. "확인" 버튼은 .sb-dp-modal__btn--primary + 인라인 background:var(--cta-gradient) 오버라이드. 클릭 시 페이지 이동 없이 이메일 로그인 바텀시트가 인라인으로 복귀한다.

2. 레이어 구조 + 치수

• 바텀시트 배경: var(--bg) #FAFAF8, border-radius:0 (R=0 직각), position:absolute bottom:0 left:0 right:0
• 핸들 바: 없음 — 강제 액션형, 스와이프 다운 닫기 불가
• 닫기(X): 없음 — 반드시 버튼을 통해서만 닫힘
• 딤 오버레이: rgba(26,26,26,0.45), 터치 시 아무 동작 없음 (pointer-events:auto이나 닫기 이벤트 미연결)
• 타이틀: "로그인 실패" — .sb-dp-modal__title, var(--sans) Pretendard, 18px/700, color:var(--charcoal), text-align:center, letter-spacing:var(--ls-tight)
• 안내 문구: "비밀번호를 다시 확인해주세요" — .sb-dp-modal__desc, var(--sans), 18px/500, color:var(--text-secondary), text-align:center, letter-spacing:var(--ls-normal)
• 비밀번호 찾기/재설정 (좌, Cancel): .sb-dp-modal__btn--cancel — bg:var(--text-secondary) #6B6B6B, text:#fff, var(--sans) 14px/600, R=0
• 확인 (우, Confirm): .sb-dp-modal__btn--confirm — bg:linear-gradient(160deg, #B52B31 0%, #7A1518 100%), text:#fff, var(--sans) 14px/600, R=0

3. 핵심 인터랙션

• "확인" 탭 (id=log005ConfirmBtn): 에러 바텀시트 translateY(100%) 닫힘(300ms ease-in) + 딤 opacity:0 → 350ms 딜레이 후 딤 opacity:1 복원 + 로그인 바텀시트(id=loginSheetBg) translateY(0) 슬라이드업. 이메일 입력값 유지, 비밀번호 입력값은 초기화되지 않음(입력 유지). 페이지 이동 없음.
• "비밀번호 찾기/재설정" 탭 (id=log005CancelBtn): 에러 바텀시트 닫힘 + 정보 토스트 "비밀번호 재설정 화면으로 이동합니다." 표시 (2.6초 후 fade-out, 3초 후 DOM 제거). 스토리보드 시뮬레이션 — 실제 앱에서는 LOG-006 비밀번호 재설정 플로우로 진입.
• 딤 터치: 아무 동작 없음 (강제 액션 — pointer-events:auto이나 닫기 이벤트 미연결)
• 스와이프 다운: 차단 (핸들 인디케이터는 표시용, 스와이프 닫기 미지원)
• 로그인 시트 X 버튼 (id=loginCloseBtn2): 로그인 바텀시트 translateY(100%) 닫힘(300ms ease-in) + 딤 opacity:0, pointer-events:none
• 로그인 시트 이메일 유효성: 입력 중 EMAIL_RE(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/) 실시간 검사. 형식 오류 시 에러 메시지(id=loginEmailError2) display:block + 입력 필드 borderColor:var(--red-brand). 이메일+비밀번호 모두 충족 시 로그인 버튼(id=loginCta2) 활성화.

4. 상태 변화

• Default (에러 시트 노출): 에러 바텀시트 translateY(0) — 2개 버튼 활성, 딤 터치 차단. 배경 로그인 시트 translateY(100%) 숨김.
• "확인" 후: 에러 시트 닫힘 → 딤 잠시 투명 → 350ms 후 딤 복원 + 로그인 시트 등장 → 로그인 폼 인터랙티브 상태
• "비밀번호 찾기/재설정" 후: 에러 시트 닫힘 + 정보 토스트 (딤 사라짐, 홈 배경만 남음)
• 반복 실패: 동일 에러 바텀시트 반복 노출 가능 (연속 실패 횟수 제한은 추후 정의)

5. 네비게이션 플로우

• 진입: LOG-003 (이메일 로그인 입력) → 비밀번호 불일치 인증 실패 → 딤(z-index:25) + 에러 바텀시트(z-index:30) 동시 등장
• "확인" 선택: 에러 시트 닫힘 → 350ms 후 로그인 바텀시트(loginSheetBg, z-index:28) 인라인 슬라이드업 → LOG-003 상태로 복귀 (페이지 이동 없음)
• "비밀번호 찾기/재설정" 선택: 에러 시트 닫힘 + 토스트 "비밀번호 재설정 화면으로 이동합니다." (스토리보드 시뮬레이션). 실제 앱에서는 LOG-006으로 이동.

6. 에러/예외 처리

• 네트워크 오류 (비밀번호 찾기 요청 중): "네트워크 연결을 확인해주세요." — 에러 토스트 bg:var(--color-error-toast), text:var(--white), 폰 내부 bottom:24px, 2.6초 fade-out, 3초 DOM 제거, 시트 유지
• 백그라운드 전환: 복귀 시 바텀시트 상태 그대로 유지
• 토스트 공통 사양: 에러 bg:var(--color-error-toast) text:var(--white) / 정보 bg:var(--charcoal) #1A1A1A text:var(--white), 폰 내부 하단 24px, border-radius:0, 2.6초 auto-dismiss

7. 모션 스펙

• 에러 시트 닫힘: translateY(0) → translateY(100%), 300ms, ease-in
• 딤 닫힘 (에러 시트와 동시): opacity:0.45 → 0, 300ms, ease-in
• 딤 복원 (350ms 딜레이 후): opacity:0 → 1(0.45) (opacity property 직접 할당, transition 없음)
• 로그인 시트 등장 (350ms 딜레이 후): translateY(100%) → translateY(0), 400ms, var(--ease-ios-spring)
• 로그인 시트 닫힘 (X 버튼): translateY(0) → translateY(100%), 300ms, ease-in. 딤 동시 opacity:0, pointer-events:none

8. 여백·간격 요약

9. 적용 디자인 토큰

• 에러 바텀시트 배경: --bg → #FAFAF8, border-radius:0 (R=0)
• 로그인 바텀시트 배경: --bg → #FAFAF8, border-radius:0 (R=0)
• 딤 오버레이: rgba(26,26,26,0.45) — charcoal 45%
• 타이틀 "로그인 실패": --sans 18px 700, --charcoal, center, --ls-tight
• 안내 문구: --sans 18px 500, --text-secondary → #6B6B6B, center, --ls-normal
• 확인 버튼 (Primary, .sb-dp-modal__btn--confirm): linear-gradient(160deg, #B52B31 0%, #7A1518 100%) bg, height:50px, 직각, 14px/600
• 비밀번호 찾기 버튼 (Secondary, .sb-dp-modal__btn--cancel): --text-secondary bg → #6B6B6B, height:50px, 직각, 14px/600
• 버튼 배치: flex, gap:12px, 2버튼 동일 너비
• 로그인 시트 입력 필드: height:48px, bg:var(--alpha-4), border:1px solid var(--border), R=0
• 로그인 시트 이메일 에러 메시지: var(--size-xs-font) 12px, color:var(--red-brand), display:none/block 방식
• 핸들 바: 없음 (강제 액션형)
• 닫기(X): 없음 (에러 시트 한정 — 로그인 시트에는 X 버튼 있음)
• 좌우 패딩: 24px — 바텀시트 내부 콘텐츠 마진
• 문구-버튼 간격: margin-top:48px — 안내 문구 하단 ~ 버튼 영역 상단