[Feature] 구글 로그인 구현

app.config.ts

@@ -31,6 +31,12 @@ const config: ExpoConfig = {
     googleServicesFile: googleServicesFile,
   },
   plugins: [
+    [
+      '@react-native-google-signin/google-signin',
+      {
+        iosUrlScheme: process.env.EXPO_PUBLIC_IOS_URL_SCHEME,
+      },
+    ],
     [
       'expo-build-properties',
       {

app/index.tsx

@@ -1,5 +1,146 @@
+import { StyleSheet, Text, View, StatusBar, Pressable } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { googleSignIn, configureGoogleSignIn } from '../services/auth/google';
+import GoogleLogo from '../assets/svg/google.svg';
+import KakaoLogo from '../assets/svg/kakao.svg';
+import NaverLogo from '../assets/svg/naver.svg';
+import AppleLogo from '../assets/svg/apple.svg';
 import { Redirect } from 'expo-router';
 
 export default function Index() {
-  return <Redirect href="/webview/home" />;
+  configureGoogleSignIn();
+
+  return (
+    <Redirect href="/webview/home" />
+    /*
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle={'dark-content'} />
+      <View style={styles.textContainer}>
+        <Text style={styles.description}>
+          모든 동아리를
+          {'\n'}
+          하나로 연결하다
+        </Text>
+        <Text style={styles.title}>KONECT</Text>
+      </View>
+      <View style={styles.buttonContainer}>
+        <Text style={styles.socialText}>소셜 계정으로 로그인</Text>
+        <View style={styles.socialButtonContainer}>
+          <Pressable style={styles.googleLoginButton} onPress={googleSignIn}>
+            <GoogleLogo width={18} height={18} />
+          </Pressable>
+          <Pressable style={styles.kakaoLoginButton}>
+            <KakaoLogo width={20} height={20} />
+          </Pressable>
+          <Pressable style={styles.naverLoginButton}>
+            <NaverLogo width={18} height={18} />
+          </Pressable>
+          <Pressable style={styles.appleLoginButton}>
+            <AppleLogo width={31} height={44} />
+          </Pressable>
+        </View>
+      </View>
+    </SafeAreaView>
+    */
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  textContainer: {
+    paddingTop: 32,
+    paddingHorizontal: 32,
+    gap: 10,
+  },
+  title: {
+    fontSize: 36,
+    textAlign: 'left',
+    fontWeight: '900',
+  },
+  description: {
+    fontSize: 24,
+    textAlign: 'left',
+    fontWeight: '800',
+  },
+  buttonContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingBottom: 72,
+    gap: 12,
+  },
+  socialText: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  socialButtonContainer: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  googleLoginButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 50,
+    borderWidth: 1,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: '#E5E7EB',
+  },
+  kakaoLoginButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 50,
+    backgroundColor: '#FEE500',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  naverLoginButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 50,
+    backgroundColor: '#03c75a',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  appleLoginButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 50,
+    backgroundColor: '#000000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  updateButton: {
+    height: 56,
+    backgroundColor: '#323532',
+    borderRadius: 8,
+    borderCurve: 'continuous',
+    borderWidth: 0.5,
+    borderColor: '#D6DAE0',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  updateButtonText: {
+    textAlign: 'center',
+    color: '#FFFFFF',
+  },
+  cancelButton: {
+    height: 56,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    borderCurve: 'continuous',
+    borderWidth: 0.5,
+    borderColor: '#D6DAE0',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancelButtonText: {
+    color: '#021730',
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+});

metro.config.js

@@ -0,0 +1,19 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname);
+
+  const { transformer, resolver } = config;
+
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve('react-native-svg-transformer/expo'),
+  };
+  config.resolver = {
+    ...resolver,
+    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...resolver.sourceExts, 'svg'],
+  };
+
+  return config;
+})();

package.json

@@ -20,6 +20,7 @@
     "@logicwind/react-native-exit-app": "^0.2.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-cookies/cookies": "^6.2.1",
+    "@react-native-google-signin/google-signin": "^16.1.1",
     "expo": "^54.0.0",
     "expo-apple-authentication": "~8.0.8",
     "expo-application": "~7.0.8",
@@ -62,6 +63,7 @@
     "eslint-config-expo": "~10.0.0",
     "jest": "^29.2.1",
     "jest-expo": "~54.0.17",
+    "react-native-svg-transformer": "^1.5.3",
     "react-test-renderer": "^19.1.0",
     "typescript": "^5.3.3"
   },