fix: 오타, 애니메이션 트리거 수정

Author: moo1677

animations/landingGSAP.ts

@@ -11,7 +11,7 @@ interface AnimateOptions {
   yOffset?: number; // y축 이동 거리
 }
 
-/* Fad Up 함수 */
+/* Fade Up 함수 */
 const animateFadeUp = ({
   trigger,
   targets,
@@ -88,7 +88,6 @@ export const initFeatureListAnimation = ({
 
 /* --- 3. Landing Preview Section --- */
 export type LandingPreviewRefs = {
-  rootEl: HTMLElement;
   titleEl: HTMLHeadingElement;
   contentContainerEl: HTMLDivElement;
 };
@@ -97,7 +96,7 @@ export const initLandingPreviewAnimation = ({
   titleEl,
   contentContainerEl,
 }: LandingPreviewRefs) => {
-  const items = contentContainerEl.querySelectorAll('#fc-item');
+  const items = contentContainerEl.querySelectorAll('.fc-item');
 
   return animateFadeUp({
     trigger: titleEl,

components/landing/FeatureContent.tsx

@@ -23,7 +23,7 @@ const FeatureContent = () => {
   return (
     <ul className="space-y-6">
       {ITEMS.map((item) => (
-        <li key={item.title} id="fc-item">
+        <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/LandingPreview.tsx

@@ -6,24 +6,19 @@ 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;
+    if (!titleRef.current || !contentRef.current) return;
 
     return initLandingPreviewAnimation({
-      rootEl: rootRef.current,
       titleEl: titleRef.current,
       contentContainerEl: contentRef.current,
     });
   }, []);
   return (
-    <div
-      ref={rootRef}
-      className="mt-30 flex h-full flex-col items-center justify-center space-y-3 pt-50 pb-50 text-center"
-    >
+    <div 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>
@@ -32,19 +27,17 @@ const LandingPreview = () => {
         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}
             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]"
+            className="fc-item w-full max-w-[480px] min-w-[360px] object-contain md:max-w-[560px] lg:max-w-[640px] xl:max-w-[720px]"
           />
         </div>
       </div>