[FEATURE] iOS 애플 로그인 및 화면 UI 개선

[kbh0218]

Closes #89

개요

iOS 로그인 화면에 Apple 로그인 버튼을 추가하고, 앱 전환/인증 대기 중 빈 화면처럼 보이던 구간과 일부 화면의 헤더/메뉴 위치/폴더 UI 간격을 정리했습니다.

기존 Google 로그인 흐름을 공통 소셜 로그인 핸들러로 확장해 oauth_google, oauth_apple 전략을 provider 기준으로 선택하도록 변경했습니다. Apple 로그인 버튼은 iOS 환경에서만 노출되며, 로그인 진행 중 상태는 provider별 문구로 표시하되 Google/Apple 중복 터치는 함께 방지합니다.

또한 인증 로딩이나 회원 동기화 대기 중 null을 반환하던 화면에 공통 로딩 화면을 적용해 앱이 멈춘 것처럼 보이지 않도록 개선했습니다. 링크 추가/폴더 생성/URL 선택 계열 화면은 기본 Stack header 대신 앱 톤에 맞는 공통 ScreenHeader를 사용하도록 정리했습니다.

주요 구현 내용

• iOS 환경에서 Apple 로그인 버튼 노출
• Google/Apple 로그인 흐름을 공통 handleSocialLogin으로 정리
• provider별 Clerk SSO strategy 매핑 추가
• 로그인 진행 중 provider별 loading 문구 표시
• Google/Apple 로그인 중복 터치 방지 유지
• 인증 로딩 및 회원 동기화 대기 화면에 공통 loading UI 적용
• 앱 전체 Stack 배경색 및 StatusBar 색상 정리
• 링크 추가, 새 폴더 만들기, URL 선택, 폴더 URL 추가 화면에 공통 ScreenHeader 적용
• 뒤로가기 stack이 없을 때 fallback route로 이동하도록 처리
• 링크/폴더 카드 더보기 메뉴 anchor 측정 실패 시 터치 좌표 기반 fallback 적용
• 폴더 컨텍스트 메뉴 위치 계산을 화면 크기 변화에 대응하도록 개선
• 필터 dropdown safe area 중복 보정 제거
• 폴더 화면 카드 간격, padding, 최소 카드 폭 조정

파일별 역할

• app/(auth)/login.tsx

  • Apple 로그인 버튼 추가
  • Google/Apple 공통 SSO 처리
  • provider별 로그인 중 상태 관리

• app/(auth)/_layout.tsx, app/index.tsx, app/(tabs)/_layout.tsx

  • Clerk 인증 로딩 및 회원 동기화 대기 중 AppLoadingScreen 표시

• components/ui/app-loading-screen.tsx

  • 앱 배경색과 primary color를 사용하는 공통 로딩 화면 추가

• components/ui/screen-header.tsx

  • 뒤로가기 아이콘과 화면 제목을 표시하는 공통 헤더 추가

• app/(tabs)/(home)/add-link.tsx

  • 링크 추가 화면에 SafeAreaView 및 공통 헤더 적용
  • 뒤로가기 fallback 처리 추가

• app/(tabs)/(folder)/folder-name.tsx

  • 새 폴더 만들기 화면에 공통 헤더 적용
  • 뒤로가기 fallback 처리 추가

• app/(tabs)/(folder)/folder-url-select.tsx

  • 폴더 URL 선택 화면에 공통 헤더 적용
  • 뒤로가기 fallback 처리 추가

• app/(tabs)/(folder)/folder-add-url.tsx

  • 폴더 URL 추가 화면에 공통 헤더 적용
  • 폴더 상세 화면 fallback 이동 처리 추가

• components/ui/card-link.tsx, components/ui/folder-card.tsx

  • 더보기 버튼 anchor 측정 실패 시 fallback anchor 사용
  • 더보기 터치가 카드 press로 전파되지 않도록 처리

• components/ui/folder-context-menu.tsx

  • 유효한 anchor 검증 및 마지막 anchor 보관
  • 화면 크기 기반 메뉴 위치 계산 개선

• components/ui/filter-chip.tsx

  • dropdown top 계산에서 safe area 중복 보정 제거

• app/(tabs)/(folder)/index.tsx, constants/theme.ts

  • 폴더 화면 간격, padding, 카드 폭 토큰 조정

해결한 이슈 목록

• iOS 로그인 화면에서 Apple 로그인 버튼 노출
• Apple 로그인 버튼을 기존 SocialLoginButton 흐름에 연결
• iOS에서만 Apple 로그인 버튼이 표시되도록 처리
• Clerk Apple SSO 전략을 기존 SSO 흐름에 연결
• Google/Apple 로그인 중복 터치 방지
• 로그인 진행 중 provider별 문구 표시
• 로그인 성공 후 기존 회원 동기화 및 홈 이동 흐름 유지
• 로그인 실패 시 기존 alert 및 signOut 방어 흐름 유지
• 인증 로딩 중 빈 화면 대신 공통 loading 화면 표시
• 회원 동기화 대기 중 빈 화면 대신 공통 loading 화면 표시
• 앱 배경색과 StatusBar 색상 정리
• 기본 Stack header 대신 공통 ScreenHeader 적용
• 뒤로가기 불가 상황에 대한 fallback route 처리
• 카드 더보기 메뉴 위치 계산 안정화
• 폴더 화면 카드 간격 및 반응형 폭 조정

체크 사항

• 커밋/코딩 컨벤션에 맞게 작성
• 기존 Google 로그인 흐름 유지
• Android에서는 Apple 로그인 버튼이 노출되지 않음
• 기존 공유 URL 로그인 후 이동 흐름 유지
• 기존 링크 추가/폴더 생성/URL 선택 기능 유지
• git diff --check origin/dev..HEAD 통과
• npx tsc --noEmit 통과
• npm run lint 통과

참고사항

• SocialLoginButton의 Apple provider 스타일은 기존 컴포넌트 흐름을 재사용했습니다.
• Apple 로그인 버튼은 Platform.OS === 'ios' 조건에서만 표시됩니다.
• 이번 PR은 iOS 로그인 추가와 화면 UI polish 작업이며, API 스펙 변경은 없습니다.
• 실제 Apple 로그인은 Clerk Apple OAuth 및 iOS redirect 설정이 준비된 환경에서 최종 확인이 필요합니다.

Screenshots or Video

• 로그인 화면

• 뒤로가기 버튼들 통일

[sunm2n]

확인결과 이상 없는거 같습니다! 수고하셨습니다!