📝 기능 설명
iOS 빌드에서 사용할 로그인 버튼을 추가하고, 앱 화면 전반에서 부자연스럽게 보이는 UI 요소를 확인해 자연스럽게 개선합니다.
현재 로그인 화면에는 Google 로그인 버튼만 노출되어 있으며, SocialLoginButton 컴포넌트는 apple provider 스타일을 이미 지원하고 있습니다.
이번 작업에서는 iOS 환경에서 Apple 로그인 버튼을 표시하고, Clerk SSO 흐름과 실제 iOS 빌드에서 로그인 동작이 자연스럽게 이어지는지 확인합니다.
또한 로그인 화면, 탭 화면, 홈/폴더/결과 화면 등 실제 사용 흐름에서 여백, 텍스트, 버튼 배치, 기본 템플릿 잔여 화면처럼 어색한 부분을 함께 정리합니다.
📋 구현할 Task
📎 우선 확인 대상
로그인 화면:
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 기존 로그인 흐름에는 영향이 없도록 확인합니다.
📝 기능 설명
iOS 빌드에서 사용할 로그인 버튼을 추가하고, 앱 화면 전반에서 부자연스럽게 보이는 UI 요소를 확인해 자연스럽게 개선합니다.
현재 로그인 화면에는 Google 로그인 버튼만 노출되어 있으며,
SocialLoginButton컴포넌트는appleprovider 스타일을 이미 지원하고 있습니다.이번 작업에서는 iOS 환경에서 Apple 로그인 버튼을 표시하고, Clerk SSO 흐름과 실제 iOS 빌드에서 로그인 동작이 자연스럽게 이어지는지 확인합니다.
또한 로그인 화면, 탭 화면, 홈/폴더/결과 화면 등 실제 사용 흐름에서 여백, 텍스트, 버튼 배치, 기본 템플릿 잔여 화면처럼 어색한 부분을 함께 정리합니다.
📋 구현할 Task
components/ui/social-login-button.tsx의appleprovider 스타일이 실제 로그인 화면에 자연스럽게 적용되는가?app/(auth)/login.tsx에 Apple 로그인 버튼을 추가했는가?📎 우선 확인 대상
로그인 화면:
app/(auth)/login.tsxcomponents/ui/social-login-button.tsxconstants/theme.tsassets/images/login_wordmark.png인증 및 앱 설정:
app/_layout.tsxapp.jsonlinclean://sso-callbackredirect 흐름화면 자연스러움 개선 대상:
app/(tabs)/(home)/index.tsxapp/(tabs)/(home)/scan-result.tsxapp/(tabs)/(home)/scan-result-caution.tsxapp/(tabs)/(home)/scan-result-block.tsxapp/(tabs)/(folder)/index.tsxapp/(tabs)/(folder)/[id].tsxapp/(tabs)/(explore)/index.tsxapp/(tabs)/_layout.tsx📎 처리 방향
SocialLoginButton컴포넌트를 재사용합니다.Colors,Typography토큰을 우선 사용합니다.