diff --git a/frontend/src/apis/firebase/auth.ts b/frontend/src/apis/firebase/auth.ts
index e583fb1..78ca45d 100644
--- a/frontend/src/apis/firebase/auth.ts
+++ b/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,6 +122,14 @@ 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,
@@ -127,4 +137,5 @@ export {
   signInWithCredential,
   signInWithGoogle,
   logOut,
+  availableAccount,
 };
diff --git a/frontend/src/components/Chat/ChatLoading.tsx b/frontend/src/components/Chat/ChatLoading.tsx
index 087b3f5..09482b0 100644
--- a/frontend/src/components/Chat/ChatLoading.tsx
+++ b/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>
   );
diff --git a/frontend/src/components/common/html/DropDown.tsx b/frontend/src/components/common/html/DropDown.tsx
index e8e92d9..d27336e 100644
--- a/frontend/src/components/common/html/DropDown.tsx
+++ b/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);
     }
   };
 
diff --git a/frontend/src/components/common/html/Input.tsx b/frontend/src/components/common/html/Input.tsx
index d98f055..86b6ae9 100644
--- a/frontend/src/components/common/html/Input.tsx
+++ b/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>
+      />
     </>
   );
 });
diff --git a/frontend/src/components/login/Login.tsx b/frontend/src/components/login/Login.tsx
index 72cc280..ef03017 100644
--- a/frontend/src/components/login/Login.tsx
+++ b/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="비밀번호를 입력해주세요"
diff --git a/frontend/src/components/login/LoginBottomSheet.tsx b/frontend/src/components/login/LoginBottomSheet.tsx
index d58093c..ec5750e 100644
--- a/frontend/src/components/login/LoginBottomSheet.tsx
+++ b/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();
diff --git a/frontend/src/components/signup/SignUp.tsx b/frontend/src/components/signup/SignUp.tsx
index 78e7add..7b53068 100644
--- a/frontend/src/components/signup/SignUp.tsx
+++ b/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";
 
diff --git a/frontend/src/components/signup/SignUpRequired.tsx b/frontend/src/components/signup/SignUpRequired.tsx
index 5a40306..873831d 100644
--- a/frontend/src/components/signup/SignUpRequired.tsx
+++ b/frontend/src/components/signup/SignUpRequired.tsx
@@ -3,7 +3,11 @@ import InputField from "@common/InputField";
 import Input from "@common/html/Input";
 import BottomButton from "@common/BottomButton";
 import DropDown, { DropDownRef } from "@common/html/DropDown";
-import { signUpWithCredential, updateUserData } from "@apis/firebase/auth";
+import {
+  availableAccount,
+  signUpWithCredential,
+  updateUserData,
+} from "@apis/firebase/auth";
 import { useInput } from "@hooks/useInput";
 import userStore from "@store/auth.store";
 import { auth } from "@/firebase";
