Feature/CDP-200-LoginMain

src/components/auth/login/LoginForm.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useFadeSlideInOnMount } from "@/hooks/useMotionPresets";
 import { cn } from "@/lib/utils";
 import { Button } from "@/shared/button";
 import { Icon } from "@/shared/Icon";
@@ -44,11 +45,14 @@ export function LoginForm() {
     setPassword(event.target.value);
   };
 
+  const fadeClass = useFadeSlideInOnMount("up");
+
   return (
     <form
       className={cn(
         "flex flex-col gap-10 rounded-2xl border border-[var(--color-gray-200)] bg-[var(--color-white)] px-4 py-6",
         "md:px-6 md:py-8",
+        fadeClass,
       )}
       aria-label="로그인 폼"
       onSubmit={handleSubmit}

src/hooks/useMotionPresets.ts

@@ -0,0 +1,63 @@
+"use client";
+
+import type { FadeSlideOptions, MotionDirection } from "@/types/motion";
+import { useEffect, useState } from "react";
+
+export function useFadeSlideInOnMount(
+  direction: MotionDirection = "up",
+  options: FadeSlideOptions = {},
+): string {
+  const { distanceClass, durationClass } = options;
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setIsVisible(true);
+    }, 0);
+
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  const baseTransition = durationClass ?? "transition-all duration-1000 ease-out";
+
+  const hiddenByDirection: Record<MotionDirection, string> = {
+    up: distanceClass ? `opacity-0 ${distanceClass}` : "opacity-0 translate-y-4",
+    down: distanceClass ? `opacity-0 ${distanceClass}` : "opacity-0 -translate-y-4",
+    left: distanceClass ? `opacity-0 ${distanceClass}` : "opacity-0 translate-x-4",
+    right: distanceClass ? `opacity-0 ${distanceClass}` : "opacity-0 -translate-x-4",
+  };
+
+  const visibleClass = "opacity-100 translate-x-0 translate-y-0";
+
+  const stateClass = isVisible ? visibleClass : hiddenByDirection[direction];
+
+  return `${baseTransition} ${stateClass}`;
+}
+
+export function useStepSlideOnMount(
+  from: "left" | "right" = "right",
+  options: FadeSlideOptions = {},
+): string {
+  const { distanceClass, durationClass } = options;
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setIsVisible(true);
+    }, 0);
+
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  const baseTransition = durationClass ?? "transition-all duration-300 ease-out";
+
+  const hidden =
+    from === "right" ? (distanceClass ?? "translate-x-4") : (distanceClass ?? "-translate-x-4");
+
+  const hiddenClass = `opacity-0 ${hidden}`;
+  const visibleClass = "opacity-100 translate-x-0";
+
+  const stateClass = isVisible ? visibleClass : hiddenClass;
+
+  return `${baseTransition} ${stateClass}`;
+}

src/types/motion.ts

@@ -0,0 +1,8 @@
+export type MotionDirection = "up" | "down" | "left" | "right";
+
+/** Tailwind 기반 페이드+슬라이드 옵션 */
+export interface FadeSlideOptions {
+  distanceClass?: string;
+
+  durationClass?: string;
+}