SWM-OneStep · byungchanKo99 · Nov 19, 2024 · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024
diff --git a/app/index.jsx b/app/index.jsx
@@ -4,11 +4,32 @@ import useGoogleAuth from '@/hooks/auth/useGoogleAuth';
 import useNotificationPermission from '@/hooks/auth/useNotificationPermission';
 import '@/locales/index';
 import { AppleButton } from '@invertase/react-native-apple-authentication';
-import { GoogleSigninButton } from '@react-native-google-signin/google-signin';
-import { Text } from '@ui-kitten/components';
 import { StatusBar } from 'expo-status-bar';
-import { Image, Linking, Platform, StyleSheet, View } from 'react-native';
-import imageSource from '../assets/todo_logo.png';
+import { Linking, Platform, View } from 'react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import * as Animatable from 'react-native-animatable';
+import {
+  useStyleSheet,
+  StyleService,
+  Layout,
+  Button,
+  Text,
+} from '@ui-kitten/components';
+import GoogleImageIcon from '@/components/icons/GoogleImageIcon';
+
+const PlaceholderItem = () => {
+  const styles = useStyleSheet(themedStyles);
+  return (
+    <View style={styles.placeholderItem}>
+      <View style={styles.placeholderCircle} />
+      <View style={styles.placeholderLine} />
+    </View>
+  );
+};
+
+const AccessoryLeft = () => (
+  <GoogleImageIcon style={{ width: 20, height: 20, marginRight: 8 }} />
+);
 
 const Login = () => {
   const { signInWithGoogle } = useGoogleAuth();
@@ -17,43 +38,66 @@ const Login = () => {
     isMessagingPermissionAlertModalVisible,
     setIsMessagingPermissionAlertModalVisible,
   } = useNotificationPermission();
+  const styles = useStyleSheet(themedStyles);
 
   return (
-    <View style={styles.container}>
+    <Layout style={styles.container}>
       <StatusBar style="auto" />
-      <View style={styles.iconContainer}>
-        <Image source={imageSource} style={styles.icon} />
-      </View>
-      <View style={styles.buttonAndTextContainer}>
-        <View style={styles.textContainer}>
-          <Text category="h2">OneStep</Text>
-        </View>
-        <View style={styles.buttonContainer}>
-          {Platform.OS === 'android' ? (
-            <GoogleSigninButton
-              size={GoogleSigninButton.Size.Wide}
-              color={GoogleSigninButton.Color.Dark}
-              onPress={() => {
-                signInWithGoogle();
-              }}
-            />
-          ) : null}
-          {Platform.OS === 'ios' ? (
-            <AppleButton
-              testID="apple-button"
-              buttonStyle={AppleButton.Style.BLACK}
-              buttonType={AppleButton.Type.SIGN_IN}
-              style={{
-                width: 160, // You must specify a width
-                height: 45, // You must specify a height
-              }}
-              onPress={() => {
-                signInWithApple();
-              }}
-            />
-          ) : null}
-        </View>
+      <Text style={styles.title}>
+        {'할 일을 정리하고,\n한 걸음씩 이뤄보세요'}
+      </Text>
+      <View style={styles.placeholderContainer}>
+        <Animatable.View animation="fadeIn" duration={600} delay={200}>
+          <PlaceholderItem />
+        </Animatable.View>
+        <Animatable.View animation="fadeIn" duration={600} delay={400}>
+          <PlaceholderItem />
+        </Animatable.View>
+        <Animatable.View animation="fadeIn" duration={600} delay={600}>
+          <PlaceholderItem />
+        </Animatable.View>
+        <Animatable.View animation="fadeIn" duration={600} delay={800}>
+          <PlaceholderItem />
+        </Animatable.View>
       </View>
+      <Animatable.View
+        animation="fadeIn"
+        duration={600}
+        delay={1000}
+        style={styles.buttonContainer}
+      >
+        {Platform.OS === 'android' ? (
+          <Button
+            style={styles.googleButton}
+            appearance="ghost"
+            size="large"
+            accessoryLeft={AccessoryLeft}
+            onPress={() => {
+              signInWithGoogle();
+            }}
+          >
+            {evaProps => (
+              <Text {...evaProps} style={styles.googleButtonText}>
+                구글 계정으로 계속하기
+              </Text>
+            )}
+          </Button>
+        ) : null}
+        {Platform.OS === 'ios' ? (
+          <AppleButton
+            testID="apple-button"
+            buttonStyle={AppleButton.Style.BLACK}
+            buttonType={AppleButton.Type.SIGN_IN}
+            style={{
+              width: '100%',
+              height: scale(52), // You must specify a height
+            }}
+            onPress={() => {
+              signInWithApple();
+            }}
+          />
+        ) : null}
+      </Animatable.View>
       <ConfirmModal
         visible={isMessagingPermissionAlertModalVisible}
         onConfirm={() => {
@@ -68,16 +112,49 @@ const Login = () => {
         confirmTextKey="common.yes"
         cancelTextKey="common.no"
       />
-    </View>
+    </Layout>
   );
 };
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: 'background-basic-color-1',
+    paddingHorizontal: scale(20),
+    paddingTop: verticalScale(120),
+    paddingBottom: verticalScale(40),
+  },
+  title: {
+    fontSize: moderateScale(28),
+    fontWeight: 'bold',
+    color: 'text-basic-color',
+    marginBottom: verticalScale(40),
+    lineHeight: moderateScale(34),
+  },
+  placeholderContainer: {
+    flex: 1,
+    gap: verticalScale(16),
+  },
+  placeholderItem: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: 'background-basic-color-2',
+    padding: moderateScale(16),
+    borderRadius: moderateScale(12),
+    gap: scale(12),
+    height: scale(64),
+  },
+  placeholderCircle: {
+    width: scale(33),
+    height: scale(33),
+    borderRadius: moderateScale(10),
+    backgroundColor: 'background-basic-color-3',
+  },
+  placeholderLine: {
+    height: scale(12),
+    backgroundColor: 'background-basic-color-3',
+    borderRadius: moderateScale(6),
+    width: scale(97),
   },
   iconContainer: {
     flex: 1,
@@ -86,22 +163,14 @@ const styles = StyleSheet.create({
     alignContent: 'center',
     justifyContent: 'center',
   },
+  buttonContainer: {},
   icon: {
     height: '100%',
     width: '100%',
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'center',
   },
-  buttonAndTextContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonContainer: {
-    marginTop: 40,
-    justifyContent: 'center',
-  },
   textContainer: {
     marginBottom: 40,
   },
@@ -111,9 +180,25 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   button: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
-    margin: 5,
+    paddingVertical: moderateScale(12),
+    paddingHorizontal: moderateScale(16),
+    borderRadius: moderateScale(8),
+    borderWidth: 1,
+    borderColor: 'background-basic-color-3',
+  },
+  googleButton: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: moderateScale(8),
+    height: verticalScale(52),
+  },
+  googleButtonText: {
+    fontSize: moderateScale(16),
+    fontWeight: 700,
+    color: '#202020',
   },
 });
 

