[Feat] LoginPage, GoogleLogin, NaverLogin layout 수정

htj7425 · Jun 3, 2023 · b406548 · b406548
1 parent de11d0a
commit b406548
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/src/Components/GoogleLogin.js b/src/Components/GoogleLogin.js
@@ -2,7 +2,8 @@ import { StatusBar } from "expo-status-bar";
 import * as React from "react";
 import * as WebBrowser from "expo-web-browser";
 import * as Google from "expo-auth-session/providers/google";
-import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
+import { StyleSheet, Text, View, Image, TouchableOpacity,
+  Dimensions} from "react-native";
 import TextPage from "./../Screen/TextPage";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
@@ -24,6 +25,8 @@ expo prebuild
 //IOS: 905274518245-lvicj88ilgk7fkek1p41t1g12a55p5lu.apps.googleusercontent.com
 // android: 905274518245-tp22sk6ml6rctfqna31cfai50e8s0h0n.apps.googleusercontent.com
 
+const { height, width } = Dimensions.get("window");
+
 const STORAGE_KEY = "@login_id";
 
 WebBrowser.maybeCompleteAuthSession();
@@ -69,7 +72,8 @@ export default function GoogleLogin({ navigation }) {
           await promtAsync();
         }}
       >
-        <Image source={require("../../assets/google_login.png")} />
+        <Image source={require("../../assets/google_login.png")}
+      style = {styles.google_image} />
       </TouchableOpacity>
     </View>
   );
@@ -82,4 +86,10 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  google_image:{
+    width: width,
+    marginLeft: 15,
+    marginTop: 180,
+    resizeMode: "contain",
+  }
 });
diff --git a/src/Components/NaverLogin.js b/src/Components/NaverLogin.js
@@ -1,6 +1,12 @@
 import { StatusBar } from "expo-status-bar";
 import * as React from "react";
-import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
+import { 
+    StyleSheet,
+    View, 
+    Image, 
+    TouchableOpacity,
+    Dimensions
+} from "react-native";
 import * as AuthSession from "expo-auth-session";
 import axios from "axios";
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -12,6 +18,7 @@ const REDIRECT_URL = "https://auth.expo.io/@seonghyeon_lee/Nine";
 const CLIENT_SECRET = "j3iOBc9PWy";
 var state_value = "";
 
+const { height, width } = Dimensions.get("window");
 
 export default function NaverLogin({ navigation }) {
   const login = async () => {
@@ -85,7 +92,7 @@ export default function NaverLogin({ navigation }) {
       <TouchableOpacity onPress={login}>
         <Image
           source={require("../../assets/naver_login.png")}
-          style={{ width: 300, height: 40 }}
+          style={styles.Naver_image}
         />
       </TouchableOpacity>
     </View>
@@ -99,4 +106,10 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  Naver_image: {
+    width: width,
+    marginTop: 60,
+    marginLeft: 20,
+    resizeMode: "contain"
+  }
 });
diff --git a/src/Screen/LoginPage.js b/src/Screen/LoginPage.js
@@ -42,7 +42,6 @@ function Login({ navigation }) {
         source={require("../../assets/Nine_image.png")}
         style={styles.Nine_image}
       />
-
       <View style={{ alignContent: "center" }}>
         <TouchableOpacity
           activeOpacity="0.6"
@@ -53,14 +52,11 @@ function Login({ navigation }) {
             style={styles.kakao_image}
           />
         </TouchableOpacity>
-        <TouchableOpacity
-          activeOpacity="0.6"
-        >
-          <NaverLogin style={styles.naver_image} navigation={navigation}/>
+        <TouchableOpacity activeOpacity="0.6">
+          <NaverLogin navigation={navigation}/>
         </TouchableOpacity>
-
         <TouchableOpacity activeOpacity="0.6">
-          <GoogleLogin style={styles.google_image} navigation={navigation} />
+          <GoogleLogin navigation={navigation}/>
         </TouchableOpacity>
       </View>
 
@@ -83,18 +79,6 @@ const styles = StyleSheet.create({
     marginLeft: 45,
     resizeMode: "contain",
   },
-  naver_image: {
-    width: width - 234,
-    marginLeft: 130,
-    marginTop: 60,
-    resizeMode: "contain",
-  },
-  google_image: {
-    width: width - 65,
-    marginLeft: 45,
-    marginTop: 60,
-    resizeMode: "contain",
-  },
 });
 
 export default Login;