diff --git a/src/api/auth.ts b/src/api/auth.ts
new file mode 100644
index 0000000..489d59e
--- /dev/null
+++ b/src/api/auth.ts
@@ -0,0 +1,27 @@
+import { defaultInstance } from './httpRequest';
+
+interface AuthTokenType {
+  accessToken: string;
+  refreshToken: string;
+}
+
+const postLogin = async (loginInfo: { email: string; password: string }) => {
+  const result = await defaultInstance<AuthTokenType>({
+    method: 'POST',
+    url: '/login',
+    data: loginInfo,
+  });
+
+  return result;
+};
+
+const requestLogout = async () => {
+  const result = await defaultInstance<AuthTokenType>({
+    method: 'GET',
+    url: '/logout/success',
+  });
+
+  return result;
+};
+
+export { postLogin, requestLogout };
diff --git a/src/api/httpRequest.ts b/src/api/httpRequest.ts
index 1a559ec..1e4fbf7 100644
--- a/src/api/httpRequest.ts
+++ b/src/api/httpRequest.ts
@@ -1,7 +1,11 @@
 import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
 
-type HttpResponseType = { isSuccess: boolean; code: number; message: string };
-type HttpSuccessType<T> = HttpResponseType & { result?: T };
+export type HttpResponseType = {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+};
+export type HttpSuccessType<T> = HttpResponseType & { result?: T };
 
 const BASE_URL = '/api';
 
@@ -16,7 +20,7 @@ authAxios.interceptors.response.use((config) => {
   return config;
 });
 
