[Project] Moongram Part 3

문지웅·2022년 6월 20일
0

Moongram

목록 보기
3/5
post-thumbnail

Part 3. 회원가입 페이지 구현

시간 절약을 위해 native base 홈페이지에서 제공해주는 form 디자인을 참고했습니다. 바로가기

페이지 디자인

로그인을 위해서는 계정을 만들어야 하므로, 회원가입 페이지를 먼저 만들어보겠습니다.

1) 코드

import { useState } from "react";
import {
  Center,
  FormControl,
  Input,
  Box,
  Heading,
  VStack,
  Button,
} from "native-base";
import { SafeAreaView } from "react-native-safe-area-context";
import { registeration } from "../myFirebase/firebaseFunctions";

const SignUpPage = ({ navigation }) => {
  const [formData, setData] = useState({});
  const [errors, setErrors] = useState({});

  //유효성 검사

  const validate = () => {
    if (formData.name === undefined) {
      setErrors({ ...errors, name: "name is required" });
      return false;
    } else if (formData.name.length < 3) {
      setErrors({ ...errors, name: "name is too short" });
      return false;
    }
    return true;
  };

  //폼 제출
  const onSubmit = () => {
    validate() ? doSignUp() : console.log("validate failed");
  };

  //회원가입
  const doSignUp = () => {
    const userName = formData.name;
    const userEmail = formData.email;
    const userPw = formData.password;
    registeration(userName, userEmail, userPw, navigation);
  };

  return (
    <SafeAreaView>
      <Center w="100%">
        <Box safeArea p="2" py="8" w="90%" maxW="290">
          <Heading
            size="lg"
            fontWeight="600"
            textAlign="center"
            color="coolGray.800"
            _dark={{
              color: "warmGray.50",
            }}>
            회원가입
          </Heading>

          <VStack space={3} mt="5">
            {/* 닉네임 */}
            <FormControl isRequired isInvalid={"name" in errors}>
              <FormControl.Label _text={{ bold: true }}>
                닉네임
              </FormControl.Label>
              <Input
                onChangeText={(value) => setData({ ...formData, name: value })}
              />
              {"name" in errors ? (
                <FormControl.ErrorMessage>
                  {errors.name}
                </FormControl.ErrorMessage>
              ) : (
                <FormControl.HelperText>
                  Name should contain atleast 3 character.
                </FormControl.HelperText>
              )}
            </FormControl>

            <Button mt="5" colorScheme="indigo" onPress={onSubmit}>
              계정 생성
            </Button>
          </VStack>
        </Box>
      </Center>
    </SafeAreaView>
  );
};

export default SignUpPage;

2) Firebase 회원가입 함수

export const registeration = async (nickname, email, password, navigation) => {
  await createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      updateProfile(user, {
        displayName: nickname,
      });
      navigation.navigate("MainPage");
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
    });
};

3) 구현한 페이지

profile
프론트엔드 개발자입니다.

0개의 댓글