diff --git a/src/app/login/_temp/login-temp-actions.tsx b/src/app/login/_temp/login-temp-actions.tsx
index 4805be3e..e210e745 100644
--- a/src/app/login/_temp/login-temp-actions.tsx
+++ b/src/app/login/_temp/login-temp-actions.tsx
@@ -1,18 +1,16 @@
 'use client';
 
 import { MyPageActionButton } from '@/components/pages/user/mypage/mypage-setting-button';
-import { useLogout, useRefresh, useWithdraw } from '@/hooks/use-auth';
+import { useLogout, useWithdraw } from '@/hooks/use-auth';
 
 const LoginTempActions = () => {
   const logout = useLogout();
   const withdraw = useWithdraw();
-  const refresh = useRefresh();
 
   return (
     <div className='flex-center'>
       <MyPageActionButton onClick={logout}>로그아웃</MyPageActionButton>
       <MyPageActionButton onClick={withdraw}>회원탈퇴</MyPageActionButton>
-      <MyPageActionButton onClick={refresh}>refresh</MyPageActionButton>
     </div>
   );
 };
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 393549aa..634d56f0 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,7 +1,7 @@
 import { cookies } from 'next/headers';
 
 import { Icon } from '@/components/icon';
-import { LoginForm, LoginToastEffect } from '@/components/pages/login';
+import { LoginForm, LoginToastEffect } from '@/components/pages/auth';
 import { AuthSwitch } from '@/components/shared';
 
 import LoginTempActions from './_temp/login-temp-actions';
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 20aca9bb..4c1cd862 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@/components/icon';
-import { SignupForm } from '@/components/pages/signup';
+import { SignupForm } from '@/components/pages/auth';
 import { AuthSwitch } from '@/components/shared';
 
 const SignupPage = () => {
diff --git a/src/components/pages/auth/auth-button/index.tsx b/src/components/pages/auth/auth-button/index.tsx
new file mode 100644
index 00000000..1d730e47
--- /dev/null
+++ b/src/components/pages/auth/auth-button/index.tsx
@@ -0,0 +1,23 @@
+import { type AnyFormState } from '@tanstack/react-form';
+
+import { Button } from '@/components/ui';
+
+interface Props {
+  state: AnyFormState;
+  type: 'login' | 'signup';
+  canSubmitAll?: boolean;
+}
+
+export const AuthSubmitButton = ({ state, type, canSubmitAll = true }: Props) => {
+  const { canSubmit, isSubmitting, isPristine } = state;
+
+  const disabled = !canSubmit || isSubmitting || isPristine || !canSubmitAll;
+
+  const buttonName = type === 'login' ? '로그인하기' : '회원가입하기';
+
+  return (
+    <Button disabled={disabled} size='md' type='submit' variant='primary'>
+      {buttonName}
+    </Button>
+  );
+};
diff --git a/src/components/pages/auth/fields/email-field/index.tsx b/src/components/pages/auth/fields/email-field/index.tsx
new file mode 100644
index 00000000..59cada87
--- /dev/null
+++ b/src/components/pages/auth/fields/email-field/index.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import { type AnyFieldApi } from '@tanstack/react-form';
+
+import { FormInput } from '@/components/shared';
+import { getHintMessage } from '@/lib/auth/utils';
+import { cn } from '@/lib/utils';
+
+interface AvailabilityButtonProps {
+  onClick: () => void;
+  disabled: boolean;
+}
+
+type EmailCheck = {
+  hint?: string;
+  state: { status: 'idle' | 'checking' | 'available' | 'unavailable' | 'error' };
+  isChecking: boolean;
+  check: (value: string) => void | Promise<void>;
+  reset: () => void;
+};
+
+interface Props {
+  field: AnyFieldApi;
+  withAvailabilityCheck?: boolean;
+  emailCheck?: EmailCheck;
+}
+
+const AvailabilityButton = ({ onClick, disabled }: AvailabilityButtonProps) => {
+  return (
+    <button
+      className={cn(
+        'text-text-xs-semibold absolute top-4 right-5 rounded-lg bg-gray-100 px-3 py-1 text-gray-800',
+        disabled && '!cursor-not-allowed',
+      )}
+      aria-disabled={disabled}
+      aria-label='이메일 중복 확인'
+      disabled={disabled}
+      type='button'
+      onClick={onClick}
+    >
+      중복 확인
+    </button>
+  );
+};
+
+export const EmailField = ({ field, withAvailabilityCheck = false, emailCheck }: Props) => {
+  const hintMessage = getHintMessage(field);
+
+  if (!withAvailabilityCheck || !emailCheck) {
+    return (
+      <FormInput
+        hintMessage={hintMessage}
+        inputProps={{
+          type: 'email',
+          autoComplete: 'email',
+          placeholder: '이메일을 입력해주세요',
+          value: field.state.value,
+          onChange: (e) => field.handleChange(e.target.value),
+        }}
+        labelName='이메일'
+      />
+    );
+  }
+
+  const trimmedValue = field.state.value.trim();
+  const hasValidationError = field.state.meta.errors.length > 0;
+
+  const availabilityButtonDisabled = !trimmedValue || hasValidationError || emailCheck.isChecking;
+
+  const iconButton = (
+    <AvailabilityButton
+      disabled={availabilityButtonDisabled}
+      onClick={() => {
+        void emailCheck.check(trimmedValue);
+      }}
+    />
+  );
+
+  return (
+    <FormInput
+      availabilityHint={emailCheck.hint}
+      availabilityStatus={emailCheck.state}
+      hintMessage={hintMessage}
+      inputProps={{
+        type: 'email',
+        autoComplete: 'email',
+        placeholder: '이메일을 입력해주세요',
+        value: field.state.value,
+        iconButton: iconButton,
+        onChange: (e) => {
+          field.handleChange(e.target.value);
+          emailCheck.reset();
+        },
+      }}
+      labelName='이메일'
+    />
+  );
+};
diff --git a/src/components/pages/auth/fields/index.ts b/src/components/pages/auth/fields/index.ts
new file mode 100644
index 00000000..23ab7920
--- /dev/null
+++ b/src/components/pages/auth/fields/index.ts
@@ -0,0 +1,4 @@
+export { EmailField } from './email-field';
+export { NicknameField } from './nickname-field';
+export { PasswordField } from './password-field';
+export { TermsAgreementField } from './termsAgreement-field';
diff --git a/src/components/pages/auth/fields/nickname-field/index.tsx b/src/components/pages/auth/fields/nickname-field/index.tsx
new file mode 100644
index 00000000..f0d1c438
--- /dev/null
+++ b/src/components/pages/auth/fields/nickname-field/index.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import { type AnyFieldApi } from '@tanstack/react-form';
+
+import { FormInput } from '@/components/shared';
+import { getHintMessage } from '@/lib/auth/utils';
+import { cn } from '@/lib/utils';
+
+interface AvailabilityButtonProps {
+  onClick: () => void;
+  disabled: boolean;
+}
+
+type NicknameCheck = {
+  hint?: string;
+  state: { status: 'idle' | 'checking' | 'available' | 'unavailable' | 'error' };
+  isChecking: boolean;
+  check: (value: string) => void | Promise<void>;
+  reset: () => void;
+};
+
+interface Props {
+  field: AnyFieldApi;
+  nicknameCheck: NicknameCheck;
+}
+
+const AvailabilityButton = ({ onClick, disabled }: AvailabilityButtonProps) => {
+  return (
+    <button
+      className={cn(
+        'text-text-xs-semibold absolute top-4 right-5 rounded-lg bg-gray-100 px-3 py-1 text-gray-800',
+        disabled && '!cursor-not-allowed',
+      )}
+      aria-disabled={disabled}
+      aria-label='닉네임 중복 확인'
+      disabled={disabled}
+      type='button'
+      onClick={onClick}
+    >
+      중복 확인
+    </button>
+  );
+};
+
+export const NicknameField = ({ field, nicknameCheck }: Props) => {
+  const hintMessage = getHintMessage(field);
+
+  const trimmedValue = field.state.value.trim();
+  const hasValidationError = field.state.meta.errors.length > 0;
+
+  const availabilityButtonDisabled =
+    !trimmedValue || hasValidationError || nicknameCheck.isChecking;
+
+  const iconButton = (
+    <AvailabilityButton
+      disabled={availabilityButtonDisabled}
+      onClick={() => {
+        void nicknameCheck.check(trimmedValue);
+      }}
+    />
+  );
+
+  return (
+    <FormInput
+      availabilityHint={nicknameCheck.hint}
+      availabilityStatus={nicknameCheck.state}
+      hintMessage={hintMessage}
+      inputProps={{
+        type: 'text',
+        autoComplete: 'nickname',
+        placeholder: '닉네임을 입력해주세요',
+        value: field.state.value,
+        iconButton: iconButton,
+        onChange: (e) => {
+          field.handleChange(e.target.value);
+          nicknameCheck.reset();
+        },
+      }}
+      labelName='닉네임'
+    />
+  );
+};
diff --git a/src/components/pages/auth/fields/password-field/index.tsx b/src/components/pages/auth/fields/password-field/index.tsx
new file mode 100644
index 00000000..be014cf0
--- /dev/null
+++ b/src/components/pages/auth/fields/password-field/index.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from 'react';
+
+import { type AnyFieldApi } from '@tanstack/react-form';
+
+import { Icon } from '@/components/icon';
+import { FormInput } from '@/components/shared';
+import { getHintMessage } from '@/lib/auth/utils';
+
+interface PasswordToggleButtonProps {
+  isVisible: boolean;
+  onToggle: () => void;
+}
+
+interface Props {
+  field: AnyFieldApi;
+  passwordType: 'loginPassword' | 'signupPassword' | 'confirmPassword';
+}
+
+const PasswordToggleButton = ({ isVisible, onToggle }: PasswordToggleButtonProps) => {
+  return (
+    <button
+      className='absolute top-4 right-5 h-6 w-6'
+      aria-label={isVisible ? '비밀번호 숨기기' : '비밀번호 보기'}
+      tabIndex={-1}
+      type='button'
+      onClick={onToggle}
+    >
+      <Icon id={isVisible ? 'visibility-true' : 'visibility-false'} className='text-gray-600' />
+    </button>
+  );
+};
+
+export const PasswordField = ({ field, passwordType }: Props) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const hintMessage = getHintMessage(field);
+
+  const isConfirmPassword = passwordType === 'confirmPassword';
+  const isLogin = passwordType === 'loginPassword';
+
+  const handleToggle = () => {
+    setIsVisible((prev) => !prev);
+  };
+
+  const iconButton = <PasswordToggleButton isVisible={isVisible} onToggle={handleToggle} />;
+
+  return (
+    <FormInput
+      hintMessage={hintMessage}
+      inputProps={{
+        type: isVisible ? 'text' : 'password',
+        autoComplete: isLogin ? 'current-password' : 'new-password',
+        placeholder: !isConfirmPassword
+          ? '비밀번호를 입력해주세요'
+          : '비밀번호를 한 번 더 입력해주세요',
+        value: field.state.value,
+        iconButton: iconButton,
+        onChange: (e) => field.handleChange(e.target.value),
+        onBlur: () => field.handleBlur(),
+      }}
+      labelName={!isConfirmPassword ? '비밀번호' : '비밀번호 확인'}
+    />
+  );
+};
diff --git a/src/components/pages/auth/fields/termsAgreement-field/index.tsx b/src/components/pages/auth/fields/termsAgreement-field/index.tsx
new file mode 100644
index 00000000..c17c8eb0
--- /dev/null
+++ b/src/components/pages/auth/fields/termsAgreement-field/index.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { type AnyFieldApi } from '@tanstack/react-form';
+
+import { Icon } from '@/components/icon';
+import { useModal } from '@/components/ui';
+import { cn } from '@/lib/utils';
+
+import { SignupAgreementModal } from '../../signup/signup-agreement-modal';
+
+interface Props {
+  field: AnyFieldApi;
+}
+
+export const TermsAgreementField = ({ field }: Props) => {
+  const { open } = useModal();
+  const checked = Boolean(field.state.value);
+
+  return (
+    <div className='flex w-full items-center justify-between'>
+      <label className='flex-center cursor-pointer'>
+        <input
+          className='peer sr-only'
+          checked={checked}
+          name={field.name}
+          type='checkbox'
+          onChange={(e) => field.handleChange(e.target.checked)}
+        />
+        <Icon id='check' className={cn(checked ? 'text-mint-500' : 'text-gray-500')} />
+        <span className='text-text-sm-medium text-gray-700'>서비스 이용약관에 동의합니다.</span>
+      </label>
+
+      <button
+        className='text-text-sm-medium text-gray-500 underline'
+        type='button'
+        onClick={() => open(<SignupAgreementModal />)}
+      >
+        보기
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/pages/auth/index.ts b/src/components/pages/auth/index.ts
new file mode 100644
index 00000000..3d1e49f7
--- /dev/null
+++ b/src/components/pages/auth/index.ts
@@ -0,0 +1,3 @@
+export { LoginForm } from './login/login-form';
+export { LoginToastEffect } from './login/login-toast-effect';
+export { SignupForm } from './signup/signup-form';
diff --git a/src/components/pages/auth/login/login-form/index.tsx b/src/components/pages/auth/login/login-form/index.tsx
new file mode 100644
index 00000000..538cb80c
--- /dev/null
+++ b/src/components/pages/auth/login/login-form/index.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { useForm, useStore } from '@tanstack/react-form';
+
+import { EmailField, PasswordField } from '@/components/pages/auth/fields';
+import { useLogin } from '@/hooks/use-auth';
+import { loginSchema } from '@/lib/schema/auth';
+
+import { AuthSubmitButton } from '../../auth-button';
+
+export const LoginForm = () => {
+  const { handleLogin, loginError, clearLoginError } = useLogin();
+
+  const form = useForm({
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+    validators: {
+      onSubmit: loginSchema,
+      onChange: loginSchema,
+    },
+    onSubmit: async ({ value, formApi }) => {
+      const payload = {
+        email: value.email,
+        password: value.password,
+      };
+
+      await handleLogin(payload, formApi);
+    },
+  });
+
+  const { email, password } = useStore(form.baseStore, (state) => state.values);
+
+  useEffect(() => {
+    clearLoginError();
+  }, [email, password, clearLoginError]);
+
+  return (
+    <form
+      className='flex-col-center w-full gap-8'
+      onSubmit={(e) => {
+        e.preventDefault();
+        void form.handleSubmit();
+      }}
+    >
+      <div className='flex-col-center w-full gap-4'>
+        <form.Field children={(field) => <EmailField field={field} />} name='email' />
+        <form.Field
+          children={(field) => <PasswordField field={field} passwordType='loginPassword' />}
+          name='password'
+        />
+      </div>
+
+      <div className='flex-col-center w-full gap-2'>
+        <form.Subscribe
+          children={(state) => <AuthSubmitButton state={state} type='login' />}
+          selector={(state) => state}
+        />
+        {loginError && <p className='text-error-500 text-text-sm-medium'>{loginError}</p>}
+      </div>
+    </form>
+  );
+};
diff --git a/src/components/pages/login/login-toast-effect/index.tsx b/src/components/pages/auth/login/login-toast-effect/index.tsx
similarity index 100%
rename from src/components/pages/login/login-toast-effect/index.tsx
rename to src/components/pages/auth/login/login-toast-effect/index.tsx
diff --git a/src/components/pages/signup/signup-agreement-modal/index.tsx b/src/components/pages/auth/signup/signup-agreement-modal/index.tsx
similarity index 100%
rename from src/components/pages/signup/signup-agreement-modal/index.tsx
rename to src/components/pages/auth/signup/signup-agreement-modal/index.tsx
diff --git a/src/components/pages/auth/signup/signup-form/index.tsx b/src/components/pages/auth/signup/signup-form/index.tsx
new file mode 100644
index 00000000..cb0c6cb2
--- /dev/null
+++ b/src/components/pages/auth/signup/signup-form/index.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { useForm } from '@tanstack/react-form';
+
+import { API } from '@/api';
+import { useSignup } from '@/hooks/use-auth';
+import { useAvailabilityCheck } from '@/hooks/use-auth/use-auth-availabilityCheck';
+import { signupSchema } from '@/lib/schema/auth';
+
+import { AuthSubmitButton } from '../../auth-button';
+import { EmailField, NicknameField, PasswordField, TermsAgreementField } from '../../fields';
+
+export const SignupForm = () => {
+  const signup = useSignup();
+
+  const form = useForm({
+    defaultValues: {
+      email: '',
+      nickname: '',
+      password: '',
+      confirmPassword: '',
+      termsAgreement: false,
+    },
+    validators: {
+      onChange: signupSchema,
+      onSubmit: signupSchema,
+    },
+    onSubmit: async ({ value, formApi }) => {
+      const payload = {
+        email: value.email,
+        password: value.password,
+        nickName: value.nickname,
+      };
+
+      await signup(payload, formApi);
+    },
+  });
+
+  const emailCheck = useAvailabilityCheck(
+    API.userService.getEmailAvailability,
+    (email) => ({ email }),
+    {
+      checking: '확인 중...',
+      available: '사용 가능한 이메일입니다.',
+      unavailable: '이미 사용 중인 이메일입니다.',
+      error: '중복 확인 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+    },
+  );
+
+  const nicknameCheck = useAvailabilityCheck(
+    API.userService.getNicknameAvailability,
+    (nickName) => ({ nickName }),
+    {
+      checking: '확인 중...',
+      available: '사용 가능한 닉네임입니다.',
+      unavailable: '이미 사용 중인 닉네임입니다.',
+      error: '중복 확인 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+    },
+  );
+
+  const canSubmitAll = emailCheck.isAvailable && nicknameCheck.isAvailable;
+
+  return (
+    <form
+      className='flex-col-center w-full gap-8'
+      onSubmit={(e) => {
+        e.preventDefault();
+        void form.handleSubmit();
+      }}
+    >
+      <div className='flex-col-center w-full gap-4'>
+        <form.Field
+          children={(field) => (
+            <EmailField emailCheck={emailCheck} field={field} withAvailabilityCheck />
+          )}
+          name='email'
+        />
+        <form.Field
+          children={(field) => <NicknameField field={field} nicknameCheck={nicknameCheck} />}
+          name='nickname'
+        />
+
+        <form.Field
+          children={(field) => <PasswordField field={field} passwordType='signupPassword' />}
+          name='password'
+        />
+        <form.Field
+          children={(field) => <PasswordField field={field} passwordType='confirmPassword' />}
+          name='confirmPassword'
+        />
+      </div>
+
+      <div className='flex-col-center w-full gap-4'>
+        <form.Field
+          children={(field) => <TermsAgreementField field={field} />}
+          name='termsAgreement'
+        />
+
+        <form.Subscribe
+          children={(state) => (
+            <AuthSubmitButton canSubmitAll={canSubmitAll} state={state} type='signup' />
+          )}
+          selector={(state) => state}
+        />
+      </div>
+    </form>
+  );
+};
diff --git a/src/components/pages/login/index.ts b/src/components/pages/login/index.ts
deleted file mode 100644
index bc0bcb1b..00000000
--- a/src/components/pages/login/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { LoginForm } from './login-form';
-export { LoginToastEffect } from './login-toast-effect';
diff --git a/src/components/pages/login/login-form/index.tsx b/src/components/pages/login/login-form/index.tsx
deleted file mode 100644
index b2783ff0..00000000
--- a/src/components/pages/login/login-form/index.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-'use client';
-
-import { type AnyFieldApi, useForm } from '@tanstack/react-form';
-
-import { FormInput } from '@/components/shared';
-import { Button } from '@/components/ui';
-import { useLogin } from '@/hooks/use-auth';
-import { loginSchema } from '@/lib/schema/auth';
-
-const getHintMessage = (field: AnyFieldApi) => {
-  const {
-    meta: { errors, isTouched },
-  } = field.state;
-  const { submissionAttempts } = field.form.state;
-
-  const firstError = errors[0] as { message?: string } | undefined;
-  const showError = isTouched || submissionAttempts > 0;
-
-  return showError ? firstError?.message : undefined;
-};
-
-export const LoginForm = () => {
-  const login = useLogin();
-
-  const form = useForm({
-    defaultValues: {
-      email: '',
-      password: '',
-    },
-    validators: {
-      onSubmit: loginSchema,
-      onChange: loginSchema,
-    },
-    onSubmit: async ({ value, formApi }) => {
-      const payload = {
-        email: value.email,
-        password: value.password,
-      };
-
-      await login(payload, formApi);
-    },
-  });
-
-  return (
-    <form
-      className='flex-col-center w-full gap-8'
-      onSubmit={(e) => {
-        e.preventDefault();
-        void form.handleSubmit();
-      }}
-    >
-      <div className='flex-col-center w-full gap-4'>
-        <form.Field name='email'>
-          {(field) => {
-            const hintMessage = getHintMessage(field);
-
-            return (
-              <FormInput
-                hintMessage={hintMessage}
-                inputProps={{
-                  type: 'email',
-                  autoComplete: 'email',
-                  placeholder: '이메일을 입력해주세요',
-                  value: field.state.value,
-                  onChange: (e) => field.handleChange(e.target.value),
-                }}
-                labelName='이메일'
-              />
-            );
-          }}
-        </form.Field>
-
-        <form.Field name='password'>
-          {(field) => {
-            const hintMessage = getHintMessage(field);
-
-            return (
-              <FormInput
-                hintMessage={hintMessage}
-                inputProps={{
-                  type: 'password',
-                  autoComplete: 'current-password',
-                  placeholder: '비밀번호를 입력해주세요',
-                  value: field.state.value,
-                  onChange: (e) => field.handleChange(e.target.value),
-                }}
-                labelName='비밀번호'
-              />
-            );
-          }}
-        </form.Field>
-      </div>
-
-      <form.Subscribe
-        selector={(state) => ({
-          canSubmit: state.canSubmit,
-          isSubmitting: state.isSubmitting,
-          isPristine: state.isPristine,
-        })}
-      >
-        {({ canSubmit, isSubmitting, isPristine }) => {
-          const disabled = !canSubmit || isSubmitting || isPristine;
-
-          return (
-            <Button disabled={disabled} size='md' type='submit' variant='primary'>
-              로그인하기
-            </Button>
-          );
-        }}
-      </form.Subscribe>
-    </form>
-  );
-};
diff --git a/src/components/pages/signup/index.ts b/src/components/pages/signup/index.ts
deleted file mode 100644
index 93e783fa..00000000
--- a/src/components/pages/signup/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SignupForm } from './signup-form';
diff --git a/src/components/pages/signup/signup-form/index.tsx b/src/components/pages/signup/signup-form/index.tsx
deleted file mode 100644
index bd2bbdc4..00000000
--- a/src/components/pages/signup/signup-form/index.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-'use client';
-
-import { type AnyFieldApi, useForm } from '@tanstack/react-form';
-
-import { API } from '@/api';
-import { Icon } from '@/components/icon';
-import { FormInput } from '@/components/shared';
-import { Button, useModal } from '@/components/ui';
-import { useSignup } from '@/hooks/use-auth';
-import { useAvailabilityCheck } from '@/hooks/use-auth/use-auth-availabilityCheck';
-import { signupSchema } from '@/lib/schema/auth';
-import { cn } from '@/lib/utils';
-
-import { SignupAgreementModal } from '../signup-agreement-modal';
-
-const getHintMessage = (field: AnyFieldApi) => {
-  const {
-    meta: { errors, isTouched },
-  } = field.state;
-  const { submissionAttempts } = field.form.state;
-
-  const firstError = errors[0] as { message?: string } | undefined;
-  const showError = isTouched || submissionAttempts > 0;
-
-  return showError ? firstError?.message : undefined;
-};
-
-export const SignupForm = () => {
-  const signup = useSignup();
-  const { open } = useModal();
-
-  const form = useForm({
-    defaultValues: {
-      email: '',
-      nickname: '',
-      password: '',
-      confirmPassword: '',
-      termsAgreement: false,
-    },
-    validators: {
-      onChange: signupSchema,
-      onSubmit: signupSchema,
-    },
-    onSubmit: async ({ value, formApi }) => {
-      const payload = {
-        email: value.email,
-        password: value.password,
-        nickName: value.nickname,
-      };
-
-      await signup(payload, formApi);
-    },
-  });
-
-  const emailCheck = useAvailabilityCheck(
-    API.userService.getEmailAvailability,
-    (email) => ({ email }),
-    {
-      checking: '확인 중...',
-      available: '사용 가능한 이메일입니다.',
-      unavailable: '이미 사용 중인 이메일입니다.',
-      error: '중복 확인 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-    },
-  );
-
-  const nicknameCheck = useAvailabilityCheck(
-    API.userService.getNicknameAvailability,
-    (nickName) => ({ nickName }),
-    {
-      checking: '확인 중...',
-      available: '사용 가능한 닉네임입니다.',
-      unavailable: '이미 사용 중인 닉네임입니다.',
-      error: '중복 확인 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-    },
-  );
-
-  const canSubmit = emailCheck.isAvailable && nicknameCheck.isAvailable;
-
-  return (
-    <form
-      className='flex-col-center w-full gap-8'
-      onSubmit={(e) => {
-        e.preventDefault();
-        void form.handleSubmit();
-      }}
-    >
-      <div className='flex-col-center w-full gap-4'>
-        <form.Field name='email'>
-          {(field) => {
-            const validationHint = getHintMessage(field);
-
-            const trimmedValue = field.state.value.trim();
-            const hasValidationError = field.state.meta.errors.length > 0;
-
-            const availabilityButtonDisabled =
-              !trimmedValue || hasValidationError || emailCheck.isChecking;
-
-            return (
-              <FormInput
-                availabilityButtonDisabled={availabilityButtonDisabled}
-                availabilityHint={emailCheck.hint}
-                availabilityStatus={emailCheck.state}
-                hintMessage={validationHint}
-                inputProps={{
-                  type: 'email',
-                  autoComplete: 'email',
-                  placeholder: '이메일을 입력해주세요',
-                  value: field.state.value,
-                  onChange: (e) => {
-                    field.handleChange(e.target.value);
-                    emailCheck.reset();
-                  },
-                }}
-                labelName='이메일'
-                onClick={() => {
-                  void emailCheck.check(trimmedValue);
-                  console.log(nicknameCheck.state);
-                }}
-              />
-            );
-          }}
-        </form.Field>
-
-        <form.Field name='nickname'>
-          {(field) => {
-            const validationHint = getHintMessage(field);
-
-            const trimmedValue = field.state.value.trim();
-            const hasValidationError = field.state.meta.errors.length > 0;
-
-            const availabilityButtonDisabled =
-              !trimmedValue || hasValidationError || nicknameCheck.isChecking;
-
-            return (
-              <FormInput
-                availabilityButtonDisabled={availabilityButtonDisabled}
-                availabilityHint={nicknameCheck.hint}
-                availabilityStatus={nicknameCheck.state}
-                hintMessage={validationHint}
-                inputProps={{
-                  autoComplete: 'username',
-                  placeholder: '닉네임을 입력해주세요',
-                  value: field.state.value,
-                  onChange: (e) => {
-                    field.handleChange(e.target.value);
-                    nicknameCheck.reset();
-                  },
-                }}
-                labelName='닉네임'
-                onClick={() => {
-                  nicknameCheck.check(trimmedValue);
-                  console.log(nicknameCheck.state);
-                }}
-              />
-            );
-          }}
-        </form.Field>
-
-        <form.Field name='password'>
-          {(field) => {
-            const hintMessage = getHintMessage(field);
-
-            return (
-              <FormInput
-                hintMessage={hintMessage}
-                inputProps={{
-                  type: 'password',
-                  autoComplete: 'new-password',
-                  placeholder: '비밀번호를 입력해주세요',
-                  value: field.state.value,
-                  onChange: (e) => field.handleChange(e.target.value),
-                }}
-                labelName='비밀번호'
-              />
-            );
-          }}
-        </form.Field>
-
-        <form.Field name='confirmPassword'>
-          {(field) => {
-            const hintMessage = getHintMessage(field);
-
-            return (
-              <FormInput
-                hintMessage={hintMessage}
-                inputProps={{
-                  type: 'password',
-                  autoComplete: 'new-password',
-                  placeholder: '비밀번호를 한 번 더 입력해주세요',
-                  value: field.state.value,
-                  onChange: (e) => field.handleChange(e.target.value),
-                }}
-                labelName='비밀번호 확인'
-              />
-            );
-          }}
-        </form.Field>
-      </div>
-
-      <div className='flex-col-center w-full gap-4'>
-        <form.Field name='termsAgreement'>
-          {(field) => {
-            const checked = Boolean(field.state.value);
-            return (
-              <div className='flex w-full items-center justify-between'>
-                <label className='flex-center cursor-pointer'>
-                  <input
-                    className='peer sr-only'
-                    checked={checked}
-                    name={field.name}
-                    type='checkbox'
-                    onChange={(e) => field.handleChange(e.target.checked)}
-                  />
-                  <Icon id='check' className={cn(checked ? 'text-mint-500' : 'text-gray-500')} />
-                  <span className='text-text-sm-medium text-gray-700'>
-                    서비스 이용약관에 동의합니다.
-                  </span>
-                </label>
-
-                <button
-                  className='text-text-sm-medium text-gray-500 underline'
-                  type='button'
-                  onClick={() => open(<SignupAgreementModal />)}
-                >
-                  보기
-                </button>
-              </div>
-            );
-          }}
-        </form.Field>
-
-        <form.Subscribe
-          selector={(state) => ({
-            canSubmit: state.canSubmit,
-            isSubmitting: state.isSubmitting,
-            isPristine: state.isPristine,
-          })}
-        >
-          {({ canSubmit: formCanSubmit, isSubmitting, isPristine }) => {
-            const disabled = !formCanSubmit || isSubmitting || isPristine || !canSubmit;
-
-            return (
-              <Button disabled={disabled} size='md' type='submit' variant='primary'>
-                회원가입하기
-              </Button>
-            );
-          }}
-        </form.Subscribe>
-      </div>
-    </form>
-  );
-};
diff --git a/src/components/pages/user/mypage/mypage-setting/index.tsx b/src/components/pages/user/mypage/mypage-setting/index.tsx
index a23e2384..f61ca9fc 100644
--- a/src/components/pages/user/mypage/mypage-setting/index.tsx
+++ b/src/components/pages/user/mypage/mypage-setting/index.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useLogout, useWithdraw } from '@/hooks/use-auth';
 import { useUpdateMyNotification } from '@/hooks/use-user/use-user-notification';
 import { User } from '@/types/service/user';
 
@@ -10,6 +11,8 @@ interface Props {
 
 export const MyPageSetting = ({ user }: Props) => {
   const { mutate } = useUpdateMyNotification();
+  const logout = useLogout();
+  const withdraw = useWithdraw();
 
   return (
     <section className='bg-mono-white flex flex-col gap-3 px-3 py-6'>
@@ -19,8 +22,8 @@ export const MyPageSetting = ({ user }: Props) => {
       >
         알림 받기
       </MyPageToggleButton>
-      <MyPageActionButton onClick={() => console.log('로그아웃')}>로그아웃</MyPageActionButton>
-      <MyPageActionButton onClick={() => console.log('회원탈퇴')}>회원탈퇴</MyPageActionButton>
+      <MyPageActionButton onClick={logout}>로그아웃</MyPageActionButton>
+      <MyPageActionButton onClick={withdraw}>회원탈퇴</MyPageActionButton>
     </section>
   );
 };
diff --git a/src/components/shared/form-input/index.tsx b/src/components/shared/form-input/index.tsx
index 26de7bef..2b3d991c 100644
--- a/src/components/shared/form-input/index.tsx
+++ b/src/components/shared/form-input/index.tsx
@@ -1,21 +1,13 @@
 'use client';
 
-import { InputHTMLAttributes, useId, useState } from 'react';
+import { InputHTMLAttributes, useId } from 'react';
 
-import { Icon } from '@/components/icon';
 import { Hint, Input, Label } from '@/components/ui';
 import { cn } from '@/lib/utils';
 
-interface PasswordToggleButtonProps {
-  isVisible: boolean;
-  onToggle: () => void;
-}
-
-interface AvailabilityButtonProps {
-  isEmailField: boolean;
-  onClick: () => void;
-  disabled: boolean;
-}
+type InputPropsWithIcon = InputHTMLAttributes<HTMLInputElement> & {
+  iconButton?: React.ReactNode;
+};
 
 interface FormInputProps {
   className?: string;
@@ -25,7 +17,7 @@ interface FormInputProps {
   availabilityButtonDisabled?: boolean;
   availabilityStatus?: AvailabilityState;
   required?: boolean;
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  inputProps?: InputPropsWithIcon;
   onClick?: () => void;
 }
 
@@ -36,59 +28,20 @@ type AvailabilityState =
   | { status: 'unavailable' }
   | { status: 'error' };
 
-const PasswordToggleButton = ({ isVisible, onToggle }: PasswordToggleButtonProps) => {
-  return (
-    <button
-      className='absolute top-4 right-5 h-6 w-6'
-      aria-label={isVisible ? '비밀번호 숨기기' : '비밀번호 보기'}
-      tabIndex={-1}
-      type='button'
-      onClick={onToggle}
-    >
-      <Icon id={isVisible ? 'visibility-true' : 'visibility-false'} className='text-gray-600' />
-    </button>
-  );
-};
-
-const AvailabilityButton = ({ isEmailField, onClick, disabled }: AvailabilityButtonProps) => {
-  return (
-    <button
-      className={cn(
-        'text-text-xs-semibold absolute top-4 right-5 rounded-lg bg-gray-100 px-3 py-1 text-gray-800',
-        disabled && '!cursor-not-allowed',
-      )}
-      aria-disabled={disabled}
-      aria-label={isEmailField ? '이메일 중복 확인' : '닉네임 중복 확인'}
-      disabled={disabled}
-      type='button'
-      onClick={onClick}
-    >
-      중복 확인
-    </button>
-  );
-};
-
 export const FormInput = ({
   className,
   labelName,
   hintMessage,
   availabilityHint,
-  availabilityButtonDisabled = false,
   availabilityStatus,
   required = true,
   inputProps = {},
-  onClick,
 }: FormInputProps) => {
-  const { type = 'text', id, required: _, ...restInputProps } = inputProps;
+  const { type, id, required: _, iconButton, ...restInputProps } = inputProps;
 
   const generatedId = useId();
-  const [isVisible, setIsVisible] = useState(false);
 
-  const isEmailField = type === 'email';
-  const isPasswordField = type === 'password';
-  const inputType = isPasswordField && isVisible ? 'text' : type;
   const inputId = id ?? generatedId;
-  const isAvailability = !isPasswordField && typeof onClick === 'function';
 
   let tone: 'default' | 'error' | 'success' = 'default';
 
@@ -100,26 +53,6 @@ export const FormInput = ({
     tone = 'success';
   }
 
-  const handleToggle = () => {
-    setIsVisible((prev) => !prev);
-  };
-
-  let iconButton: React.ReactNode = null;
-
-  if (isPasswordField) {
-    iconButton = <PasswordToggleButton isVisible={isVisible} onToggle={handleToggle} />;
-  }
-
-  if (!isPasswordField && isAvailability) {
-    iconButton = (
-      <AvailabilityButton
-        disabled={availabilityButtonDisabled}
-        isEmailField={isEmailField}
-        onClick={onClick}
-      />
-    );
-  }
-
   return (
     <div className={cn('flex w-full flex-col gap-1', className)}>
       <Label htmlFor={inputId} required={required}>
@@ -132,11 +65,11 @@ export const FormInput = ({
           'bg-mono-white focus:border-mint-500 h-14 rounded-2xl border border-gray-300',
           tone === 'error' && 'border-error-500',
           tone === 'success' && 'border-gray-300',
-          isAvailability && 'pr-23',
+          availabilityStatus && 'pr-23',
         )}
         iconButton={iconButton}
         required={required}
-        type={inputType}
+        type={type}
         {...restInputProps}
       />
       {hintMessage && <Hint message={hintMessage} />}
diff --git a/src/hooks/use-auth/index.ts b/src/hooks/use-auth/index.ts
index b1ad7d7a..e5bd3fc3 100644
--- a/src/hooks/use-auth/index.ts
+++ b/src/hooks/use-auth/index.ts
@@ -1,5 +1,4 @@
 export { useLogin } from './use-auth-login';
 export { useLogout } from './use-auth-logout';
-export { useRefresh } from './use-auth-refresh';
 export { useSignup } from './use-auth-signup';
 export { useWithdraw } from './use-auth-withdraw';
diff --git a/src/hooks/use-auth/use-auth-login/index.ts b/src/hooks/use-auth/use-auth-login/index.ts
index a6196737..c0186c8a 100644
--- a/src/hooks/use-auth/use-auth-login/index.ts
+++ b/src/hooks/use-auth/use-auth-login/index.ts
@@ -2,7 +2,9 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
-import { AxiosError } from 'axios';
+import { useCallback, useState } from 'react';
+
+import axios, { AxiosError } from 'axios';
 import Cookies from 'js-cookie';
 
 import { API } from '@/api';
@@ -19,11 +21,41 @@ const normalizePath = (raw: string | null) => {
   return value.startsWith('/') ? value : `/${value}`;
 };
 
+const getLoginErrorMessage = (problem: CommonErrorResponse) => {
+  if (
+    problem.errorCode === 'USER_NOT_FOUND' ||
+    problem.errorCode === 'INVALID_PASSWORD_VALUE' ||
+    problem.errorCode === 'INVALID_INPUT_VALUE'
+  ) {
+    return '이메일 또는 비밀번호가 일치하지 않습니다.';
+  }
+
+  return '로그인에 실패했습니다.';
+};
+
+// 📜 proxy 설정 후 삭제
+const isCommonErrorResponse = (e: unknown): e is CommonErrorResponse => {
+  if (!e || typeof e !== 'object') return false;
+
+  const obj = e as Record<string, unknown>;
+  return (
+    typeof obj.status === 'number' &&
+    typeof obj.detail === 'string' &&
+    typeof obj.errorCode === 'string' &&
+    typeof obj.instance === 'string'
+  );
+};
+
 export const useLogin = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const clearLoginError = useCallback(() => setLoginError(null), []);
+
   const handleLogin = async (payload: LoginRequest, formApi: { reset: () => void }) => {
+    setLoginError(null);
+
     try {
       const result = await API.authService.login(payload);
       // 📜 추후 삭제
@@ -39,19 +71,27 @@ export const useLogin = () => {
       const nextPath = normalizePath(searchParams.get('path'));
       router.replace(nextPath);
     } catch (error) {
-      const axiosError = error as AxiosError<CommonErrorResponse>;
-      const problem = axiosError.response?.data;
-
-      // 📜 에러 UI 결정나면 변경
-      if (problem) {
-        console.error('[LOGIN ERROR]', problem.errorCode, problem.detail);
-        alert(problem.detail || '로그인에 실패했습니다.');
-      } else {
-        console.error(error);
-        alert('알 수 없는 오류가 발생했습니다.');
+      if (isCommonErrorResponse(error)) {
+        console.error('[LOGIN ERROR]', error.errorCode, error.detail);
+        setLoginError(getLoginErrorMessage(error));
+        return;
+      }
+
+      if (axios.isAxiosError(error)) {
+        const axiosError = error as AxiosError<CommonErrorResponse>;
+        const problem = axiosError.response?.data;
+
+        if (problem) {
+          console.error('[LOGIN ERROR]', problem.errorCode, problem.detail);
+          setLoginError(getLoginErrorMessage(problem));
+        }
+        return;
       }
+
+      console.error(error);
+      setLoginError('알 수 없는 오류가 발생했습니다.');
     }
   };
 
-  return handleLogin;
+  return { handleLogin, loginError, clearLoginError };
 };
diff --git a/src/hooks/use-auth/use-auth-logout/index.ts b/src/hooks/use-auth/use-auth-logout/index.ts
index 23323005..f3fc8b25 100644
--- a/src/hooks/use-auth/use-auth-logout/index.ts
+++ b/src/hooks/use-auth/use-auth-logout/index.ts
@@ -24,7 +24,7 @@ export const useLogout = () => {
 
       // 로컬 스토리지/추가 상태도 정리???
 
-      router.push('/login');
+      router.push('/');
     }
   };
 
diff --git a/src/hooks/use-auth/use-auth-refresh/index.ts b/src/hooks/use-auth/use-auth-refresh/index.ts
deleted file mode 100644
index 2f0944f0..00000000
--- a/src/hooks/use-auth/use-auth-refresh/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-
-import { AxiosError } from 'axios';
-
-import { API } from '@/api';
-import { CommonErrorResponse } from '@/types/service/common';
-
-export const useRefresh = () => {
-  const handleRefresh = async () => {
-    try {
-      const result = await API.authService.refresh();
-
-      // 📜 추후 삭제 (테스트 확인용)
-      console.log('refresh success:', result);
-      return result;
-    } catch (error) {
-      const axiosError = error as AxiosError<CommonErrorResponse>;
-      const problem = axiosError.response?.data;
-
-      // 📜 에러 UI 결정나면 변경
-      if (problem) {
-        console.error('[REFRESH ERROR]', problem.errorCode, problem.detail);
-        alert(problem.detail || '토큰 갱신에 실패했습니다.');
-      } else {
-        console.error(error);
-        alert('알 수 없는 오류가 발생했습니다.');
-      }
-    }
-  };
-
-  return handleRefresh;
-};
diff --git a/src/lib/auth/utils.ts b/src/lib/auth/utils.ts
new file mode 100644
index 00000000..ec007823
--- /dev/null
+++ b/src/lib/auth/utils.ts
@@ -0,0 +1,13 @@
+import { type AnyFieldApi } from '@tanstack/react-form';
+
+export const getHintMessage = (field: AnyFieldApi) => {
+  const {
+    meta: { errors, isTouched, isDirty },
+  } = field.state;
+  const { submissionAttempts } = field.form.state;
+
+  const showError = isTouched || isDirty || submissionAttempts > 0;
+  const firstError = errors[0] as { message?: string } | undefined;
+
+  return showError ? firstError?.message : undefined;
+};
diff --git a/src/lib/schema/auth.ts b/src/lib/schema/auth.ts
index 741930cf..6ece3fc3 100644
--- a/src/lib/schema/auth.ts
+++ b/src/lib/schema/auth.ts
@@ -4,7 +4,7 @@ export const loginSchema = z.object({
   email: z
     .email('올바른 이메일 형식이 아닙니다.')
     .max(50, '이메일은 최대 50자까지 입력할 수 있습니다.'),
-  password: z.string(),
+  password: z.string().min(1, '비밀번호를 입력해주세요'),
 });
 
 export const signupSchema = loginSchema
@@ -18,12 +18,10 @@ export const signupSchema = loginSchema
       .min(8, '비밀번호는 8자 이상이어야 합니다.')
       .regex(/[!@#$%^&*]/, '!, @, #, $, %, ^, &, * 중 1개 이상 포함해야 합니다.')
       .regex(/\d/, '숫자를 1개 이상 포함해야 합니다.'),
-    confirmPassword: z.string().min(1, '비밀번호 확인을 입력해주세요.'),
-    termsAgreement: z.literal(true),
-  })
-  .refine((data) => data.termsAgreement === true, {
-    path: ['termsAgreement'],
-    message: '서비스 이용약관에 동의해주세요.',
+    confirmPassword: z.string().min(1, '확인 비밀번호를 입력해주세요.'),
+    termsAgreement: z
+      .boolean()
+      .refine((v) => v === true, { message: '서비스 이용약관에 동의해주세요.' }),
   })
   .refine((data) => data.password === data.confirmPassword, {
     path: ['confirmPassword'],