이메일 로그인 ID/PW 입력 바텀시트

Update History

1. 화면 구조 개요

※ 이 바텀시트는 LOG-003 canonical shell이다. LOG-004, LOG-005 등 후속 바텀시트는 모두 이 화면의 레이어 치수·간격을 기준으로 한다.

• LOG-003은 LOG-001에서 "이메일로 로그인" 버튼 클릭 시 노출되는 이메일 ID/PW 입력 바텀시트이다.
• 홈 화면(HOM-001) 위에 딤 오버레이와 함께 하단 슬라이드 업으로 등장한다.
• 구성: 핸들 바 + 닫기(X) + 아이디 입력 필드 + 비밀번호 입력 필드 + "로그인 하기" CTA + "비밀번호 찾기" 텍스트 버튼
• 키보드 올라올 시 바텀시트 전체가 위로 밀린다.

2. 레이어 구조 + 치수

3. 핵심 인터랙션

• 입력 필드 라벨: --mono TASA Orbiter / 12px / 600 / --charcoal #1A1A1A / letter-spacing:var(--ls-wide) / text-transform: uppercase / margin-bottom: 8px
• 입력 필드 컨테이너: 높이 48px, 직각 R=0, background: rgba(26,26,26,0.04), border: 1px solid rgba(26,26,26,0.07), 좌우 padding: 16px
• 플레이스홀더 텍스트: --sans Pretendard / 14px / --text-muted #888888 / letter-spacing:var(--ls-normal)
• 입력 텍스트: --sans Pretendard / 14px / --charcoal #1A1A1A / letter-spacing:var(--ls-normal)
• 포커스 상태: border → 1px solid var(--charcoal), outline: none
• 에러 상태 (아이디 필드만): border → 1px solid var(--red-brand #961E23), 하단 에러 메시지 "올바른 이메일 형식을 입력해주세요." --sans 12px / --red-brand / margin-top: 6px. 이메일 형식 위반 시에만 표시, 빈 필드에서는 미표시
• 아이디 필드: type="email", placeholder "아이디(이메일)를 입력해주세요."
• 비밀번호 필드: type="password", placeholder "비밀번호를 입력해주세요.", 입력값 마스킹 처리

4. 상태 변화 — CTA 버튼

• 비활성 (기본): var(--cta-gradient) 배경 유지, opacity: 0.4, pointer-events: none. 아이디/비밀번호 미입력 또는 이메일 형식 오류 시
• 활성 조건: 이메일 형식 유효 (정규식 /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/) AND 비밀번호 입력값 존재 시
• 활성: opacity: 1, cursor: pointer, 터치 가능
• 텍스트: --sans Pretendard / 15px / 600 / #fff / letter-spacing:var(--ls-normal) / center
• 프레스 피드백: transform: scale(0.98), transition 0.15s
• 활성↔비활성 전환: opacity transition 0.2s, background transition 0.3s

5. 네비게이션 플로우

• 진입: LOG-001 "이메일로 로그인" 버튼 클릭 → 딤 오버레이 + LOG-003 바텀시트 슬라이드 업
• 닫기(X) / 딤 터치: 바텀시트 닫힘 → LOG-001로 복귀 (이메일 로그인 프로세스 중단). 입력값 모두 초기화, 에러 상태 해제
• 로그인 성공 (소셜 머지 대상 있음): 성공 토스트 노출(정보 스타일, 2.5초) → 바텀시트 닫힘 → LOG-004 소셜 로그인 머지 바텀시트 이동
• 로그인 성공 (머지 대상 없음): 바텀시트 닫힘 → 로그인 요청 발생 시점의 원래 화면으로 복귀
• 로그인 실패 (비밀번호 불일치): 바텀시트 닫힘 → LOG-005 이메일 로그인 실패 바텀시트 이동. 이메일값만 보존, 비밀번호는 초기화
• 비밀번호 찾기: LOG-003 바텀시트 위에 비밀번호 재설정 시트 슬라이드업 (페이지 이동 없음, 인라인)

6. 에러/예외 처리

• 이메일 형식 위반: 아이디 필드 border → --red-brand, 하단 에러 메시지 노출, CTA 비활성 유지
• 이메일/비밀번호 미입력: CTA 비활성 유지, 별도 에러 메시지 없음 (프리벤션 방식)
• 비밀번호 불일치 (로그인 실패): LOG-005로 이동. 이메일값만 보존, 비밀번호는 초기화
• 네트워크 오류: 에러 토스트 "네트워크 연결을 확인해주세요." → 바텀시트 유지, CTA 재시도 가능
• 계정 잠김: 에러 토스트 "보안을 위해 계정이 잠겼습니다. 비밀번호를 재설정해주세요." → "비밀번호 찾기" 텍스트 버튼 하이라이트
• 백그라운드 전환: 복귀 시 입력 상태 그대로 유지

7. 모션 스펙

8. 여백·간격 요약

9. 적용 디자인 토큰

• 바텀시트 배경 → --bg → #FAFAF8 — 직각 (R=0)
• 딤 오버레이 → hardcoded rgba(0,0,0,0.3), token candidate: --overlay-dim → inset:0 · z-index:1 — Figma canonical (0.3)
• 필드 라벨 → --mono · 12px · 600 → TASA Orbiter, ls: 0.04em, uppercase
• 입력 필드 → 48px height · --charcoal 4% bg → 직각, border: 1px solid rgba(26,26,26,0.07)
• 플레이스홀더 → --sans · 14px · --text-muted → Pretendard, #888888
• 로그인 하기 버튼 → --cta-gradient bg · 50px → 직각, 15px font, 600 weight
• 비밀번호 찾기 → --sans · 13px · --text-muted → 텍스트 버튼, center-aligned
• 닫기(X) 아이콘 → 22x22 · --text-muted → stroke: square/miter, 1.5px
• 핸들 바 → --charcoal 12% → 36x4px, rgba(26,26,26,0.12)
• 좌우 패딩 → 24px → 바텀시트 내부 콘텐츠 마진
• 필드 간격 → 20px top padding → 아이디↔비밀번호 섹션 간격
• 에러 토스트 → 배경 --color-error-toast, 텍스트 --bg, 2.5초 auto-dismiss
• 정보 토스트 → 배경 --charcoal, 텍스트 --bg, 2.5초 auto-dismiss
• 토스트 위치 → 폰 내부 하단 16px, 중앙 정렬, 10px 20px padding, R=0
• 토스트 폰트 → --sans Pretendard / 12px / 500

10. 비밀번호 재설정 바텀시트 (인라인 — LOG-006 통합)

※ LOG-006.html 페이지 이동 없이 LOG-003 내부에 인라인으로 구현된다. z-index:25(❶) / z-index:26(❷).

❶ 이메일 입력 바텀시트 (pwResetSheet)

• 진입: "비밀번호 찾기" 텍스트 버튼 클릭 → translateY(100%) → translateY(0) 슬라이드업, 400ms, --ease-ios-spring
• 구성: 핸들 바 (36x4px, --alpha-12) + 닫기(X) (22x22, top:16px right:20px) + 타이틀 "비밀번호 재설정" + 이메일 입력 필드 (48px, --alpha-8 bg, --border-strong) + "전송" CTA (50px, --cta-gradient) + 하단 여백 32px
• 입력 필드: type="email", placeholder "등록된 아이디(이메일)를 입력해주세요.", 포커스 → --charcoal border, 에러 시 → --red-brand border + 하단 에러 메시지 (12px / --red-brand / --text-xs)
• 전송 CTA 활성 조건: 이메일 형식 유효 (/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/) 시 opacity:1 / pointer-events:auto. 기본 opacity:0.4 / pointer-events:none
• 전송 클릭 (성공): ❶ translateY(-20px) + opacity:0 퇴장(200ms) → ❷ translateY(0) 등장(400ms). fail@test.com 입력 시 실패 토스트 시뮬레이션
• 닫기 (핸들/X): translateY(100%) 퇴장 → 로그인 시트 상태 복귀

❷ 발송 완료 바텀시트 (pwResetSheet2, 강제 확인형)

• 구성: 핸들 바 없음 + X 버튼 없음 + 이메일 SVG 아이콘 (24x24, --red-brand) + 타이틀 "인증 메일이 발송되었습니다" (--size-xl-font/700/--charcoal) + 안내 문구 "메일함을 확인해주세요" (--size-md-font/500/--text-secondary) + "확인" CTA
• 확인 클릭: ❷ translateY(100%) 퇴장 → ❶ 초기화(DOM 복원, 이메일/에러 리셋) → 로그인 시트가 열려 있으면 그대로 유지
• 레이아웃: padding:48px 24px 0 · text-align:center · 버튼 하단 padding-bottom:32px

❶❷ 공통 모션 스펙