diff --git a/package.json b/package.json index 1266b36b..5420fb58 100644 --- 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 index 07289978..ebf8da9c 100644 --- 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 new file mode 100644 index 00000000..b9ffbebd --- /dev/null +++ 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 index 82a3f499..4bbea966 100644 --- 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 index d4107fb6..4e39471d 100644 --- 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" + forwarded@0.2.0: 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"