diff --git a/App.js b/App.js index 5b99ad5..1012493 100644 --- a/App.js +++ b/App.js @@ -5,8 +5,6 @@ import Root from './src/Navigations/Root'; const queryClient = new QueryClient(); export default function App() { - const Stack = createNativeStackNavigator(); - return ( diff --git a/src/Hooks/useAuth.js b/src/Hooks/useAuth.js index 6f52c79..2e4d1a6 100644 --- a/src/Hooks/useAuth.js +++ b/src/Hooks/useAuth.js @@ -1,25 +1,26 @@ import { createUserWithEmailAndPassword } from 'firebase/auth'; import { Keyboard } from 'react-native'; import { useMutation, useQuery } from 'react-query'; -import { auth } from '../shared/firebase'; +import { authService } from '../shared/firebase'; -export const handleSignUp = async (email, password) => { +export const SignUp = async (payload) => { + const { email, password } = payload; Keyboard.dismiss(); // 버튼 클릭 시 키보드 접기 - return createUserWithEmailAndPassword(auth, email, password); + return createUserWithEmailAndPassword(authService, email, password); +}; +export const useSignup = () => { + return useMutation(SignUp, { + onError: (error) => { + if (error.message.includes('email-already-in-use')) { + alert( + '이미 가입된 이메일입니다. 로그인을 시도하거나 다른 이메일을 사용해 주세요.', + ); + } + }, + }); }; - -useMutation(() => handleSignUp(email, password), { - onError: (error) => { - if (error.message.includes('email-already-in-use')) { - alert( - '이미 가입된 이메일입니다. 로그인을 시도하거나 다른 이메일을 사용해 주세요.', - ); - } - }, -}); - const getUID = () => { - return auth; + return authService; }; export const useUID = () => { diff --git a/src/screen/LoginPage.jsx b/src/screen/LoginPage.jsx index 32a96db..38c3ac8 100644 --- a/src/screen/LoginPage.jsx +++ b/src/screen/LoginPage.jsx @@ -1,11 +1,58 @@ -import { TouchableOpacity, View, Text } from 'react-native'; +import { TouchableOpacity, View, Text, TextInput } from 'react-native'; +import { useState, useRef } from 'react'; +import { authService } from '../shared/firebase'; +import { signInWithEmailAndPassword } from 'firebase/auth'; const LoginPage = ({ navigation: { navigate } }) => { + const checkPW = useRef(null); + const [email, setEmail] = useState(''); + const [pw, setPw] = useState(''); + + const handleLogin = () => { + if (!email) { + alert('email을 입력해주세요.'); + email.current.focus(); + return true; + } + if (!pw) { + alert('password를 입력해주세요.'); + pw.current.focus(); + return true; + } + + // 로그인 요청 + signInWithEmailAndPassword(authService, email, pw) + .then(() => { + setEmail(''); + setPw(''); + navigate('Tabs', { screen: '메인 페이지' }); + }) + .catch((err) => { + if (err.message.includes('user-not-found')) { + alert('회원이 아닙니다. 회원가입을 먼저 진행해 주세요.'); + } + if (err.message.includes('wrong-password')) { + alert('비밀번호가 틀렸습니다.'); + } + }); + }; return ( - navigate('Tabs', { screen: '메인 페이지' })} - > + setEmail(text)} + textContentType="emailAddress" + placeholder="아이디를 입력하세요" + /> + setPw(text)} + textContentType="password" + returnKeyType="send" + placeholder="비밀번호를 입력하세요" + /> + handleLogin()}> 로그인 navigate('회원가입')}> diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx index 064a464..d374363 100644 --- a/src/screen/MyPage.jsx +++ b/src/screen/MyPage.jsx @@ -108,7 +108,7 @@ const MyPage = ({ navigation: { navigate } }) => { handleLogin()}> 임시 로그인 - console.log('약추가')}> + navigate('Stacks', { screen: '수정 페이지' })}> 약추가 {renderPillList} diff --git a/src/screen/SignupPage.jsx b/src/screen/SignupPage.jsx index 00f6d0d..7579d2a 100644 --- a/src/screen/SignupPage.jsx +++ b/src/screen/SignupPage.jsx @@ -6,7 +6,7 @@ import { TextInput, TouchableOpacity, } from 'react-native'; -import { handleSignUp } from '../Hooks/useAuth'; +import { useSignup } from '../Hooks/useAuth'; const regex = { email: new RegExp(/[a-z0-9]+@[a-z]+\.[a-z]{2,3}/), @@ -15,7 +15,7 @@ const regex = { ), // 6자 이상, 14자 이하의 영어 대,소문자, 1개 이상의 숫자, 특수문자 조합 }; -export const SignupPage = () => { +const SignupPage = () => { const [email, setEmail] = useState(''); // 이메일 값 저장 const [password, setPassword] = useState(''); // 비밀번호 값 저장 const [correctEmail, setCorrectEmail] = useState(true); // 이메일 유효성 검사 @@ -36,6 +36,8 @@ export const SignupPage = () => { : setCorrectPassword(false); }; + const { mutate: SignUp } = useSignup(); + const onClickSignUpButton = (email, password) => { //양식 제출 시, 빈값, 유효성 검사 틀린 값 잡아내서 리턴 후 오류 문구 띄우기 if ( @@ -52,7 +54,7 @@ export const SignupPage = () => { setCorrectPassword(false); return; } else { - handleSignUp(email, password); + SignUp({ email, password }); setEmail(''); setPassword(''); } @@ -104,3 +106,5 @@ export const SignupPage = () => { }; const styles = StyleSheet.create({}); + +export default SignupPage;