로그인/회원가입 구현하기 - (2) SignIn/Up Screens

• 졸업 프로젝트 진행하면서 기록해두면 좋을 내용들을 담고 있습니다.
• 이번 포스트는 총 6 개의 시리즈로 구성될 예정이며, notJust.dev 님의 유튜브 영상을 보면서 공부한 내용을 담았습니다. 감사합니다 🙏

로그인/회원가입 구현하기 시리즈의 2, 3번째 포스트는
앞서 1편에서 디자인 했던 UI를 코드로 작성하는 과정에 대해 설명할 예정입니다.

2편은 SignIn 과 SignUp screen,
3편은 그 외 다른 screen 구현에 대해 상세하게 다루겠습니다.

SignInScreen

SignInScreen을 구성하는 컴포넌트는 Text와 TextInput(CustomInput), Button(CustomButton) 등이 있습니다.

위와 같이 화면을 구성할 요소들의 계층을 정의한 후 시작합니다.
TextInput과 Input으로 받은 값들을 Submit하기 위한 컴포넌트들은 다른 screen에서도 많이 재사용돼서 하나의 Custom Component로 제작할 예정입니다.

*navigation을 따로 구축하지 않아서 simulator 로 구현 화면을 확인하려면 App.js에서 해당 screen을 import 해서 <Screen 이름 /> 로 불러와야 확인이 가능합니다.

사전 세팅

1. 프로젝트 파일에 src 라는 파일 생성
2. src 내부에 components와 screens라는 파일 생성
3. screens 파일 내부에 SignInScreen 폴더 생성
4. SignInScreen 폴더에 SignInScreen.js와 index.js 생성
   (*앞으로 모든 Screen에서 3, 4번 과정 동일하게 적용될 예정)

// SignInScreen.js

import React from 'react';
import { View, Text, Pressable, Image, StyleSheet } from 'react-native';

const SignInScreen = () => {
	return (
    	<View />
    );
}

export default SignInScreen;

// index.js
export { default } from './SignInScreen';

SignInText와 SignInTextContainer

SignInText는 두 가지 크기로 존재하고, Container로 감싸진 형태입니다.

<View style={styles.signInTextContainer}>
	<Text style={styles.signInText}>안녕하세요,</Text>
    <Text style={styles.signInText}>NEWSUM 입니다.</Text>
    <Text style={styles.signInTextS}>서비스 이용을 위해 로그인 해주세요.</Text>
</View>

const styles = StyleSheet.create({
	signInTextContainer: {
        marginTop: '23%',
        marginLeft: '9%'
    },
    signInText: {
        fontSize: 25,
        fontWeight: '500',
        color: '#FFFFFF',
        lineHeight: 29.3,
    },
    signInTextS: {
        fontSize: 12,
        fontWeight: '300',
        color: '#FFFFFF',
        marginTop: 5,
        marginBottom: 50,
        color: '#EEEEEE'
    }
 })
    

CustomInput

앞에서도 언급한 것처럼, NEWSUM에서는 동일한 디자인과 기능의 TextInput component가 반복됩니다. 매번 동일한 코드를 반복해서 코드 길이가 늘어나는 불상사를 방지하기 위해 CustomInput 이라는 component를 만들어서 필요할 때마다 가져다 사용할 예정입니다.

사전 준비

1. src>components 파일에 CustomInput 파일 생성
2. CustomInput 파일에 CustomInput.js 와 index.js 생성

코드 작성

SignInScreen에서 CustomInput에 전달할 인자는 value(값), setValue(onChangeText), placeholder, secureTextEntry(비밀번호) 입니다.

// CustomInput.js

// 1. CustomInput component 만들기
const CustomInput = ({value, setValue, placeholder, secureTextEntry}) => {
	return (
        <TextInput
            value={value}
            onChangeText={setValue}
            placeholder={placeholder}
            style={styles.input}    
            secureTextEntry={secureTextEntry}
        />
    );
}

// 2. style 적용
input: {
	backgroundColor: '#FFFFFF',
    width: '83%',
    height: 48,
    paddingLeft: 15,
    borderRadius: 5,
    marginBottom: 18,
    alignSelf: 'center',
    }

// SignInScreen.js

// 1. useState와 CustomInput component import 하기
import React, { useState } from 'react';
import CustomInput from '../../components/CustomInput';

// 2. useState로 username과 password 선언
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

// 3. CustomInput component 사용하기
<CustomInput
	value={username}
    setValue={setUsername}
    placeholder="Username"
/>
<CustomInput
	value={password}
    setValue={setPassword}
    placeholder="Password"
    secureTextEntry
/>

CustomButton

사전 준비

CustomInput과 동일합니다.

코드 작성

SignInScreen에서 CustomButton에 전달할 인자는 onPress(버튼 눌렀을 때 어떤 동작?) 과 text(button 라벨)입니다.

// CustomButton.js

// 1. CustomButton component 만들기
const CustomButton = ({ onPress, text }) => {
	return (
    	<Pressable
        	onPress={onPress}
            style={styles.container}
        >
        	<Text style={styles.text}>
            	{text}
            </Text>
        </Pressable>
    );
}

