feat: GSAP 애니메이션 적용

Author: moo1677

animations/landingGSAP.ts

@@ -20,7 +20,6 @@ export function initHeroSectionAnimation({
 }: HeroSectionRefs) {
   ensurePlugins();
 
-  // gsap.context를 쓰면 cleanup이 아주 깔끔해짐
   const ctx = gsap.context(() => {
     gsap.fromTo(
       subTextEl,
@@ -32,12 +31,103 @@ export function initHeroSectionAnimation({
         ease: 'power2.out',
         scrollTrigger: {
           trigger: titleEl,
-          start: 'right bottom+=100 60%',
+          start: 'top center-=150',
           toggleActions: 'play none none reverse',
+          // markers: true,
         },
       }
     );
   });
 
   return () => ctx.revert(); // ✅ cleanup 반환
 }
+export type FeatureListRefs = {
+  titleEl: HTMLHeadingElement; // "개발자 성장을 위한"
+  subTextEl: HTMLDivElement; // 서브 텍스트 wrapper
+  cardsContainerEl: HTMLDivElement; // grid wrapper
+};
+
+export function initFeatureListAnimation({
+  titleEl,
+  subTextEl,
+  cardsContainerEl,
+}: FeatureListRefs) {
+  ensurePlugins();
+
+  const ctx = gsap.context(() => {
+    // 카드들: grid 안의 직계 자식(FeatureCard wrapper)을 전부 잡음
+    const cards = Array.from(cardsContainerEl.children) as HTMLElement[];
+
+    // 초기 상태 (깜빡임 방지)
+    gsap.set(subTextEl, { opacity: 0, y: 24 });
+    gsap.set(cards, { opacity: 0, y: 28 });
+
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: titleEl,
+        start: 'top center-=50', // 타이틀 끝이 화면 중간보다 조금 아래에 걸리면
+        toggleActions: 'play none none reverse',
+        // markers: true,
+      },
+    });
+
+    // 1) 서브 텍스트 먼저
+    tl.to(subTextEl, {
+      opacity: 1,
+      y: 0,
+      duration: 0.6,
+      ease: 'power2.out',
+    });
+
+    // 2) 카드들 stagger로 아래→위 쓱~
+    tl.to(
+      cards,
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.6,
+        ease: 'power2.out',
+        stagger: 0.12,
+      },
+      '-=0.15' // 서브텍스트 끝나기 조금 전에 겹쳐서 시작
+    );
+  });
+
+  return () => ctx.revert();
+}
+export type LandingPreviewRefs = {
+  rootEl: HTMLElement; // 섹션 전체
+  titleEl: HTMLHeadingElement; // "체계적인 학습으로" h1
+  contentContainerEl: HTMLDivElement; // FeatureContent 감싸는 div
+};
+
+export function initLandingPreviewAnimation({
+  rootEl,
+  titleEl,
+  contentContainerEl,
+}: LandingPreviewRefs) {
+  ensurePlugins();
+
+  const ctx = gsap.context(() => {
+    const items = contentContainerEl.querySelectorAll<HTMLElement>('.fc-item');
+
+    // ✅ 레이아웃 유지한 채로 숨김 (grid 비율 절대 안 깨짐)
+    gsap.set(items, { opacity: 0, y: 24 });
+
+    gsap.to(items, {
+      opacity: 1,
+      y: 0,
+      duration: 0.6,
+      ease: 'power2.out',
+      stagger: 0.12,
+      scrollTrigger: {
+        trigger: titleEl,
+        start: 'top center-=50', // 필요하면 75%~85%로 튜닝
+        toggleActions: 'play none none reverse',
+        // markers: true,
+      },
+    });
+  }, rootEl);
+
+  return () => ctx.revert();
+}

components/landing/FeatureContent.tsx

