Merge pull request #8 from InjeRecipe/#6_infoPage

feat:redux 세팅 구글 버튼 디자인 추가 및 로그인 데이터 받아오기 완료, 데이터 전역관리 필요

injeRecipe/App.tsx

@@ -15,23 +15,24 @@ import {
   View,
 
 } from 'react-native';
-import { GoogleSignin } from '@react-native-google-signin/google-signin';
-
-import { GoogleAuthButton } from './src/screens/home/signin/google/GoogleAuthButton';
-import { LocationTestButton } from './src/Location/LocationTestButton';
-import { HomeScreen } from './src/screens/home/HomeScreen';
+
 import { NavigationContainer } from '@react-navigation/native';
-import RootStackNavigation from './src/navigations/RootStackNavigation';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import HomeStackScreen from './src/navigations/HomeNavigator';
+import { Provider } from 'react-redux'
+import store from './src/redux/store';
+import RootStackNavigation from './src/navigations/RootStackNavigation';
 
 function App(){
 
   return (
     <SafeAreaProvider>
+      <Provider store={store}>
     <NavigationContainer>
+
       <RootStackNavigation/>
+
     </NavigationContainer>
+      </Provider>
     </SafeAreaProvider>
   );
 }

injeRecipe/package.json

@@ -36,6 +36,8 @@
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "^0.19.10",
     "react-redux": "^9.1.0",
