diff --git a/src/app/mocks/handlers.ts b/src/app/mocks/handlers.ts
index 0f3710c..7016a01 100644
--- a/src/app/mocks/handlers.ts
+++ b/src/app/mocks/handlers.ts
@@ -1 +1,3 @@
-export const handlers = [];
+import { signupHandlers } from "./signup-handlers";
+
+export const handlers = [...signupHandlers];
diff --git a/src/app/mocks/signup-handlers.ts b/src/app/mocks/signup-handlers.ts
new file mode 100644
index 0000000..bf7c22d
--- /dev/null
+++ b/src/app/mocks/signup-handlers.ts
@@ -0,0 +1,9 @@
+import { checkEmailHandler } from "@pages/auth/signup/api/check-email/index.mock";
+import { checkNicknameHandler } from "@pages/auth/signup/api/check-nickname/index.mock";
+import { signupHandler } from "@pages/auth/signup/api/signup/index.mock";
+
+export const signupHandlers = [
+  checkEmailHandler,
+  checkNicknameHandler,
+  signupHandler,
+];
diff --git a/src/pages/auth/signup/api/check-email/index.mock.ts b/src/pages/auth/signup/api/check-email/index.mock.ts
new file mode 100644
index 0000000..719ba33
--- /dev/null
+++ b/src/pages/auth/signup/api/check-email/index.mock.ts
@@ -0,0 +1,16 @@
+import { CHECK_EMAIL_ENDPOINT } from "@pages/auth/signup/api/check-email";
+import { http, HttpResponse } from "msw";
+
+export const checkEmailHandler = http.get(
+  CHECK_EMAIL_ENDPOINT,
+  ({ request }) => {
+    const url = new URL(request.url);
+    const email = url.searchParams.get("email");
+
+    return HttpResponse.json({
+      success: true,
+      available: true,
+      message: "사용 가능한 이메일입니다.",
+    });
+  },
+);
diff --git a/src/pages/auth/signup/api/check-email/index.ts b/src/pages/auth/signup/api/check-email/index.ts
index d39d247..46a3589 100644
--- a/src/pages/auth/signup/api/check-email/index.ts
+++ b/src/pages/auth/signup/api/check-email/index.ts
@@ -1,11 +1,13 @@
 import { apiRequester } from "@shared/api/api-requester";
 