@@ -23,7 +23,7 @@ const FeatureContent = () => {
   return (
     <ul className="space-y-6">
       {ITEMS.map((item) => (
-        <li key={item.title}>
+        <li key={item.title} className="fc-item">
           <div className="flex gap-3">
             <FiCheckCircle className="text-primary text-2xl" />
             <p className="text-xl font-medium">{item.title}</p>

components/landing/FeatureList.tsx

@@ -1,10 +1,16 @@
+'use client';
+
 import FeatureCard from '@/components/landing/FeatureCard';
+import { useLayoutEffect, useRef } from 'react';
+import { initFeatureListAnimation } from '@/animations/landingGSAP';
+
 import {
   FiBookOpen,
   FiTarget,
   FiCheckCircle,
   FiTrendingUp,
 } from 'react-icons/fi';
+
 const FEATURES = [
   {
     icon: <FiBookOpen className="text-xl" />,
@@ -32,14 +38,34 @@ const FEATURES = [
   },
 ];
 const FeatureList = () => {
+  const titleRef = useRef<HTMLHeadingElement>(null);
+  const subTextRef = useRef<HTMLDivElement>(null);
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!titleRef.current || !subTextRef.current || !gridRef.current) return;
+
+    const cleanup = initFeatureListAnimation({
+      titleEl: titleRef.current,
+      subTextEl: subTextRef.current,
+      cardsContainerEl: gridRef.current,
+    });
+
+    return cleanup;
+  }, []);
   return (
-    <div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
-      <h1 className="text-4xl font-bold">개발자 성장을 위한</h1>
+    <div className="flex h-full flex-col items-center justify-center space-y-3 pt-100 text-center">
+      <h1 ref={titleRef} className="text-4xl font-bold">
+        개발자 성장을 위한
+      </h1>
       <h1 className="text-primary text-4xl font-bold">완벽한 도구</h1>
-      <div className="text-xl font-light">
+      <div ref={subTextRef} className="text-xl font-light">
         <h2>체계적인 학습과 지속적인 성장을 돕는 강력한 기능들</h2>
       </div>
-      <div className="mt-15 grid max-w-7xl grid-cols-1 gap-6 px-20 sm:grid-cols-2 lg:grid-cols-4">
+      <div
+        ref={gridRef}
+        className="mt-15 grid max-w-7xl grid-cols-1 gap-6 px-20 sm:grid-cols-2 lg:grid-cols-4"
+      >
         {FEATURES.map((feature) => (
           <FeatureCard key={feature.title} {...feature} />
         ))}

components/landing/LandingHeader.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 const LandingHeader = () => {
   return (
-    <div className="fixed flex w-full items-center justify-between bg-white">
+    <div className="fixed z-50 flex w-full items-center justify-between bg-white">
       <h1 className="flex items-center gap-2 px-10 py-2 text-3xl font-bold">
         <span className="text-primary">&lt;/&gt;</span>
         <span>DevFlow</span>

components/landing/LandingPreview.tsx

@@ -1,14 +1,36 @@
+'use client';
+
 import Image from 'next/image';
 import FeatureContent from '@/components/landing/FeatureContent';
+import { useLayoutEffect, useRef } from 'react';
+import { initLandingPreviewAnimation } from '@/animations/landingGSAP';
 
 const LandingPreview = () => {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const titleRef = useRef<HTMLHeadingElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!rootRef.current || !titleRef.current || !contentRef.current) return;
+
+    return initLandingPreviewAnimation({
+      rootEl: rootRef.current,
+      titleEl: titleRef.current,
+      contentContainerEl: contentRef.current,
+    });
+  }, []);
   return (
-    <div className="mt-30 flex h-full flex-col items-center justify-center space-y-3 pb-50 text-center">
-      <h1 className="text-4xl font-bold">체계적인 학습으로</h1>
+    <div
+      ref={rootRef}
+      className="mt-30 flex h-full flex-col items-center justify-center space-y-3 pt-50 pb-50 text-center"
+    >
+      <h1 ref={titleRef} className="text-4xl font-bold">
+        체계적인 학습으로
+      </h1>
       <h1 className="text-primary text-4xl font-bold">더 빠른 성장</h1>
       <div className="mx-20 mt-10 grid max-w-7xl grid-cols-1 items-start gap-10 lg:grid-cols-2 lg:gap-2">
         {/* 왼쪽: 400 밑으로 못 내려가게 */}
-        <div className="flex min-w-[355px] justify-center">
+        <div ref={contentRef} className="flex min-w-[355px] justify-center">
           <FeatureContent />
         </div>