+    "redux": "^5.0.1",
+    "redux-logger": "^3.0.6",
     "save-dev": "^0.0.1-security"
   },
   "devDependencies": {
@@ -52,6 +54,7 @@
     "@types/react-native": "^0.73.0",
     "@types/react-native-vector-icons": "^6.4.18",
     "@types/react-test-renderer": "^18.0.0",
+    "@types/redux-logger": "^3.0.13",
     "babel-jest": "^29.6.3",
     "babel-loader": "^9.1.3",
     "babel-plugin-react-native-web": "^0.19.10",

injeRecipe/src/feature/home/LoginButton.tsx

@@ -1,29 +1,47 @@
-import React, { useEffect } from "react"
-import { Pressable, Text } from "react-native"
+import React, { useEffect, useState } from "react"
+import { Image, Pressable, StyleSheet, Text } from "react-native"
 import { useSignIn } from "../../hooks/useSignIn"
 import { useNavigation } from "@react-navigation/native"
-
+import { GoogleSigninButton } from "@react-native-google-signin/google-signin"
+import { url } from "inspector"
 
 type props ={
     text:string,
-    value:any
+    value:string
 }
 export function LoginButton({text,value}:props){
     const {
         googleSigninConfigure,
         onPressGoogleSignIn
     } = useSignIn()
+    const [btBgColor,setBtBgColor] = useState('')
+    const configureGoogleUser = async() =>{
+        const userData = await googleSigninConfigure()
+        console.log('hi user',userData)
+    }
     const navigation = useNavigation<any>()
     useEffect(()=>{
-        if(text == "구글을 통한 로그인"){
-            googleSigninConfigure()
+        if(text == "구글 계정을 통한 로그인"){
+            console.log('configure')
+            configureGoogleUser 
+            setBtBgColor('white')           
+        }
+        else{
+            setBtBgColor ('#A25426')
         }
     },[text])
     const onPressLogin = () =>{
         console.log("???")
         if(value == "signin"){navigation.navigate('HomeStack',{screen:'SignIn'})}
         else if(value=="inje"){navigation.navigate('Bottom')}
-
+        else if(value =="google"){
+            const getUserData = async() => {
+                const res = await onPressGoogleSignIn()
+                console.log(res,'res')
+                // res 요 녀석을 전역 스테이트로 관리하면 오케이
+            }
+            getUserData()
+        }
     }
     return(
         <Pressable style={{
@@ -32,10 +50,17 @@ export function LoginButton({text,value}:props){
             justifyContent:"center",
             height:50,
             borderRadius:18,
-            backgroundColor:"#A25426"
+            backgroundColor:btBgColor,
+            shadowOpacity:1,
+            shadowOffset:{width:0,height:2},
+            flexDirection:'row'
         }}
-        onPress={text=="로그인"?onPressLogin:onPressGoogleSignIn}>
-            <Text style={{fontSize:22,color:'white'}}>{text}</Text>
+        onPress={onPressLogin}>
+        {btBgColor=='white'?
+        <Image 
+            style={{width:20,height:20,marginRight:10}}
+        source={{uri:'/Users/kjm/Projects/capston/FE/InjeRecipe_FrontEnd/injeRecipe/src/assets/icons/googleIcon.png'}}/>:null}
+            <Text style={{fontSize:22,color:btBgColor=='white'?'black':'white'}}>{text}</Text>
         </Pressable>
     )
 }

injeRecipe/src/hooks/useSignIn.ts

@@ -15,7 +15,9 @@ export const useSignIn =()=>{
         try {
           await GoogleSignin.hasPlayServices()
 
-            await GoogleSignin.signIn()
+          const res =await GoogleSignin.signIn()
+          console.log('res',res)
+          return res
           //setState({ userInfo, error: undefined });
         } catch (error:any) {
 
@@ -34,8 +36,17 @@ export const useSignIn =()=>{
         }
         }
       };
-    const onPressGoogleSignIn = () =>{
-        _signIn()
+    const onPressGoogleSignIn = async() =>{
+      try{
+        const signInResult =await _signIn()
+      return signInResult
+      }
+      catch(error){
+
+      }
+
+
+
     }
     return{
         googleSigninConfigure,

injeRecipe/src/redux/action/actionLogin.ts

@@ -0,0 +1,9 @@
+export const SET_LOGINED_USER = "SET_LOGINED_USER"
+
+export const setLoginedUser = (data:any) =>{
+    return{
+        type:SET_LOGINED_USER,
+        data:data
+    }
+
+}

injeRecipe/src/redux/reducer/loginReducer.ts

@@ -0,0 +1,14 @@
+import { SET_LOGINED_USER } from "../action/actionLogin"
+
+const data ={
+
+}
+export const loginReducer = (state = data,action:any) =>{
+    switch(action.type){
+        case SET_LOGINED_USER:{
+            return state
+        }
+        return null
+    }
+    return null
+}

injeRecipe/src/redux/store.ts

@@ -0,0 +1,11 @@
+import { applyMiddleware, combineReducers, createStore } from 'redux'
+
+import { loginReducer } from './reducer/loginReducer'
+
+const rootReducer = combineReducers({
+    login:loginReducer
+})
+const store = createStore(rootReducer)
+
+export type RootReducerState = ReturnType<typeof rootReducer>
+export default store

injeRecipe/yarn.lock

@@ -2590,6 +2590,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/redux-logger@^3.0.13":
+  version "3.0.13"
+  resolved "https://registry.npmjs.org/@types/redux-logger/-/redux-logger-3.0.13.tgz"
+  integrity sha512-jylqZXQfMxahkuPcO8J12AKSSCQngdEWQrw7UiLUJzMBcv1r4Qg77P6mjGLjM27e5gFQDPD8vwUMJ9AyVxFSsg==
+  dependencies:
+    redux "^5.0.0"
+
 "@types/[email protected]":
   version "0.12.0"
   resolved "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz"
@@ -3991,6 +3998,11 @@ dedent@^1.0.0:
   resolved "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz"
   integrity sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==
 
+deep-diff@^0.3.5:
+  version "0.3.8"
+  resolved "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz"
+  integrity sha512-yVn6RZmHiGnxRKR9sJb3iVV2XTF1Ghh2DiWRZ3dMnGc43yUdWWF/kX6lQyk3+P84iprfWKU/8zFTrlkvtFm1ug==
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
@@ -7827,6 +7839,18 @@ rechoir@^0.8.0:
   dependencies:
     resolve "^1.20.0"
 
+redux-logger@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz"
+  integrity sha512-JoCIok7bg/XpqA1JqCqXFypuqBbQzGQySrhFzewB7ThcnysTO30l4VCst86AuB9T9tuT03MAA56Jw2PNhRSNCg==
+  dependencies:
+    deep-diff "^0.3.5"
+
+redux@^5.0.0, redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz"