Merge pull request #25 from blackshoe-esthete/EST-34-FE-login

[EST-34] Feat: 로그인 퍼블리싱, 소셜로그인 구현중

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "java.configuration.updateBuildConfiguration": "automatic"
+  "java.configuration.updateBuildConfiguration": "automatic",
+  "java.compile.nullAnalysis.mode": "automatic"
 }

ios/Podfile.lock

@@ -1179,6 +1179,8 @@ PODS:
     - React-perflogger (= 0.73.6)
   - RNCAsyncStorage (1.23.1):
     - React-Core
+  - RNDateTimePicker (8.1.1):
+    - React-Core
   - RNFastImage (8.6.3):
     - React-Core
     - SDWebImage (~> 5.11.1)
@@ -1297,6 +1299,7 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNFastImage (from `../node_modules/react-native-fast-image`)
   - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
@@ -1444,6 +1447,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNDateTimePicker:
+    :path: "../node_modules/@react-native-community/datetimepicker"
   RNFastImage:
     :path: "../node_modules/react-native-fast-image"
   RNFS:
@@ -1535,6 +1540,7 @@ SPEC CHECKSUMS:
   React-utils: d16c1d2251c088ad817996621947d0ac8167b46c
   ReactCommon: 2aa35648354bd4c4665b9a5084a7d37097b89c10
   RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
+  RNDateTimePicker: 430174392d275f0ffefb627d04f0f8677f667fed
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 96439cf6543defdde87459e48cd1a3f0e45a008e

package.json

@@ -18,7 +18,9 @@
     "@miblanchard/react-native-slider": "^2.6.0",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-camera-roll/camera-roll": "^7.5.2",
+    "@react-native-community/datetimepicker": "^8.1.1",
     "@react-native-community/geolocation": "^3.2.1",
+    "@react-native-seoul/kakao-login": "5.4.1",
     "@react-native-seoul/masonry-list": "^1.4.2",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/drawer": "^6.6.15",