+export const CHECK_EMAIL_ENDPOINT = `/api/signup/check-email`;
+
 export const checkEmail = (email: string) => {
   return apiRequester<{
     success: boolean;
     available: boolean;
     message: string;
-  }>(`/api/signup/check-email?email=${email}`, {
+  }>(`${CHECK_EMAIL_ENDPOINT}?email=${email}`, {
     method: "GET",
   });
 };
diff --git a/src/pages/auth/signup/api/check-nickname/index.mock.ts b/src/pages/auth/signup/api/check-nickname/index.mock.ts
new file mode 100644
index 0000000..471d288
--- /dev/null
+++ b/src/pages/auth/signup/api/check-nickname/index.mock.ts
@@ -0,0 +1,16 @@
+import { CHECK_NICKNAME_ENDPOINT } from "@pages/auth/signup/api/check-nickname";
+import { http, HttpResponse } from "msw";
+
+export const checkNicknameHandler = http.get(
+  CHECK_NICKNAME_ENDPOINT,
+  ({ request }) => {
+    const url = new URL(request.url);
+    const nickname = url.searchParams.get("nickname");
+
+    return HttpResponse.json({
+      success: true,
+      available: true,
+      message: "사용 가능한 닉네임입니다.",
+    });
+  },
+);
diff --git a/src/pages/auth/signup/api/check-nickname/index.ts b/src/pages/auth/signup/api/check-nickname/index.ts
index b4586cd..3be4dda 100644
--- a/src/pages/auth/signup/api/check-nickname/index.ts
+++ b/src/pages/auth/signup/api/check-nickname/index.ts
@@ -1,11 +1,13 @@
 import { apiRequester } from "@shared/api/api-requester";
 
+export const CHECK_NICKNAME_ENDPOINT = `/api/signup/check-nickname`;
+
 export const checkNickname = (nickname: string) => {
   return apiRequester<{
     success: boolean;
     available: boolean;
     message: string;
-  }>(`/api/signup/check-nickname?nickname=${nickname}`, {
+  }>(`${CHECK_NICKNAME_ENDPOINT}?nickname=${nickname}`, {
     method: "GET",
   });
 };
diff --git a/src/pages/auth/signup/api/signup/index.mock.ts b/src/pages/auth/signup/api/signup/index.mock.ts
new file mode 100644
index 0000000..5a4a3ac
--- /dev/null
+++ b/src/pages/auth/signup/api/signup/index.mock.ts
@@ -0,0 +1,8 @@
+import { SIGNUP_ENDPOINT } from "@pages/auth/signup/api/signup";
+import { http, HttpResponse } from "msw";
+
+export const signupHandler = http.post(SIGNUP_ENDPOINT, ({}) => {
+  return HttpResponse.json({
+    success: true,
+  });
+});
diff --git a/src/pages/auth/signup/api/signup/index.ts b/src/pages/auth/signup/api/signup/index.ts
index 12ba618..76467f0 100644
--- a/src/pages/auth/signup/api/signup/index.ts
+++ b/src/pages/auth/signup/api/signup/index.ts
@@ -1,12 +1,14 @@
 import { SignUpFormValues } from "../../model/signup-form-values";
 import { apiRequester } from "@shared/api/api-requester";
 
+export const SIGNUP_ENDPOINT = "/api/signup";
+
 export const signup = (payload: SignUpFormValues) => {
   return apiRequester<{
     success: boolean;
     available: boolean;
     message: string;
-  }>(`/api/signup`, {
+  }>(SIGNUP_ENDPOINT, {
     method: "POST",
     body: JSON.stringify(payload),
   });
diff --git a/src/pages/auth/signup/ui/email-field/index.tsx b/src/pages/auth/signup/ui/email-field/index.tsx
index 871d746..0061ef9 100644
--- a/src/pages/auth/signup/ui/email-field/index.tsx
+++ b/src/pages/auth/signup/ui/email-field/index.tsx
@@ -1,65 +1,44 @@
-import { checkEmail } from "@pages/auth/signup/api/check-email";
-import { useFormContext, useFormState } from "react-hook-form";
 import { TextField } from "@shared/ui/text-field";
-import { ApiError, HttpStatus } from "@shared/api";
+import { ChangeEvent } from "react";
 
 type EmailFieldProps = {
   isValidDuplicateEmail: boolean;
-  setIsValidDuplicateEmail: (v: boolean) => void;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  errorMessage?: string;
+  successMessage?: string;
+  isCheckDisabled: boolean;
+  checkDuplicateEmail: () => void;
 };
 
 export const EmailField = ({
+  value,
+  onChange,
+  errorMessage,
   isValidDuplicateEmail,
-  setIsValidDuplicateEmail,
+  successMessage,
+  isCheckDisabled,
+  checkDuplicateEmail,
 }: EmailFieldProps) => {
-  const { control, register, getValues, setError } = useFormContext<{
-    email: string;
-  }>();
-  const { touchedFields, errors } = useFormState<{ email: string }>({
-    control,
-  });
   return (
     <TextField
       id={"id"}
-      error={!!touchedFields.email ? errors.email?.message : undefined}
-      success={isValidDuplicateEmail ? "사용 가능한 이메일입니다." : undefined}
+      error={!!value ? errorMessage : undefined}
+      success={isValidDuplicateEmail ? successMessage : undefined}
     >
       <div className="flex flex-col gap-2">
         <TextField.Label>아이디</TextField.Label>
         <div className="flex gap-3">
           <TextField.Input
             placeholder="이메일 주소 형식으로 입력해 주세요."
-            {...register("email", {
-              onChange: () => setIsValidDuplicateEmail(false),
-            })}
+            value={value}
+            onChange={onChange}
           />
           <TextField.Button
-            disabled={
-              !touchedFields.email || errors.email?.type === "invalid_format"
-            }
+            aria-label="이메일 중복 확인"
+            disabled={isCheckDisabled}
             onClick={() => {
-              const email = getValues("email");
-              checkEmail(email)
-                .then((response) => {
-                  if (response.available) {
-                    setIsValidDuplicateEmail(true);
-                  } else {
-                    setError("email", {
-                      type: "duplicate",
-                      message: response.message,
-                    });
-                  }
-                })
-                .catch((error) => {
-                  if (error instanceof ApiError) {
-                    if (error.status === HttpStatus.BAD_REQUEST) {
-                      setError("email", {
-                        type: "invalid_format",
-                        message: error.message,
-                      });
-                    }
-                  }
-                });
+              checkDuplicateEmail();
             }}
           >
             중복 확인
diff --git a/src/pages/auth/signup/ui/nickname-field/nickname-field.tsx b/src/pages/auth/signup/ui/nickname-field/nickname-field.tsx
index e847e18..7962cc6 100644
--- a/src/pages/auth/signup/ui/nickname-field/nickname-field.tsx
+++ b/src/pages/auth/signup/ui/nickname-field/nickname-field.tsx
@@ -37,6 +37,7 @@ export const NicknameField = ({
               })}
             />
             <TextField.Button
+              aria-label="닉네임 중복 확인"
               type="button"
               disabled={
                 !touchedFields.nickname ||
diff --git a/src/pages/auth/signup/ui/signup-page/index.test.tsx b/src/pages/auth/signup/ui/signup-page/index.test.tsx
new file mode 100644
index 0000000..087e8c8
--- /dev/null
+++ b/src/pages/auth/signup/ui/signup-page/index.test.tsx
@@ -0,0 +1,92 @@
+import { SignupPage } from "@pages/auth/signup/ui/signup-page";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { userEvent } from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { server } from "@app/mocks/server";
+
+const TEST_EMAIL = "test@example.com";
+const TEST_NICKNAME = "데품타";
+const TEST_PASSWORD = "abcd1234";
+const TEST_CONFIRM_PASSWORD = "abcd1234";
+const TEST_WRONG_CONFIRM_PASSWORD = "abc123123";
+
+describe("회원가입 폼", () => {
+  beforeEach(() => {
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <SignupPage />
+      </QueryClientProvider>,
+    );
+  });
+
+  it("모든 필수 필드를 렌더링한다", () => {
+    expect(screen.getByLabelText("아이디")).toBeInTheDocument();
+    expect(screen.getByLabelText("닉네임")).toBeInTheDocument();
+    expect(screen.getByLabelText("비밀번호")).toBeInTheDocument();
+    expect(screen.getByLabelText("비밀번호 확인")).toBeInTheDocument();
+    expect(screen.getByLabelText("동의함")).toBeInTheDocument(); //이용약관
+  });
+
+  //복잡한 제출 로직 테스트
+  it("모든 필수 필드 입력 시 제출을 허용한다", async () => {
+    const signupSpy = vi.fn();
+    server.use(
+      http.post("/api/signup", async ({ request }) => {
+        signupSpy(await request.json());
+        return HttpResponse.json({
+          success: true,
+          message: "회원가입이 완료되었습니다.",
+        });
+      }),
+    );
+    const user = userEvent.setup();
+    expect(screen.getByRole("button", { name: "회원가입" })).toBeDisabled();
+
+    // 이메일 검증
+    await user.type(screen.getByLabelText("아이디"), TEST_EMAIL);
+    await user.tab();
+    await user.click(screen.getByRole("button", { name: "이메일 중복 확인" }));
+    expect(
+      await screen.findByText("사용 가능한 이메일입니다."),
+    ).toBeInTheDocument();
+
+    // 닉네임 검증
+    await user.type(screen.getByLabelText("닉네임"), TEST_NICKNAME);
+    await user.tab();
+    await user.click(screen.getByRole("button", { name: "닉네임 중복 확인" }));
+    expect(
+      await screen.findByText("사용 가능한 닉네임입니다."),
+    ).toBeInTheDocument();
+
+    // 비밀번호, 비밀번호 확인
+    await user.type(screen.getByLabelText("비밀번호"), TEST_PASSWORD);
+    await user.type(
+      screen.getByLabelText("비밀번호 확인"),
+      TEST_CONFIRM_PASSWORD,
+    );
+
+    // 약관 동의 체크
+    await user.click(screen.getByLabelText("동의함"));
+
+    // 버튼 활성화 테스트
+    expect(screen.getByRole("button", { name: "회원가입" })).toBeEnabled();
+
+    // 제출
+    await user.click(screen.getByRole("button", { name: "회원가입" }));
+    await waitFor(() => {
+      expect(signupSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          email: TEST_EMAIL,
+          nickname: TEST_NICKNAME,
+          password: TEST_PASSWORD,
+          confirmPassword: TEST_CONFIRM_PASSWORD,
+        }),
+      );
+    });
+  });
+  // 유효성검사 테스트
+
+  // 조건부렌더링 테스트
+});
diff --git a/src/pages/auth/signup/ui/signup-page/index.tsx b/src/pages/auth/signup/ui/signup-page/index.tsx
index a832134..e859c8f 100644
--- a/src/pages/auth/signup/ui/signup-page/index.tsx
+++ b/src/pages/auth/signup/ui/signup-page/index.tsx
@@ -9,9 +9,9 @@ import { PATH } from "@shared/routes";
 import { Button } from "@shared/ui";
 
 import Link from "next/link";
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useController, useForm } from "react-hook-form";
 
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { EmailField } from "@pages/auth/signup/ui/email-field";
@@ -22,6 +22,8 @@ import { TermsAgreementField } from "@pages/auth/signup/ui/term-agreement-field"
 import { useSignup } from "@pages/auth/signup/model/use-signup";
 
 import { SideBanner } from "@widgets/side-banner";
+import { checkEmail } from "@pages/auth/signup/api/check-email";
+import { ApiError, HttpStatus } from "@shared/api";
 
 export const SignupPage = () => {
   const methods = useForm<SignUpFormValues>({
@@ -38,7 +40,9 @@ export const SignupPage = () => {
   const router = useRouter();
   const {
     handleSubmit,
-    formState: { isValid },
+    control,
+    setError,
+    formState: { isValid, errors },
   } = methods;
   const [isValidDuplicateEmail, setIsValidDuplicateEmail] = useState(false);
   const [isValidDuplicateNickname, setIsValidDuplicateNickname] =
@@ -49,6 +53,35 @@ export const SignupPage = () => {
   const isFormValid =
     isValidDuplicateEmail && isValidDuplicateNickname && isValid;
 
+  const { field: emailField } = useController({
+    control,
+    name: "email",
+  });
+
+  const checkDuplicateEmail = () => {
+    const email = emailField.value;
+    checkEmail(email)
+      .then((response) => {
+        if (response.available) {
+          setIsValidDuplicateEmail(true);
+        } else {
+          setError("email", {
+            type: "duplicate",
+            message: response.message,
+          });
+        }
+      })
+      .catch((error) => {
+        if (error instanceof ApiError) {
+          if (error.status === HttpStatus.BAD_REQUEST) {
+            setError("email", {
+              type: "invalid_format",
+              message: error.message,
+            });
+          }
+        }
+      });
+  };
   return (
     <div className="flex h-full">
       <SideBanner />
@@ -72,7 +105,14 @@ export const SignupPage = () => {
                 {/* 이메일 */}
                 <EmailField
                   isValidDuplicateEmail={isValidDuplicateEmail}
-                  setIsValidDuplicateEmail={setIsValidDuplicateEmail}
+                  value={emailField.value}
+                  errorMessage={errors.email?.message}
+                  successMessage={"사용 가능한 이메일입니다."}
+                  onChange={(e) => emailField.onChange(e.target.value)}
+                  isCheckDisabled={
+                    !emailField.value || errors.email?.type === "invalid_format"
+                  }
+                  checkDuplicateEmail={checkDuplicateEmail}
                 />
                 {/* 닉네임 */}
                 <NicknameField
diff --git a/src/pages/auth/signup/ui/term-agreement-field/index.tsx b/src/pages/auth/signup/ui/term-agreement-field/index.tsx
index 45d4bb4..8f071cc 100644
--- a/src/pages/auth/signup/ui/term-agreement-field/index.tsx
+++ b/src/pages/auth/signup/ui/term-agreement-field/index.tsx
@@ -17,13 +17,13 @@ export const TermsAgreementField = ({}) => {
   return (
     <section className="flex flex-col gap-2">
       <div className="flex justify-between">
-        <span>이용약관</span>
+        <p>이용약관</p>
         <div className="flex gap-1 items-center">
           <label
             htmlFor="terms"
             className={cn(
               "text-small text-medium text-primary/30",
-              isTermsAgreementChecked && "text-primary/100"
+              isTermsAgreementChecked && "text-primary/100",
             )}
           >
             동의함
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
deleted file mode 100644
index b60fe7c..0000000
--- a/tests/example.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("has title", async ({ page }) => {
-  await page.goto("https://playwright.dev/");
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
-});
-
-test("get started link", async ({ page }) => {
-  await page.goto("https://playwright.dev/");
-
-  // Click the get started link.
-  await page.getByRole("link", { name: "Get started" }).click();
-
-  // Expects page to have a heading with the name of Installation.
-  await expect(
-    page.getByRole("heading", { name: "Installation" }),
-  ).toBeVisible();
-});
diff --git a/tests/signup.test.ts b/tests/signup.test.ts
new file mode 100644
index 0000000..d179ab9
--- /dev/null
+++ b/tests/signup.test.ts
@@ -0,0 +1,52 @@
+import { test, expect } from "@playwright/test";
+import { PATH } from "@shared/routes";
+
+const TEST_PASSWORD = "abcd1234";
+const TEST_CONFIRM_PASSWORD = "abcd1234";
+
+// TODO: 테스트가 왜 통과할때도 있고 아닐때도 있는거지
+test.describe("회원가입 E2E 테스트", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:3000/signup");
+  });
+
+  test("정상적인 회원가입 플로우", async ({ page }, testInfo) => {
+    // 이메일, 닉네임 unique 세팅
+    const uniqueId = Date.now() + testInfo.workerIndex;
+    const TEST_EMAIL = `test${uniqueId}@example.com`;
+    const TEST_NICKNAME = `데품타${uniqueId}`;
+
+    // 이메일 검증
+    await page.getByLabel("아이디", { exact: true }).fill(TEST_EMAIL);
+    await page.keyboard.press("Tab");
+    await page.getByRole("button", { name: "이메일 중복 확인" }).click();
+    await expect(page.getByText("사용 가능한 이메일입니다.")).toBeVisible();
+
+    // 닉네임 검증
+    await page.getByLabel("닉네임", { exact: true }).fill(TEST_NICKNAME);
+    await page.keyboard.press("Tab");
+    await page.getByRole("button", { name: "닉네임 중복 확인" }).click();
+    await expect(page.getByText("사용 가능한 닉네임입니다.")).toBeVisible();
+
+    // 비밀번호, 비밀번호 확인
+    await page.getByLabel("비밀번호", { exact: true }).fill(TEST_PASSWORD);
+    await page
+      .getByLabel("비밀번호 확인", { exact: true })
+      .fill(TEST_CONFIRM_PASSWORD);
+
+    // 약관 동의
+    await page.getByLabel("동의함").click();
+
+    // 회원가입 제출
+    await expect(page.getByRole("button", { name: "회원가입" })).toBeEnabled();
+    await page.getByRole("button", { name: "회원가입" }).click();
+
+    // 로그인 페이지로 리다이렉트
+    await page.waitForURL(`**${PATH.LOGIN}`);
+
+    // 로그인 페이지로 이동하면 뒤로가기로 회원가입 페이지는 다시 갈 수 없다.
+    await page.goBack();
+    await page.waitForTimeout(500);
+    await expect(page).not.toHaveURL(new RegExp(PATH.SIGNUP));
+  });
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index 299cd15..50cf28b 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -21,6 +21,7 @@ export default defineConfig({
         test: {
           name: 'unit',
           environment: 'jsdom',
+          globals: true,
           include: ['src/**/*.test.{ts,tsx}'],
           setupFiles: ['./vitest.setup.ts'],
         },
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 2372a87..e1bb995 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,12 +1,13 @@
 import { server } from "@app/mocks/server";
 import "@testing-library/jest-dom/vitest";
 
-import { vi } from "vitest";
 import { afterAll, afterEach, beforeAll } from "vitest";
+import { vi } from "vitest";
 
-const useRouter = vi.fn(() => {
-  push: vi.fn();
-});
+const useRouter = vi.fn(() => ({
+  push: vi.fn(),
+  replace: vi.fn(),
+}));
 
 vi.mock("next/navigation", () => ({
   useRouter,