// 2. style 적용
container: {
        width: '83%',
        height: 45,
        alignItems: 'center',
        marginBottom: 11,
        borderRadius: 5,
        backgroundColor: '#E5EBFF',
        alignSelf: 'center',
        justifyContent: 'center'
},
text: {
    color: '#545454',
    fontWeight: '700',
    fontSize: 15
}

// SignInScreen.js

// 1. CustomButton component 불러오기
import CustomButton from '../../components/CustomButton';

// 2. CustomButton component 사용하기
<CustomButton
	onPress={onSignInPressed}
    text="Sign In"
/>

// 3. onSignInPressed 선언하기
// 일단 버튼이 잘 동작하는지 확인하는 용도로 선언
const onSignInPressed = () => {
	console.warn("onSignInPressed");
};

KakaoLogin

소셜로그인은 아직 구현하지 않았지만, 추후 프로젝트 진행하면서 추가할 예정이므로 press만 가능한 상태로 만들어 둘 예정입니다.

kakao 소셜 로그인의 경우, kakao에서 지정한 디자인으로만 사용이 가능합니다.
카카오 디자인 가이드, 카카오싱크 로그인 버튼 다운로드
위 링크들에서 디자인 소스 다운과 자세한 내용을 확인할 수 있습니다.

사전 준비

1. src에 assets 파일 생성
2. 카카오싱크 로그인 버튼 다운로드
3. assets 파일에 이미지 추가

코드 작성

// SignInScreen.js

// 1. Image를 Pressable로 감싸서 터치 가능하도록 제작하기
<Pressable onPress={onSocialPressed}>
	<Image 
    	style={styles.image} 
        source={require('../../assets/kakaoLogin.png')}
    />
</Pressable>

// 2. onSocialPressed 선언하기
const onSocialPreesed = () => {
	console.warn("onSocialPressed");
};

OtherButton과 OtherButtonContainer

flexDirection이 column이 아닌 row 로 설정된 container 안에 비밀번호 찾기와 회원가입하기 버튼이 포함된 형태로 구성됩니다.

코드 작성

// SignInScreen.js

<View style={styles.otherButtonContainer}>
	<Pressable onPress={onForgotPasswordPressed}>
    	<Text style={styles.otherButtonText}>비밀번호 찾기  </Text>
    </Pressable>
    <Text style={styles.otherButtonText}>|</Text>
    <Pressable onPress={onSignUpPressed}>
    	<Text style={styles.otherButtonText}>  회원가입하기</Text>
    </Pressable>
</View>

// 디자인 입히기
otherButtonContainer: {
	display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 15
},
otherButtonText: {
    fontWeight: '500',
    fontSize: 12,
    color: '#EEEEEE'
}

SignUpScreen

SignUpScreen을 구성하는 component는 CustomTopbar, Text, CustomInput, CustomButton이 있습니다.
(CustomInput, CustomButton, Text 구현 방법은 SignInScreen과 동일하여 생략하겠습니다.)

CustomTopbar

앞으로 만들 페이지에서 다양하게 활용될 topbar를 위한 코드입니다.
이전 페이지로 이동하거나(goBack), 마이페이지로 이동하거나, 시작 페이지로 돌아가는 등 용도에 따라 다양한 구성으로 사용됩니다.

사전 준비

CustomInput과 CustomButton과 동일

코드 작성

CustomTopbar로 전달할 인자는 bar 좌우에 들어갈 기호인 leftText, rightText와 각각을 눌렀을 때 행할 동작인 onPressLeft, onPressRight이 있습니다.

// CustomTopbar.js

// 1. Custom component 만들기
const CustomTopbar = ({ leftText, rightText, onPressLeft, onPressRight }) => {
	return (
    	<View style={styles.container}>
        	<Pressable onPress={onPressLeft}>
            	<Text style={styles.text}>{leftText}</Text>
            </Pressable>
            <Pressable onPress={onPressRight}>
            	<Text style={styles.text}>{rightText}</Text>
            </Pressable>
        </View>
    );
}

// 2. style 추가하기
container: {
    display: 'flex', 
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#7382B5'
},
text: {
    marginVertical: 13,
    marginHorizontal: 23,
    fontSize: 18,
    color: '#FFFFFF',
	fontWeight: '500'
}

// SignUpScreen.js

// 1. CustomTopbar import 하기
import CustomTopbar from '../../components/CustomTopbar';

// 2. CustomTopbar 사용하기
<CustomTopbar
	rightText='X'
    onPressRight={onExitPressed}
/>

// 3. onExitPressed 정의하기
const onExitPressed = () => {
	console.warn("onExitPressed");
}

마무리

오늘은 SignInScreen과 SignUpScreen 속 구성요소들을 만들어 보았습니다. 다음 편에서는 남은 ConfirmEmailScreen, ForgotPasswordScreen, NewPasswordScreen들을 만들 예정입니다. Screen들이 다 완성되면 navigation을 적용하고 추가적인 인터랙션 코드를 작성한 후, aws-amplify를 이용하여 실제 authentication 기능을 구현하는 것으로 본 시리즈가 마무리 됩니다.

빠른 시일 내에 다음 포스트로 찾아 뵙겠습니다. 오늘도 긴 글 읽어주셔서 감사합니다 😄 !!!!