Feature/CDP-185-LandingAnimation

src/app/(marketing)/page.tsx

@@ -1,17 +1,21 @@
 import { LandingFeaturesSection2 } from "@/components/landing/LandingFeatureSection2";
 import { LandingFeaturesSection1 } from "@/components/landing/LandingFeaturesSection1";
+import { LandingFullPageWrapper } from "@/components/landing/LandingFullPageWrapper";
 import { LandingHeroSection } from "@/components/landing/LandingHeroSection";
 import { LandingSpecialFeaturesSection } from "@/components/landing/LandingSpecialFeaturesSection";
 
 export const revalidate = 21600;
 
 export default function Home() {
   return (
-    <>
-      <LandingHeroSection />
-      <LandingFeaturesSection1 />
-      <LandingFeaturesSection2 />
-      <LandingSpecialFeaturesSection />
-    </>
+    <LandingFullPageWrapper>
+      <LandingHeroSection className="scroll-section" />
+
+      <LandingFeaturesSection1 className="scroll-section" />
+
+      <LandingFeaturesSection2 className="scroll-section" />
+
+      <LandingSpecialFeaturesSection className="scroll-section" />
+    </LandingFullPageWrapper>
   );
 }

src/components/landing/LandingFeatureSection2.tsx

@@ -2,17 +2,25 @@
 
 import { LandingFeatureText } from "@/components/landing/LandingFeatureText";
 import { LandingLayoutPreview } from "@/components/landing/LandingLayoutPreview";
