Feat(user): fb 회원가입 로직 수정

- api.js 파일을 생성하여 axios로 요청을 보내는 함수들을 정리 - firebase.js 파일에서 fbSignUp 함수를 통해 firebase 회원가입 처리 ref: #67
hwna00 · Sep 20, 2023 · 45cf198 · 45cf198
1 parent 1a07fc4
commit 45cf198
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@tanstack/react-query": "^4.32.5",
     "@tanstack/react-query-devtools": "^4.32.5",
+    "axios": "^1.5.0",
     "firebase": "^10.1.0",
     "framer-motion": "^10.15.0",
     "react-hook-form": "^7.45.4",

diff --git a/packages/apps/user/firebase.js b/packages/apps/user/firebase.js
@@ -1,12 +1,12 @@
 import { initializeApp } from 'firebase/app';
 import {
   getAuth,
-  createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
   GoogleAuthProvider,
   signInWithPopup,
 } from 'firebase/auth';
-import { getStorage } from 'firebase/storage';
+import { getStorage, ref, uploadBytes } from 'firebase/storage';
+import { signUpWithFb } from './src/api';
 
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_FB_API_KEY,
@@ -22,8 +22,31 @@ const auth = getAuth(app);
 const storage = getStorage(app);
 const provider = new GoogleAuthProvider();
 
-const signIn = (email, password) => {
-  return createUserWithEmailAndPassword(auth, email, password);
+const uploadBlob = blob => {
+  //TODO: 사진을 저장할 위치를 구분하기 쉽게 변경
+  const storageRef = ref(storage, 'images/' + new Date().getTime() + '.png');
+
+  uploadBytes(storageRef, blob).catch(() => {
+    // navigate('/error');
+  });
+};
+
+const fbSignUp = data => {
+  const { email, password, ...rest } = data;
+
+  //TODO: DB에 해당 email과 같은 메일이 존재하는지 확인. 존재한다면 해당 아이디가 이미 존재한다는 경고메시지 전송
+
+  createUserWithEmailAndPassword(auth, email, password)
+    .then(userCredential => {
+      const { email } = userCredential.user;
+      uploadBlob(rest.profileImgBlob);
+      signUpWithFb({ ...rest, email });
+    })
+    .catch(error => {
+      //TODO: CASE1. 이미 존재하는 경우 -> 경고알림 or 바로 로그인
+      //TODO: CASE2. 존재하지 않는 경우 -> 회원가입 진행
+      console.log(error);
+    });
 };
 
 const logIn = (email, password) => {
@@ -34,4 +57,4 @@ const googleLogin = () => {
   return signInWithPopup(auth, provider);
 };
 
-export { auth, signIn, logIn, googleLogin, provider, storage };
+export { auth, fbSignUp, logIn, googleLogin, provider, storage };
diff --git a/packages/apps/user/src/api.js b/packages/apps/user/src/api.js
@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: 'http://localhost:3000/api',
+});
+
+export const signUpWithFb = data => {
+  //TODO: DB에 User 정보 저장
+  instance.post('/auth/firebase/sign-up', data).then(() => [
+    //TODO: 메인 화면으로 리디렉트
+  ]);
+};
diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -4,18 +4,11 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import PropTypes from 'prop-types';
-import { ref, uploadBytes } from 'firebase/storage';
 import { motion } from 'framer-motion';
-import {
-  browserLocalPersistence,
-  setPersistence,
-  updateProfile,
-} from 'firebase/auth';
 import { Box, Button, ButtonGroup, VStack } from '@chakra-ui/react';
 
-import { auth, signIn } from '../../../firebase';
-import { storage } from '../../../firebase';
 import { setErrors } from '../../store';
+import { fbSignUp } from '../../../firebase';
 
 const SignUpForm = function ({
   activeStep,
@@ -54,33 +47,8 @@ const SignUpForm = function ({
     goToPrevious();
   }, [goToPrevious, activeStep, navigate]);
 
-  const uploadBlob = blob => {
-    const storageRef = ref(storage, 'images/' + new Date().getTime() + '.png');
-
-    uploadBytes(storageRef, blob).catch(() => {
-      navigate('/error');
-    });
-  };
-
   const onSubmit = function (data) {
-    uploadBlob(profileImgBlob);
-    navigate('/');
-
-    //Todo: firebase로부터 받아온 토큰을 DB에 저장하기
-    // setPersistence(auth, browserLocalPersistence)
-    //   .then(() => {
-    //     signIn(email, password)
-    //       .then(userCredential => {
-    //         updateProfile(userCredential.user, {
-    //           displayName: username,
-    //         }).then(() => navigate('/'));
-    //       })
-    //       .catch(error => {
-    //         console.log(error);
-    //         navigate('/error');
-    //       });
-    //   })
-    //   .catch(() => navigate('/error'));
+    fbSignUp({ ...data, profileImgBlob });
   };
 
   const location = useLocation();

diff --git a/yarn.lock b/yarn.lock
@@ -4510,6 +4510,15 @@ axe-core@^4.6.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz"
   integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
 
+axios@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267"
+  integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.1.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz"
@@ -6555,6 +6564,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
+follow-redirects@^1.15.0:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -6590,6 +6604,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 [email protected]:
   version "0.2.0"
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@@ -9735,6 +9758,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"