diff --git a/src/hooks/useAuthForm.ts b/src/hooks/useAuthForm.ts
new file mode 100644
index 0000000..630e387
--- /dev/null
+++ b/src/hooks/useAuthForm.ts
@@ -0,0 +1,96 @@
+import { useState, useMemo } from "react";
+
+type Mode = "signup" | "signin";
+type UserType = "employee" | "employer";
+
+type FormData = {
+  email: string;
+  password: string;
+  confirmPassword?: string;
+  userType?: UserType;
+};
+
+type FormErrors = {
+  email?: string;
+  password?: string;
+  confirmPassword?: string;
+};
+
+export function useAuthForm(mode: Mode) {
+  const [formData, setFormData] = useState<FormData>({
+    email: "",
+    password: "",
+    ...(mode === "signup" && { confirmPassword: "", userType: "employee" }),
+  });
+
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  const isFormValid = useMemo(() => {
+    if (!formData.email || !formData.password) return false;
+    if (errors.email || errors.password) return false;
+
+    if (mode === "signup") {
+      if (!formData.confirmPassword || !formData.userType) return false;
+      if (errors.confirmPassword) return false;
+    }
+
+    return true;
+  }, [formData, errors, mode]);
+
+  const handleChange =
+    (field: keyof FormData) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setFormData((prev) => ({ ...prev, [field]: value }));
+
+      if (field === "email") {
+        const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+        setErrors((prev) => ({
+          ...prev,
+          email: isValidEmail ? undefined : "올바른 이메일 형식이 아닙니다.",
+        }));
+      }
+
+      if (field === "password") {
+        setErrors((prev) => ({
+          ...prev,
+          password:
+            value.length >= 8 ? undefined : "비밀번호는 8자 이상이어야 합니다.",
+          ...(mode === "signup" &&
+            formData.confirmPassword && {
+              confirmPassword:
+                value !== formData.confirmPassword
+                  ? "비밀번호가 일치하지 않습니다."
+                  : undefined,
+            }),
+        }));
+      }
+
+      if (mode === "signup" && field === "confirmPassword") {
+        setErrors((prev) => ({
+          ...prev,
+          confirmPassword:
+            value !== formData.password
+              ? "비밀번호가 일치하지 않습니다."
+              : undefined,
+        }));
+      }
+    };
+
+  const resetForm = () => {
+    setFormData({
+      email: "",
+      password: "",
+      ...(mode === "signup" && { confirmPassword: "", userType: "employee" }),
+    });
+    setErrors({});
+  };
+
+  return {
+    formData,
+    errors,
+    isFormValid,
+    handleChange,
+    setFormData,
+    resetForm,
+  };
+}
diff --git a/src/hooks/useUserStore.tsx b/src/hooks/useUserStore.tsx
new file mode 100644
index 0000000..598888c
--- /dev/null
+++ b/src/hooks/useUserStore.tsx
@@ -0,0 +1,55 @@
+import { create } from "zustand";
+
+type User = {
+  id: string;
+  email: string;
+  type: "employer" | "employee";
+  name?: string;
+  phone?: string;
+  address?: string;
+  bio?: string;
+  shopId?: string;
+};
+
+interface UserState {
+  user: User | null;
+  token: string | null;
+  isLoggedIn: boolean;
+  setUserAndToken: (user: User, token: string) => void;
+  updateShopId: (shopId: string) => void;
+  clearUser: () => void;
+}
+
+export const useUserStore = create<UserState>((set, get) => ({
+  user: null,
+  token: null,
+  isLoggedIn: false,
+
+  setUserAndToken: (user, token) =>
+    set(() => ({
+      user,
+      token,
+      isLoggedIn: true,
+    })),
+
+  updateShopId: (shopId) => {
+    const current = get();
+    if (!current.user || !current.token) return;
+
+    const updatedUser = {
+      ...current.user,
+      shopId,
+    };
+
+    set({
+      user: updatedUser,
+    });
+  },
+
+  clearUser: () =>
+    set(() => ({
+      user: null,
+      token: null,
+      isLoggedIn: false,
+    })),
+}));
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index dbf95d5..e4c17fa 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -1,27 +1,31 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 import ActiveAlarmIcon from "../assets/icon/active.svg";
 import InActiveAlarmIcon from "../assets/icon/inactive.svg";
 import SearchIcon from "../assets/icon/search.svg";
 import Logo from "../assets/logo/thejulge.svg";
