feat:create login #1 #4

App.js

@@ -5,8 +5,6 @@ import Root from './src/Navigations/Root';
 const queryClient = new QueryClient();
 
 export default function App() {
-  const Stack = createNativeStackNavigator();
-
   return (
     <QueryClientProvider client={queryClient}>
       <NavigationContainer>

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 = () => {

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 (
     <View>
-      <TouchableOpacity
-        onPress={() => navigate('Tabs', { screen: '메인 페이지' })}
-      >
+      <TextInput
+        value={email}
+        onChangeText={(text) => setEmail(text)}
+        textContentType="emailAddress"
+        placeholder="아이디를 입력하세요"
+      />
+      <TextInput
+        ref={checkPW}
+        value={pw}
+        onChangeText={(text) => setPw(text)}
+        textContentType="password"
+        returnKeyType="send"
+        placeholder="비밀번호를 입력하세요"
+      />
+      <TouchableOpacity onPress={() => handleLogin()}>
         <Text>로그인</Text>
       </TouchableOpacity>
       <TouchableOpacity onPress={() => navigate('회원가입')}>

src/screen/MyPage.jsx

@@ -108,7 +108,7 @@ const MyPage = ({ navigation: { navigate } }) => {
       <AddPill onPress={() => handleLogin()}>
         <Text>임시 로그인</Text>
       </AddPill>
-      <AddPill onPress={() => console.log('약추가')}>
+      <AddPill onPress={() => navigate('Stacks', { screen: '수정 페이지' })}>
         <Text>약추가</Text>
       </AddPill>
       {renderPillList}

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;