refactor: sign-in layou

crossplatformkorea · Aug 6, 2024 · 2448804 · 2448804
1 parent 0884b89
commit 2448804
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/app/(auth)/sign-in.tsx b/app/(auth)/sign-in.tsx
@@ -1,12 +1,11 @@
-import {useCallback, useState} from 'react';
+import {useCallback} from 'react';
 import {Image, InteractionManager, Platform, ScrollView} from 'react-native';
 import styled, {css} from '@emotion/native';
 import {
   GoogleSignin,
   statusCodes,
 } from '@react-native-google-signin/google-signin';
 import {Icon, Typography, useDooboo} from 'dooboo-ui';
-import StatusBarBrightness from 'dooboo-ui/uis/StatusbarBrightness';
 import * as AppleAuthentication from 'expo-apple-authentication';
 import {Redirect, Stack, useRouter} from 'expo-router';
 import {useRecoilValue} from 'recoil';
@@ -18,8 +17,9 @@ import {t} from '../../src/STRINGS';
 import {supabase} from '../../src/supabase';
 import SocialSignInButton from '../../src/components/uis/SocialSignInButton';
 import {showAlert} from '../../src/utils/alert';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-const Container = styled.SafeAreaView`
+const Container = styled.View`
   flex: 1;
   align-self: stretch;
   background-color: ${({theme}) => theme.brand};
@@ -29,6 +29,7 @@ const Container = styled.SafeAreaView`
 `;
 
 const Content = styled.View`
+  align-self: center;
   gap: 20px;
   justify-content: center;
   align-items: center;
@@ -37,15 +38,16 @@ const Content = styled.View`
 const Buttons = styled.View`
   align-self: stretch;
   margin-top: 8px;
+  margin-bottom: 20px;
   padding: 20px;
   gap: 12px;
 `;
 
 export default function SignIn(): JSX.Element {
   const {theme} = useDooboo();
   const {authId, user} = useRecoilValue(authRecoilState);
-  const [isHorizontal, setIsHorizontal] = useState(false);
   const {push} = useRouter();
+  const {top, bottom, left, right} = useSafeAreaInsets();
 
   GoogleSignin.configure({
     scopes: ['https://www.googleapis.com/auth/drive.readonly'],
@@ -130,19 +132,15 @@ export default function SignIn(): JSX.Element {
   }
 
   return (
-    <Container
-      onLayout={(e) => {
-        setIsHorizontal(
-          e.nativeEvent.layout.width > e.nativeEvent.layout.height,
-        );
-      }}
-    >
-      <StatusBarBrightness type="light-content" />
+    <Container>
       <Stack.Screen options={{headerShown: false}} />
       <ScrollView>
         <Content
           style={css`
-            padding-top: ${!isHorizontal ? '16%' : '5%'};
+            padding-top: ${top + 48 + 'px'};
+            padding-bottom: ${bottom + 'px'};
+            padding-left: ${left + 'px'};
+            padding-right: ${right + 'px'};
           `}
         >
           <Image

diff --git a/assets/langs/ko.json b/assets/langs/ko.json
@@ -146,7 +146,7 @@
     "description": "한국의 개발자들과 전세계 개발자들이 소통하는 곳!",
     "googleIdNotAvailable": "존재하지 않는 Google ID입니다",
     "playServiceNotAvailable": "Google Play 서비스를 사용할 수 없습니다",
-    "policyAgreement": "{{termsOfService}} 및 {{privacyPolicy}}에 동의하면 로그인합니다.",
+    "policyAgreement": "다음 단계로 진행함과 동시에 {{termsOfService}} 및 {{privacyPolicy}}에 동의하는 것으로 간주합니다.",
     "privacyPolicy": "개인정보 처리방침",
     "termsOfService": "서비스 약관",
     "title": "로그인"