+
+import { useUserStore } from "@/hooks/useUserStore";
+
 interface HeaderProps {
-  isLoggedIn: boolean;
-  userNavLabel?: "내 가게" | "내 프로필";
   hasAlarm?: boolean;
-  onLogout?: () => void;
   onToggleAlarm?: () => void;
 }
 
-export default function Header({
-  isLoggedIn,
-  userNavLabel,
-  hasAlarm,
-  onLogout,
-  onToggleAlarm,
-}: HeaderProps) {
-  const userPath = userNavLabel === "내 가게" ? "/shop" : "/profile";
+export default function Header({ hasAlarm, onToggleAlarm }: HeaderProps) {
+  const navigate = useNavigate();
+  const { user, isLoggedIn, clearUser } = useUserStore();
+
+  const userNavLabel = user?.type === "employer" ? "내 가게" : "내 프로필";
+  const userPath = user?.type === "employer" ? "/shop" : "/profile";
+
   const alarmIcon = hasAlarm ? ActiveAlarmIcon : InActiveAlarmIcon;
 
+  const handleLogout = () => {
+    clearUser();
+    navigate("/");
+  };
+
   return (
     <header className="w-full px-4 py-2">
       <div className="hidden md:flex max-w-screen-xl mx-auto w-full items-center justify-between">
@@ -47,7 +51,7 @@ export default function Header({
           {isLoggedIn ? (
             <>
               <Link to={userPath}>{userNavLabel}</Link>
-              <button onClick={onLogout} className="cursor-pointer">
+              <button onClick={handleLogout} className="cursor-pointer">
                 로그아웃
               </button>
               <button className="cursor-pointer" onClick={onToggleAlarm}>
@@ -72,7 +76,7 @@ export default function Header({
             {isLoggedIn ? (
               <>
                 <Link to={userPath}>{userNavLabel}</Link>
-                <button onClick={onLogout} className="cursor-pointer">
+                <button onClick={handleLogout} className="cursor-pointer">
                   로그아웃
                 </button>
                 <button className="cursor-pointer" onClick={onToggleAlarm}>
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index fa6af79..f6330af 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -11,21 +11,12 @@ interface MainLayoutProps {
 }
 
 export default function MainLayout({
-  isLoggedIn = false,
-  userNavLabel,
   hasAlarm,
-  onLogout,
   onToggleAlarm,
 }: MainLayoutProps) {
   return (
     <div className="w-full min-h-screen flex flex-col">
-      <Header
-        isLoggedIn={isLoggedIn}
-        userNavLabel={userNavLabel}
-        hasAlarm={hasAlarm}
-        onLogout={onLogout}
-        onToggleAlarm={onToggleAlarm}
-      />
+      <Header hasAlarm={hasAlarm} onToggleAlarm={onToggleAlarm} />
 
       <main className="flex flex-col flex-1">
         <Outlet />
diff --git a/src/pages/SignupPage.tsx b/src/pages/SignupPage.tsx
index 3f59507..f8d108e 100644
--- a/src/pages/SignupPage.tsx
+++ b/src/pages/SignupPage.tsx
@@ -1,3 +1,212 @@
+import { AxiosError } from "axios";
+import clsx from "clsx";
+import { useNavigate, Link } from "react-router-dom";
+
+import IconCheck from "../assets/icon/check.svg?react";
+import Logo from "../assets/logo/thejulge.svg?react";
+import { useAuthForm } from "../hooks/useAuthForm";
+
+import { postAuthentication } from "@/apis/services/authenticationService";
+import { postUser } from "@/apis/services/userService";
+import Button from "@/components/Button";
+import TextField from "@/components/TextField";
+import { ROUTES } from "@/constants/router";
+import { useUserStore } from "@/hooks/useUserStore";
+
 export default function SignupPage() {
-  return <div>SignupPage</div>;
+  const navigate = useNavigate();
+  const { setUserAndToken } = useUserStore();
+
+  const {
+    formData,
+    errors,
+    isFormValid,
+    handleChange,
+    setFormData,
+    resetForm,
+  } = useAuthForm("signup");
+  //Alert 사용시
+  // const [alertMessage, setAlertMessage] = useState("");
+  // const [nextRoute, setNextRoute] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    try {
+      const response = await postUser({
+        email: formData.email,
+        password: formData.password,
+        type: formData.userType!,
+      });
+
+      if (response.status === 201) {
+        const loginRes = await postAuthentication({
+          email: formData.email,
+          password: formData.password,
+        });
+
+        const token = loginRes.data.item.token;
+        const user = loginRes.data.item.user.item;
+
+        setUserAndToken(user, token);
+
+        resetForm();
+
+        navigate(
+          user.type === "employer" ? ROUTES.SHOP.ROOT : ROUTES.PROFILE.ROOT,
+        );
+        //Alert 사용
+        // setAlertMessage("가입이 완료되었습니다!");
+        // setNextRoute(user.type === "employer" ? ROUTES.SHOP.ROOT : ROUTES.PROFILE.ROOT);
+      }
+    } catch (error: unknown) {
+      const axiosError = error as AxiosError<{ message: string }>;
+      const message =
+        axiosError.response?.data?.message ?? "알 수 없는 에러 발생";
+
+      console.log(message);
+      //Alert 사용시
+      // setAlertMessage(message ?? "회원가입 실패! 다시 시도해주세요.");
+      // setNextRoute(null);
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <Link to={ROUTES.NOTICE.ROOT}>
+        <Logo className="mx-auto mb-2 h-[45px] w-[248px]" />
+      </Link>
+
+      <form
+        className="mt-[40px] mx-auto flex max-w-sm flex-col gap-[28px]"
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmit();
+        }}
+      >
+        <TextField.Input
+          id="email"
+          label="이메일"
+          type="email"
+          placeholder="입력"
+          value={formData.email}
+          onChange={handleChange("email")}
+          fullWidth
+          validateMessage={errors.email}
+        />
+
+        <TextField.Input
+          id="password"
+          label="비밀번호"
+          type="password"
+          placeholder="입력"
+          value={formData.password}
+          onChange={handleChange("password")}
+          fullWidth
+          validateMessage={errors.password}
+        />
+
+        <TextField.Input
+          id="confirm-password"
+          label="비밀번호 확인"
+          type="password"
+          placeholder="입력"
+          value={formData.confirmPassword || ""}
+          onChange={handleChange("confirmPassword")}
+          fullWidth
+          validateMessage={errors.confirmPassword}
+        />
+
+        <fieldset className="space-y-2">
+          <legend className="text-base font-normal text-black">
+            회원 유형
+          </legend>
+          <div className="flex gap-4">
+            <Button
+              type="button"
+              variant="white"
+              fullWidth
+              onClick={() =>
+                setFormData((prev) => ({ ...prev, userType: "employee" }))
+              }
+              className={clsx(
+                "flex items-center justify-center gap-[9px] rounded-[30px] border px-[41px] py-[13px]",
+                formData.userType === "employee"
+                  ? "border-primary"
+                  : "border-gray-30",
+              )}
+            >
+              <div
+                className={clsx(
+                  "h-5 w-5 rounded-full",
+                  formData.userType !== "employee" && "border border-gray-30",
+                )}
+              >
+                {formData.userType === "employee" && (
+                  <IconCheck className="h-5 w-5" />
+                )}
+              </div>
+              <span className="text-sm font-normal text-black">알바님</span>
+            </Button>
+
+            <Button
+              type="button"
+              variant="white"
+              fullWidth
+              onClick={() =>
+                setFormData((prev) => ({ ...prev, userType: "employer" }))
+              }
+              className={clsx(
+                "flex items-center justify-center gap-[9px] rounded-[30px] border px-[41px] py-[13px]",
+                formData.userType === "employer"
+                  ? "border-primary"
+                  : "border-gray-30",
+              )}
+            >
+              <div
+                className={clsx(
+                  "h-5 w-5 rounded-full",
+                  formData.userType !== "employer" && "border border-gray-30",
+                )}
+              >
+                {formData.userType === "employer" && (
+                  <IconCheck className="h-5 w-5" />
+                )}
+              </div>
+              <span className="text-sm font-normal text-black">사장님</span>
+            </Button>
+          </div>
+        </fieldset>
+
+        <Button
+          type="button"
+          fullWidth
+          className="py-[14px]"
+          onClick={handleSubmit}
+          disabled={!isFormValid}
+        >
+          가입하기
+        </Button>
+      </form>
+
+      <p className="mt-[16px] text-center text-sm">
+        이미 가입하셨나요?{" "}
+        <Link to={ROUTES.AUTH.SIGNIN} className="text-[#5534DA] underline">
+          로그인하기
+        </Link>
+      </p>
+
+      {/* 임시 Alert */}
+      {/* {alertMessage && (
+        <AlertModal
+          message={alertMessage}
+          onClose={() => {
+            setAlertMessage("");
+            if (nextRoute) {
+              navigate(nextRoute);
+              setNextRoute(null);
+            }
+          }}
+        />
+      )} */}
+    </div>
+  );
 }