-class ResponseError extends Error {
+export class ResponseError extends Error {
   isSuccess: boolean;
 
   code: number;
diff --git a/src/api/info.ts b/src/api/info.ts
new file mode 100644
index 0000000..653225e
--- /dev/null
+++ b/src/api/info.ts
@@ -0,0 +1,33 @@
+import { defaultInstance } from './httpRequest';
+
+const postSocialAccount = async (account: { socialAccountUrl: string }) => {
+  const url = `/social-accounts`;
+
+  const result = await defaultInstance({
+    method: 'POST',
+    url,
+    data: account,
+  });
+
+  return result;
+};
+
+const postInterest = async ({
+  userId,
+  interestName,
+}: {
+  userId: number;
+  interestName: string;
+}) => {
+  const url = `/users/${userId}/interests`;
+
+  const result = await defaultInstance({
+    method: 'POST',
+    url,
+    data: { userId, interestName },
+  });
+
+  return result;
+};
+
+export { postSocialAccount, postInterest };
diff --git a/src/api/mutations/auth.ts b/src/api/mutations/auth.ts
new file mode 100644
index 0000000..6fdd7ce
--- /dev/null
+++ b/src/api/mutations/auth.ts
@@ -0,0 +1,18 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { postLogin } from '../auth';
+import { HttpSuccessType, ResponseError } from '../httpRequest';
+
+const useLogin = async (
+  options: UseMutationOptions<
+    HttpSuccessType<{ accessToken: string; refreshToken: string }>,
+    ResponseError,
+    { email: string; password: string }
+  >,
+) => {
+  return useMutation({
+    mutationFn: (loginInfo) => postLogin(loginInfo),
+    ...options,
+  });
+};
+
+export { useLogin };
diff --git a/src/api/mutations/info.ts b/src/api/mutations/info.ts
new file mode 100644
index 0000000..60703eb
--- /dev/null
+++ b/src/api/mutations/info.ts
@@ -0,0 +1,31 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { HttpSuccessType, ResponseError } from '../httpRequest';
+import { postInterest, postSocialAccount } from '../info';
+
+const useAddSocialAccountMutation = (
+  options: UseMutationOptions<
+    HttpSuccessType<unknown>,
+    ResponseError,
+    { socialAccountUrl: string }
+  >,
+) => {
+  return useMutation({
+    mutationFn: postSocialAccount,
+    ...options,
+  });
+};
+
+const useAddInterest = (
+  options: UseMutationOptions<
+    HttpSuccessType<unknown>,
+    ResponseError,
+    { userId: number; interestName: string }
+  >,
+) => {
+  return useMutation({
+    mutationFn: postInterest,
+    ...options,
+  });
+};
+
+export { useAddSocialAccountMutation, useAddInterest };
diff --git a/src/api/mutations/sign-up.ts b/src/api/mutations/sign-up.ts
new file mode 100644
index 0000000..e122dfd
--- /dev/null
+++ b/src/api/mutations/sign-up.ts
@@ -0,0 +1,56 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import {
+  UserSignUpType,
+  postConfirmCode,
+  postConfirmCodeByEamil,
+  postConfirmUsernameDuplicate,
+  postSignupUser,
+} from '../sign-up';
+import { HttpSuccessType, ResponseError } from '../httpRequest';
+
+export const useSelfSignUpMutation = (
+  options: UseMutationOptions<HttpSuccessType<unknown>, ResponseError, string>,
+) =>
+  useMutation({
+    mutationFn: postConfirmCodeByEamil,
+    ...options,
+  });
+
+export const useEamilConfirmMutation = (
+  options: UseMutationOptions<
+    HttpSuccessType<{ emailToken: string }>,
+    ResponseError,
+    { email: string; code: string }
+  > = {},
+) => {
+  return useMutation({
+    mutationFn: postConfirmCode,
+    ...options,
+  });
+};
+
+export const useConfirmUsernameDuplicate = (
+  options: UseMutationOptions<
+    HttpSuccessType<{ usernameToken: string }>,
+    ResponseError,
+    string
+  > = {},
+) => {
+  return useMutation({
+    mutationFn: postConfirmUsernameDuplicate,
+    ...options,
+  });
+};
+
+export const useSignupUser = (
+  options: UseMutationOptions<
+    HttpSuccessType<unknown>,
+    ResponseError,
+    UserSignUpType
+  > = {},
+) => {
+  return useMutation({
+    mutationFn: postSignupUser,
+    ...options,
+  });
+};
diff --git a/src/api/sign-up.ts b/src/api/sign-up.ts
new file mode 100644
index 0000000..54ecfb3
--- /dev/null
+++ b/src/api/sign-up.ts
@@ -0,0 +1,69 @@
+import { defaultInstance } from './httpRequest';
+
+type UserSignUpType = {
+  email: string;
+  password: string;
+  username: string;
+  emailToken: string;
+  usernameToken: string;
+};
+
+const postConfirmCodeByEamil = async (email: string) => {
+  const url = `/verification/email?email=${email}`;
+
+  const result = await defaultInstance({
+    method: 'POST',
+    url,
+  });
+
+  return result;
+};
+
+const postConfirmCode = async ({
+  email,
+  code,
+}: {
+  email: string;
+  code: string;
+}) => {
+  const url = `/verification/email/${email}?code=${code}`;
+
+  const result = await defaultInstance<{ emailToken: string }>({
+    method: 'POST',
+    url,
+  });
+
+  return result;
+};
+
+const postConfirmUsernameDuplicate = async (username: string) => {
+  const url = `/verification/username?username=${username}`;
+
+  const result = await defaultInstance<{ usernameToken: string }>({
+    method: 'POST',
+    url,
+  });
+
+  return result;
+};
+
+const postSignupUser = async (userInfo: UserSignUpType) => {
+  const url = `/users`;
+
+  const result = await defaultInstance({
+    method: 'POST',
+    url,
+    data: userInfo,
+  });
+
+  return result;
+};
+
+export {
+  postConfirmCodeByEamil,
+  postConfirmCode,
+  postConfirmUsernameDuplicate,
+  postSignupUser,
+};
+
+export type { UserSignUpType };
diff --git a/src/app/(AuthLayout)/auth/github/page.tsx b/src/app/(AuthLayout)/auth/github/page.tsx
index f03cbfc..f51226b 100644
--- a/src/app/(AuthLayout)/auth/github/page.tsx
+++ b/src/app/(AuthLayout)/auth/github/page.tsx
@@ -1,40 +1,121 @@
 'use client';
 
+import { useForm } from 'react-hook-form';
 import { useRouter } from 'next/navigation';
-import { KeyboardEvent } from 'react';
+import { KeyboardEvent, useEffect } from 'react';
 
 import Logo from '@/components/common/Logo';
 import Field from '@/components/common/Field';
 import Input from '@/components/common/Input';
 import Button from '@/components/common/Button';
 import validators from '@/utils/validate';
-import useSignUpState, { ISignUpFormValueType } from '@/hooks/useSignUpState';
+import useSignUpState, {
+  CONFIRM_STATES,
+  ISignUpFormValueType,
+} from '@/hooks/useSignUpState';
+import useSignupMutation from '@/hooks/useSignUpMutation';
+import { postLogin } from '@/api/auth';
+import { saveAccessToken, saveRefreshToken } from '@/utils/manageToken';
 
 import styles from './page.module.scss';
 
 const GithubSignupPage = () => {
   const router = useRouter();
+  const formMethods = useForm<ISignUpFormValueType>({
+    mode: 'onChange',
+    defaultValues: {
+      email: '',
+      confirm: '',
+      password: '',
+      repassword: '',
+      username: '',
+    },
+  });
+
   const {
-    checkConfirmNumber,
-    checkNickname,
-    requestConfirmNumber,
-    handleSubmit,
+    watch,
     register,
-    formState: { errors },
+    resetField,
+    clearErrors,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = formMethods;
+
+  const {
+    signupToken,
     isEmailConfirmed,
     isEmailPending,
-    isNicknameConfirmed,
+    isEmailRequest,
+    isEmailRetry,
+    isUsernameConfirmed,
+    changeConfirmState,
+    changeUsernameState,
+    changeSignupToken,
   } = useSignUpState();
 
-  const onSubmit = (data: ISignUpFormValueType) => {
-    console.log(data);
-    router.push('/auth/info');
-  };
+  const {
+    isRequestEmailPending,
+    isRequestConfirmPending,
+    isDuplicateUsernamePending,
+    isRequestSignupPending,
+    requestCodeByEmail,
+    requestConfirmCode,
+    requestCheckDuplicateUsername,
+    requestSignupUser,
+  } = useSignupMutation({
+    formMethods,
+    changeSignupToken,
+    changeConfirmState,
+    changeUsernameState,
+  });
 
   const preventEnter = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') e.preventDefault();
+    if (e.key === 'Enter') {
+      e.preventDefault();
+    }
+  };
+
+  const resetEmail = () => {
+    resetField('email');
+    resetField('confirm');
+    changeConfirmState(CONFIRM_STATES.PENDING);
+  };
+
+  const onSubmit = (values: ISignUpFormValueType) => {
+    const { email, password, username } = values;
+
+    const payload = {
+      email,
+      password,
+      username,
+      ...signupToken,
+    };
+
+    requestSignupUser(payload, {
+      onSuccess: async (res) => {
+        if (res.isSuccess) {
+          const authResults = await postLogin({ email, password });
+          const { result, isSuccess } = authResults;
+
+          if (isSuccess && result) {
+            const { accessToken, refreshToken } = result;
+            saveAccessToken(accessToken);
+            saveRefreshToken(refreshToken);
+            router.push('/auth/info');
+          }
+        }
+      },
+    });
   };
 
+  const [password, repassword] = watch(['password', 'repassword']);
+
+  useEffect(() => {
+    if (password !== '' && password === repassword) {
+      clearErrors(['password', 'repassword']);
+    }
+  }, [password, repassword, clearErrors]);
+
   return (
     <div className={styles.container}>
       <Logo />
@@ -43,100 +124,137 @@ const GithubSignupPage = () => {
         <div>
           <p className={styles.sub_title}>회원가입</p>
           <Field>
-            <Field.FieldLabel htmlFor="email">
-              <Field.FieldEmphasize>*</Field.FieldEmphasize>
+            <Field.Label htmlFor="email">
+              <Field.Emphasize>*</Field.Emphasize>
               이메일
-            </Field.FieldLabel>
-            <Field.FieldBox>
+            </Field.Label>
+            <Field.Box>
               <Input
                 id="email"
                 type="text"
                 placeholder="이메일을 입력해주세요."
                 maxLength={30}
                 disabled={!isEmailPending}
-                state={(errors.email?.message && 'fail') || 'normal'}
                 onKeyDown={preventEnter}
-                {...register('email', validators.email(isEmailConfirmed))}
+                state={(errors.email?.message && 'fail') || 'normal'}
+                {...register('email', validators.email)}
               />
-              <Button
-                type="button"
-                className={styles.button}
-                onClick={requestConfirmNumber}
-                disabled={!isEmailPending}
-              >
-                {isEmailPending ? '인증 요청' : '요청 완료'}
-              </Button>
-            </Field.FieldBox>
-            <Field.FieldErrorMessage>
-              {errors.email?.message}
-            </Field.FieldErrorMessage>
+              {(isEmailPending || isEmailRetry) && (
+                <Button
+                  type="button"
+                  className={styles.button}
+                  onClick={() => requestCodeByEmail(watch('email'))}
+                  disabled={
+                    !watch('email').length ||
+                    !!errors.email?.message ||
+                    isRequestEmailPending
+                  }
+                >
+                  {isEmailPending && !isRequestEmailPending && '인증 요청'}
+                  {isEmailRetry && !isRequestEmailPending && '재요청'}
+                  {isRequestEmailPending && '요청 중...'}
+                </Button>
+              )}
+              {isEmailRequest && (
+                <Field.TimerButton
+                  type="button"
+                  className={styles.button}
+                  changeState={() => changeConfirmState('retry')}
+                  isConfirm={isEmailConfirmed}
+                  timerDuration={300_000} // 5분
+                  disabled={isRequestEmailPending || !isEmailRetry}
+                />
+              )}
+              {isEmailConfirmed && (
+                <Button
+                  type="button"
+                  className={styles.button}
+                  onClick={resetEmail}
+                >
+                  재설정
+                </Button>
+              )}
+            </Field.Box>
+            <Field.ErrorMessage>{errors.email?.message}</Field.ErrorMessage>
           </Field>
 
           {!isEmailPending && (
             <Field>
-              <Field.FieldLabel htmlFor="confirm">
-                <Field.FieldEmphasize>*</Field.FieldEmphasize>
+              <Field.Label htmlFor="confirm">
+                <Field.Emphasize>*</Field.Emphasize>
                 인증번호
-              </Field.FieldLabel>
-              <Field.FieldBox>
+              </Field.Label>
+              <Field.Box>
                 <Input
                   id="confirm"
                   type="text"
                   placeholder="인증번호를 입력해주세요."
-                  maxLength={6}
+                  maxLength={7}
                   disabled={isEmailConfirmed}
-                  state={errors.confirm?.message ? 'fail' : 'normal'}
+                  state={(errors.confirm?.message && 'fail') || 'normal'}
                   onKeyDown={preventEnter}
-                  {...register('confirm', validators.confirm(isEmailConfirmed))}
+                  {...register('confirm', validators.confirm)}
                 />
                 <Button
                   type="button"
                   className={styles.button}
-                  onClick={checkConfirmNumber}
-                  disabled={isEmailConfirmed}
+                  onClick={() =>
+                    requestConfirmCode({
+                      email: watch('email'),
+                      code: watch('confirm'),
+                    })
+                  }
+                  disabled={
+                    isRequestConfirmPending || isEmailRetry || isEmailConfirmed
+                  }
                 >
-                  {isEmailConfirmed ? '인증 완료' : '인증 확인'}
+                  {!isRequestConfirmPending && !isEmailConfirmed && '인증 확인'}
+                  {isEmailConfirmed && '인증 완료'}
+                  {isRequestConfirmPending && '인증 중...'}
                 </Button>
-              </Field.FieldBox>
-              <Field.FieldErrorMessage>
-                {errors.confirm?.message}
-              </Field.FieldErrorMessage>
+              </Field.Box>
+              <Field.ErrorMessage>{errors.confirm?.message}</Field.ErrorMessage>
             </Field>
           )}
 
-          <Field className={styles.last_field}>
-            <Field.FieldLabel htmlFor="nickname">
-              <Field.FieldEmphasize>*</Field.FieldEmphasize>
+          <Field>
+            <Field.Label htmlFor="username">
+              <Field.Emphasize>*</Field.Emphasize>
               닉네임
-            </Field.FieldLabel>
-            <Field.FieldBox>
+            </Field.Label>
+            <Field.Box>
               <Input
-                id="nickname"
+                id="username"
                 type="text"
                 placeholder="닉네임을 입력해주세요."
-                state={errors.nickname?.message ? 'fail' : 'normal'}
-                disabled={isNicknameConfirmed}
-                {...register(
-                  'nickname',
-                  validators.nickname(isNicknameConfirmed),
-                )}
+                minLength={2}
+                maxLength={16}
+                state={errors.username?.message ? 'fail' : 'normal'}
+                disabled={isUsernameConfirmed}
+                onKeyDown={preventEnter}
+                {...register('username', validators.username)}
               />
               <Button
                 type="button"
                 className={styles.button}
-                onClick={checkNickname}
-                disabled={isNicknameConfirmed}
+                onClick={() => requestCheckDuplicateUsername(watch('username'))}
+                disabled={
+                  !watch('username')?.length ||
+                  isDuplicateUsernamePending ||
+                  !!errors.username?.message ||
+                  isUsernameConfirmed
+                }
               >
-                중복 확인
+                {isDuplicateUsernamePending ? '확인 중...' : '중복 확인'}
               </Button>
-            </Field.FieldBox>
-            <Field.FieldErrorMessage>
-              {errors.nickname?.message}
-            </Field.FieldErrorMessage>
+            </Field.Box>
+            <Field.ErrorMessage>{errors.username?.message}</Field.ErrorMessage>
           </Field>
         </div>
 
-        <Button>다음 단계로</Button>
+        <Button disabled={!isValid || isRequestSignupPending}>
+          {isRequestSignupPending ? '...' : '다음 단계로'}
+        </Button>
       </form>
     </div>
   );
diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
index 5db3bd1..af546eb 100644
--- a/src/app/(AuthLayout)/auth/info/page.tsx
+++ b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -49,10 +49,22 @@ const AdditionalInfoPage = () => {
 
   const submitHandler: SubmitHandler<IAddionalInfoType> = (values) => {
     const { links, interests, myInterests } = values;
+
+    const myInterestsName = myInterests.map(({ myInterest }) => ({
+      userId: 1,
+      interestName: myInterest,
+    }));
+    const interestName = interests.map((interest) => ({
+      userId: 1,
+      interestName: interest,
+    }));
+
+    const interestNames = [...interestName, ...myInterestsName];
+    const socialAccounts = links.map(({ link }) => link).filter((v) => !!v);
+
     const additionalInfo = {
-      interests,
-      links: links.map(({ link }) => link).filter((v) => !!v),
-      myInterests: myInterests.map(({ myInterest }) => myInterest),
+      links: socialAccounts,
+      interestNames,
     };
 
     console.log(additionalInfo);
@@ -71,8 +83,8 @@ const AdditionalInfoPage = () => {
         <FormProvider {...methods}>
           <h1 className={styles.sub_title}>추가 정보</h1>
           <Field>
-            <Field.FieldLabel htmlFor="links">링크 (최대 3개)</Field.FieldLabel>
-            <Field.FieldBox className={styles.link_field}>
+            <Field.Label htmlFor="links">링크 (최대 3개)</Field.Label>
+            <Field.Box className={styles.link_field}>
               {linkFields.map((field, index) => (
                 <AdditionalLink
                   key={field.id}
@@ -90,30 +102,27 @@ const AdditionalInfoPage = () => {
                   <PlusIcon width="20" />
                 </Button>
               )}
-            </Field.FieldBox>
+            </Field.Box>
           </Field>
-
           <Field>
-            <Field.FieldLabel>추천 관심사</Field.FieldLabel>
-            <Field.FieldBox
+            <Field.Label>추천 관심사</Field.Label>
+            <Field.Box
               className={clsx(styles.field_box, styles.interest_field_box)}
             >
               {RECOMMANED_INTERESTS.map((interest) => (
                 <InterestCheckbox key={interest} value={interest} />
               ))}
-            </Field.FieldBox>
+            </Field.Box>
           </Field>
 
           <Field>
-            <Field.FieldLabel>
-              나만의 관심사를 추가해보세요! (최대 10개)
-            </Field.FieldLabel>
+            <Field.Label>나만의 관심사를 추가해보세요! (최대 10개)</Field.Label>
             {errors.myInterests && (
               <p className={styles.interest_error}>
                 {errors.myInterests.message}
               </p>
             )}
-            <Field.FieldBox
+            <Field.Box
               className={clsx(styles.field_box, styles.my_interest_field_box)}
             >
               {myInterestsFields.map((field, index) => (
@@ -124,6 +133,7 @@ const AdditionalInfoPage = () => {
                   onRemove={removeMyInterest}
                 />
               ))}
+
               {myInterestsFields.length !== MY_INTERESTS_FIELDS_LIMIT && (
                 <Button
                   type="button"
@@ -134,7 +144,7 @@ const AdditionalInfoPage = () => {
                   <PlusIcon width="20" />
                 </Button>
               )}
-            </Field.FieldBox>
+            </Field.Box>
           </Field>
           <Button>회원가입 완료</Button>
         </FormProvider>
diff --git a/src/app/(AuthLayout)/auth/page.tsx b/src/app/(AuthLayout)/auth/page.tsx
index b68ec16..579665d 100644
--- a/src/app/(AuthLayout)/auth/page.tsx
+++ b/src/app/(AuthLayout)/auth/page.tsx
@@ -52,7 +52,7 @@ const LoginPage = () => {
             maxLength={30}
             placeholder="이메일을 입력해주세요."
             errorMessage={isDirty ? errors.email?.message : undefined}
-            {...register('email', validator.email(true))}
+            {...register('email', validator.email)}
           />
           <ToggleWrapper>
             {({ isToggle, toggleHandler }) => (
@@ -63,7 +63,7 @@ const LoginPage = () => {
                 maxLength={20}
                 placeholder="비밀번호를 입력해주세요."
                 errorMessage={isDirty ? errors.password?.message : undefined}
-                {...register('password', validator.password())}
+                {...register('password', validator.password)}
                 inputPostFix={
                   <button
                     type="button"
diff --git a/src/app/(AuthLayout)/auth/sign-up/page.module.scss b/src/app/(AuthLayout)/auth/sign-up/page.module.scss
index db94505..54c5219 100644
--- a/src/app/(AuthLayout)/auth/sign-up/page.module.scss
+++ b/src/app/(AuthLayout)/auth/sign-up/page.module.scss
@@ -12,7 +12,6 @@
 
   .logo_box {
     text-align: center;
-    margin-bottom: 40px;
   }
 
   .form {
@@ -22,6 +21,20 @@
     flex-direction: column;
   }
 
+  .sub_title {
+    width: 100%;
+    margin-top: 2.5rem;
+    margin-bottom: 1.25rem;
+    font-size: $FONT_SIZE_16;
+    font-weight: bold;
+
+    @include res--desktop {
+      font-size: $FONT_SIZE_20;
+      margin-top: 3.125rem;
+      margin-bottom: 1.5rem;
+    }
+  }
+
   .button {
     @include res--desktop {
       flex: 1;
diff --git a/src/app/(AuthLayout)/auth/sign-up/page.tsx b/src/app/(AuthLayout)/auth/sign-up/page.tsx
index fa44863..2f844a3 100644
--- a/src/app/(AuthLayout)/auth/sign-up/page.tsx
+++ b/src/app/(AuthLayout)/auth/sign-up/page.tsx
@@ -1,36 +1,73 @@
 'use client';
 
+import { useForm } from 'react-hook-form';
 import { useRouter } from 'next/navigation';
-import { KeyboardEvent } from 'react';
+import { KeyboardEvent, useEffect } from 'react';
 
 import Logo from '@/components/common/Logo';
 import Input from '@/components/common/Input';
 import Field from '@/components/common/Field';
 import Button from '@/components/common/Button';
 import validators from '@/utils/validate';
-import useSignUpState, { ISignUpFormValueType } from '@/hooks/useSignUpState';
+import useSignUpState, {
+  CONFIRM_STATES,
+  ISignUpFormValueType,
+} from '@/hooks/useSignUpState';
+import useSignupMutation from '@/hooks/useSignUpMutation';
+import { postLogin } from '@/api/auth';
+import { saveAccessToken, saveRefreshToken } from '@/utils/manageToken';
 
 import styles from './page.module.scss';
 
 const SignupPage = () => {
   const router = useRouter();
+  const formMethods = useForm<ISignUpFormValueType>({
+    mode: 'onChange',
+    defaultValues: {
+      email: '',
+      confirm: '',
+      password: '',
+      repassword: '',
+      username: '',
+    },
+  });
+
   const {
-    checkConfirmNumber,
-    checkNickname,
-    requestConfirmNumber,
-    handleSubmit,
-    register,
     watch,
-    formState: { errors },
+    register,
+    resetField,
+    clearErrors,
+    formState: { errors, isValid },
+    handleSubmit,
+  } = formMethods;
+
+  const {
+    signupToken,
     isEmailConfirmed,
     isEmailPending,
-    isNicknameConfirmed,
+    isEmailRequest,
+    isEmailRetry,
+    isUsernameConfirmed,
+    changeConfirmState,
+    changeUsernameState,
+    changeSignupToken,
   } = useSignUpState();
 
-  const onSubmit = (values: ISignUpFormValueType) => {
-    console.log(values);
-    router.push('/auth/info');
-  };
+  const {
+    isRequestEmailPending,
+    isRequestConfirmPending,
+    isDuplicateUsernamePending,
+    isRequestSignupPending,
+    requestCodeByEmail,
+    requestConfirmCode,
+    requestCheckDuplicateUsername,
+    requestSignupUser,
+  } = useSignupMutation({
+    formMethods,
+    changeSignupToken,
+    changeConfirmState,
+    changeUsernameState,
+  });
 
   const preventEnter = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
@@ -38,6 +75,47 @@ const SignupPage = () => {
     }
   };
 
+  const resetEmail = () => {
+    resetField('email');
+    resetField('confirm');
+    changeConfirmState(CONFIRM_STATES.PENDING);
+  };
+
+  const onSubmit = (values: ISignUpFormValueType) => {
+    const { email, password, username } = values;
+
+    const payload = {
+      email,
+      password,
+      username,
+      ...signupToken,
+    };
+
+    requestSignupUser(payload, {
+      onSuccess: async (res) => {
+        if (res.isSuccess) {
+          const authResults = await postLogin({ email, password });
+          const { result, isSuccess } = authResults;
+
+          if (isSuccess && result) {
+            const { accessToken, refreshToken } = result;
+            saveAccessToken(accessToken);
+            saveRefreshToken(refreshToken);
+            router.push('/auth/info');
+          }
+        }
+      },
+    });
+  };
+
+  const [password, repassword] = watch(['password', 'repassword']);
+
+  useEffect(() => {
+    if (password !== '' && password === repassword) {
+      clearErrors(['password', 'repassword']);
+    }
+  }, [password, repassword, clearErrors]);
+
   return (
     <div className={styles.container}>
       <div className={styles.logo_box}>
@@ -45,74 +123,107 @@ const SignupPage = () => {
       </div>
 
       <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+        <p className={styles.sub_title}>회원가입</p>
         <Field>
-          <Field.FieldLabel htmlFor="email">
-            <Field.FieldEmphasize>*</Field.FieldEmphasize>
+          <Field.Label htmlFor="email">
+            <Field.Emphasize>*</Field.Emphasize>
             이메일
-          </Field.FieldLabel>
-          <Field.FieldBox>
+          </Field.Label>
+          <Field.Box>
             <Input
               id="email"
               type="text"
               placeholder="이메일을 입력해주세요."
               maxLength={30}
               disabled={!isEmailPending}
-              state={(errors.email?.message && 'fail') || 'normal'}
               onKeyDown={preventEnter}
-              {...register('email', validators.email(isEmailConfirmed))}
+              state={(errors.email?.message && 'fail') || 'normal'}
+              {...register('email', validators.email)}
             />
-            <Button
-              type="button"
-              className={styles.button}
-              onClick={requestConfirmNumber}
-              disabled={!isEmailPending}
-            >
-              {isEmailPending ? '인증 요청' : '요청 완료'}
-            </Button>
-          </Field.FieldBox>
-          <Field.FieldErrorMessage>
-            {errors.email?.message}
-          </Field.FieldErrorMessage>
+            {(isEmailPending || isEmailRetry) && (
+              <Button
+                type="button"
+                className={styles.button}
+                onClick={() => requestCodeByEmail(watch('email'))}
+                disabled={
+                  !watch('email').length ||
+                  !!errors.email?.message ||
+                  isRequestEmailPending
+                }
+              >
+                {isEmailPending && !isRequestEmailPending && '인증 요청'}
+                {isEmailRetry && !isRequestEmailPending && '재요청'}
+                {isRequestEmailPending && '요청 중...'}
+              </Button>
+            )}
+            {isEmailRequest && (
+              <Field.TimerButton
+                type="button"
+                className={styles.button}
+                changeState={() => changeConfirmState('retry')}
+                isConfirm={isEmailConfirmed}
+                timerDuration={300_000} // 5분
+                disabled={isRequestEmailPending || !isEmailRetry}
+              />
+            )}
+            {isEmailConfirmed && (
+              <Button
+                type="button"
+                className={styles.button}
+                onClick={resetEmail}
+              >
+                재설정
+              </Button>
+            )}
+          </Field.Box>
+          <Field.ErrorMessage>{errors.email?.message}</Field.ErrorMessage>
         </Field>
 
         {!isEmailPending && (
           <Field>
-            <Field.FieldLabel htmlFor="confirm">
-              <Field.FieldEmphasize>*</Field.FieldEmphasize>
+            <Field.Label htmlFor="confirm">
+              <Field.Emphasize>*</Field.Emphasize>
               인증번호
-            </Field.FieldLabel>
-            <Field.FieldBox>
+            </Field.Label>
+            <Field.Box>
               <Input
                 id="confirm"
                 type="text"
                 placeholder="인증번호를 입력해주세요."
-                maxLength={6}
+                maxLength={7}
                 disabled={isEmailConfirmed}
-                state={errors.confirm?.message ? 'fail' : 'normal'}
+                state={(errors.confirm?.message && 'fail') || 'normal'}
                 onKeyDown={preventEnter}
-                {...register('confirm', validators.confirm(isEmailConfirmed))}
+                {...register('confirm', validators.confirm)}
               />
               <Button
                 type="button"
                 className={styles.button}
-                onClick={checkConfirmNumber}
-                disabled={isEmailConfirmed}
+                onClick={() =>
+                  requestConfirmCode({
+                    email: watch('email'),
+                    code: watch('confirm'),
+                  })
+                }
+                disabled={
+                  isRequestConfirmPending || isEmailRetry || isEmailConfirmed
+                }
               >
-                {isEmailConfirmed ? '인증 완료' : '인증 확인'}
+                {!isRequestConfirmPending && !isEmailConfirmed && '인증 확인'}
+                {isEmailConfirmed && '인증 완료'}
+                {isRequestConfirmPending && '인증 중...'}
               </Button>
-            </Field.FieldBox>
-            <Field.FieldErrorMessage>
-              {errors.confirm?.message}
-            </Field.FieldErrorMessage>
+            </Field.Box>
+            <Field.ErrorMessage>{errors.confirm?.message}</Field.ErrorMessage>
           </Field>
         )}
 
         <Field>
-          <Field.FieldLabel htmlFor="password">
-            <Field.FieldEmphasize>*</Field.FieldEmphasize>
+          <Field.Label htmlFor="password">
+            <Field.Emphasize>*</Field.Emphasize>
             비밀번호
-          </Field.FieldLabel>
-          <Field.FieldBox>
+          </Field.Label>
+          <Field.Box>
             <Input
               id="password"
               type="password"
@@ -121,20 +232,18 @@ const SignupPage = () => {
               maxLength={20}
               state={errors.password?.message ? 'fail' : 'normal'}
               onKeyDown={preventEnter}
-              {...register('password', validators.password())}
+              {...register('password', validators.password)}
             />
-          </Field.FieldBox>
-          <Field.FieldErrorMessage>
-            {errors.password?.message}
-          </Field.FieldErrorMessage>
+          </Field.Box>
+          <Field.ErrorMessage>{errors.password?.message}</Field.ErrorMessage>
         </Field>
 
         <Field>
-          <Field.FieldLabel htmlFor="repassword">
-            <Field.FieldEmphasize>*</Field.FieldEmphasize>
+          <Field.Label htmlFor="repassword">
+            <Field.Emphasize>*</Field.Emphasize>
             비밀번호 확인
-          </Field.FieldLabel>
-          <Field.FieldBox>
+          </Field.Label>
+          <Field.Box>
             <Input
               id="repassword"
               type="password"
@@ -143,51 +252,51 @@ const SignupPage = () => {
               maxLength={20}
               state={errors.repassword?.message ? 'fail' : 'normal'}
               onKeyDown={preventEnter}
-              {...register(
-                'repassword',
-                validators.repassword(watch('password')),
-              )}
+              {...register('repassword', validators.repassword)}
             />
-          </Field.FieldBox>
-          <Field.FieldErrorMessage>
-            {errors.repassword?.message}
-          </Field.FieldErrorMessage>
+          </Field.Box>
+          <Field.ErrorMessage>{errors.repassword?.message}</Field.ErrorMessage>
         </Field>
 
         <Field>
-          <Field.FieldLabel htmlFor="nickname">
-            <Field.FieldEmphasize>*</Field.FieldEmphasize>
+          <Field.Label htmlFor="username">
+            <Field.Emphasize>*</Field.Emphasize>
             닉네임
-          </Field.FieldLabel>
-          <Field.FieldBox>
+          </Field.Label>
+          <Field.Box>
             <Input
-              id="nickname"
+              id="username"
               type="text"
               placeholder="닉네임을 입력해주세요."
               minLength={2}
               maxLength={16}
-              state={errors.nickname?.message ? 'fail' : 'normal'}
-              disabled={isNicknameConfirmed}
+              state={errors.username?.message ? 'fail' : 'normal'}
+              disabled={isUsernameConfirmed}
               onKeyDown={preventEnter}
-              {...register(
-                'nickname',
-                validators.nickname(isNicknameConfirmed),
-              )}
+              {...register('username', validators.username)}
             />
             <Button
               type="button"
               className={styles.button}
-              onClick={checkNickname}
-              disabled={isNicknameConfirmed}
+              onClick={() => requestCheckDuplicateUsername(watch('username'))}
+              disabled={
+                !watch('username')?.length ||
+                isDuplicateUsernamePending ||
+                !!errors.username?.message ||
+                isUsernameConfirmed
+              }
             >
-              중복 확인
+              {isDuplicateUsernamePending ? '확인 중...' : '중복 확인'}
             </Button>
-          </Field.FieldBox>
-          <Field.FieldErrorMessage>
-            {errors.nickname?.message}
-          </Field.FieldErrorMessage>
+          </Field.Box>
+          <Field.ErrorMessage>{errors.username?.message}</Field.ErrorMessage>
         </Field>
-        <Button className={styles.next_button}>다음 단계로</Button>
+        <Button
+          className={styles.next_button}
+          disabled={!isValid || isRequestSignupPending}
+        >
+          {isRequestSignupPending ? '...' : '다음 단계로'}
+        </Button>
       </form>
     </div>
   );
diff --git a/src/components/common/Field/Field.tsx b/src/components/common/Field/Field.tsx
index 4189e2c..2bccef6 100644
--- a/src/components/common/Field/Field.tsx
+++ b/src/components/common/Field/Field.tsx
@@ -1,25 +1,30 @@
+'use client';
+
 import clsx from 'clsx';
-import { PropsWithChildren } from 'react';
+import { ButtonHTMLAttributes, PropsWithChildren, useEffect } from 'react';
 
+import useTimer from '@/hooks/useTimer';
+import { timeFormatter } from '@/utils/formatter';
 import CautionIcon from '@/assets/icons/caution.svg';
 import Typo from '../Typo';
+import Button from '../Button';
 
 import styles from './Field.module.scss';
 
-interface FieldProps extends PropsWithChildren {
+interface ContainerProps extends PropsWithChildren {
   className?: string;
 }
 
-const Field = ({ className, children }: FieldProps) => {
+const Container = ({ className, children }: ContainerProps) => {
   return <div className={clsx(styles.container, className)}>{children}</div>;
 };
 
-interface FieldLabelProps extends PropsWithChildren {
+interface LabelProps extends PropsWithChildren {
   htmlFor?: string;
   className?: string;
 }
 
-const FieldLabel = ({ htmlFor, className, children }: FieldLabelProps) => {
+const Label = ({ htmlFor, className, children }: LabelProps) => {
   return (
     <label htmlFor={htmlFor} className={clsx(styles.label, className)}>
       {children}
@@ -27,23 +32,23 @@ const FieldLabel = ({ htmlFor, className, children }: FieldLabelProps) => {
   );
 };
 
-interface FieldEmphasizeProps extends PropsWithChildren {}
+interface EmphasizeProps extends PropsWithChildren {}
 
-const FieldEmphasize = ({ children }: FieldEmphasizeProps) => {
+const Emphasize = ({ children }: EmphasizeProps) => {
   return <em className={styles.emphasize}>{children}</em>;
 };
 
-interface FieldBoxProps extends PropsWithChildren {
+interface BoxProps extends PropsWithChildren {
   className?: string;
 }
 
-const FieldBox = ({ className, children }: FieldBoxProps) => {
+const Box = ({ className, children }: BoxProps) => {
   return <div className={clsx(styles.field_box, className)}>{children}</div>;
 };
 
-interface FieldErrorMessageProps extends PropsWithChildren {}
+interface ErrorMessageProps extends PropsWithChildren {}
 
-const FieldErrorMessage = ({ children }: FieldErrorMessageProps) => {
+const ErrorMessage = ({ children }: ErrorMessageProps) => {
   if (!children) return null;
 
   return (
@@ -56,9 +61,64 @@ const FieldErrorMessage = ({ children }: FieldErrorMessageProps) => {
   );
 };
 
-Field.FieldLabel = FieldLabel;
-Field.FieldEmphasize = FieldEmphasize;
-Field.FieldBox = FieldBox;
-Field.FieldErrorMessage = FieldErrorMessage;
+interface TimerButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+  isConfirm?: boolean;
+  timerDuration: number;
+  onClick?: () => void;
+  changeState: () => void;
+}
+
+const TimerButton = ({
+  isConfirm,
+  timerDuration,
+  onClick,
+  changeState,
+  ...props
+}: TimerButtonProps) => {
+  const { time, startTimer, changeTime, clearTimer } = useTimer({
+    waitTime: timerDuration,
+  });
+
+  const clickHandler = () => {
+    if (onClick) {
+      onClick();
+    }
+    changeTime(timerDuration);
+    startTimer();
+  };
+
+  useEffect(() => {
+    if (time <= 0) return;
+    startTimer();
+  }, [time, startTimer]);
+
+  useEffect(() => {
+    if (time > 0) return;
+
+    changeState();
+    clearTimer();
+  }, [time, changeState, clearTimer]);
+
+  useEffect(() => {
+    if (isConfirm) {
+      clearTimer();
+    }
+  }, [isConfirm, clearTimer]);
+
+  return (
+    <Button onClick={clickHandler} {...props}>
+      {time <= 0 ? '재요청' : timeFormatter(time)}
+    </Button>
+  );
+};
+
+const Field = Object.assign(Container, {
+  Label,
+  Emphasize,
+  Box,
+  ErrorMessage,
+  TimerButton,
+});
 
 export default Field;
diff --git a/src/constants/errorMessage.ts b/src/constants/errorMessage.ts
new file mode 100644
index 0000000..5dfe43b
--- /dev/null
+++ b/src/constants/errorMessage.ts
@@ -0,0 +1,28 @@
+const ERROR_MESSAGE = {
+  EMAIL: {
+    REQUIRED: '이메일은 필수 입력 사항입니다.',
+    MAX_LENGTH: '이메일은 최대 길이 30자 이하로 기입해야 합니다.',
+    FORMAT_IS_NOT_CORRECT: '이메일 주소 형식에 맞게 입력해주세요.',
+  },
+  PASSWORD: {
+    REQUIRED: '비밀번호는 필수 입력 사항입니다.',
+    MIN_LENGTH: '비밀번호는 최소 길이 8자 이상 기입해야 합니다.',
+    MAX_LENGTH: '비밀번호는 최대 길이 20자 이하로 기입해야 합니다.',
+    FORMAT_IS_NOT_CORRECT:
+      '영문 대/소문자, 특수문자, 숫자가 하나 이상 포함되어야 합니다.',
+    NOT_MATCH: '비밀번호가 일치하지 않습니다.',
+  },
+  USERNAME: {
+    REQUIRED: '닉네임은 필수 입력 사항입니다.',
+    MIN_LENGTH: '닉네임은 최소 2자 이상 작성해야 합니다.',
+    MAX_LENGTH: '닉네임은 최대 길이 16자 이하로 작성해야 합니다.',
+    FORMAT_IS_NOT_CORRECT:
+      '닉네임은 영어(소문자),한글,숫자, _, .만 사용 가능합니다.',
+  },
+  CODE: {
+    REQUIRED: '인증번호를 입력해 주세요.',
+    LENGTH: '인증번호는 7자리입니다.',
+  },
+};
+
+export { ERROR_MESSAGE };
diff --git a/src/constants/regExp.ts b/src/constants/regExp.ts
index 5267d9b..ea0f8c7 100644
--- a/src/constants/regExp.ts
+++ b/src/constants/regExp.ts
@@ -4,7 +4,6 @@ const REG_EXP = {
   PASSWORD:
     /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@$!%*?&.,])[A-Za-z\d$@$!%*?&.,]/,
   NICKNAME: /^[a-z0-9가-힣_.]{2,16}$/,
-  CONFIRM: /^\d+$/,
   ONLY_ENG_NUM: /^[a-zA-Z0-9]*$/,
 };
 
diff --git a/src/hooks/useSignUpMutation.ts b/src/hooks/useSignUpMutation.ts
new file mode 100644
index 0000000..5e74a41
--- /dev/null
+++ b/src/hooks/useSignUpMutation.ts
@@ -0,0 +1,148 @@
+import { UseFormReturn } from 'react-hook-form';
+
+import {
+  useSelfSignUpMutation,
+  useEamilConfirmMutation,
+  useConfirmUsernameDuplicate,
+  useSignupUser,
+} from '@/api/mutations/sign-up';
+import { ERROR_MESSAGE } from '@/constants/errorMessage';
+import {
+  CONFIRM_STATES,
+  ConfirmStateType,
+  ISignUpFormValueType,
+  SignUpTokenType,
+} from './useSignUpState';
+
+interface UseSignupMutationParamType {
+  formMethods: UseFormReturn<ISignUpFormValueType>;
+  changeConfirmState: (state: ConfirmStateType) => void;
+  changeUsernameState: (state: ConfirmStateType) => void;
+  changeSignupToken: (token: {
+    tokenName: keyof SignUpTokenType;
+    token: string;
+  }) => void;
+}
+
+const useSignupMutation = ({
+  formMethods,
+  changeConfirmState,
+  changeUsernameState,
+  changeSignupToken,
+}: UseSignupMutationParamType) => {
+  const { clearErrors, setError, watch, resetField } = formMethods;
+
+  const { isPending: isRequestEmailPending, mutate: requestCodeByEmail } =
+    useSelfSignUpMutation({
+      onSuccess: () => {
+        changeConfirmState(CONFIRM_STATES.REQUEST);
+        clearErrors('email');
+      },
+      onError: (data) => {
+        setError('email', {
+          type: 'validate',
+          message: data.message,
+        });
+      },
+    });
+
+  const { isPending: isRequestConfirmPending, mutate: requestConfirmCode } =
+    useEamilConfirmMutation({
+      onSuccess: (res) => {
+        changeSignupToken({
+          tokenName: 'emailToken',
+          token: res.result!.emailToken,
+        });
+        changeConfirmState(CONFIRM_STATES.CONFIRM);
+        clearErrors(['email', 'confirm']);
+      },
+      onError: (data) => {
+        setError('confirm', {
+          type: 'validate',
+          message: data.message,
+        });
+      },
+    });
+
+  const {
+    isPending: isDuplicateUsernamePending,
+    mutate: requestCheckDuplicateUsername,
+  } = useConfirmUsernameDuplicate({
+    onSuccess: (res) => {
+      changeSignupToken({
+        tokenName: 'usernameToken',
+        token: res.result!.usernameToken,
+      });
+      changeUsernameState(CONFIRM_STATES.CONFIRM);
+      clearErrors('username');
+    },
+    onError: (data) => {
+      setError('username', {
+        type: 'validate',
+        message: data.message,
+      });
+    },
+  });
+
+  const { isPending: isRequestSignupPending, mutate: requestSignupUser } =
+    useSignupUser({
+      onSuccess: async () => {},
+      onError: (err) => {
+        const [password] = watch('password');
+        if (
+          err.message.includes('이메일 형식') ||
+          err.message.includes('이메일 인증')
+        ) {
+          setError('email', { type: 'validate', message: err.message });
+          changeConfirmState('pending');
+          resetField('confirm');
+        }
+        if (err.message.includes('크기가 8에서')) {
+          setError('password', {
+            type: 'validate',
+            message:
+              password.length < 8
+                ? ERROR_MESSAGE.PASSWORD.MIN_LENGTH
+                : ERROR_MESSAGE.PASSWORD.MAX_LENGTH,
+          });
+        }
+        if (err.message.includes('비밀번호 형식')) {
+          setError('password', {
+            type: 'validate',
+            message: ERROR_MESSAGE.PASSWORD.FORMAT_IS_NOT_CORRECT,
+          });
+        }
+        if (err.message.includes('닉네임을 입력')) {
+          setError('username', {
+            type: 'required',
+            message: ERROR_MESSAGE.USERNAME.REQUIRED,
+          });
+          changeUsernameState('pending');
+        }
+        if (err.message.includes('닉네임의 최대 길이')) {
+          setError('username', {
+            type: 'maxLength',
+            message: ERROR_MESSAGE.USERNAME.MAX_LENGTH,
+          });
+          changeUsernameState('pending');
+        }
+        if (err.message.includes('닉네임 중복')) {
+          setError('username', { type: 'validate', message: err.message });
+          changeUsernameState('pending');
+        }
+      },
+    });
+
+  return {
+    isRequestEmailPending,
+    isRequestConfirmPending,
+    isDuplicateUsernamePending,
+    isRequestSignupPending,
+    requestCodeByEmail,
+    requestConfirmCode,
+    requestCheckDuplicateUsername,
+    requestSignupUser,
+  };
+};
+
+export default useSignupMutation;
diff --git a/src/hooks/useSignUpState.ts b/src/hooks/useSignUpState.ts
index e39386c..59c6ec9 100644
--- a/src/hooks/useSignUpState.ts
+++ b/src/hooks/useSignUpState.ts
@@ -1,131 +1,73 @@
-import { useForm } from 'react-hook-form';
 import { useState } from 'react';
 
-import { REG_EXP } from '@/constants/regExp';
-
-const CONFIRM_STATES = {
+export const CONFIRM_STATES = {
   PENDING: 'pending',
   REQUEST: 'request',
   CONFIRM: 'confirm',
+  RETRY: 'retry',
+} as const;
+
+export type ConfirmStateType =
+  (typeof CONFIRM_STATES)[keyof typeof CONFIRM_STATES];
+
+export type SignUpTokenType = {
+  emailToken: string;
+  usernameToken: string;
 };
 
 export interface ISignUpFormValueType {
   email: string;
   password: string;
   repassword: string;
-  nickname: string;
+  username: string;
   confirm: string;
 }
 
-const useSignUpState = <T extends ISignUpFormValueType>() => {
-  const [confirmState, setConfirmState] = useState(CONFIRM_STATES.PENDING);
-  const [nicknameState, setNicknameState] = useState(CONFIRM_STATES.PENDING);
+const useSignUpState = () => {
+  const [signupToken, setSignupToken] = useState<SignUpTokenType>({
+    emailToken: '',
+    usernameToken: '',
+  });
+  const [confirmState, setConfirmState] = useState<ConfirmStateType>(
+    CONFIRM_STATES.PENDING,
+  );
+  const [usernameState, setUsernameState] = useState<ConfirmStateType>(
+    CONFIRM_STATES.PENDING,
+  );
 
-  const formMethods = useForm<T | ISignUpFormValueType>();
-  const { watch, setError, clearErrors } = formMethods;
+  const changeConfirmState = (state: ConfirmStateType) =>
+    setConfirmState(state);
 
-  const isEmailConfirmed = confirmState === CONFIRM_STATES.CONFIRM;
-  const isEmailPending = confirmState === CONFIRM_STATES.PENDING;
-
-  const isNicknameConfirmed = nicknameState === CONFIRM_STATES.CONFIRM;
+  const changeUsernameState = (state: ConfirmStateType) =>
+    setUsernameState(state);
 
-  const requestConfirmNumber = async () => {
-    const email = watch('email');
-    if (!email) {
-      setError('email', {
-        type: 'required',
-        message: '이메일을 입력해주세요.',
-      });
-      return;
-    }
-    if (!REG_EXP.EMAIL.test(email)) {
-      setError('email', {
-        type: 'validate',
-        message: '이메일 형식이 알맞지 않습니다.',
-      });
-      return;
-    }
-    clearErrors('email');
-    setConfirmState(CONFIRM_STATES.REQUEST);
-  };
+  const changeSignupToken = ({
+    tokenName,
+    token,
+  }: {
+    tokenName: keyof SignUpTokenType;
+    token: string;
+  }) => setSignupToken((prev) => ({ ...prev, [tokenName]: token }));
 
-  const checkConfirmNumber = async () => {
-    const confirm = watch('confirm');
-    if (!confirm) {
-      setError('confirm', {
-        type: 'required',
-        message: '인증번호를 입력해주세요.',
-      });
-      return;
-    }
-    if (confirm.length < 6) {
-      setError('confirm', { type: 'min', message: '인증번호는 6자리 입니다.' });
-      return;
-    }
-    if (!REG_EXP.CONFIRM.test(confirm)) {
-      setError('confirm', {
-        type: 'validate',
-        message: '인증번호는 숫자로만 입력해야 합니다.',
-      });
-      return;
-    }
-    clearErrors('confirm');
-    setConfirmState(CONFIRM_STATES.CONFIRM);
-  };
-
-  const checkNickname = async () => {
-    const nickname = watch('nickname');
-    if (!nickname) {
-      setError('nickname', {
-        type: 'required',
-        message: '닉네임을 입력해주세요.',
-      });
-      return;
-    }
-    if (nickname.length < 2) {
-      setError('nickname', {
-        type: 'minLength',
-        message: '닉네임은 최소 2자 이상 작성해야 합니다.',
-      });
-      return;
-    }
-    if (nickname.length > 16) {
-      setError('nickname', {
-        type: 'maxLength',
-        message: '닉네임은 최대 길이 16자 이하로 작성해야 합니다.',
-      });
-      return;
-    }
-    if (!REG_EXP.NICKNAME.test(nickname)) {
-      setError('nickname', {
-        type: 'validate',
-        message: '닉네임은 영어(소문자),한글,숫자, _, .만 사용 가능합니다.',
-      });
-      return;
-    }
-
-    if (nickname === 'nickname') {
-      setError('nickname', {
-        type: 'validate',
-        message: '중복된 닉네임입니다.',
-      });
-      return;
-    }
+  const isEmailPending = confirmState === CONFIRM_STATES.PENDING;
+  const isEmailRequest = confirmState === CONFIRM_STATES.REQUEST;
+  const isEmailConfirmed = confirmState === CONFIRM_STATES.CONFIRM;
+  const isEmailRetry = confirmState === CONFIRM_STATES.RETRY;
 
-    clearErrors('nickname');
-    setNicknameState(CONFIRM_STATES.CONFIRM);
-  };
+  const isUsernameConfirmed = usernameState === CONFIRM_STATES.CONFIRM;
 
   return {
-    ...formMethods,
+    signupToken,
     confirmState,
-    nicknameState,
+    usernameState,
     isEmailConfirmed,
     isEmailPending,
-    isNicknameConfirmed,
-    requestConfirmNumber,
-    checkConfirmNumber,
-    checkNickname,
+    isEmailRequest,
+    isEmailRetry,
+    isUsernameConfirmed,
+    changeConfirmState,
+    changeUsernameState,
+    changeSignupToken,
   };
 };
 
diff --git a/src/hooks/useTimer.ts b/src/hooks/useTimer.ts
index 2b49098..7ebe38d 100644
--- a/src/hooks/useTimer.ts
+++ b/src/hooks/useTimer.ts
@@ -1,41 +1,45 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const ONE_SECOND = 1_000;
 
 interface UseTimerParams {
   waitTime: number;
 }
 
 const useTimer = ({ waitTime }: UseTimerParams) => {
-  const [time, setTime] = useState(waitTime);
+  const [time, setTime] = useState<number>(waitTime);
   const timerId = useRef<NodeJS.Timeout | null>(null);
 
-  const clearTimer = () => {
+  const changeTime = useCallback((nextTime: number) => setTime(nextTime), []);
+
+  const clearTimer = useCallback(() => {
     if (timerId.current) {
       clearInterval(timerId.current);
       timerId.current = null;
     }
-  };
+  }, []);
 
-  const startTimer = () => {
+  const startTimer = useCallback(() => {
     clearTimer();
 
     if (time > 0) {
       timerId.current = setInterval(() => {
-        setTime((prev) => {
-          if (prev <= 1000) {
+        setTime((prevTime) => {
+          if (prevTime <= ONE_SECOND) {
             clearTimer();
             return 0;
           }
-          return prev - 1000;
+          return prevTime - ONE_SECOND;
         });
-      }, 1000);
+      }, ONE_SECOND);
     }
-  };
+  }, [time, clearTimer]);
 
   useEffect(() => {
     return () => clearTimer();
-  }, []);
+  }, [clearTimer]);
 
-  return { time, startTimer, clearTimer };
+  return { time, startTimer, changeTime, clearTimer };
 };
 
 export default useTimer;
diff --git a/src/utils/formatter.ts b/src/utils/formatter.ts
index f542041..34a96cc 100644
--- a/src/utils/formatter.ts
+++ b/src/utils/formatter.ts
@@ -43,4 +43,23 @@ const compactTimeFormatter = (targetDate: string) => {
   return '방금 전';
 };
 
-export { compactNumberFormatter, digitNumberFormatter, compactTimeFormatter };
+const timeFormatter = (time: number) => {
+  const totalSeconds = time / 1_000; // 초로 변경
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = Math.floor(totalSeconds - minutes * 60);
+
+  if (minutes <= 0) {
+    const returnString = `0:${seconds.toString().padStart(2, '0')}`;
+    return returnString;
+  }
+
+  const returnString = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  return returnString;
+};
+
+export {
+  compactNumberFormatter,
+  digitNumberFormatter,
+  compactTimeFormatter,
+  timeFormatter,
+};
diff --git a/src/utils/manageToken.ts b/src/utils/manageToken.ts
new file mode 100644
index 0000000..aa04807
--- /dev/null
+++ b/src/utils/manageToken.ts
@@ -0,0 +1,40 @@
+const ACCESS_TOKEN = 'access_token';
+const REFRESH_TOKEN = 'refresh_token';
+
+export const saveAccessToken = (token: string) => {
+  if (token) {
+    localStorage.setItem(ACCESS_TOKEN, token);
+    return true;
+  }
+
+  throw new Error('Token string is empty!');
+};
+
+export const saveRefreshToken = (token: string) => {
+  if (token) {
+    localStorage.setItem(REFRESH_TOKEN, token);
+    return true;
+  }
+
+  throw new Error('Token string is empty!');
+};
+
+export const getAccessToken = () => {
+  const token = localStorage.getItem(ACCESS_TOKEN);
+
+  if (token) {
+    return token;
+  }
+
+  throw new Error('Access token is not erolled!');
+};
+
+export const getRefreshToken = () => {
+  const token = localStorage.getItem(REFRESH_TOKEN);
+
+  if (token) {
+    return token;
+  }
+
+  throw new Error('Refresh token is not erolled!');
+};
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
index 3db9b96..463580b 100644
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@@ -1,107 +1,96 @@
 import { FieldValues, RegisterOptions } from 'react-hook-form';
+
 import { REG_EXP } from '@/constants/regExp';
+import { ERROR_MESSAGE } from '@/constants/errorMessage';
 
-const email: (isRequested: boolean) => RegisterOptions<FieldValues> = (
-  isRequested,
-) => ({
-  required: '이메일은 필수 입력 사항입니다.',
+const email: RegisterOptions<FieldValues> = {
+  required: ERROR_MESSAGE.EMAIL.REQUIRED,
   maxLength: {
     value: 30,
-    message: '이메일은 최대 길이 30자 이하로 기입해야 합니다.',
+    message: ERROR_MESSAGE.EMAIL.MAX_LENGTH,
   },
   validate: {
     emailValidate: (v) =>
-      REG_EXP.EMAIL.test(v) || '이메일 주소 형식에 맞게 입력해주세요.',
-    isRequestConfirmedValidate: () =>
-      isRequested || '이메일 인증을 완료해 주세요.',
+      REG_EXP.EMAIL.test(v) || ERROR_MESSAGE.EMAIL.FORMAT_IS_NOT_CORRECT,
   },
-});
+};
 
-const password: () => RegisterOptions<FieldValues> = () => ({
-  required: '비밀번호는 필수 입력 사항입니다.',
+const password: RegisterOptions<FieldValues> = {
+  required: ERROR_MESSAGE.PASSWORD.REQUIRED,
   minLength: {
     value: 8,
-    message: '비밀번호는 최소 길이 8자 이상 기입해야 합니다.',
+    message: ERROR_MESSAGE.PASSWORD.MIN_LENGTH,
   },
   maxLength: {
     value: 20,
-    message: '비밀번호는 최대 길이 20자 이하로 기입해야 합니다.',
+    message: ERROR_MESSAGE.PASSWORD.MAX_LENGTH,
   },
   validate: {
     passwordValidate: (v) =>
-      REG_EXP.PASSWORD.test(v) ||
-      '영문 대/소문자, 특수문자, 숫자가 하나 이상 포함되어야 합니다.',
-  },
-});
+      REG_EXP.PASSWORD.test(v) || ERROR_MESSAGE.PASSWORD.FORMAT_IS_NOT_CORRECT,
+    test: (v, allVal) => {
+      if (allVal.repassword !== v) {
+        return ERROR_MESSAGE.PASSWORD.NOT_MATCH;
+      }
 
-const repassword: (pw: string) => RegisterOptions<FieldValues> = (pw) => {
-  return {
-    required: '비밀번호 확인은 필수 입력 사항입니다.',
-    minLength: {
-      value: 8,
-      message: '비밀번호는 최소 길이 8자 이상으로 작성해야 합니다.',
+      return true;
     },
-    maxLength: {
-      value: 20,
-      message: '비밀번호는 최대 길이 20자 이하로 작성해야 합니다.',
-    },
-    validate: {
-      passwordValidate: (v) =>
-        REG_EXP.PASSWORD.test(v) ||
-        '영문 대/소문자, 특수문자, 숫자가 하나 이상 포함되어야 합니다.',
-      test: (v) => {
-        if (pw !== v) {
-          return '비밀번호가 일치하지 않습니다.';
-        }
+  },
+};
+
+const repassword: RegisterOptions<FieldValues> = {
+  required: ERROR_MESSAGE.PASSWORD.REQUIRED,
+  minLength: {
+    value: 8,
+    message: ERROR_MESSAGE.PASSWORD.MIN_LENGTH,
+  },
+  maxLength: {
+    value: 20,
+    message: ERROR_MESSAGE.PASSWORD.MAX_LENGTH,
+  },
+  validate: {
+    passwordValidate: (v) =>
+      REG_EXP.PASSWORD.test(v) || ERROR_MESSAGE.PASSWORD.FORMAT_IS_NOT_CORRECT,
+    test: (v, allVal) => {
+      if (allVal.password !== v) {
+        return ERROR_MESSAGE.PASSWORD.NOT_MATCH;
+      }
 
-        return true;
-      },
+      return true;
     },
-  };
+  },
 };
 
-const nickname: (isConfirmed: boolean) => RegisterOptions<FieldValues> = (
-  isConfirmed,
-) => ({
-  required: '닉네임은 필수 입력 사항입니다.',
+const username: RegisterOptions<FieldValues> = {
+  required: ERROR_MESSAGE.USERNAME.REQUIRED,
   minLength: {
     value: 2,
-    message: '닉네임은 최소 2자 이상 작성해야 합니다.',
+    message: ERROR_MESSAGE.USERNAME.MIN_LENGTH,
   },
   maxLength: {
     value: 16,
-    message: '닉네임은 최대 길이 16자 이하로 작성해야 합니다.',
+    message: ERROR_MESSAGE.USERNAME.MAX_LENGTH,
   },
   validate: {
     nicknameValidate: (v) =>
-      REG_EXP.NICKNAME.test(v) ||
-      '닉네임은 영어(소문자),한글,숫자, _, .만 사용 가능합니다.',
-    nicknameConfirmValidate: () =>
-      isConfirmed || '닉네임 중복 확인을 해 주세요.',
+      REG_EXP.NICKNAME.test(v) || ERROR_MESSAGE.USERNAME.FORMAT_IS_NOT_CORRECT,
   },
-});
+};
 
-const confirm: (isConfirmed: boolean) => RegisterOptions<FieldValues> = (
-  isConfirmed,
-) => ({
-  required: '인증을 완료해 주세요.',
+const confirm: RegisterOptions<FieldValues> = {
+  required: ERROR_MESSAGE.CODE.REQUIRED,
   minLength: {
-    value: 6,
-    message: '인증번호는 6자리입니다.',
+    value: 7,
+    message: ERROR_MESSAGE.CODE.LENGTH,
   },
-  validate: {
-    confirmValidate: (v) =>
-      REG_EXP.CONFIRM.test(v) || '인증번호는 숫자만 입력해야 합니다.',
-    isConfirmedValidate: () => isConfirmed || '인증을 완료해 주세요.',
-  },
-});
+};
 
-const VALIDATOR = {
+const validators = {
   email,
-  nickname,
+  username,
   password,
   repassword,
   confirm,
 };
 
-export default VALIDATOR;
+export default validators;