diff --git a/src/apis/userApi.ts b/src/apis/userApi.ts
index 3264f90..70376ad 100644
--- a/src/apis/userApi.ts
+++ b/src/apis/userApi.ts
@@ -16,7 +16,8 @@ const userApi = {
         : '';
     return response;
   }),
-  postUserInfoForSignUp: methodFormat(async ({ userInfo }) => {
+  postUserInfoForSignUp: methodFormat(async (userInfo) => {
+    console.log('signup', userInfo);
     const options = {
       params: {
         userId: userInfo.userId,
diff --git a/src/common/utils.ts b/src/common/utils.ts
index 987256a..cd6c3a2 100644
--- a/src/common/utils.ts
+++ b/src/common/utils.ts
@@ -28,19 +28,18 @@ const methodFormat = (callbackfunc: Function) => {
   return method;
 };
 
-interface IValidationResult<T> {
+export interface IValidationResult<T> {
   userId: T;
   password: T;
   username: T;
   email: T;
+  passwordConfirm: T;
 }
 
 const validate = (value: string, formType: string) => {
   let isValidate = true;
-  const userIdRegex = /^[a-z][a-z\d]{3,11}$/;
-  const userIdNumberRegex = /[0-9]/;
+  const userIdRegex = [/^[a-z]/, /\d/, /^.{3,11}$/];
   const passwordRegexArr = [/^.{8,15}$/, /\d/, /[a-zA-Z]/, /[\\*!&]/];
-  // const usernameRegex = /^[a-z][a-z\d]{2,}$/;
   const usernameRegex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|0-9]{2,20}$/;
   const emailRegex = /^[\w]{4,}@[\w]+(\.[\w]+){1,3}$/;
   const errorMessage = {
@@ -49,17 +48,20 @@ const validate = (value: string, formType: string) => {
     username: '닉네임은 2글자 이상입니다.',
     email: '이메일 형식이 아닙니다. 다시 입력해주세요.',
   };
-  const validtaionResult: IValidationResult<string | undefined> = {
-    userId: undefined,
-    password: undefined,
-    username: undefined,
-    email: undefined,
+  const validtaionResult: IValidationResult<string> = {
+    userId: '',
+    password: '',
+    username: '',
+    email: '',
+    passwordConfirm: ''
   };
 
   if (formType === 'userId') {
-    if (!(userIdRegex.test(value) || userIdNumberRegex.test(value))) {
-      isValidate = false;
-    }
+    userIdRegex.forEach((el) => {
+      if (!el.test(value)) {
+        isValidate = false;
+      }
+    })
   }
   if (formType === 'password') {
     passwordRegexArr.forEach((el) => {
diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts
index 5b64243..f05c605 100644
--- a/src/hooks/useForm.ts
+++ b/src/hooks/useForm.ts
@@ -4,56 +4,63 @@ import userApi from '../apis/userApi';
 
 import { validate } from 'common/utils';
 
-interface InitialValue<T> {
+export interface InitialValue<T> {
+  [index: string]: T | undefined;
   userId: T;
+  username?: T;
   phoneNumber?: T;
   name?: T;
   password: T;
   email: T;
+  passwordConfirm: T;
 }
 
 const useForm = (initialValues: InitialValue<string>) => {
   const [values, setValues] = useState(initialValues);
-  const [errors, setErrors] = useState({});
+  const [errors, setErrors] = useState({
+    userId: '',
+    password: '',
+    username: '',
+    email: '',
+    passwordConfirm: ''
+  });
 
   const handleChange = (
     event: ChangeEvent<HTMLInputElement>,
-    formType: string,
   ) => {
     const { name, value } = event.target;
-
-    setValues((prevState) => ({
-      ...prevState,
-      [name]: value,
-    }));
-    setErrors((prevState) => ({
-      ...prevState,
-      ...validate(values[formType], formType),
-    }));
+    if (name === 'passwordConfirm' && value !== values.password) setErrors((prev) => ({...prev, [name]: '비밀번호가 일치하지 않습니다.'}))
+    else setErrors((prev) => ({...prev, [name]: validate(value, name)[name]}));
+    setValues((prev) => ({...prev, [name]: value }));
   };
 
-  const handleSubmit = (event: FormEvent) => {
-    const isValidate = Object.keys(errors).length === 0;
-    console.log(errors);
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    let isValidate = true;
+    Object.values(errors).forEach((errorMsg) => {
+      if (errorMsg !== '') isValidate = false;
+    })
     if (isValidate) {
+      console.log(values);
       userApi
         .postUserInfoForSignUp({
           userId: values.userId,
           userPassword: values.password,
+          userPasswordCheck: values.passwordConfirm,
           userEmail: values.email,
-          userName: values.name,
-          userPhoneNumber: values.phoneNumber,
+          userName: values.username,
+          userProfileImg: undefined
         })
         .then((res) => console.log(res))
         .catch((err) => console.log(err));
     } else {
-      alert('회원가입 형식이 올바르지 않습니다. 다시 확인해주세요.');
+      console.log('회원가입 형식이 올바르지 않습니다. 다시 확인해주세요.');
     }
-    event.preventDefault();
   };
 
   return {
     values,
+    setValues,
     handleChange,
     handleSubmit,
     errors,
diff --git a/src/pages/SignUp/SignUpInput.tsx b/src/pages/SignUp/SignUpInput.tsx
index 0ce52db..5426173 100644
--- a/src/pages/SignUp/SignUpInput.tsx
+++ b/src/pages/SignUp/SignUpInput.tsx
@@ -1,9 +1,7 @@
 import { ChangeEvent, useState } from 'react';
 import styled, { css } from 'styled-components/macro';
 
-import { type PayloadType } from './index';
-
-import { validate } from 'common/utils';
+import { IValidationResult } from 'common/utils';
 
 interface SizeType<T> {
   width: T;
@@ -12,16 +10,11 @@ interface SizeType<T> {
 interface Props extends SizeType<string> {
   type: string;
   title: string;
-  setText: Function;
-  formType: string;
-  reqId: string;
   limit: number;
   placeholder: string;
-}
-
-interface ResultType {
-  isValid: boolean | undefined;
-  error: '';
+  formType: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  errors: IValidationResult<string>;
 }
 
 function SignUpInput({
@@ -29,43 +22,29 @@ function SignUpInput({
   width = '100%',
   height = 'auto',
   title,
-  setText,
-  formType,
-  reqId,
   limit,
   placeholder,
+  formType,
+  onChange,
+  errors,
 }: Props) {
-  const [result, setResult] = useState<ResultType>({
-    isValid: undefined,
-    error: '',
-  });
   const [count, setCount] = useState(0);
 
-  function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    setCount(e.target.value.length);
-    const validateResult = validate(e.target.value, formType);
-    setText((prevState: PayloadType) => ({
-      ...prevState,
-      [reqId]: e.target.value,
-    }));
-
-    if (validateResult[formType] !== '')
-      setResult({ isValid: false, error: validateResult[formType] });
-    else setResult({ isValid: true, error: '' });
-    if (e.target.value.length === 0)
-      setResult({ isValid: undefined, error: '' });
-  }
-
   return (
     <StyledWrapper className="signup-input-wrapper">
-      <Section isValid={result.isValid}>
+      <Section error={errors[formType]}>
         <StyledInput
+          name={formType}
           type={type}
           width={width}
           height={height}
-          onChange={(e) => handleChange(e)}
+          onChange={(e) => {
+            onChange(e);
+            setCount(e.target.value.length);
+          }}
           maxLength={limit}
           placeholder={placeholder}
+          autoComplete="off"
         />
         <Header>
           <span>{title}</span>
@@ -74,7 +53,7 @@ function SignUpInput({
           </span>
         </Header>
       </Section>
-      <Description isValid={result.isValid}>{result.error}</Description>
+      <Description error={errors[formType]}>{errors[formType]}</Description>
     </StyledWrapper>
   );
 }
@@ -84,17 +63,17 @@ export default SignUpInput;
 const StyledWrapper = styled.div`
   display: grid;
 `;
-const Section = styled.div<{ isValid: boolean | undefined }>`
+const Section = styled.div<{ error: string }>`
   display: grid;
   grid-template-rows: 0 1fr;
   height: 54.5px;
   ${(props) => {
-    switch (props.isValid) {
-      case true:
+    switch (props.error.length > 0) {
+      case false:
         return css`
           border: 1px solid #cf990c;
         `;
-      case false:
+      case true:
         return css`
           border: 1px solid red;
         `;
@@ -142,7 +121,7 @@ const Header = styled.header`
     overflow: hidden;
   }
 `;
-const Description = styled.p<{ isValid: boolean | undefined }>`
+const Description = styled.p<{ error: string }>`
   height: 2vh;
   color: #e50303;
   font-size: 12px;
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index 8345a46..9924f1b 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -16,85 +16,89 @@ export interface PayloadType {
   password: string;
   passwordConfirm: string;
 }
+const signUpData = {
+  username: '',
+  email: '',
+  userId: '',
+  password: '',
+  passwordConfirm: '',
+};
 
 function SignUp() {
-  const signUpData = {
-    username: '',
-    email: '',
-    userId: '',
-    password: '',
-    passwordConfirm: '',
-  };
+  const { values, errors, handleSubmit, handleChange } = useForm(signUpData);
 
-  const [inputValues, setInputValues] = useState(signUpData);
   const activator = () => {
-    const firstErrorMsg =
-      validate(inputValues.username, 'username').username !== '';
-    const secondErrorMsg = validate(inputValues.email, 'email').email !== '';
-    const thirdErrorMsg = validate(inputValues.userId, 'userId').userId !== '';
-    const fourthErrorMsg =
-      validate(inputValues.password, 'password').password !== '';
-    const fifthErrorMsg =
-      validate(inputValues.passwordConfirm, 'password').password !== '';
+    let firstErrorMsg: boolean;
+    let secondErrorMsg: boolean;
+    let thirdErrorMsg: boolean;
+    let fourthErrorMsg: boolean;
+    let fifthErrorMsg: boolean;
 
-    if (
-      firstErrorMsg ||
-      secondErrorMsg ||
-      thirdErrorMsg ||
-      fourthErrorMsg ||
-      fifthErrorMsg
-    )
-      return false;
+    if (values.username !== undefined) {
+      firstErrorMsg = validate(values.username, 'username').username !== '';
+      secondErrorMsg = validate(values.email, 'email').email !== '';
+      thirdErrorMsg = validate(values.userId, 'userId').userId !== '';
+      fourthErrorMsg = validate(values.password, 'password').password !== '';
+      fifthErrorMsg =
+        validate(values.passwordConfirm, 'passwordConfirm').password !== '';
+      if (
+        firstErrorMsg ||
+        secondErrorMsg ||
+        thirdErrorMsg ||
+        fourthErrorMsg ||
+        fifthErrorMsg
+      )
+        return false;
+    }
     return true;
   };
   const signUpInputData = [
     {
+      id: 0,
       type: 'text',
       reqId: 'username',
       title: '사용자 이름',
-      setText: setInputValues,
       formType: 'username',
       limit: 20,
       placeholder: '사용자 이름',
     },
     {
+      id: 1,
       type: 'email',
       reqId: 'email',
       title: '이메일',
-      setText: setInputValues,
       formType: 'email',
       limit: 30,
       placeholder: '이메일',
     },
     {
+      id: 2,
       type: 'text',
       reqId: 'userId',
       title: '아이디',
-      setText: setInputValues,
       formType: 'userId',
       limit: 30,
       placeholder: '아이디',
     },
     {
+      id: 3,
       type: 'password',
       reqId: 'password',
       title: '비밀번호',
-      setText: setInputValues,
       formType: 'password',
       limit: 15,
       placeholder: '비밀번호',
     },
     {
+      id: 4,
       type: 'password',
       reqId: 'passwordConfirm',
       title: '비밀번호 확인',
-      setText: setInputValues,
-      formType: 'password',
+      formType: 'passwordConfirm',
       limit: 15,
       placeholder: '비밀번호 확인',
     },
   ];
-  const { handleSubmit } = useForm(signUpData);
   const [imageName, setImageName] = useState<string[]>([]);
   const [file, setFile] = useState('');
   const [fileImage, setFileImage] = useState<string>('');
@@ -128,12 +132,13 @@ function SignUp() {
             {signUpInputData.map((item) => (
               <div className="register-input-wrapper">
                 <SignUpInput
+                  key={item.id}
                   type={item.type}
                   title={item.title}
-                  setText={item.setText}
                   formType={item.formType}
-                  reqId={item.reqId}
                   limit={item.limit}
+                  errors={errors}
+                  onChange={handleChange}
                   placeholder={item.placeholder}
                   width="100%"
                   height="auto"