+import { useInView } from "@/hooks/useInView";
 import { cn } from "@/lib/utils";
 import type { LandingFeaturesSection2Props } from "@/types/landing";
 
 export function LandingFeaturesSection2({ className }: LandingFeaturesSection2Props) {
+  const { ref, isInView } = useInView({
+    threshold: 0.5,
+    once: false,
+  });
   return (
     <section
       id="landing-features2"
       aria-labelledby="landing-features2-title"
+      ref={ref}
       className={cn(
         "grid gap-20",
         "md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:items-center md:gap-35",
+        "transition-all duration-1000 ease-out",
+        isInView ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-10",
         className,
       )}
     >

src/components/landing/LandingFeaturesSection1.tsx

@@ -1,21 +1,29 @@
 "use client";
 
 import { LandingFeatureGrid } from "@/components/landing/LandingFeatureGrid";
+import { useInView } from "@/hooks/useInView";
 import { cn } from "@/lib/utils";
 import { useFeaturePreviewStore } from "@/stores/featurePreviewStore";
 import type { LandingFeaturesSection1Props } from "@/types/landing";
 import Image from "next/image";
 
 export function LandingFeaturesSection1({ className }: LandingFeaturesSection1Props) {
   const activeFeature = useFeaturePreviewStore((state) => state.activeFeature);
+  const { ref, isInView } = useInView({
+    threshold: 0.5,
+    once: false,
+  });
 
   return (
     <section
       id="landing-features1"
       aria-labelledby="landing-features1-title"
+      ref={ref}
       className={cn(
         "grid gap-18",
         "md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:items-center",
+        "transition-all duration-1000 ease-out",
+        isInView ? "opacity-100 translate-x-0" : "opacity-0 translate-x-10",
         className,
       )}
     >

src/components/landing/LandingFullPageWrapper.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useFullPageScroll } from "@/hooks/useFullPageScroll";
+import type { LandingFullPageWrapperProps } from "@/types/landing";
+
+export function LandingFullPageWrapper({ children }: LandingFullPageWrapperProps) {
+  useFullPageScroll();
+  return <>{children}</>;
+}

src/components/landing/LandingHeroCtas.tsx

@@ -7,7 +7,7 @@ export function LandingHeroCtas() {
   return (
     <div className={cn("flex items-center flex-col gap-8 mt-10", "md:flex-row md:gap-12 md:mt-20")}>
       <Link href="/login">
-        <Button preset="hero" pill>
+        <Button preset="hero" pill className="animate-bounce">
           <span className="inline-flex items-center gap-4">
             <Icon name="monitor" />
             <span>Desktop</span>

src/components/landing/LandingMainSection.tsx

@@ -8,7 +8,7 @@ export function LandingMainSection({ children, className }: LandingMainSectionPr
       className={cn(
         "mx-auto w-full max-w-[128rem] px-6 mt-30",
         "space-y-[25rem]",
-        "md:mt-45 lg:mt-70 md:space-y-[35rem]",
+        "md:mt-45 lg:mt-70 md:space-y-[50rem]",
         className,
       )}
     >

src/components/landing/LandingSpecialFeatureGrid.tsx

@@ -1,3 +1,4 @@
+// src/components/landing/LandingSpecialFeatureGrid.tsx
 "use client";
 
 import { SPECIAL_FEATURES } from "@/lib/constants";
@@ -6,23 +7,37 @@ import { Icon } from "@/shared/Icon";
 import { SpecialFeatureCard } from "@/shared/SpecialFeatureCard";
 import type { LandingSpecialFeatureGridProps } from "@/types/landing";
 
-export function LandingSpecialFeatureGrid({ className }: LandingSpecialFeatureGridProps) {
+export function LandingSpecialFeatureGrid({
+  className,
+  isInView = false,
+}: LandingSpecialFeatureGridProps) {
   return (
     <div
       className={cn(
-        "flex flex-col items-center gap-10",
-        "md:flex md:flex-row md:justify-center md:gap-8",
+        "flex flex-col items-center gap-10 md:flex-row md:justify-center md:gap-8",
         className,
       )}
     >
-      {SPECIAL_FEATURES.map((feature) => (
-        <SpecialFeatureCard
-          key={feature.title}
-          icon={<Icon name={feature.iconName} size={28} />}
-          title={feature.title}
-          description={feature.description}
-        />
-      ))}
+      {SPECIAL_FEATURES.map((feature, index) => {
+        const delayMs = index * 200;
+
+        return (
+          <SpecialFeatureCard
+            key={feature.title}
+            icon={<Icon name={feature.iconName} size={28} />}
+            title={feature.title}
+            description={feature.description}
+            className={cn(
+              // 공통 트랜지션 + hover 효과
+              "transition-all duration-700 ease-out",
+              "hover:-translate-y-1 hover:shadow-[0_18px_40px_rgba(0,0,0,0.12)]",
+              // 스크롤 진입 시: 아래에서 위로 + 페이드 인
+              isInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8",
+            )}
+            style={{ transitionDelay: `${delayMs}ms` }}
+          />
+        );
+      })}
     </div>
   );
 }

src/components/landing/LandingSpecialFeaturesSection.tsx

@@ -1,22 +1,30 @@
 "use client";
 
 import { LandingSpecialFeatureGrid } from "@/components/landing/LandingSpecialFeatureGrid";
+import { useInView } from "@/hooks/useInView";
 import { cn } from "@/lib/utils";
 import type { LandingSpecialFeaturesSectionProps } from "@/types/landing";
 
 export function LandingSpecialFeaturesSection({ className }: LandingSpecialFeaturesSectionProps) {
+  const { ref, isInView } = useInView({ threshold: 0.5, once: false });
+
   return (
     <section
       id="landing-special-features"
       aria-labelledby="landing-special-features-title"
       className={cn("bg-[var(--color-gray-50)] py-24 md:py-32", className)}
     >
-      <div className="container space-y-12 md:space-y-16">
-        {/* 섹션 인트로: 제목 + 부제 */}
-        <header className="space-y-4 text-center">
+      <div ref={ref} className="container space-y-12 md:space-y-16">
+        {/* 섹션 인트로: 제목 + 부제 (아래 → 위 슬라이드) */}
+        <header
+          className={cn(
+            "space-y-4 text-center transition-all duration-1000 ease-out",
+            isInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
+          )}
+        >
           <h2
             id="landing-special-features-title"
-            className="t-28-b md:t-40-b text-[var(--color-gray-900)]"
+            className="t-30-b md:t-40-b text-[var(--color-gray-900)]"
           >
             PlanMate의 특별한 기능들
           </h2>
@@ -25,8 +33,8 @@ export function LandingSpecialFeaturesSection({ className }: LandingSpecialFeatu
           </p>
         </header>
 
-        {/* 하단 카드 그리드 */}
-        <LandingSpecialFeatureGrid />
+        {/* 하단 카드 그리드 (isInView 전달) */}
+        <LandingSpecialFeatureGrid isInView={isInView} />
       </div>
     </section>
   );

src/hooks/useFullPageScroll.ts

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function useFullPageScroll() {
+  useEffect(() => {
+    const sections = document.querySelectorAll<HTMLElement>(".scroll-section");
+    if (!sections.length) return;
+
+    let isScrolling = false;
+    let startY = 0;
+
+    const getClosestSectionIndex = () => {
+      const scrollY = window.scrollY;
+      let closestIndex = 0;
+      let smallestDiff = Number.POSITIVE_INFINITY;
+
+      sections.forEach((section, index) => {
+        const diff = Math.abs(section.offsetTop - scrollY);
+        if (diff < smallestDiff) {
+          smallestDiff = diff;
+          closestIndex = index;
+        }
+      });
+      return closestIndex;
+    };
+
+    const scrollToSection = (index: number) => {
+      const target = sections[index];
+      if (!target) return;
+
+      const sectionTop = target.offsetTop;
+      const sectionHeight = target.offsetHeight;
+      const viewportHeight = window.innerHeight;
+
+      const lastIndex = sections.length - 1;
+      const isLast = index === lastIndex;
+
+      // 마지막 섹션만 위 정렬, 나머지는 중앙 정렬
+      const targetY = isLast ? sectionTop : sectionTop - (viewportHeight - sectionHeight) / 2;
+
+      window.scrollTo({
+        top: targetY,
+        behavior: "smooth",
+      });
+    };
+
+    const moveOneSection = (direction: 1 | -1) => {
+      if (isScrolling) return;
+      isScrolling = true;
+
+      const currentIndex = getClosestSectionIndex();
+      const nextIndex = Math.min(Math.max(currentIndex + direction, 0), sections.length - 1);
+
+      scrollToSection(nextIndex);
+
+      setTimeout(() => {
+        isScrolling = false;
+      }, 900);
+    };
+
+    const handleWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      const deltaY = event.deltaY;
+      if (Math.abs(deltaY) < 10) return;
+
+      const direction: 1 | -1 = deltaY > 0 ? 1 : -1;
+      moveOneSection(direction);
+    };
+
+    const handleTouchStart = (e: TouchEvent) => {
+      startY = e.touches[0].clientY;
+    };
+
+    const handleTouchEnd = (e: TouchEvent) => {
+      const endY = e.changedTouches[0].clientY;
+      const deltaY = startY - endY;
+      if (Math.abs(deltaY) < 50) return;
+
+      const direction: 1 | -1 = deltaY > 0 ? 1 : -1;
+      moveOneSection(direction);
+    };
+
+    window.addEventListener("wheel", handleWheel, { passive: false });
+    window.addEventListener("touchstart", handleTouchStart, { passive: true });
+    window.addEventListener("touchend", handleTouchEnd, { passive: true });
+
+    // 첫 진입 시 Hero 섹션으로 스냅
+    scrollToSection(0);
+
+    return () => {
+      window.removeEventListener("wheel", handleWheel);
+      window.removeEventListener("touchstart", handleTouchStart);
+      window.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, []);
+}

src/hooks/useInView.ts

@@ -0,0 +1,36 @@
+import { UseInViewOptions, UseInViewResult } from "@/types/inView";
+import { useEffect, useRef, useState } from "react";
+
+export function useInView(options: UseInViewOptions = {}): UseInViewResult {
+  const { threshold = 0.2, rootMargin = "0px", once = true } = options;
+
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [isInView, setIsInView] = useState(false);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            if (once) {
+              observer.unobserve(entry.target);
+            }
+          } else if (!once) {
+            setIsInView(false);
+          }
+        });
+      },
+      { threshold, rootMargin },
+    );
+
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, [threshold, rootMargin, once]);
+
+  return { ref, isInView };
+}

src/styles/globals.css

@@ -118,6 +118,12 @@
     color-scheme: light;
   } /* 라이트 고정 */
 
+  html,
+  body {
+    height: 100%;
+    scroll-behavior: smooth;
+  }
+
   html {
     font-size: 62.5%; /* 1rem = 10px */
     font-family: var(--font-sans);

src/types/inView.ts

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+
+export interface UseInViewOptions {
+  threshold?: number;
+  rootMargin?: string;
+  once?: boolean;
+}
+
+export interface UseInViewResult {
+  ref: RefObject<HTMLDivElement | null>;
+  isInView: boolean;
+}

src/types/landing.ts

@@ -80,7 +80,9 @@ export type LandingFeatureTextProps = WithClassName;
    ------------------------------------------------- */
 export type LandingSpecialFeaturesSectionProps = WithClassName;
 
-export type LandingSpecialFeatureGridProps = WithClassName;
+export type LandingSpecialFeatureGridProps = WithClassName & {
+  isInView?: boolean;
+};
 
 /* -------------------------------------------------
    특별한 기능 섹션 — Feature 리스트
@@ -93,3 +95,10 @@ export interface SpecialFeatureItem {
   description: string;
   iconName: SpecialFeatureIconName;
 }
+
+/* -------------------------------------------------
+   full page 컴포넌트
+   ------------------------------------------------- */
+export interface LandingFullPageWrapperProps {
+  children: React.ReactNode;
+}