로그인 진입 화면

Update History

1. 화면 구조 개요

• LOG-001은 앱에서 사용자 인증이 필요한 기능 클릭 시 진입하는 로그인 진입 화면이다.
• 접근 조건: 비회원 사용자가 앱 실행 시 진입. 로그인 완료 사용자는 본 화면 재진입 불가. 로그인 상태에서 접근 시 메인 화면으로 이동.
• 전체 화면(852px) 레이아웃. 상단에 히어로 카피 영역, 하단에 소셜 로그인 버튼 4종(카카오/Google/Apple/Naver) + 이메일 로그인 버튼이 고정 배치된다.
• 히어로 이미지는 삭제되었으며(2026.03.09), 타이틀 카피("차트로 시작하기.")와 서브 카피만 남아 있다.
• "최근 로그인" 말풍선 배지가 마지막 로그인 소셜 버튼 상단에 floating 애니메이션으로 노출된다.
• Back 버튼(chevron-left)으로 로그인 직전 화면으로 복귀할 수 있다.
• 공통 규칙: 비회원은 열람 및 화면 진입 가능. 저장·요청·설정 변경·문의·알림 등 개인 액션은 로그인 후 가능. 로그인/가입 관련 주요 이벤트는 로그 기록 대상.

2. 레이어 구조 + 치수

3. 핵심 인터랙션

• 소셜 로그인 버튼 클릭: 해당 플랫폼 OAuth 인증 페이지로 이동
  • 기존 가입 사용자 → 인증 완료 후 로그인 처리, 서비스 진입
  • 최초 사용자 → 추가 정보 입력 없이 자동 가입 처리
  • 최초 가입/로그인 사용자 → 온보딩 화면(LOG-007)으로 이동
  • 소셜 인증 실패 시 LOG-009 소셜 로그인 실패 모달 노출
  • 네트워크 오류 발생 시 LOG-009 네트워크 오류 모달 노출
• 이메일 로그인 버튼 클릭: LOG-003 (이메일 ID/PW 입력 바텀시트) 이동
• Back 버튼 클릭: 로그인 진입 직전 화면으로 복귀

4. 상태 변화

• "최근 로그인" 말풍선 배지: 단말 기준 마지막 로그인 소셜 버튼 상단 중앙에 노출
  • 배경: CSS 하드코딩 #B22A30 (sb-dp-badge 클래스), 텍스트: #fff, --sans Pretendard / 11px / 600
  • 하단 삼각 화살표: ::after pseudo-element (border trick), #B22A30
  • box-shadow: 0 2px 8px rgba(178,42,48,0.25)
  • floating 애니메이션: badgeFloat 2s ease-in-out infinite, translateY(0 ↔ -3px)
  • 말풍선 있는 버튼은 margin-top: 18px
  • 안내용 UI -- 버튼 기능에 영향 없음. 버튼 4종 중 1개에만 노출
• 로그인 성공: "로그인되었습니다" 정보 토스트 노출 → 원래 화면 복귀
• 로그인 실패: 오류 메시지 토스트 또는 팝업 노출 (LOG-009)

5. 네비게이션 플로우

• 진입: 앱 내 인증 필요 기능 클릭 → LOG-001
• 소셜 로그인 (최초): LOG-001 → OAuth 인증 → 자동 가입 → 온보딩(LOG-007)
• 소셜 로그인 (기존): LOG-001 → OAuth 인증 → 서비스 진입 (원래 화면)
• 소셜 인증 실패: LOG-001 → LOG-009 (소셜 로그인 실패 모달)
• 네트워크 오류: LOG-001 → LOG-009 (네트워크 오류 모달)
• 이메일 로그인: LOG-001 → LOG-003 (이메일 ID/PW 입력 바텀시트)
• Back: LOG-001 → 로그인 직전 화면
• 로그인 성공: LOG-001 → 원래 화면 (로그인 요청 발생 시점)
• 로그인 실패: LOG-001 → LOG-009 (오류)

6. 에러/예외 처리

• 소셜 인증 취소: 사용자가 OAuth 인증 도중 취소 → 에러 토스트 "로그인이 취소됐습니다" → LOG-001 화면 유지
• 네트워크 오류: 에러 토스트 "네트워크 연결을 확인해주세요" → 화면 유지
• 인증 토큰 만료: 현재 액션 중단 → 에러 토스트 "로그인을 재시도해주세요." → LOG-001로 이동 → 로그인 완료 후 원래 화면 복귀
• 정지 계정: 에러 토스트 "정지된 계정입니다. 문의사항은 cs@chaart.co로 부탁드립니다"
• 탈퇴 계정 (5일 이내): 에러 토스트 "탈퇴 계정입니다. 5일 후, 재가입 가능합니다." — 탈퇴 후 5일이 지난 경우 동일 식별값으로 다시 로그인/가입 가능

7. 모션 스펙

8. 여백·간격 요약

9. 적용 디자인 토큰

• 타이틀: --sans / 30px / 700 → Pretendard Variable, Bold. "차트" → --red-brand
• 서브타이틀: --text-secondary / 17px / line-height 1.6 → #555555
• 히어로 영역: --paper #F0EDE6 + linen 텍스처 (삭제됨 2026.03.09)
• 카카오 버튼: Platform / #FEE500 → 카카오 브랜드 가이드
• Google 버튼: Platform / #FFFFFF + border → Google Identity 가이드
• Apple 버튼: Platform / #000000 → Apple HIG 가이드
• Naver 버튼: Platform / #03C75A → 네이버 브랜드 가이드
• 이메일 버튼: --charcoal border / 시스템 아이콘 mail → Secondary action
• 최근 로그인 말풍선: CSS 하드코딩 #B22A30 bg (sb-dp-badge 클래스) / #fff / --sans / 11px / 600, 말풍선 + 하단 화살표, floating 애니메이션
• 버튼 높이: 50px → 터치 타겟 최소 48px 이상 충족
• 버튼 간격: --space-3 (10px) → btn-stack gap
• 좌우 패딩: 32px → iPhone 14 Pro 기준 컨텐츠 마진
• 토스트: --sans / 12px / 500 / padding: 10px 20px → error: #D32F2F / info: --charcoal / bottom 24px / 라운드 없음