@@ -39,9 +43,6 @@ const SignUpRequired = () => {
   const [userNameRef, focusUserName, handleUserNamePress] =
     useFocus<HTMLInputElement>();
   const [genderRef, focusGender] = useFocus<DropDownRef>();
-  const [birthYearRef, focusBirthYear] = useFocus<DropDownRef>();
-  const [birthMonthRef, focusBirthMonth] = useFocus<DropDownRef>();
-  const [birthDayRef, focusBirthDay] = useFocus<DropDownRef>();
 
   const genderOptions: { value: string; label: string }[] = [
     { value: "남성", label: "남성" },
@@ -55,7 +56,7 @@ const SignUpRequired = () => {
 
   const generateYearOptions = (startYear: number, endYear: number) => {
     const options: { value: string; label: string }[] = [];
-    for (let year = startYear; year <= endYear; year++) {
+    for (let year = endYear; year >= startYear; year--) {
       options.push({ value: year.toString(), label: year.toString() });
     }
     return options;
@@ -96,78 +97,73 @@ const SignUpRequired = () => {
     if (name === "username") setnameError("");
   };
 
-  const submitHandle = (e: React.FormEvent) => {
-    e.preventDefault();
-
+  const checkValidate = () => {
+    let isvalid = true;
     const validateEmail = (email: string) => {
       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       if (!emailRegex.test(email)) {
         focusEmail(); // 이메일 필드 자동 포커스
         setEmailError("이메일 형식을 확인해주세요");
-        isSignUpRequiredValid = false;
-        return false;
-      } else {
-        setEmailError("");
-        return true;
       }
     };
 
-    let isSignUpRequiredValid = true;
-
     if (!signUpRequired.email) {
       //아이디 비어있을 때
-      if (isSignUpRequiredValid) focusEmail(); // 이메일 필드 자동 포커스
-
+      focusEmail(); // 이메일 필드 자동 포커스
       setEmailError("아이디를 입력하세요");
-      isSignUpRequiredValid = false;
-    } else if (validateEmail(signUpRequired.email)) {
-      isSignUpRequiredValid = true;
-    }
+      isvalid = false;
+    } else if (emailError.length > 0) {
+      focusEmail();
+      isvalid = false;
+    } else validateEmail(signUpRequired.email);
 
     if (!signUpRequired.password) {
       //비밀번호 비어있을 때
-      if (isSignUpRequiredValid) focusPassword(); // 비밀번호 필드 자동 포커스
-
+      if (isvalid) focusPassword(); // 비밀번호 필드 자동 포커스
+      isvalid = false;
       setPasswordError("비밀번호를 입력하세요");
-      isSignUpRequiredValid = false;
     }
 
     if (!signUpRequired.username) {
-      if (isSignUpRequiredValid) focusUserName(); // 이름 필드 자동 포커스
-
+      if (isvalid) focusUserName(); // 이름 필드 자동 포커스
+      isvalid = false;
       setnameError("이름을 입력하세요");
-      isSignUpRequiredValid = false;
     }
 
     if (!signUpRequired.gender) {
-      if (isSignUpRequiredValid) focusGender(); // 성별 필드 자동 포커스
-
+      if (isvalid) focusGender(); // 성별 필드 자동 포커스
+      isvalid = false;
       setGenderError("성별을 입력하세요");
-      isSignUpRequiredValid = false;
     }
 
     if (!signUpRequired.birthDate) {
       if (!birthYear) {
-        focusBirthYear(); // 년도 필드에 포커스
+        // focusBirthYear(); // 년도 필드에 포커스
         setBirthDateError("년도를 선택하세요");
-        isSignUpRequiredValid = false;
       } else if (!birthMonth) {
-        focusBirthMonth(); // 월 필드에 포커스
+        // focusBirthMonth(); // 월 필드에 포커스
         setBirthDateError("월을 선택하세요");
-        isSignUpRequiredValid = false;
       } else if (!birthDay) {
-        focusBirthDay(); // 일 필드에 포커스
+        // focusBirthDay(); // 일 필드에 포커스
         setBirthDateError("일을 선택하세요");
-        isSignUpRequiredValid = false;
       }
     }
+  };
+
+  const submitHandle = (e: React.FormEvent) => {
+    e.preventDefault();
 
-    //값 확인용
-    if (isSignUpRequiredValid) {
+    if (
+      emailError.length === 0 &&
+      passwordError.length === 0 &&
+      genderError.length === 0 &&
+      birthDateError.length === 0 &&
+      nameError.length === 0
+    ) {
       if (user) {
         updateUserData("gender", signUpRequired.gender);
         updateUserData("birthDate", signUpRequired.birthDate);
-
+        console.log(166);
         updateUserInfo();
       } else
         signUpWithCredential({
@@ -177,7 +173,18 @@ const SignUpRequired = () => {
           gender: signUpRequired.gender === "남성" ? "male" : "female",
           username: signUpRequired.username,
           birthDate: signUpRequired.birthDate,
-        }).then(updateUserInfo);
+        })
+          .then(() => {
+            updateUserInfo();
+            console.log(179);
+          })
+          .catch((data) => {
+            if (data.code === "auth/email-already-in-use")
+              setEmailError("이미 사용중인 이메일입니다");
+            else if (data.code === "auth/weak-password") {
+              setPasswordError("비밀번호는 6자 이상이어야합니다");
+            }
+          });
     }
   };
 
@@ -200,11 +207,19 @@ const SignUpRequired = () => {
               type="email"
               name="email"
               placeholder={user?.email || "이메일을 입력해주세요"}
-              className="h-[48px] w-full rounded-[4px] px-4 py-[14px]"
+              className={`h-[48px] w-full rounded-[4px] px-4 py-[14px]`}
+              isErrored={!!emailError}
               value={user?.email ? "" : signUpRequired.email}
               onChange={handleInputChange}
               disabled={user?.email ? true : false}
               onKeyDown={(e) => handleEmailPress(e, focusPassword)} // 다음 패스워드 포커스
+              onBlur={async (e) => {
+                const isAvailable = await availableAccount(e.target.value);
+
+                if (!isAvailable) {
+                  setEmailError("이미 사용중인 이메일입니다");
+                }
+              }}
             />
           </InputField>
           {/*패스워드 입력 필드*/}
@@ -213,6 +228,7 @@ const SignUpRequired = () => {
               ref={passwordRef}
               type="password"
               name="password"
+              isErrored={!!passwordError}
               placeholder={
                 user?.email
                   ? "소셜 로그인 회원입니다."
@@ -231,6 +247,7 @@ const SignUpRequired = () => {
               ref={userNameRef}
               type="text"
               name="username"
+              isErrored={!!nameError}
               placeholder={user?.displayName || "이름을 입력해주세요"}
               className="h-[48px] w-full rounded-[4px] px-4 py-[14px]"
               value={user?.displayName ? "" : signUpRequired.username}
@@ -253,7 +270,6 @@ const SignUpRequired = () => {
           <InputField title="생년월일" error={birthDateError}>
             <div className="flex w-full justify-between space-x-1">
               <DropDown
-                ref={birthYearRef}
                 className="h-[45px] gap-2 rounded-[6px] border-[#E4E4E7] px-[10px] py-[14px]"
                 menuPlacement="top"
                 placeholder="년"
@@ -264,7 +280,6 @@ const SignUpRequired = () => {
                 }}
               />
               <DropDown
-                ref={birthMonthRef}
                 className="h-[45px] gap-2 rounded-[6px] border-[#E4E4E7] px-[10px] py-[14px]"
                 menuPlacement="top"
                 placeholder="월"
@@ -275,7 +290,6 @@ const SignUpRequired = () => {
                 }}
               />
               <DropDown
-                ref={birthDayRef}
                 className="h-[45px] gap-2 rounded-[6px] border-[#E4E4E7] px-[10px] py-[14px]"
                 menuPlacement="top"
                 placeholder="일"
@@ -296,7 +310,7 @@ const SignUpRequired = () => {
         </div>
         <div className="mt-4 px-5">
           {/*회원가입 다음 페이지로 이동 버튼*/}
-          <BottomButton title="다음" type="submit" />
+          <BottomButton title="다음" type="submit" onClick={checkValidate} />
         </div>
       </form>
     </>
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index 2881ba1..7994839 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -8,6 +8,9 @@
   html {
     font-family: "Pretendard Variable", system-ui, sans-serif;
   }
+  input{
+    outline: none;
+  }
 }
 
 /* Custom CSS */
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 53cab5c..4af401e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,7 +4,11 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [react(), tsconfigPaths(), svgr()],
   base: "/stepup_front",
-});
+  esbuild: {
+    drop: ["debugger"],
+    pure: mode === "production" ? ["console.log"] : [],
+  },
+}));