LifeSports Application(ReactNative & Nest.js) - 3. LoginScreen, RegisterScreen
0
#1 로그인 화면
이전의 로그인 화면을 만들었으니 이제 이 화면을 구성해보도록 하겠습니다.
- /auth/components/LoginForm
import React from 'react';
import { View, StyleSheet } from 'react-native';
import StyledBorderButton from '../../../styles/common/StyledBorderButton';
import StyledFullButton from '../../../styles/common/StyledFullButton';
import StyledTextInput from '../../../styles/common/StyledTextInput';
const LoginForm = ({ navigation }) => {
return(
<View style={ styles.loginBox }>
<StyledTextInput />
<StyledTextInput />
<StyledFullButton
text="Sign in"
/>
<StyledBorderButton
text="Sign up"
/>
</View>
);
};
const styles = StyleSheet.create({
loginBox: {
flex: 1,
justifyContent: 'center',
alignContent: 'center',
},
});
export default LoginForm;Login Form을 먼저 만들고 이 폼을 완성시킨 후에 LoginScreen에 붙이도록 하겠습니다.
- /styles/common/StyledBorderButton
import React from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import palette from '../palette';
const StyledBorderButton = ({ text }) => {
return(
<TouchableOpacity
style={ styles.button }
>
<Text
style={ styles.buttonText }
>
{ text }
</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
width: 300,
height: 40,
borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: palette.white[0],
borderColor: palette.blue[4],
borderWidth: 2,
margin: 10,
},
buttonText: {
fontSize: 15,
color: palette.blue[4],
},
});
export default StyledBorderButton;- /styles/common/StyledFullButton
import React from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import palette from '../palette';
const StyledFullButton = ({ text }) => {
return(
<TouchableOpacity
style={ styles.button }
>
<Text
style={ styles.buttonText }
>
{ text }
</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
width: 300,
height: 40,
borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: palette.blue[4],
margin: 10,
},
buttonText: {
fontSize: 15,
color: palette.white[0],
},
});
export default StyledFullButton;- /styles/common/StyledTextInput
import React from 'react';
import { StyleSheet, TextInput } from 'react-native';
import palette from '../palette';
const StyledTextInput = () => {
return(
<TextInput
style={ styles.input }
/>
);
};
const styles = StyleSheet.create({
input: {
width: 300,
height: 40,
borderRadius: 4,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: palette.white[0],
color: palette.black[0],
fontSize: 15,
margin: 10,
},
});
export default StyledTextInput;- LoginScreen
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import palette from '../../styles/palette';
import LoginForm from './components/LoginForm';
const LoginScreen = ({ navigation }) => {
return(
<View style={ styles.container }>
<LoginForm navigation={ navigation } />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: palette.gray[1],
alignItems: 'center',
justifyContent: 'center',
},
});
export default LoginScreen;코드를 구현했으니 화면을 한번 살펴보도록 하겠습니다.
화면이 잘 구현이 됐네요. LoginScreen코드를 잠깐 보도록 하겠습니다. LoginScreen은 navigation이라는 변수를 받는 것을 볼 수 있죠. 이 변수는 StackNavigation에서 Stack으로써 쓰여진 컴포넌트에 전달이 가능한 변수입니다. 이를 이용해서 StackNavigation에 쌓여있는 컴포넌트들로 이동이 가능합니다. 그러면 Sign Up 버튼을 이용해서 회원가입 페이지로 넘어가보도록 하겠습니다.
- /LoginForm
...
const LoginForm = ({ navigation }) => {
const toSignUpScreen = e => {
navigation.navigate('SignUp')
};
return(
<View style={ styles.loginBox }>
<StyledTextInput />
<StyledTextInput />
<StyledFullButton
text="Sign in"
/>
<StyledBorderButton
onPress= { toSignUpScreen }
text="Sign up"
/>
</View>
);
};
...
export default LoginForm;- StyledBorderButton
...
const StyledBorderButton = ({
text,
onPress
}) => {
return(
<TouchableOpacity
style={ styles.button }
onPress={ onPress }
>
<Text
style={ styles.buttonText }
>
{ text }
</Text>
</TouchableOpacity>
);
};
...
export default StyledBorderButton;BorderButton에 클릭 이벤트를 넣어주도록 하겠습니다. 클릭 이벤트는 navigation 옵션을 이용하여 회원가입 페이지로 이동하는 기능을 수행합니다. StyledBorderButton에 onPress 변수를 넣어주었으니 StyledBorderButton에서는 이 변수를 받아서 TouchableOpacity에 넣어주도록 하겠습니다.
결과를 한번 보겠습니다.
Sign Up버튼을 누르니 회원가입 페이지로 잘 넘어가는 모습을 볼 수 있습니다.
그러면 로그인 스크린의 UI를 마저 작업하도록 하겠습니다.
- /LoginForm
...
const LoginForm = ({ navigation }) => {
...
return(
<View style={ styles.loginBox }>
<StyledTextInput
name="email"
placeholder="E-mail"
placeholderTextColor={ palette.gray[5] }
/>
<StyledTextInput
name="password"
placeholder="Password"
placeholderTextColor={ palette.gray[5] }
/>
...
);
};
const styles = StyleSheet.create({
loginBox: {
flex: 1,
justifyContent: 'center',
alignContent: 'center',
},
});
export default LoginForm;- /StyledTextInput
...
const StyledTextInput = ({
name,
placeholder,
placeholderTextColor,
}) => {
return(
<TextInput
style={ styles.input }
inputAccessoryViewID={ name }
placeholder={ placeholder }
placeholderTextColor={ placeholderTextColor }
/>
);
};
...
export default StyledTextInput;
로그인 화면 style에 대한 작업이 완료되었습니다. ui랑 관련없는 코드를 한 가지 넣었는데 inputAccessoryViewID속성입니다. 해당 속성은 추후에 redux를 도입하고 활용할 예정이니 그 때 다시 설명하도록 하겠습니다.
이제 회원가입 화면도 작성해보도록 하겠습니다.
#2 회원가입 화면
- /ReigsterForm
import React from 'react';
import { View, StyleSheet } from 'react-native';
import StyledFullButton from '../../../styles/common/StyledFullButton';
import StyledTextInput from '../../../styles/common/StyledTextInput';
import palette from '../../../styles/palette';
const RegisterForm = ({ navigation }) => {
const toPressSignUp = e => {
e.preventDefault();
navigation.navigate(
'SignIn', {
name: 'SignIn'
},
);
};
return(
<View style={ styles.container }>
<StyledTextInput
name="email"
placeholder="E-mail"
placeholderTextColor={ palette.gray[5] }
/>
<StyledTextInput
name="password"
placeholder="Password"
placeholderTextColor={ palette.gray[5] }
/>
<StyledTextInput
name="passwordConfirm"
placeholder="Re-Password"
placeholderTextColor={ palette.gray[5] }
/>
<StyledTextInput
name="nickname"
placeholder="Nickname"
placeholderTextColor={ palette.gray[5] }
/>
<StyledTextInput
name="phoneNumber"
placeholder="Phone-Number"
placeholderTextColor={ palette.gray[5] }
/>
<StyledFullButton
onPress={ toPressSignUp }
text="Sign Up"
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default RegisterForm;- /RegisterScreen
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import palette from '../../styles/palette';
import RegisterForm from './components/RegisterForm';
const RegisterScreen = ({ navigation }) => {
return(
<View style={ styles.container }>
<RegisterForm navigation={ navigation }/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: palette.gray[1],
alignItems: 'center',
justifyContent: 'center',
},
});
export default RegisterScreen;- /StyledFullButton
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import palette from '../../styles/palette';
import RegisterForm from './components/RegisterForm';
const RegisterScreen = ({ navigation }) => {
return(
<View style={ styles.container }>
<RegisterForm navigation={ navigation }/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: palette.gray[1],
alignItems: 'center',
justifyContent: 'center',
},
});
export default RegisterScreen;이런 식으로 회원가입 화면을 작성해보았습니다. 로그인 화면이랑 큰 차이가 없어 설명은 생략하고 테스트 화면을 보도록 하겠습니다.
회원가입 화면에서 회원가입 버튼을 누르니 로그인 화면으로 잘 넘어가는 모습을 보실 수 있습니다. 여기까지 로그인 화면과 회원가입 화면을 구현해보았고, 다음 포스트에서는 BottomNavigation을 활용하여 메인페이지를 구현해보도록 하겠습니다.