diff --git a/assets/googleIcon.png b/assets/googleIcon.png
diff --git a/components/GoogleIcon.jsx → components/icons/GoogleIcon.jsx b/components/GoogleIcon.jsx → components/icons/GoogleIcon.jsx
diff --git a/components/icons/GoogleImageIcon.tsx b/components/icons/GoogleImageIcon.tsx
@@ -0,0 +1,29 @@
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+const GoogleImageIcon = props => {
+  return (
+    <View style={[{ marginRight: 8 }, props.style]}>
+      <Svg width="24" height="24" viewBox="0 0 24 24">
+        <Path
+          d="M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82Z"
+          fill="#4285F4"
+        />
+        <Path
+          d="M12.255 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96h-3.98v3.09C3.515 21.3 7.565 24 12.255 24Z"
+          fill="#34A853"
+        />
+        <Path
+          d="M5.525 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62h-3.98a11.86 11.86 0 0 0 0 10.76l3.98-3.09Z"
+          fill="#FBBC05"
+        />
+        <Path
+          d="M12.255 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C18.205 1.19 15.495 0 12.255 0c-4.69 0-8.74 2.7-10.71 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96Z"
+          fill="#EA4335"
+        />
+      </Svg>
+    </View>
+  );
+};
+
+export default GoogleImageIcon;
diff --git a/theme/mapping.json b/theme/mapping.json
@@ -246,9 +246,11 @@
     },
     "Button": {
       "appearances": {
-        "variantGroups": {
-          "size": {
-            "large": {}
+        "filled": {
+          "variantGroups": {
+            "status": {
+              "basic": {}
+            }
           }
         }
       }