refactor: landingGSAP 함수를 재사용하여 최적화

Author: moo1677

animations/landingGSAP.ts

@@ -3,131 +3,105 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
 let pluginsRegistered = false;
 
-const ensurePlugins = () => {
-  if (pluginsRegistered) return;
-  gsap.registerPlugin(ScrollTrigger);
-  pluginsRegistered = true;
-};
+interface AnimateOptions {
+  trigger: HTMLElement; // 스크롤 트리거 기준 요소
+  targets: gsap.TweenTarget; // 애니메이션 대상
+  stagger?: number; // 순차 재생 간격
+  start?: string; // 스크롤 시작 지점
+  yOffset?: number; // y축 이동 거리
+}
 
-export type HeroSectionRefs = {
-  titleEl: HTMLHeadingElement;
-  subTextEl: HTMLDivElement;
-};
-
-export function initHeroSectionAnimation({
-  titleEl,
-  subTextEl,
-}: HeroSectionRefs) {
-  ensurePlugins();
+/* Fad Up 함수 */
+const animateFadeUp = ({
+  trigger,
+  targets,
+  stagger = 0,
+  start = 'top center-=50',
+  yOffset = 24,
+}: AnimateOptions) => {
+  if (!pluginsRegistered) {
+    gsap.registerPlugin(ScrollTrigger);
+    pluginsRegistered = true;
+  }
 
   const ctx = gsap.context(() => {
     gsap.fromTo(
-      subTextEl,
-      { opacity: 0, y: 40 },
+      targets,
+      { opacity: 0, y: yOffset },
       {
         opacity: 1,
         y: 0,
-        duration: 0.8,
+        duration: 0.6,
         ease: 'power2.out',
+        stagger: stagger,
         scrollTrigger: {
-          trigger: titleEl,
-          start: 'top center-=150',
+          trigger: trigger,
+          start: start,
           toggleActions: 'play none none reverse',
           // markers: true,
         },
       }
     );
   });
 
-  return () => ctx.revert(); // ✅ cleanup 반환
-}
-export type FeatureListRefs = {
-  titleEl: HTMLHeadingElement; // "개발자 성장을 위한"
-  subTextEl: HTMLDivElement; // 서브 텍스트 wrapper
-  cardsContainerEl: HTMLDivElement; // grid wrapper
+  return () => ctx.revert();
 };
 
-export function initFeatureListAnimation({
+/* --- 1. Hero Section --- */
+export type HeroSectionRefs = {
+  titleEl: HTMLHeadingElement;
+  subTextEl: HTMLDivElement;
+};
+
+export const initHeroSectionAnimation = ({
   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 });
+}: HeroSectionRefs) => {
+  return animateFadeUp({
+    trigger: titleEl,
+    targets: subTextEl,
+    start: 'top center-=150',
+    yOffset: 40,
+  });
+};
 
-    const tl = gsap.timeline({
-      scrollTrigger: {
-        trigger: titleEl,
-        start: 'top center-=50', // 타이틀 끝이 화면 중간보다 조금 아래에 걸리면
-        toggleActions: 'play none none reverse',
-        // markers: true,
-      },
-    });
+/* --- 2. Feature List Section --- */
+export type FeatureListRefs = {
+  titleEl: HTMLHeadingElement;
+  subTextEl: HTMLDivElement;
+  cardsContainerEl: HTMLDivElement;
+};
 
-    // 1) 서브 텍스트 먼저
-    tl.to(subTextEl, {
-      opacity: 1,
-      y: 0,
-      duration: 0.6,
-      ease: 'power2.out',
-    });
+export const initFeatureListAnimation = ({
+  titleEl,
+  subTextEl,
+  cardsContainerEl,
+}: FeatureListRefs) => {
+  const cards = Array.from(cardsContainerEl.children);
 
-    // 2) 카드들 stagger로 아래→위 쓱~
-    tl.to(
-      cards,
-      {
-        opacity: 1,
-        y: 0,
-        duration: 0.6,
-        ease: 'power2.out',
-        stagger: 0.12,
-      },
-      '-=0.15' // 서브텍스트 끝나기 조금 전에 겹쳐서 시작
-    );
+  return animateFadeUp({
+    trigger: titleEl,
+    targets: [subTextEl, ...cards],
+    stagger: 0.12,
   });
+};
 
-  return () => ctx.revert();
-}
+/* --- 3. Landing Preview Section --- */
 export type LandingPreviewRefs = {
-  rootEl: HTMLElement; // 섹션 전체
-  titleEl: HTMLHeadingElement; // "체계적인 학습으로" h1
-  contentContainerEl: HTMLDivElement; // FeatureContent 감싸는 div
+  rootEl: HTMLElement;
+  titleEl: HTMLHeadingElement;
+  contentContainerEl: HTMLDivElement;
 };
 
-export function initLandingPreviewAnimation({
-  rootEl,
+export const initLandingPreviewAnimation = ({
   titleEl,
   contentContainerEl,
-}: LandingPreviewRefs) {
-  ensurePlugins();
-
-  const ctx = gsap.context(() => {
-    const items = contentContainerEl.querySelectorAll<HTMLElement>('.fc-item');
+}: LandingPreviewRefs) => {
+  const items = contentContainerEl.querySelectorAll('#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();
-}
+  return animateFadeUp({
+    trigger: titleEl,
+    targets: items,
+    stagger: 0.2,
+  });
+};

components/landing/FeatureContent.tsx

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

components/landing/LandingPreview.tsx

@@ -28,15 +28,18 @@ const LandingPreview = () => {
         체계적인 학습으로
       </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 ref={contentRef} className="flex min-w-[355px] justify-center">
+      <div
+        className="mx-20 mt-10 grid max-w-7xl grid-cols-1 items-start gap-10 lg:grid-cols-2 lg:gap-2"
+        ref={contentRef}
+      >
+      
+        <div className="flex min-w-[355px] justify-center">
           <FeatureContent />
         </div>
 
-        {/* 오른쪽: 이미지 그대로 */}
         <div className="flex justify-center">
           <Image
+            id="fc-item"
             src="/PreviewImage.png"
             alt="DevFlow 미리보기"
             width={720}