Feature/CDP-216-AuthState

package.json

@@ -35,6 +35,7 @@
     "axios": "^1.12.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.24",
     "lucide-react": "^0.544.0",
     "next": "15.5.3",
     "next-seo": "^6.8.0",

src/app/(auth)/forgot-password/page.tsx

@@ -1,14 +1,24 @@
+import { AuthMain } from "@/components/auth/AuthMain";
+import { ForgotPasswordForm } from "@/components/auth/forgotPassword/ForgotPasswordForm";
+import { ForgotPasswordHeader } from "@/components/auth/forgotPassword/ForgotPasswordHeader";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = {
   ...makePageMetadata({
     title: "비밀번호 찾기",
-    description: "PlanMate 비밀번호 찾기 1단계: 이메일 입력 페이지",
+    description: "PlanMate 비밀번호 찾기 페이지",
     canonical: "/forgot-password",
   }),
   robots: { index: false, follow: false },
 };
 
 export default function ForgotPasswordPage() {
-  return <div>비밀번호 찾기 - 이메일 입력 페이지</div>;
+  return (
+    <>
+      <ForgotPasswordHeader />
+      <AuthMain flow="forgot">
+        <ForgotPasswordForm />
+      </AuthMain>
+    </>
+  );
 }

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

@@ -0,0 +1,24 @@
+import { AuthMain } from "@/components/auth/AuthMain";
+import { SignupForm } from "@/components/auth/signup/SignupForm";
+import { SignupHeader } from "@/components/auth/signup/SignupHeader";
+import { makePageMetadata } from "@/seo/metadata";
+
+export const metadata = {
+  ...makePageMetadata({
+    title: "회원가입",
+    description: "MyPlanMate 회원가입페이지",
+    canonical: "/signup/basic",
+  }),
+  robots: { index: false, follow: false },
+};
+
+export default function SignupEmailPage() {
+  return (
+    <>
+      <SignupHeader />
+      <AuthMain flow="signup">
+        <SignupForm />
+      </AuthMain>
+    </>
+  );
+}

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

@@ -7,7 +7,7 @@ import { makePageMetadata } from "@/seo/metadata";
 export const metadata = {
   ...makePageMetadata({
     title: "회원가입",
-    description: "PlanMate 회원가입 페이지",
+    description: "MyPlanMate 회원가입 페이지",
     canonical: "/signup",
   }),
   robots: { index: false, follow: false }, // 인증 관련 페이지는 검색 제외

src/components/auth/AuthMain.tsx

@@ -1,6 +1,23 @@
-import type { AuthCommonProps } from "@/types/auth";
+"use client";
+
+import { useForgotPasswordStepStore } from "@/stores/forgotPasswordStepStore";
+import { useSignupStepStore } from "@/stores/signupStepStore";
+import type { AuthMainProps } from "@/types/auth";
+import { useEffect } from "react";
+
+export function AuthMain({ children, flow }: AuthMainProps) {
+  const resetSignupStep = useSignupStepStore((s) => s.reset);
+  const resetForgotStep = useForgotPasswordStepStore((s) => s.reset);
+
+  useEffect(() => {
+    if (flow === "signup") {
+      resetSignupStep();
+    }
+    if (flow === "forgot") {
+      resetForgotStep();
+    }
+  }, [flow, resetSignupStep, resetForgotStep]);
 
-export function AuthMain({ children }: AuthCommonProps) {
   return (
     <main className="w-full" aria-label="인증 본문">
       {children}

src/components/auth/AuthStepTransition.tsx

@@ -0,0 +1,22 @@
+import { authStepSlide, authTransition } from "@/lib/variants/motion.auth";
+import type { AuthStepTransitionProps } from "@/types/auth";
+import { AnimatePresence, motion } from "framer-motion";
+
+export function AuthStepTransition({ stepKey, direction, children }: AuthStepTransitionProps) {
+  return (
+    <AnimatePresence mode="wait" custom={direction}>
+      <motion.div
+        key={stepKey}
+        variants={authStepSlide}
+        initial="enter"
+        animate="center"
+        exit="exit"
+        custom={direction}
+        transition={authTransition}
+        className="w-full"
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

src/components/auth/signup/SignupStepIndicator.tsx → src/components/auth/StepIndicator.tsx

@@ -1,13 +1,9 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import type { SignupStepIndicatorProps } from "@/types/auth";
+import type { StepIndicatorProps } from "@/types/auth";
 
-export function SignupStepIndicator({
-  currentStep,
-  totalSteps = 4,
-  className,
-}: SignupStepIndicatorProps) {
+export function StepIndicator({ currentStep, totalSteps = 4, className }: StepIndicatorProps) {
   const steps = Array.from({ length: totalSteps }, (_, index) => index + 1);
 
   return (