Feature/CDP-206-SignupMain

src/app/(auth)/login/page.tsx

@@ -1,8 +1,7 @@
 import { AuthHeader } from "@/components/auth/AuthHeader";
 import { AuthMain } from "@/components/auth/AuthMain";
+import { SubTitle, Title } from "@/components/auth/AuthTitle";
 import { LoginForm } from "@/components/auth/login/LoginForm";
-import { LoginPageTitle } from "@/components/auth/login/LoginPageTitle";
-import { LoginSubtitle } from "@/components/auth/login/LoginSubtitle";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = {
@@ -18,8 +17,8 @@ export default function LoginPage() {
   return (
     <>
       <AuthHeader>
-        <LoginPageTitle />
-        <LoginSubtitle />
+        <Title>로그인</Title>
+        <SubTitle>오늘도 만나서 반가워요!</SubTitle>
       </AuthHeader>
 
       <AuthMain>

src/app/(auth)/signup/email/page.tsx

@@ -1,14 +1,38 @@
+import { AuthHeader } from "@/components/auth/AuthHeader";
+import { AuthMain } from "@/components/auth/AuthMain";
+import { SubTitle, Title } from "@/components/auth/AuthTitle";
+import { SignupForm } from "@/components/auth/signup/SignupForm";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = {
   ...makePageMetadata({
     title: "회원가입 — 이메일 입력",
-    description: "PlanMate 회원가입 2단계: 이메일 입력 페이지",
+    description: "MyPlanMate 회원가입 2단계: 이메일 입력 페이지",
     canonical: "/signup/email",
   }),
   robots: { index: false, follow: false },
 };
 
 export default function SignupEmailPage() {
-  return <div>회원가입 - 이메일 입력 페이지</div>;
+  return (
+    <>
+      <AuthHeader>
+        <Title>이메일</Title>
+        <SubTitle>계정으로 사용할 이메일을 알려주세요.</SubTitle>
+      </AuthHeader>
+
+      <AuthMain>
+        <SignupForm
+          fieldId="signup-email"
+          fieldName="email"
+          label="이메일"
+          type="email"
+          placeholder="[email protected]"
+          autoComplete="email"
+          nextHref="/signup/password"
+          prevHref="/signup/name"
+        />
+      </AuthMain>
+    </>
+  );
 }

src/app/(auth)/signup/name/page.tsx

@@ -1,14 +1,36 @@
+import { AuthHeader } from "@/components/auth/AuthHeader";
+import { AuthMain } from "@/components/auth/AuthMain";
+import { SubTitle, Title } from "@/components/auth/AuthTitle";
+import { SignupForm } from "@/components/auth/signup/SignupForm";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = {
   ...makePageMetadata({
     title: "회원가입 — 이름 입력",
-    description: "PlanMate 회원가입 1단계: 이름 입력 페이지",
+    description: "MyPlanMate 회원가입 1단계: 이름 입력 페이지",
     canonical: "/signup/name",
   }),
   robots: { index: false, follow: false },
 };
 
 export default function SignupNamePage() {
-  return <div>회원가입 - 이름 입력 페이지</div>;
+  return (
+    <>
+      <AuthHeader>
+        <Title>이름</Title>
+        <SubTitle>이름을 알려주세요.</SubTitle>
+      </AuthHeader>
+
+      <AuthMain>
+        <SignupForm
+          fieldId="signup-name"
+          fieldName="name"
+          label="이름"
+          placeholder="이름을 입력해주세요"
+          autoComplete="name"
+          nextHref="/signup/email"
+        />
+      </AuthMain>
+    </>
+  );
 }

src/app/(auth)/signup/page.tsx

@@ -1,6 +1,7 @@
 import { AuthHeader } from "@/components/auth/AuthHeader";
-import { SignupPageTitle } from "@/components/auth/signup/SignupPageTitle";
-import { SignupSubtitle } from "@/components/auth/signup/SignupSubTitle";
+import { AuthMain } from "@/components/auth/AuthMain";
+import { SubTitle, Title } from "@/components/auth/AuthTitle";
+import { SignupGroupButton } from "@/components/auth/signup/SignupGroupButton";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = {
@@ -16,9 +17,13 @@ export default function SignupPage() {
   return (
     <>
       <AuthHeader>
-        <SignupPageTitle />
-        <SignupSubtitle />
+        <Title>회원가입</Title>
+        <SubTitle>원하시는 가입 방식을 선택해주세요.</SubTitle>
       </AuthHeader>
+
+      <AuthMain>
+        <SignupGroupButton />
+      </AuthMain>
     </>
   );
 }

src/app/(auth)/signup/password/page.tsx

@@ -1,3 +1,7 @@
+import { AuthHeader } from "@/components/auth/AuthHeader";
+import { AuthMain } from "@/components/auth/AuthMain";
+import { SubTitle, Title } from "@/components/auth/AuthTitle";
+import { SignupForm } from "@/components/auth/signup/SignupForm";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = {
@@ -10,5 +14,25 @@ export const metadata = {
 };
 
 export default function SignupPasswordPage() {
-  return <div>회원가입 - 비밀번호 설정 페이지</div>;
+  return (
+    <>
+      <AuthHeader>
+        <Title>비밀번호</Title>
+        <SubTitle>8자 이상 / 특수문자 포함</SubTitle>
+      </AuthHeader>
+
+      <AuthMain>
+        <SignupForm
+          fieldId="signup-password"
+          fieldName="password"
+          label="비밀번호"
+          type="password"
+          placeholder="8자리이상 & 특수문자"
+          autoComplete="password"
+          nextHref="/signup/terms"
+          prevHref="/signup/email"
+        />
+      </AuthMain>
+    </>
+  );
 }

src/app/(auth)/signup/terms/page.tsx

@@ -1,3 +1,7 @@
+import { AuthHeader } from "@/components/auth/AuthHeader";
+import { AuthMain } from "@/components/auth/AuthMain";
+import { SubTitle, Title } from "@/components/auth/AuthTitle";
+import { SignupForm } from "@/components/auth/signup/SignupForm";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = {
@@ -10,5 +14,25 @@ export const metadata = {
 };
 
 export default function SignupTermsPage() {
-  return <div>회원가입 - 약관 동의 페이지</div>;
+  return (
+    <>
+      <AuthHeader>
+        <Title>약관동의</Title>
+        <SubTitle>서비스 이용을 위한 필수 약관입니다.</SubTitle>
+      </AuthHeader>
+
+      <AuthMain>
+        <SignupForm
+          fieldId="signup-terms"
+          fieldName="text"
+          label="약관동의"
+          type="text"
+          placeholder="띠용"
+          autoComplete="password"
+          nextHref="/signup/terms"
+          prevHref="/signup/password"
+        />
+      </AuthMain>
+    </>
+  );
 }

src/components/auth/AuthTitle.tsx

@@ -0,0 +1,13 @@
+import type { AuthCommonProps } from "@/types/auth";
+
+export function Title({ children }: AuthCommonProps) {
+  return (
+    <h1 id="auth-signup-title" className="t-24-b text-[var(--color-gray-900)]">
+      {children}
+    </h1>
+  );
+}
+
+export function SubTitle({ children }: AuthCommonProps) {
+  return <p className="t-14-m text-[var(--color-gray-600)]">{children}</p>;
+}

src/components/auth/signup/SignupForm.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/shared/button";
+import { Input } from "@/shared/input";
+import { SignupFormProps } from "@/types/auth";
+import Link from "next/link";
+import { SignupStepIndicator } from "./SignupStepIndicator";
+
+export function SignupForm({
+  className,
+  fieldId,
+  fieldName,
+  label,
+  type = "text",
+  placeholder,
+  autoComplete,
+  nextHref,
+  prevHref,
+}: SignupFormProps) {
+  return (
+    <form
+      noValidate
+      aria-label={`${label} 입력 폼`}
+      className={cn(
+        "flex flex-col items-center gap-10 rounded-2xl border border-[var(--color-gray-200)] bg-[var(--color-white)] px-4 py-6",
+        "md:px-6 md:py-8",
+        className,
+      )}
+    >
+      <SignupStepIndicator currentStep={2} className="mb-3" />
+      {/* 단일 필드 */}
+      <div className="flex w-full max-w-[36.6rem] flex-col gap-4 mx-auto">
+        <label htmlFor={fieldId} className="t-14-m text-[var(--color-gray-700)]">
+          {label}
+        </label>
+        <Input
+          id={fieldId}
+          name={fieldName}
+          type={type}
+          placeholder={placeholder}
+          status="default"
+          autoComplete={autoComplete}
+        />
+      </div>
+
+      {/* 다음 / 이전 버튼 (임시: Link로 라우팅) */}
+      <div className="flex w-full max-w-[36.6rem] flex-col gap-4 mx-auto">
+        <Link href={nextHref}>
+          <Button type="button" preset="auth" bg="basic" className="w-full">
+            다음
+          </Button>
+        </Link>
+
+        {prevHref && (
+          <Link href={prevHref}>
+            <Button type="button" preset="auth" bg="white" className="w-full">
+              이전
+            </Button>
+          </Link>
+        )}
+      </div>
+
+      {/* 하단 로그인 링크 */}
+      <p className="t-14-m text-center text-[var(--color-gray-600)]">
+        이미 회원이신가요?{" "}
+        <Link
+          href="/login"
+          className="t-14-m text-[var(--color-gray-900)] underline-offset-2 hover:underline"
+        >
+          로그인하기
+        </Link>
+      </p>
+    </form>
+  );
+}