음식점 추천 챗봇 만들기2 - Frontend 회원가입, 로그인

Notion 으로 이동했습니다

https://hill-bovid-56d.notion.site/6f84f2d1d53342f5b425351f710a754b?v=f290bbaba9ed460ab7bfbeaac0bf9eb4

졸업작품 - 음식점추천 챗봇앱

 

---

이전 글에서 작성한 바와 같이 userToken이 없는 경우

AuthScreen, SignInScreen, SignUpScreen 에만 접근할 수 있다.

2021.08.23 - [졸업작품] - 음식점 추천 챗봇 만들기1 - Frontend 구조

음식점 추천 챗봇 만들기1 - Frontend 구조

---

이번 글에서는 userToken이 없는 경우 접근하게되는,

회원가입, 로그인하는 페이지를 구현해본다.

미리보는 결과

AuthScreen.js                                             SignUpScreen.js                                            SignInScreen.js

코드설명 

(부분적으로 설명하기 때문에 설명코드만으로는 작동하지 않으며 전체코드는 맨 아래에 있습니다.)

(가독성을 위해 style, import, export 코드 등 삭제)

 

AuthScreen.js

const AuthScreen = ({ navigation }) => {
  function onSignIn() {
    navigation.navigate("SignIn");
  }
  function onSignUp() {
    navigation.navigate("SignUp");
  }
  return (
    <SafeAreaView>
      <View>
        <Text>뭐먹을까?</Text>
        <Text>아무거나!</Text>
      </View>
      <View>
        <TouchableOpacityonPress={onSignIn}>
          <Text>로그인</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={onSignUp}>
          <Text>회원가입</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

• 로그인 버튼을 누른 경우 onSignIn 함수를 통해 "SignIn" 이라고 이름 붙인 페이지로 이동 (이전 글 App.js 에서 SignScreen의 이름을 "SignIn" 이라고 지어주었음)

• 회원가입 버튼을 누른 경우 onSignUp 함수를 통해 "SIgnUp" 이라고 이름 붙인 페이지로 이동

 

 

SignUpScreen.js

import { AuthContext } from "../App";

const SignUpScreen = ({ navigation }) => {
  const { signUp } = useContext(AuthContext);
  const [username, setUsername] = useState("");
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");
  const [repassword, setRepassword] = useState("");

  return (
    <SafeAreaView>
      <View>
        <Text>회원가입</Text>
      </View>
      <View>
        <View>
          <Text>아이디</Text>
          <TextInput
            placeholder="아이디"
            value={userId}
            onChangeText={setUserId}
          />
        </View>
        <View>
          <Text>이름</Text>
          <TextInput
            placeholder="이름"
            value={username}
            onChangeText={setUsername}
          />
        </View>
        <View>
          <Text>비밀번호</Text>
          <TextInput
            placeholder="비밀번호"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
          />
        </View>
        <View>
          <Text>비밀번호 확인</Text>
          <TextInput
            placeholder="비밀번호 확인"
            value={repassword}
            onChangeText={setRepassword}
            secureTextEntry
          />
        </View>
        <View>
          <TouchableOpacity
            onPress={() => {
              signUp({ userId, username, password, repassword });
            }}
          >
            <Text>회원가입</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => navigation.navigate("Auth")}
          >
            <Text>취소</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

•  userId, username, password, repassword 네가지의 TextInput이 있으며 TextInput의 내용을 state로 관리해주기 위해서 useState를 사용한다.
•  useContext를 사용하여 AuthContext 에서 signUp 함수를 받아온다(이전글 참조). 이 함수는 회원가입 버튼을 눌렀을때 실행된다.
• 취소버튼을 누르면 AuthScreen 으로 이동한다.

 

SignInScreen.js

import { AuthContext } from "../App";

const SignInScreen = ({ navigation }) => {
  const { signIn } = useContext(AuthContext);
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");
  return (
    <SafeAreaView>
      <View>
        <Text>로그인</Text>
      </View>
      <View>
        <View>
          <Text>아이디</Text>
          <TextInput
            placeholder="아이디"
            value={userId}
            onChangeText={setUserId}
          />
        </View>
        <View>
          <Text>비밀번호</Text>
          <TextInput
            placeholder="비밀번호"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
          />
        </View>
        <View>
          <TouchableOpacity
            onPress={() => signIn({ userId, password })}
          >
            <Text>로그인</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => navigation.navigate("Auth")}
          >
            <Text>취소</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

signUpScreen과 비슷하다 다만 userId와 password 만을 받아 AuthContext로 부터 받은 signIn 함수에 전달한다.

 

 

전체코드

AuthScreen.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";

const AuthScreen = ({ navigation }) => {
  function onSignIn() {
    navigation.navigate("SignIn");
  }
  function onSignUp() {
    navigation.navigate("SignUp");
  }
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.titleWrapper}>
        <Text style={styles.title1}>뭐먹을까?</Text>
        <Text style={styles.title2}>아무거나!</Text>
      </View>
      <View style={styles.buttonWrapper}>
        <TouchableOpacity style={styles.signInButton} onPress={onSignIn}>
          <Text style={styles.signInButtonText}>로그인</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.signUpButton} onPress={onSignUp}>
          <Text style={styles.signUpButtonText}>회원가입</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default AuthScreen;

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
  },
  titleWrapper: {
    width: "100%",
    height: "55%",
    alignItems: "center",
    justifyContent: "center",
  },
  buttonWrapper: {
    width: "100%",
    height: "45%",
    alignItems: "center",
    paddingTop: 90,
  },
  title1: {
    fontSize: 55,
    fontWeight: "bold",
  },
  title2: {
    fontSize: 55,
    fontWeight: "bold",
  },
  signInButton: {
    backgroundColor: "black",
    width: "40%",
    alignItems: "center",
    borderRadius: 15,
    borderWidth: 1,
    padding: 10,
    margin: 10,
  },
  signUpButton: {
    width: "40%",
    alignItems: "center",
    borderRadius: 15,
    borderWidth: 1,
    padding: 10,
    margin: 10,
  },
  signInButtonText: {
    color: "white",
    fontSize: 25,
  },
  signUpButtonText: {
    fontSize: 25,
  },
});

