Skip to content

[FEATURE] iOS 로그인 버튼 추가 및 화면 UI 개선 #89

Description

@kbh0218

📝 기능 설명

iOS 빌드에서 사용할 로그인 버튼을 추가하고, 앱 화면 전반에서 부자연스럽게 보이는 UI 요소를 확인해 자연스럽게 개선합니다.

현재 로그인 화면에는 Google 로그인 버튼만 노출되어 있으며, SocialLoginButton 컴포넌트는 apple provider 스타일을 이미 지원하고 있습니다.
이번 작업에서는 iOS 환경에서 Apple 로그인 버튼을 표시하고, Clerk SSO 흐름과 실제 iOS 빌드에서 로그인 동작이 자연스럽게 이어지는지 확인합니다.

또한 로그인 화면, 탭 화면, 홈/폴더/결과 화면 등 실제 사용 흐름에서 여백, 텍스트, 버튼 배치, 기본 템플릿 잔여 화면처럼 어색한 부분을 함께 정리합니다.

📋 구현할 Task

  • iOS 로그인 화면에서 Apple 로그인 버튼이 필요한 위치와 표시 조건을 확인했는가?
  • components/ui/social-login-button.tsxapple provider 스타일이 실제 로그인 화면에 자연스럽게 적용되는가?
  • app/(auth)/login.tsx에 Apple 로그인 버튼을 추가했는가?
  • iOS에서만 Apple 로그인 버튼을 노출할지, 전체 플랫폼에 노출할지 정책을 정했는가?
  • Clerk에서 Apple 로그인 SSO 전략 및 iOS redirect 설정이 올바른지 확인했는가?
  • Apple 로그인 진행 중/비활성화 상태 문구가 Google 로그인 버튼과 일관되는가?
  • Google 로그인과 Apple 로그인 중복 터치 방지 및 loading 상태가 충돌하지 않는가?
  • Apple 로그인 성공 후 기존 회원 동기화 및 홈 이동 흐름이 유지되는가?
  • Apple 로그인 실패 시 기존 로그인 실패 alert 정책과 어색하지 않게 연결되는가?
  • 로그인 화면의 로고, subtitle, 버튼 간격, 약관 문구가 iOS 화면에서 자연스럽게 보이는가?
  • iOS 작은 화면에서 로그인 버튼과 약관 문구가 하단 safe area와 겹치지 않는가?
  • iOS 실제 기기 또는 preview 빌드에서 로그인 화면을 확인했는가?
  • 앱 내 기본 템플릿 화면 또는 부자연스러운 영문/샘플 UI가 남아 있는지 확인했는가?
  • 홈, 폴더, 검사 결과, 설정 등 주요 화면에서 여백/텍스트/버튼 배치가 어색한 부분을 정리했는가?
  • UI 개선 과정에서 기존 API 연동, 저장 링크, 검사 결과 이동 흐름이 깨지지 않는지 확인했는가?

📎 우선 확인 대상

로그인 화면:

  • app/(auth)/login.tsx
  • components/ui/social-login-button.tsx
  • constants/theme.ts
  • assets/images/login_wordmark.png

인증 및 앱 설정:

  • app/_layout.tsx
  • app.json
  • Clerk iOS OAuth / Apple 로그인 설정
  • linclean://sso-callback redirect 흐름

화면 자연스러움 개선 대상:

  • app/(tabs)/(home)/index.tsx
  • app/(tabs)/(home)/scan-result.tsx
  • app/(tabs)/(home)/scan-result-caution.tsx
  • app/(tabs)/(home)/scan-result-block.tsx
  • app/(tabs)/(folder)/index.tsx
  • app/(tabs)/(folder)/[id].tsx
  • app/(tabs)/(explore)/index.tsx
  • app/(tabs)/_layout.tsx

📎 처리 방향

  • iOS 로그인 버튼은 기존 SocialLoginButton 컴포넌트를 재사용합니다.
  • Google 로그인과 Apple 로그인의 UX가 같은 톤으로 보이도록 버튼 높이, 간격, loading 상태를 맞춥니다.
  • Clerk SSO 흐름은 기존 Google 로그인 구현을 기준으로 확장하되, Apple 로그인 전략과 iOS redirect 설정을 별도로 확인합니다.
  • 화면 개선은 기능 변경보다 UI 자연스러움에 집중합니다.
  • Expo 기본 템플릿처럼 보이는 화면이나 앱 톤과 맞지 않는 텍스트/컴포넌트가 있으면 정리합니다.
  • 기존 Colors, Typography 토큰을 우선 사용합니다.
  • Android 기존 로그인 흐름에는 영향이 없도록 확인합니다.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions