약관동의 바텀시트

Update History

1. 화면 구조 개요

• LOG-002는 최초 소셜 로그인 시 약관 동의를 받기 위해 LOG-001 위에 노출되는 바텀시트이다.
• LOG-001 배경(히어로 카피 + 버튼) 위에 딤 오버레이를 깔고, 하단에서 슬라이드 업으로 등장한다.
• 구성: 핸들 바 + "약관 전체 동의" 헤더 + 개별 약관 4개 + "가입하기" CTA 버튼
• 기존 로그인 사용자(캐싱 O)는 이 화면을 건너뛴다 → 바로 로그인 처리 후 서비스 진입

2. 레이어 구조 + 치수

3. 핵심 인터랙션 — 체크박스 연동 로직

• "약관 전체 동의" 체크: 하위 4개 약관 항목 전부 체크
• "약관 전체 동의" 해제: 하위 4개 약관 항목 전부 해제
• 개별 약관 전부 체크 시: "약관 전체 동의" 자동 체크
• 개별 약관 하나라도 해제 시: "약관 전체 동의" 자동 해제
• 체크박스 토글 transition: check icon opacity + border-color 200ms ease
• 약관 항목 구성:
  • 만 14세 이상입니다 (필수)
  • 서비스 이용약관 동의 (필수) → "내용보기" 링크 있음
  • 개인정보 수집 및 이용 동의 (필수) → "내용보기" 링크 있음
  • 마케팅 수신 동의 (선택) → "내용보기" 링크 있음

4. 상태 변화 — CTA 버튼

• 비활성 (기본): background: rgba(26,26,26,0.12), color: rgba(26,26,26,0.3), cursor: default
• 활성화 조건: 필수 약관 3개 (만 14세, 서비스 이용약관, 개인정보) 전부 체크 시. 마케팅 수신 동의는 가입 필수 조건에 포함되지 않음
• 활성: background: linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%), color: #fff, cursor: pointer
• 전환 모션: background + color 동시 transition 400ms cubic-bezier(0.4,0,0.2,1)
• 클릭 시 동작 (활성 상태): 약관 동의 정보 저장 → 회원가입 처리 → 로그인 성공 후 서비스 진입 → "로그인되었습니다" 토스트

5. 네비게이션 플로우

• 진입: LOG-001 소셜 로그인 버튼 클릭 → OAuth 인증 → 최초 사용자 → LOG-002 바텀시트 자동 노출
• 닫기(X) / 딤 터치: 바텀시트 닫힘 → LOG-001로 복귀 (회원가입/로그인 프로세스 중단)
• "내용보기" 클릭: 바텀시트 내부에서 약관 상세 패널 push navigation (MYP-015 연동)
• 약관 상세 패널 뒤로가기: 패널 slide-out → 바텀시트 복귀 (체크박스 상태 보존)
• 가입 완료: CTA 클릭 → 가입 처리 → "가입 완료!" 표시 → 시트 닫힘 → 서비스 진입

6. 에러/예외 처리

• Case A — 필수 미동의 가입 클릭: CTA 비활성 상태이므로 터치 이벤트 무시. 활성 상태 우회 시 에러 토스트 "필수 약관에 동의해주세요"
• Case B — 닫기(X) 후 재시도: LOG-001로 복귀. 다시 소셜 로그인 → 바텀시트 재노출. 이전 체크 상태 초기화 (모두 미체크)
• Case C — 네트워크 오류: 가입하기 클릭 후 서버 통신 실패 → 에러 토스트 "네트워크 연결을 확인해주세요" → 바텀시트 유지, 재시도 가능
• Case D — 중복 가입 (이미 가입된 계정): 소셜 인증 후 기존 계정 확인 → 정보 토스트 "이미 가입된 계정입니다" → 기존 계정으로 로그인 처리 후 서비스 진입
• Case E — 내용보기 진입/복귀: "내용보기" 클릭 → iOS push nav 상세 패널 → 뒤로가기 시 체크박스 상태 완전 보존 (바텀시트 DOM 유지)
• Case F — 백그라운드 전환: 바텀시트 상태 및 체크 상태 유지. 세션 타임아웃 시 LOG-001로 복귀

7. 모션 스펙

8. 여백·간격 요약

9. 적용 디자인 토큰

• 바텀시트 배경: --bg → #FAFAF8, 직각 border-radius: 0
• 딤 오버레이: --charcoal 45% → rgba(26,26,26,0.45)
• 핸들 바: --charcoal 12% → 36x4px, rgba(26,26,26,0.12)
• "약관 전체 동의" 타이틀: --sans / 16px / 700 → Pretendard Variable, Bold, ls: -0.02em
• 전체 동의 체크박스: 22x22px / --charcoal 1.5px border → 직각 (R=0), check: stroke-linecap="square"
• 개별 항목 체크박스: 18x18px / --charcoal 25% → 직각 (R=0), 미체크 상태
• 항목 텍스트: --sans / 14px / 400 → Pretendard, ls: -0.005em
• (필수)/(선택) 라벨: --text-muted / 12px → #888888, 항목 텍스트 뒤 인라인
• "내용보기" 링크: --mono / 12px / --text-muted → TASA Orbiter, ls: 0.04em, uppercase
• 닫기(X) 아이콘: 22x22 / --text-muted → stroke-linecap="square", stroke-linejoin="miter"
• 구분선: --charcoal 7% → rgba(26,26,26,0.07), 1px solid
• 가입하기 버튼: --red-brand gradient / 50px height → 직각, 15px font, 600 weight, 135deg gradient
• 좌우 패딩: 24px → 바텀시트 내부 콘텐츠 마진
• 항목 간격: 10px vertical padding → 각 약관 항목 사이 간격
• 약관 상세 패널: position:absolute inset:0, --bg #FAFAF8, z-index:20. Navbar: chevron-left 20x20px + 타이틀 --sans 17px/700/--charcoal/ls:-0.02em. 본문: --sans 13px/--text-secondary/line-height:1.8. Home Indicator: 120x5px --charcoal R=5px
• 토스트 (에러): bg #D32F2F / text #fff / 2.5초 auto-dismiss / bottom 24px / --sans 12px/500 / padding 10px 20px / R=0
• 토스트 (정보): bg --charcoal #1A1A1A / text #fff / 동일 위치/사이즈/타이밍