Merge pull request #168 from StepUpper/develop

로그인, 회원가입 리팩토링과 배포 시 로그 제거

Author: SSUK-H

frontend/src/apis/firebase/auth.ts

@@ -12,8 +12,10 @@ import {
   doc,
   getDoc,
   getDocs,
+  query,
   setDoc,
   updateDoc,
+  where,
 } from "firebase/firestore";
 
 interface UserTypeforSignup {
@@ -69,25 +71,24 @@ const updateUserData = async (key: string, value: string | number) => {
 
 const signUpWithCredential = async (user: UserTypeforSignup & TUser) => {
   const { email, password, ...rest } = user;
-  await createUserWithEmailAndPassword(auth, email, password)
-    .then((credential) => {
+  await createUserWithEmailAndPassword(auth, email, password).then(
+    (credential) => {
       setDoc(doc(db, "users", credential.user.uid), {
         ...rest,
+        email: email,
         imgUrl: "",
         sizeType: null,
         sneakerSize: 0,
       });
-    })
-    .catch((e) => alert(e));
+    }
+  );
 };
 
 const signInWithCredential = async (user: {
   email: string;
   password: string;
 }) => {
-  await signInWithEmailAndPassword(auth, user.email, user.password)
-    .then()
-    .catch((e) => alert(e.message));
+  await signInWithEmailAndPassword(auth, user.email, user.password);
 };
 
 const signInWithGoogle = async () => {
@@ -96,6 +97,7 @@ const signInWithGoogle = async () => {
   const isNew = await signInWithPopup(auth, provider)
     .then((credential) => {
       setDoc(doc(db, "users", credential.user.uid), {
+        email: credential.user.email,
         username: credential.user.displayName,
         gender: null,
         birthDate: "",
@@ -120,11 +122,20 @@ const logOut = async () => {
     .catch((e) => alert(e.message));
 };
 
+const availableAccount = async (email: string) => {
+  const docRef = collection(db, "users");
+  const q = query(docRef, where("email", "==", email));
+  const querySnapshot = await getDocs(q);
+
+  return querySnapshot.empty;
+};
+
 export {
   getUserData,
   updateUserData,
   signUpWithCredential,
   signInWithCredential,
   signInWithGoogle,
   logOut,
+  availableAccount,
 };

frontend/src/components/Chat/ChatLoading.tsx

@@ -1,10 +1,10 @@
 const ChatLoading = () => {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-15">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-800/15">
       <div className="flex space-x-6">
-        <div className="h-3 w-3 animate-pulse rounded-full bg-gray-400" />
-        <div className="animation-delay-200 h-3 w-3 animate-pulse rounded-full bg-gray-500" />
-        <div className="animation-delay-400 h-3 w-3 animate-pulse rounded-full bg-gray-600" />
+        <div className="size-3 animate-pulse rounded-full bg-gray-400" />
+        <div className="delay-200 size-3 animate-pulse rounded-full bg-gray-500" />
+        <div className="delay-400 size-3 animate-pulse rounded-full bg-gray-600" />
       </div>
     </div>
   );

frontend/src/components/common/html/DropDown.tsx

@@ -41,7 +41,6 @@ const DropDown = forwardRef<DropDownRef, DropDownProps>((props, ref) => {
     setIsOpen(false);
     if (onChange) {
       onChange(value);
-      console.log(value);
     }
   };
 

frontend/src/components/common/html/Input.tsx

@@ -1,17 +1,21 @@
 import { ComponentPropsWithoutRef, forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 
-type InputProps = ComponentPropsWithoutRef<"input">;
+type InputProps = ComponentPropsWithoutRef<"input"> & { isErrored?: boolean };
 
 const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { className, ...rest } = props;
   return (
     <>
       <input
-        className={twMerge("border text-body2", className)}
+        className={twMerge(
+          "border text-body2 focus:border-grey-600",
+          className,
+          rest.isErrored && "border-red-300 text-red"
+        )}
         ref={ref}
         {...rest}
-      ></input>
+      />
     </>
   );
 });

frontend/src/components/login/Login.tsx

@@ -45,8 +45,8 @@ const Login = () => {
       [name]: value,
     });
 
-    if (name === "email") setEmailError("");
-    if (name === "password") setPasswordError("");
+    setEmailError("");
+    setPasswordError("");
   };
 
   const submitHandle = async (e: React.FormEvent) => {
@@ -87,7 +87,15 @@ const Login = () => {
 
     //값 확인용
     if (isLoginValid) {
-      await signInWithCredential(loginData);
+      await signInWithCredential(loginData)
+        .then(() => {
+          closeAll();
+          navigate("/");
+        })
+        .catch(() => {
+          setEmailError("이메일을 확인해주세요.");
+          setPasswordError("비밀번호를 확인해주세요.");
+        });
       // zustand로 관리하는 user가 업데이트가 바로 안이루어져서,
       // 임시 방편으로 updateUserInfo 가 userData를 반환하게끔 하고
       // 반환값을 사용하도록 하자
@@ -96,8 +104,6 @@ const Login = () => {
         uid: string;
         username: string;
       };
-      closeAll();
-      navigate("/");
 
       // 여기서 맞춤상품 api 호출 처리
       try {
@@ -137,6 +143,7 @@ const Login = () => {
           <InputField title="아이디" error={emailError}>
             <Input
               ref={emailRef}
+              isErrored={!!emailError}
               type="email"
               name="email"
               placeholder="이메일을 입력해주세요"
@@ -150,6 +157,7 @@ const Login = () => {
           <InputField title="비밀번호" error={passwordError}>
             <Input
               ref={passwordRef}
+              isErrored={!!passwordError}
               type="password"
               name="password"
               placeholder="비밀번호를 입력해주세요"

frontend/src/components/login/LoginBottomSheet.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import BottomSheet from "@common/BottomSheet";
 import Login from "@components/login/Login";
-import SignUp from "@components/signup/SignUp";
+import SignUp from "@components/signUp/SignUp";
 
 const LoginBottomSheet = () => {
   const location = useLocation();

frontend/src/components/signup/SignUp.tsx

@@ -1,5 +1,5 @@
-import SignUpRequired from "./SignUpRequired";
-import SignUpAdditional from "./SignUpAdditional";
+import SignUpRequired from "@components/signUp/SignUpRequired";
+import SignUpAdditional from "@components/signUp/SignUpAdditional";
 import userStore from "@store/auth.store.ts";
 import { redirect } from "react-router-dom";