SignUpScreen.js

import React, { useState, useContext } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
  TextInput,
} from "react-native";
import { AuthContext } from "../App";

const SignUpScreen = ({ navigation }) => {
  const { signUp } = useContext(AuthContext);
  const [username, setUsername] = useState("");
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");
  const [repassword, setRepassword] = useState("");

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.title}>
        <Text style={styles.titleText}>회원가입</Text>
      </View>
      <View style={styles.form}>
        <View style={styles.inputWrapper}>
          <Text style={styles.label}>아이디</Text>
          <TextInput
            placeholder="아이디"
            value={userId}
            onChangeText={setUserId}
            style={styles.textInput}
          />
        </View>
        <View style={styles.inputWrapper}>
          <Text style={styles.label}>이름</Text>
          <TextInput
            placeholder="이름"
            value={username}
            onChangeText={setUsername}
            style={styles.textInput}
          />
        </View>
        <View style={styles.inputWrapper}>
          <Text style={styles.label}>비밀번호</Text>
          <TextInput
            placeholder="비밀번호"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
            style={styles.textInput}
          />
        </View>
        <View style={styles.inputWrapper}>
          <Text style={styles.label}>비밀번호 확인</Text>
          <TextInput
            placeholder="비밀번호 확인"
            value={repassword}
            onChangeText={setRepassword}
            secureTextEntry
            style={styles.textInput}
          />
        </View>
        <View style={styles.buttons}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              signUp({ userId, username, password, repassword });
            }}
          >
            <Text style={styles.buttonText}>회원가입</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate("Auth")}
          >
            <Text style={styles.buttonText}>취소</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default SignUpScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 20,
    marginRight: 20,
  },
  title: {
    width: "100%",
    height: "15%",
    justifyContent: "center",
  },
  titleText: {
    fontSize: 30,
  },
  form: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  inputWrapper: {
    width: "100%",
    paddingBottom: 20,
  },
  label: {
    fontSize: 20,
    paddingBottom: 6,
  },
  textInput: {
    width: "100%",
    height: 35,
    backgroundColor: "#d9d9d9",
    borderRadius: 5,
  },
  buttons: {
    width: "100%",
    height: 45,
    flexDirection: "row",
    justifyContent: "space-around",
  },
  button: {
    width: "30%",
    borderRadius: 10,
    borderWidth: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  buttonText: {
    fontSize: 20,
  },
});

SignInScreen.js

import React, { useState, useContext } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
  TextInput,
} from "react-native";
import { AuthContext } from "../App";

const SignInScreen = ({ navigation }) => {
  const { signIn } = useContext(AuthContext);
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.title}>
        <Text style={styles.titleText}>로그인</Text>
      </View>
      <View style={styles.form}>
        <View style={styles.inputWrapper}>
          <Text style={styles.label}>아이디</Text>
          <TextInput
            placeholder="아이디"
            value={userId}
            onChangeText={setUserId}
            style={styles.textInput}
          />
        </View>
        <View style={styles.inputWrapper}>
          <Text style={styles.label}>비밀번호</Text>
          <TextInput
            placeholder="비밀번호"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
            style={styles.textInput}
          />
        </View>
        <View style={styles.buttons}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => signIn({ userId, password })}
          >
            <Text style={styles.buttonText}>로그인</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate("Auth")}
          >
            <Text style={styles.buttonText}>취소</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 20,
    marginRight: 20,
  },
  title: {
    width: "100%",
    height: "15%",
    justifyContent: "center",
  },
  titleText: {
    fontSize: 30,
  },
  form: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  inputWrapper: {
    width: "100%",
    paddingBottom: 20,
  },
  label: {
    fontSize: 20,
    paddingBottom: 6,
  },
  textInput: {
    width: "100%",
    height: 35,
    backgroundColor: "#d9d9d9",
    borderRadius: 5,
  },
  buttons: {
    width: "100%",
    height: 45,
    flexDirection: "row",
    justifyContent: "space-around",
    //backgroundColor: "pink",
  },
  button: {
    width: "30%",
    borderRadius: 10,
    borderWidth: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  buttonText: {
    fontSize: 20,
  },
});

export default SignInScreen;