feat: GSAP 라이브러리 적용

Author: moo1677

animations/landingGSAP.ts

@@ -0,0 +1,43 @@
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+let pluginsRegistered = false;
+
+const ensurePlugins = () => {
+  if (pluginsRegistered) return;
+  gsap.registerPlugin(ScrollTrigger);
+  pluginsRegistered = true;
+};
+
+export type HeroSectionRefs = {
+  titleEl: HTMLHeadingElement;
+  subTextEl: HTMLDivElement;
+};
+
+export function initHeroSectionAnimation({
+  titleEl,
+  subTextEl,
+}: HeroSectionRefs) {
+  ensurePlugins();
+
+  // gsap.context를 쓰면 cleanup이 아주 깔끔해짐
+  const ctx = gsap.context(() => {
+    gsap.fromTo(
+      subTextEl,
+      { opacity: 0, y: 40 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.8,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: titleEl,
+          start: 'right bottom+=100 60%',
+          toggleActions: 'play none none reverse',
+        },
+      }
+    );
+  });
+
+  return () => ctx.revert(); // ✅ cleanup 반환
+}

components/landing/HeroSection.tsx

@@ -1,9 +1,30 @@
+'use client';
+
+import { useLayoutEffect, useRef } from 'react';
+import { initHeroSectionAnimation } from '@/animations/landingGSAP';
+
 const HeroSection = () => {
+  const titleRef = useRef<HTMLHeadingElement>(null);
+  const subTextRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!titleRef.current || !subTextRef.current) return;
+
+    const cleanup = initHeroSectionAnimation({
+      titleEl: titleRef.current,
+      subTextEl: subTextRef.current,
+    });
+
+    return cleanup;
+  }, []);
+
   return (
-    <div className="flex flex-col items-center justify-center space-y-3 pt-30 text-center">
-      <h1 className="text-8xl font-bold">매일 성장하는</h1>
+    <div className="flex flex-col items-center justify-center space-y-3 pt-100 text-center">
+      <h1 ref={titleRef} className="text-8xl font-bold">
+        매일 성장하는
+      </h1>
       <h1 className="text-primary text-8xl font-bold">개발자의 여정</h1>
-      <div className="text-2xl font-light">
+      <div ref={subTextRef} className="text-2xl font-light">
         <h2>TIL 작성부터 목표 관리까지, DevFlow와 함께</h2>
         <h2>체계적인 학습으로 더 나은 개발자로 성장하세요</h2>
       </div>

components/landing/LandingPreview.tsx

@@ -6,15 +6,22 @@ const LandingPreview = () => {
     <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>
       <h1 className="text-primary text-4xl font-bold">더 빠른 성장</h1>
-      <div className="mx-20 mt-10 flex flex-col items-center gap-10 lg:flex-row lg:items-start lg:gap-50">
-        <FeatureContent />
-        <Image
-          src="/PreviewImage.png"
-          alt="DevFlow 미리보기"
-          width={720}
-          height={400}
-          className="w-full max-w-[480px] min-w-[360px] flex-shrink-0 object-contain md:max-w-[560px] lg:max-w-[640px] xl:max-w-[720px]"
-        />
+      <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">
+          <FeatureContent />
+        </div>
+
+        {/* 오른쪽: 이미지 그대로 */}
+        <div className="flex justify-center">
+          <Image
+            src="/PreviewImage.png"
+            alt="DevFlow 미리보기"
+            width={720}
+            height={400}
+            className="w-full max-w-[480px] min-w-[360px] object-contain md:max-w-[560px] lg:max-w-[640px] xl:max-w-[720px]"
+          />
+        </div>
       </div>
     </div>
   );

package-lock.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "firebase": "^12.7.0",
+    "gsap": "^3.14.2",
     "next": "16.1.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",