diff --git a/frontend/app/(auth)/register/page.tsx b/frontend/app/(auth)/register/page.tsx
new file mode 100644
index 00000000..bd098543
--- /dev/null
+++ b/frontend/app/(auth)/register/page.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useRegister } from "@/hooks/useRegister";
+import { LoginHeader } from "@/components/auth/LoginHeader";
+import { RegisterForm } from "@/components/auth/RegisterForm";
+import { LoginFooter } from "@/components/auth/LoginFooter";
+
+/**
+ * 회원가입 페이지 컴포넌트
+ * 비즈니스 로직은 useRegister 훅에서 처리하고, UI 컴포넌트들을 조합하여 구성
+ */
+export default function RegisterPage() {
+  const {
+    formData,
+    isLoading,
+    error,
+    validationErrors,
+    showPassword,
+    showPasswordConfirm,
+    isFormValid,
+    handleInputChange,
+    handleRegister,
+    togglePasswordVisibility,
+    togglePasswordConfirmVisibility,
+  } = useRegister();
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
+      <div className="w-full max-w-md space-y-8">
+        <LoginHeader />
+
+        <RegisterForm
+          formData={formData}
+          isLoading={isLoading}
+          error={error}
+          validationErrors={validationErrors}
+          showPassword={showPassword}
+          showPasswordConfirm={showPasswordConfirm}
+          isFormValid={isFormValid}
+          onInputChange={handleInputChange}
+          onSubmit={handleRegister}
+          onTogglePassword={togglePasswordVisibility}
+          onTogglePasswordConfirm={togglePasswordConfirmVisibility}
+        />
+
+        <LoginFooter showRegisterLink={false} />
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/auth/LoginFooter.tsx b/frontend/components/auth/LoginFooter.tsx
index 99b5da16..42edf9e2 100644
--- a/frontend/components/auth/LoginFooter.tsx
+++ b/frontend/components/auth/LoginFooter.tsx
@@ -1,11 +1,29 @@
 import { UI_CONFIG } from "@/constants/auth";
+import Link from "next/link";
+
+interface LoginFooterProps {
+  showRegisterLink?: boolean;
+}
 
 /**
  * 로그인 페이지 푸터 컴포넌트
  */
-export function LoginFooter() {
+export function LoginFooter({ showRegisterLink = true }: LoginFooterProps) {
   return (
     <div className="text-center text-sm text-slate-500">
+      {showRegisterLink && (
+        <div className="mb-4">
+          <p className="text-slate-600">
+            계정이 없으신가요?{" "}
+            <Link
+              href="/register"
+              className="font-medium text-slate-900 hover:underline"
+            >
+              회원가입
+            </Link>
+          </p>
+        </div>
+      )}
       <p>{UI_CONFIG.COPYRIGHT}</p>
       <p className="mt-1">{UI_CONFIG.POWERED_BY}</p>
     </div>
diff --git a/frontend/components/auth/RegisterForm.tsx b/frontend/components/auth/RegisterForm.tsx
new file mode 100644
index 00000000..2fd26432
--- /dev/null
+++ b/frontend/components/auth/RegisterForm.tsx
@@ -0,0 +1,259 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Eye, EyeOff, Loader2, ArrowLeft } from "lucide-react";
+import { RegisterFormData } from "@/types/auth";
+import { ErrorMessage } from "./ErrorMessage";
+import Link from "next/link";
+
+interface RegisterFormProps {
+  formData: RegisterFormData;
+  isLoading: boolean;
+  error: string;
+  validationErrors: Record<string, string>;
+  showPassword: boolean;
+  showPasswordConfirm: boolean;
+  isFormValid: boolean;
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSubmit: (e: React.FormEvent) => void;
+  onTogglePassword: () => void;
+  onTogglePasswordConfirm: () => void;
+}
+
+/**
+ * 회원가입 폼 컴포넌트
+ */
+export function RegisterForm({
+  formData,
+  isLoading,
+  error,
+  validationErrors,
+  showPassword,
+  showPasswordConfirm,
+  isFormValid,
+  onInputChange,
+  onSubmit,
+  onTogglePassword,
+  onTogglePasswordConfirm,
+}: RegisterFormProps) {
+  return (
+    <Card className="border-0 shadow-xl">
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-center text-2xl">회원가입</CardTitle>
+        <CardDescription className="text-center">새로운 계정을 생성합니다</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ErrorMessage message={error} />
+
+        <form onSubmit={onSubmit} className="space-y-4">
+          {/* 사용자 ID */}
+          <div className="space-y-2">
+            <Label htmlFor="userId">
+              사용자 ID <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="userId"
+              name="userId"
+              type="text"
+              placeholder="사용자 ID를 입력하세요"
+              value={formData.userId}
+              onChange={onInputChange}
+              disabled={isLoading}
+              className="h-11"
+              required
+            />
+            {validationErrors.userId && (
+              <p className="text-xs text-destructive">{validationErrors.userId}</p>
+            )}
+          </div>
+
+          {/* 비밀번호 */}
+          <div className="space-y-2">
+            <Label htmlFor="password">
+              비밀번호 <span className="text-destructive">*</span>
+            </Label>
+            <div className="relative">
+              <Input
+                id="password"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                placeholder="비밀번호를 입력하세요"
+                value={formData.password}
+                onChange={onInputChange}
+                disabled={isLoading}
+                className="h-11 pr-10"
+                required
+              />
+              <button
+                type="button"
+                onClick={onTogglePassword}
+                className="absolute top-1/2 right-3 -translate-y-1/2 transform text-slate-400 transition-colors hover:text-slate-600"
+                disabled={isLoading}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+            {validationErrors.password && (
+              <p className="text-xs text-destructive">{validationErrors.password}</p>
+            )}
+          </div>
+
+          {/* 비밀번호 확인 */}
+          <div className="space-y-2">
+            <Label htmlFor="passwordConfirm">
+              비밀번호 확인 <span className="text-destructive">*</span>
+            </Label>
+            <div className="relative">
+              <Input
+                id="passwordConfirm"
+                name="passwordConfirm"
+                type={showPasswordConfirm ? "text" : "password"}
+                placeholder="비밀번호를 다시 입력하세요"
+                value={formData.passwordConfirm}
+                onChange={onInputChange}
+                disabled={isLoading}
+                className="h-11 pr-10"
+                required
+              />
+              <button
+                type="button"
+                onClick={onTogglePasswordConfirm}
+                className="absolute top-1/2 right-3 -translate-y-1/2 transform text-slate-400 transition-colors hover:text-slate-600"
+                disabled={isLoading}
+              >
+                {showPasswordConfirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+            {validationErrors.passwordConfirm && (
+              <p className="text-xs text-destructive">{validationErrors.passwordConfirm}</p>
+            )}
+          </div>
+
+          {/* 이름 */}
+          <div className="space-y-2">
+            <Label htmlFor="userName">
+              이름 <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="userName"
+              name="userName"
+              type="text"
+              placeholder="이름을 입력하세요"
+              value={formData.userName}
+              onChange={onInputChange}
+              disabled={isLoading}
+              className="h-11"
+              required
+            />
+            {validationErrors.userName && (
+              <p className="text-xs text-destructive">{validationErrors.userName}</p>
+            )}
+          </div>
+
+          {/* 면허번호 */}
+          <div className="space-y-2">
+            <Label htmlFor="licenseNumber">
+              면허번호 <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="licenseNumber"
+              name="licenseNumber"
+              type="text"
+              placeholder="예: 12-34-567890-12"
+              value={formData.licenseNumber}
+              onChange={onInputChange}
+              disabled={isLoading}
+              className="h-11"
+              required
+            />
+            {validationErrors.licenseNumber && (
+              <p className="text-xs text-destructive">{validationErrors.licenseNumber}</p>
+            )}
+            <p className="text-xs text-muted-foreground">
+              운전면허번호를 하이픈(-)을 포함하여 입력해주세요
+            </p>
+          </div>
+
+          {/* 차량 번호 */}
+          <div className="space-y-2">
+            <Label htmlFor="vehicleNumber">
+              차량 번호 <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="vehicleNumber"
+              name="vehicleNumber"
+              type="text"
+              placeholder="예: 12가3456 또는 123가4567"
+              value={formData.vehicleNumber}
+              onChange={onInputChange}
+              disabled={isLoading}
+              className="h-11"
+              required
+            />
+            {validationErrors.vehicleNumber && (
+              <p className="text-xs text-destructive">{validationErrors.vehicleNumber}</p>
+            )}
+            <p className="text-xs text-muted-foreground">
+              한국 차량 번호 형식으로 입력해주세요
+            </p>
+          </div>
+
+          {/* 휴대폰 번호 */}
+          <div className="space-y-2">
+            <Label htmlFor="phoneNumber">
+              휴대폰 번호 <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="phoneNumber"
+              name="phoneNumber"
+              type="tel"
+              placeholder="예: 010-1234-5678"
+              value={formData.phoneNumber}
+              onChange={onInputChange}
+              disabled={isLoading}
+              className="h-11"
+              required
+            />
+            {validationErrors.phoneNumber && (
+              <p className="text-xs text-destructive">{validationErrors.phoneNumber}</p>
+            )}
+            <p className="text-xs text-muted-foreground">
+              하이픈(-)을 포함하여 입력해주세요
+            </p>
+          </div>
+
+          {/* 버튼 그룹 */}
+          <div className="flex gap-2 pt-2">
+            <Link href="/login" className="flex-1">
+              <Button
+                type="button"
+                variant="outline"
+                className="h-11 w-full"
+                disabled={isLoading}
+              >
+                <ArrowLeft className="mr-2 h-4 w-4" />
+                로그인으로
+              </Button>
+            </Link>
+            <Button
+              type="submit"
+              className="h-11 flex-1 bg-slate-900 font-medium text-white hover:bg-slate-800"
+              disabled={isLoading || !isFormValid}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  가입 중...
+                </>
+              ) : (
+                "회원가입"
+              )}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/frontend/hooks/useRegister.ts b/frontend/hooks/useRegister.ts
new file mode 100644
index 00000000..09ec46ad
--- /dev/null
+++ b/frontend/hooks/useRegister.ts
@@ -0,0 +1,262 @@
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { RegisterFormData } from "@/types/auth";
+import { authApi } from "@/lib/api/auth";
+import { useToast } from "@/hooks/use-toast";
+
+/**
+ * 회원가입 비즈니스 로직 훅
+ */
+export function useRegister() {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [formData, setFormData] = useState<RegisterFormData>({
+    userId: "",
+    password: "",
+    passwordConfirm: "",
+    userName: "",
+    licenseNumber: "",
+    vehicleNumber: "",
+    phoneNumber: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
+  const [isFormValid, setIsFormValid] = useState(false);
+
+  /**
+   * 실시간 폼 유효성 검사 및 에러 메시지 업데이트
+   */
+  useEffect(() => {
+    const checkFormValidity = () => {
+      const errors: Record<string, string> = {};
+
+      // 사용자 ID 검사 (입력이 있을 때만)
+      if (formData.userId.length > 0 && formData.userId.length < 2) {
+        errors.userId = "사용자 ID는 최소 2자 이상이어야 합니다";
+      }
+
+      // 비밀번호 검사 (입력이 있을 때만)
+      if (formData.password.length > 0 && formData.password.length < 6) {
+        errors.password = "비밀번호는 최소 6자 이상이어야 합니다";
+      }
+
+      // 비밀번호 확인 검사 (입력이 있을 때만)
+      if (formData.passwordConfirm.length > 0 && formData.password !== formData.passwordConfirm) {
+        errors.passwordConfirm = "비밀번호가 일치하지 않습니다";
+      }
+
+      // 이름 검사 (입력이 있을 때만)
+      if (formData.userName.length > 0 && formData.userName.trim().length < 2) {
+        errors.userName = "이름은 최소 2자 이상이어야 합니다";
+      }
+
+      // 면허번호 검사 (입력이 있을 때만)
+      if (formData.licenseNumber.length > 0 && !validateLicenseNumber(formData.licenseNumber)) {
+        errors.licenseNumber = "올바른 면허번호 형식이 아닙니다 (예: 12-34-567890-12)";
+      }
+
+      // 차량 번호 검사 (입력이 있을 때만)
+      if (formData.vehicleNumber.length > 0 && !validateVehicleNumber(formData.vehicleNumber)) {
+        errors.vehicleNumber = "올바른 차량 번호 형식이 아닙니다 (예: 12가3456, 123가4567)";
+      }
+
+      // 휴대폰 번호 검사 (입력이 있을 때만)
+      if (formData.phoneNumber.length > 0 && !validatePhoneNumber(formData.phoneNumber)) {
+        errors.phoneNumber = "올바른 휴대폰 번호 형식이 아닙니다 (예: 010-1234-5678)";
+      }
+
+      setValidationErrors(errors);
+
+      // 모든 필드가 채워져 있고 에러가 없는지 확인
+      const allFieldsFilled = 
+        formData.userId.trim().length >= 2 &&
+        formData.password.length >= 6 &&
+        formData.passwordConfirm.length > 0 &&
+        formData.userName.trim().length >= 2 &&
+        formData.licenseNumber.length > 0 &&
+        formData.vehicleNumber.length > 0 &&
+        formData.phoneNumber.length > 0;
+
+      const isValid = allFieldsFilled && Object.keys(errors).length === 0;
+      setIsFormValid(isValid);
+    };
+
+    checkFormValidity();
+  }, [formData]);
+
+  /**
+   * 입력값 변경 핸들러
+   */
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    
+    // 전역 에러 초기화
+    if (error) setError("");
+  };
+
+  /**
+   * 비밀번호 표시/숨김 토글
+   */
+  const togglePasswordVisibility = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  /**
+   * 비밀번호 확인 표시/숨김 토글
+   */
+  const togglePasswordConfirmVisibility = () => {
+    setShowPasswordConfirm((prev) => !prev);
+  };
+
+  /**
+   * 면허번호 유효성 검사
+   * 한국 운전면허 형식: 12-34-567890-12 (지역번호-발급년도-일련번호-체크)
+   */
+  const validateLicenseNumber = (licenseNumber: string): boolean => {
+    // 하이픈 포함 형식: 12-34-567890-12
+    const pattern = /^\d{2}-\d{2}-\d{6}-\d{2}$/;
+    return pattern.test(licenseNumber);
+  };
+
+  /**
+   * 차량 번호 유효성 검사
+   * 한국 차량 번호 형식: 12가3456, 123가4567, 서울12가3456 등
+   */
+  const validateVehicleNumber = (vehicleNumber: string): boolean => {
+    // 공백 제거
+    const cleanNumber = vehicleNumber.replace(/\s/g, "");
+    
+    // 한국 차량 번호 패턴
+    // 1. 구형: 12가3456 (2자리 숫자 + 한글 1자 + 4자리 숫자)
+    // 2. 신형: 123가4567 (3자리 숫자 + 한글 1자 + 4자리 숫자)
+    // 3. 지역명 포함: 서울12가3456, 서울123가4567
+    const patterns = [
+      /^\d{2}[가-힣]{1}\d{4}$/,           // 12가3456
+      /^\d{3}[가-힣]{1}\d{4}$/,          // 123가4567
+      /^[가-힣]{2}\d{2}[가-힣]{1}\d{4}$/,  // 서울12가3456
+      /^[가-힣]{2}\d{3}[가-힣]{1}\d{4}$/,  // 서울123가4567
+    ];
+    
+    return patterns.some(pattern => pattern.test(cleanNumber));
+  };
+
+  /**
+   * 휴대폰 번호 유효성 검사
+   * 형식: 010-1234-5678, 011-123-4567 등
+   */
+  const validatePhoneNumber = (phoneNumber: string): boolean => {
+    // 하이픈 포함 형식: 010-1234-5678, 011-123-4567
+    const pattern = /^01[016789]-\d{3,4}-\d{4}$/;
+    return pattern.test(phoneNumber);
+  };
+
+  /**
+   * 폼 유효성 검사
+   */
+  const validateForm = (): boolean => {
+    const errors: Record<string, string> = {};
+
+    // 사용자 ID 검사
+    if (formData.userId.length < 2) {
+      errors.userId = "사용자 ID는 최소 2자 이상이어야 합니다";
+    }
+
+    // 비밀번호 검사
+    if (formData.password.length < 6) {
+      errors.password = "비밀번호는 최소 6자 이상이어야 합니다";
+    }
+
+    // 비밀번호 확인 검사
+    if (formData.password !== formData.passwordConfirm) {
+      errors.passwordConfirm = "비밀번호가 일치하지 않습니다";
+    }
+
+    // 이름 검사
+    if (formData.userName.trim().length < 2) {
+      errors.userName = "이름은 최소 2자 이상이어야 합니다";
+    }
+
+    // 면허번호 검사
+    if (!validateLicenseNumber(formData.licenseNumber)) {
+      errors.licenseNumber = "올바른 면허번호 형식이 아닙니다 (예: 12-34-567890-12)";
+    }
+
+    // 차량 번호 검사
+    if (!validateVehicleNumber(formData.vehicleNumber)) {
+      errors.vehicleNumber = "올바른 차량 번호 형식이 아닙니다 (예: 12가3456, 123가4567)";
+    }
+
+    // 휴대폰 번호 검사
+    if (!validatePhoneNumber(formData.phoneNumber)) {
+      errors.phoneNumber = "올바른 휴대폰 번호 형식이 아닙니다 (예: 010-1234-5678)";
+    }
+
+    setValidationErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  /**
+   * 회원가입 핸들러
+   */
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // 유효성 검사
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const response = await authApi.register({
+        userId: formData.userId,
+        password: formData.password,
+        userName: formData.userName,
+        licenseNumber: formData.licenseNumber,
+        vehicleNumber: formData.vehicleNumber.replace(/\s/g, ""), // 공백 제거
+        phoneNumber: formData.phoneNumber,
+      });
+
+      if (response.success) {
+        // 회원가입 성공 - toast 알림 표시
+        toast({
+          title: "회원가입 완료",
+          description: "회원가입이 성공적으로 완료되었습니다. 로그인 페이지로 이동합니다.",
+        });
+        
+        // 로그인 페이지로 이동
+        setTimeout(() => {
+          router.push("/login");
+        }, 1500);
+      } else {
+        setError(response.message || "회원가입에 실패했습니다");
+      }
+    } catch (err: any) {
+      console.error("회원가입 오류:", err);
+      setError(err.message || "회원가입 중 오류가 발생했습니다");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    formData,
+    isLoading,
+    error,
+    validationErrors,
+    showPassword,
+    showPasswordConfirm,
+    isFormValid,
+    handleInputChange,
+    handleRegister,
+    togglePasswordVisibility,
+    togglePasswordConfirmVisibility,
+  };
+}
+
diff --git a/frontend/lib/api/auth.ts b/frontend/lib/api/auth.ts
new file mode 100644
index 00000000..119514bc
--- /dev/null
+++ b/frontend/lib/api/auth.ts
@@ -0,0 +1,28 @@
+import { RegisterFormData, RegisterResponse } from "@/types/auth";
+
+/**
+ * 인증 관련 API (임시 mock)
+ */
+export const authApi = {
+  /**
+   * 회원가입 (임시 구현)
+   */
+  async register(data: Omit<RegisterFormData, "passwordConfirm">): Promise<RegisterResponse> {
+    // TODO: 백엔드 API 연동 필요
+    console.log("회원가입 요청:", data);
+    
+    // 임시로 성공 응답 반환
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          success: true,
+          message: "회원가입이 완료되었습니다",
+          data: {
+            userId: data.userId,
+          },
+        });
+      }, 1000);
+    });
+  },
+};
+
diff --git a/frontend/types/auth.ts b/frontend/types/auth.ts
index cd8e65b6..bc7f4af1 100644
--- a/frontend/types/auth.ts
+++ b/frontend/types/auth.ts
@@ -22,3 +22,22 @@ export interface AuthStatus {
   isLoggedIn: boolean;
   isAdmin?: boolean;
 }
+
+export interface RegisterFormData {
+  userId: string;
+  password: string;
+  passwordConfirm: string;
+  userName: string;
+  licenseNumber: string;
+  vehicleNumber: string;
+  phoneNumber: string;
+}
+
+export interface RegisterResponse {
+  success: boolean;
+  message?: string;
+  data?: {
+    userId: string;
+  };
+  errorCode?: string;
+}