[Refactor] 회원가입 로직 수정 (#65)

hwna00 · Sep 18, 2023 · 1a07fc4 · 1a07fc4
2 parents 4f75dde + bfd50f3
commit 1a07fc4
Show file tree

Hide file tree

Showing 17 changed files with 534 additions and 428 deletions.
diff --git a/package.json b/package.json
@@ -37,18 +37,19 @@
     "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^10.1.0",
     "@jest/globals": "^29.6.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@babel/eslint-parser": "^10.1.0",
     "eslint": "^8.48.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^3.0.1"
+    "prettier": "^3.0.1",
+    "react-daum-postcode": "^3.1.3"
   }
 }
diff --git a/packages/apps/user/firebase.js b/packages/apps/user/firebase.js
@@ -6,6 +6,7 @@ import {
   GoogleAuthProvider,
   signInWithPopup,
 } from 'firebase/auth';
+import { getStorage } from 'firebase/storage';
 
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_FB_API_KEY,
@@ -18,6 +19,7 @@ const firebaseConfig = {
 
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);
+const storage = getStorage(app);
 const provider = new GoogleAuthProvider();
 
 const signIn = (email, password) => {
@@ -32,4 +34,4 @@ const googleLogin = () => {
   return signInWithPopup(auth, provider);
 };
 
-export { auth, signIn, logIn, googleLogin, provider };
+export { auth, signIn, logIn, googleLogin, provider, storage };
diff --git a/packages/apps/user/src/components/SignUpForm/AfterCapture.js b/packages/apps/user/src/components/SignUpForm/AfterCapture.js
@@ -1,20 +1,15 @@
-import { useLocation } from 'react-router-dom';
 import { AspectRatio, HStack } from '@chakra-ui/react';
 
+import { useSelector } from 'react-redux';
+
 const AfterCapture = function () {
-  const location = useLocation();
-  const {profileImg} = location.state;
+  const imgBlob = useSelector(state => state.signUp.blob);
 
   return (
     <HStack width="full" justifyContent="space-evenly">
-      <AspectRatio
-        width="xs"
-        ratio={1}
-        borderRadius="full"
-        overflow="hidden"
-      >
+      <AspectRatio width="xs" ratio={1} borderRadius="full" overflow="hidden">
         <input
-          src={profileImg}
+          src={window.URL.createObjectURL(imgBlob)}
           accept="image/*"
           type="image"
           alt="profile image"

diff --git a/packages/apps/user/src/components/SignUpForm/BeforeCapture.js b/packages/apps/user/src/components/SignUpForm/BeforeCapture.js
@@ -10,16 +10,11 @@ import {
 const BeforeCapture = function () {
   return (
     <HStack width="full" justifyContent="space-evenly">
-      <AspectRatio
-        width="xs"
-        ratio={1}
-        borderRadius="full"
-        overflow="hidden"
-      >
+      <AspectRatio width="xs" ratio={1} borderRadius="full" overflow="hidden">
         <Avatar />
       </AspectRatio>
 
-      <ChakraLink as={ReactRouterLink} to="/auth/sign-up/on-capture">
+      <ChakraLink as={ReactRouterLink} to="on-capture">
         <Button colorScheme="primary">프로필 사진 추가</Button>
       </ChakraLink>
     </HStack>

diff --git a/packages/apps/user/src/components/SignUpForm/OnCapture.js b/packages/apps/user/src/components/SignUpForm/OnCapture.js
@@ -1,94 +1,75 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { AspectRatio, Button, HStack } from '@chakra-ui/react';
+import { AspectRatio, Button, HStack, SkeletonCircle } from '@chakra-ui/react';
 
-import { setImg } from '../../store';
+import { setImgBlob } from '../../store';
+import useCamera from '../../hooks/useCamera';
 
 const OnCapture = function () {
-  const dispatch = useDispatch();
-
-  const [error, setError] = useState();
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
 
+  const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const fetchStream = async () => {
-    const devices = await window.navigator.mediaDevices.enumerateDevices();
-    const cameras = devices.filter(device => device.kind === 'videoinput');
-
-    try {
-      const devicdId = cameras[1].deviceId;
-
-      const cameraContraints = {
-        audio: true,
-        video: {
-          deviceId: { exact: devicdId },
-        },
-      };
-
-      const myStream = await window.navigator.mediaDevices.getUserMedia(
-        cameraContraints,
-      );
-      if (videoRef?.current) {
-        videoRef.current.srcObject = myStream;
-      }
-    } catch (err) {
-      setError(err);
-    }
-  };
+  const { isLoading, stream, error } = useCamera();
 
   const captureCam = () => {
     const video = videoRef.current;
-
     const canvas = canvasRef.current;
     const context = canvas.getContext('2d');
+
     const width = videoRef.current?.offsetWidth;
     const height = videoRef.current?.offsetHeight;
+
     canvas.setAttribute('width', width);
     canvas.setAttribute('height', height);
 
     context.drawImage(video, 0, 0, width, height);
 
-    const data = canvas.toDataURL('image/png');
+    canvas.toBlob(async blob => {
+      dispatch(setImgBlob(blob));
+      navigate('/auth/sign-up/step4/after-capture');
+    });
 
     canvas.setAttribute('width', 0);
     canvas.setAttribute('height', 0);
-
-    return data;
-  };
-
-  const handleClick = async () => {
-    const profileImg = captureCam();
-    dispatch(setImg(profileImg));
-    navigate('/auth/sign-up/after-capture', { state: { profileImg } });
   };
 
   useEffect(() => {
-    fetchStream();
-  }, []);
+    if (videoRef?.current) {
+      videoRef.current.srcObject = stream;
+    }
+
+    return () => {
+      console.log('clean up', stream?.getTracks());
+
+      stream?.getTracks().forEach(track => {
+        track.stop();
+      });
+    };
+  }, [videoRef, stream]);
 
   useEffect(() => {
     if (error) {
       navigate('/error');
     }
-  }, [error, navigate]);
+  }, [error]);
 
   return (
     <HStack width="full" justifyContent="space-evenly">
-      <AspectRatio
-        width="xs"
-        ratio={1}
-        borderRadius="full"
-        overflow="hidden"
-      >
-        <video autoPlay ref={videoRef} />
-      </AspectRatio>
+      {isLoading ? (
+        <SkeletonCircle size={'80'} />
+      ) : (
+        <AspectRatio width="xs" ratio={1} borderRadius="full" overflow="hidden">
+          <video autoPlay ref={videoRef} />
+        </AspectRatio>
+      )}
 
       {/* eslint-disable */}
-      <Button colorScheme={'primary'} onClick={handleClick}>
+      <Button colorScheme={'primary'} onClick={captureCam}>
         사진 찍기
       </Button>
       <canvas ref={canvasRef} height={0} width={0} />