로그인/회원가입 구현하기 - (3) Extra Screens

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

2편에 이어서 오늘은 남은 ConfirmEmailScreen, ForgotPasswordScreen, NewPasswordScreen을 구현해보겠습니다.

이번 편은 앞서 구현한 screen들과 동일한 방법(컴포넌트)을 사용하기 때문에 앞에 내용을 이해하셨다면 생략하셔도 됩니다. :)

ConfirmEmailScreen

회원가입을 할 때 입력했던 이메일 주소를 인증할 때 필요한 화면입니다.
사용자는 SignUpScreen에서 필요한 값들을 입력한 후 'Sign Up' 버튼을 누르면 사용자의 이메일로 인증코드를 담은 메일이 전달됩니다. 해당 메일에서 인증코드를 복사한 후 ConfirmEmailScreen의 입력란에 붙여넣으면 됩니다.

ConfirmEmailScreen은 순서대로 가장 상단부터 CustomTopbar와 Text, CustomInput, CustomButton으로 구성되어 있습니다.

사전 세팅

• screens 파일 내부에 ConfirmEmailScrren 파일 생성 후, 해당 파일에ConfirmEmailScreen.js와 index.js 생성
  (*모든 screen에서 동일하게 적용될 예정)

// ConfirmEmailScreen.js

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

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

export default ConfirmEmailScreen;

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

ConfirmText와 ConfirmTextContainer

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

코드 작성

<View style={styles.confirmTextContainer>
	<Text style={styles.confirmText}>이메일 인증</Text>
    <Text style={styles.confirmTextS}>이메일 인증을 위한 과정입니다.</Text>
    <Text style={styles.confirmText}>이메일 주소로 전달된 인증코드를 입력해주세요.</Text>
</View>

const styles = StyleSheet.create({
	confirmTextContainer: {
        marginTop: '23%',
        marginLeft: '9%',
        marginBottom: 20
    },
    confirmText: {
        fontSize: 25,
        fontWeight: '600',
        color: '#FFFFFF',
        lineHeight: 29.3,
        marginBottom: 16,
    },
    confirmTextS: {
        fontSize: 12,
        fontWeight: '300',
        color: '#FFFFFF',
        marginTop: 2,
        color: '#EEEEEE'
    },
 });

CustomInput

이전 편에서 만든 CustomInput을 불러오고 사용해봅시다.

코드 작성

// ConfirmEmailScreen.js

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

// 2. CustomInput 사용하기
<CustomInput
	value={username}
    setValue={setUsername}
    placeholder="Username"
/>

<CustomInput
	value={code}
    setValue={setCode}
    placeholder="Code"
/>

CustomButton

이전 편에서 만든 CustomButton을 불러오고 사용해봅시다.

// ConfirmEmailScreen.js

// 1. CustomButton import 하기
import CustomInput from '../../components/CustomButton';

// 2. CustomButton 사용하기
<CustomButton
	onPress={onConfirmPressed}
    text="Confirm"
/>

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

Other Button

인증코드가 메일로 오지 않았을 경우, 다시 전송할 수 있는 버튼을 만들어 봅시다.
'인증코드 다시 받기'라는 텍스트를 Pressable로 감싸 구성합니다.

코드 작성

// ConfirmEmailScreen.js

// 1. 누를 수 있는 text 만들기
<Pressable onPress={onResendPressed}>
	<Text style={styles.otherButtonText}>인증코드 다시 받기</Text>
</Pressable>

// 2. style 적용하기
otherButtonText: {
	fontWeight: '500',
    fontSize: 12,
    color: '#EEEEEE',
    alignSelf: 'center'
}

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

ForgotPasswordScreen

ForgotPasswordScreen은 SignInScreen에서 '비밀번호 찾기' 버튼을 눌렀을 때 나오는 화면으로, 입력한 username을 가지고 있는 유저의 이메일 주소로 인증코드를 보내기 위한 과정에 해당하는 screen입니다.

ForgotPasswordScreen은 CustomTopbar, Text, CustomInput, CustomButton으로 구성되어 있습니다.

앞에서 구현한 것들과 같은 컴포넌트이므로 생략하겠습니다.

NewPasswordScreen

NewPasswordScreen은 ForgotPasswordScreen에 이어지는 화면으로 유저의 이메일로 온 인증코드와 함께 새로운 비밀번호를 입력하여 비밀번호를 변경할 수 있습니다.

위 화면은 CustomTopbar, Text, CustomInput, CustomButton으로 구성됩니다.

컴포넌트 모두 앞에서 한 번씩 사용해봤기에 과정은 생략하도록 하겠습니다.

마무리

지난 편에 이어 오늘까지 로그인/회원가입 프로세스를 구성할 화면들을 구현해보았습니다. 다음 편부터는 구현한 화면들 간에 이동을 더할 수 있는 navigation에 대해 다루도록 하겠습니다. 오늘도 긴 글 읽어주셔서 감사합니다. 😄