src/components/LoginScreen/GenderButton.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {Dimensions, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+type genderProps = {
+  title: string;
+  onPress: () => void;
+  value?: boolean;
+};
+
+const windowWidth = Dimensions.get('window').width;
+
+function GenderButton(props: genderProps): React.JSX.Element {
+  return (
+    <TouchableOpacity onPress={props.onPress}>
+      <View style={[styles.buttonBox, {backgroundColor: props.value ? '#FFD600' : '#292929'}]}>
+        <Text style={[styles.genderText, {color: props.value ? '#030303' : 'white'}]}>{props.title}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default GenderButton;
+
+const styles = StyleSheet.create({
+  buttonBox: {
+    width: (windowWidth - 60) / 2,
+    height: 50,
+    borderRadius: 8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  genderText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: 'white',
+  },
+});

src/components/LoginScreen/InputText.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {StyleSheet, TextInput, View} from 'react-native';
+
+type inputProp = {
+  type?:
+    | 'default'
+    | 'email-address'
+    | 'numeric'
+    | 'phone-pad'
+    | 'ascii-capable'
+    | 'numbers-and-punctuation'
+    | 'url'
+    | 'number-pad'
+    | 'name-phone-pad'
+    | 'decimal-pad'
+    | 'twitter'
+    | 'web-search'
+    | 'visible-password';
+  placeHolder: string;
+  margin?: number;
+  color?: string;
+  security?: boolean;
+  value?: string;
+  onChange?: (text: string) => void;
+};
+function InputText(props: inputProp): React.JSX.Element {
+  return (
+    <TextInput
+      placeholder={props.placeHolder}
+      style={[styles.inputBox, {marginTop: props.margin, color: props.color || '#E9E9E9'}]}
+      placeholderTextColor="#E9E9E9"
+      value={props.value}
+      keyboardType={props.type || 'default'}
+      secureTextEntry={props.security}
+      onChangeText={props.onChange}
+    />
+  );
+}
+
+export default InputText;
+
+const styles = StyleSheet.create({
+  inputBox: {
+    width: '100%',
+    height: 70,
+    backgroundColor: '#292929',
+    borderRadius: 10,
+    padding: 20,
+    fontSize: 16,
+  },
+});

src/components/LoginScreen/KakaoLogin.ts

@@ -0,0 +1,49 @@
+import React, { forwardRef, useState } from 'react';
+import {Button, SafeAreaView} from 'react-native';
+// import * as KakaoLogins from '@react-native-seoul/kakao-login';
+import { login, logout, getProfile, KakaoOAuthToken, KakaoProfile, } from '@react-native-seoul/kakao-login';
+
+// export const KakaoLogin = () => {
+//   KakaoLogins
+//     .login()
+//     .then(result => {
+//       console.log('Login Success', JSON.stringify(result));
+//       // getProfile();
+//     })
+//     .catch(error => {
+//       if (error.code === 'E_CANCELLED_OPERATION') {
+//         console.log('Login Cancel', error.message);
+//       } else {
+//         console.log(`Login Fail(code:${error.code})`, error.message);
+//       }
+//     });
+// };
+
+// const getProfile = () => {
+//   KakaoLogins
+//     .getProfile()
+//     .then(result => {
+//       console.log('GetProfile Success', JSON.stringify(result));
+//     })
+//     .catch(error => {
+//       console.log(`GetProfile Fail(code:${error.code})`, error.message);
+//     });
+// };
+
+
+export const KakaoLogin = () => {
+  const [result, setResult] = useState("");
+  const signInWithKakao = async (): Promise<void> => {
+    const token: KakaoOAuthToken = await login();
+    setResult(JSON.stringify(token));
+  };
+  const signOutWithKakao = async (): Promise<void> => {
+    const message = await logout();
+    setResult(message);
+  };  
+  const getKakaoProfile = async (): Promise<void> => {
+    const profile: KakaoProfile = await getProfile();
+    setResult(JSON.stringify(profile));
+  };
+}
+

src/components/LoginScreen/LoginButton.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {Dimensions, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+type buttonProp = {
+  color: string;
+  title: string;
+  navigation: () => void;
+};
+
+const windowWidth = Dimensions.get('window').width;
+
+function LoginButton(props: buttonProp): React.JSX.Element {
+  return (
+    <TouchableOpacity onPress={() => props.navigation && props.navigation()}>
+      <View style={[styles.button, {backgroundColor: props.color}]}>
+        <Text style={styles.buttonTitle}>{props.title}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default LoginButton;
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 8,
+    width: (windowWidth*9/10 - 20)/2,
+    height: 50,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonTitle: {
+    color: 'white',
+    fontFamily: "Gothic A1",
+    fontSize: 16,
+    fontWeight: '500', 
+    letterSpacing: -0.32
+  }
+});

src/components/LoginScreen/SocialLogin.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {Dimensions, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import naver from '@assets/imgs/naverlogin.png';
+import * as KakaoLogin from '@react-native-seoul/kakao-login';
+
+const windowWidth = Dimensions.get('window').width;
+type socialProp = {
+  img: string;
+  navigation?: () => void;
+};
+function SocialLogin(props: socialProp): React.JSX.Element {
+  // const login = () => {
+  //   KakaoLogin.login()
+  //     .then(result => {
+  //       console.log('Login Success', JSON.stringify(result));
+  //       getProfile();
+  //     })
+  //     .catch(error => {
+  //       if (error.code === 'E_CANCELLED_OPERATION') {
+  //         console.log('Login Cancel', error.message);
+  //       } else {
+  //         console.log(`Login Fail(code:${error.code})`, error.message);
+  //       }
+  //     });
+  // };
+
+  const getKakaoIdToken = async (): Promise<KakaoLogin.KakaoOAuthToken> => {
+    const res = await KakaoLogin.login();
+    console.log(res.accessToken);
+    return res;
+  };
+  const getProfile = () => {
+    KakaoLogin.getProfile()
+      .then(result => {
+        console.log('GetProfile Success', JSON.stringify(result));
+      })
+      .catch(error => {
+        console.log(`GetProfile Fail(code:${error.code})`, error.message);
+      });
+  };
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        getKakaoIdToken();
+      }}>
+      <Image source={props.img} style={styles.buttonLayer} />
+    </TouchableOpacity>
+  );
+}
+
+export default SocialLogin;
+
+const styles = StyleSheet.create({
+  buttonLayer: {
+    width: (windowWidth * 9) / 10,
+    borderRadius: 8,
+    height: 57,
+  },
+});

src/components/LoginScreen/Verification.tsx

@@ -0,0 +1,37 @@
+import { View, Image, Text, StyleSheet } from "react-native";
+import verified from '@assets/icons/verified.png';
+import unverified from '@assets/icons/unverified.png';
+
+type verifyProp = {
+  label?: string;
+}
+
+function Verification(props: verifyProp):React.JSX.Element {
+  return(
+    <View style={styles.alertBox}>
+      <Image source={unverified} style={styles.alertIcon} />
+      <Text style={styles.alertText}>인증번호가 불일치합니다.</Text>
+    </View>
+  );
+}
+
+export default Verification;
+
+const styles = StyleSheet.create({
+  alertBox: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: 12,
+    gap: 5,
+  },
+  alertIcon: {
+    width: 15,
+    height: 15,
+  },
+  alertText: {
+    color: 'white',
+    fontSize: 12,
+    letterSpacing: -0.24,
+    fontFamily: 'Gothic A1',
+  },
+})

src/components/SettingScreen/CommonButton.tsx

@@ -1,20 +1,25 @@
-import {StyleSheet, TouchableOpacity, View, Text} from 'react-native';
+import {StyleSheet, TouchableOpacity, View, Text, Dimensions} from 'react-native';
+
+const windowHeight = Dimensions.get('window').height;
 
 type styleProp = {
   title: string;
   navigation?: any
   func?: ()=>void;
+  color?: string;
+  background?: string;
+  paddingNumber?: number;
 };
 function CommonButton(prop: styleProp) {
   return (
     <TouchableOpacity
-      style={styles.buttonContainer}
+      style={[styles.buttonContainer, {paddingHorizontal: prop.paddingNumber }]}
       onPress={() => {
         prop.navigation?.navigate('Certification');
         prop?.func && prop.func();
       }}>
-      <View style={styles.button}>
-        <Text style={styles.buttonTitle}>{prop.title}</Text>
+      <View style={[styles.button, {backgroundColor: prop.background || '#FFD600' }]}>
+        <Text style={[styles.buttonTitle, {color: prop.color || '#030303'}]}>{prop.title}</Text>
       </View>
     </TouchableOpacity>
   );
@@ -25,11 +30,10 @@ export default CommonButton;
 const styles = StyleSheet.create({
   buttonContainer: {
     position: 'absolute',
-    bottom: 50,
+    top: windowHeight - 140,
     width: '100%',
     display: 'flex',
     alignItems: 'center',
-    paddingHorizontal: 20
   },
   button: {
     backgroundColor: '#FFD600',
@@ -41,7 +45,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   buttonTitle: {
-    color: '#030303',
     fontSize: 18,
     letterSpacing: -0.36,
     fontWeight: '700',

src/components/SettingScreen/InputBox.tsx

@@ -40,6 +40,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     display: 'flex',
     // alignItems: 'flex-start',
+
     borderRadius: 10,
   },
   inputText: {