[fix]충돌에러수정

Author: mtm-git1018

src/domains/main/components/mainSlide/components/MainSlide.tsx

@@ -11,49 +11,24 @@ import MainSlideAbv from './pc/MainSlideAbv';
 
 gsap.registerPlugin(ScrollTrigger);
 
-function MainSlide({ isDesktop }: { isDesktop: boolean }) {
 function MainSlide({ isDesktop }: { isDesktop: boolean }) {
   const root = useRef<HTMLDivElement>(null);
   const initialRoot = useRef<HTMLDivElement>(null);
-  const initialRoot = useRef<HTMLDivElement>(null);
   const [mounted, setMounted] = useState(false);
   const cleanupFnRef = useRef<(() => void) | null>(null);
 
-  useLayoutEffect(() => {
   useLayoutEffect(() => {
     setMounted(true);
   }, []);
-  }, []);
 
   // GSAP 초기화 - 데스크탑에서만
   useLayoutEffect(() => {
     if (!mounted || !isDesktop || !root.current) return;
-    if (!mounted || !isDesktop || !root.current) return;
 
     const el = root.current;
     const stage = el.querySelector('.stage') as HTMLElement;
     if (!stage) return;
 
-    const ctx = gsap.context(() => {
-      // 첫 진입 애니메이션
-      gsap.fromTo(
-        initialRoot.current,
-        { opacity: 0 },
-        {
-          y: 0,
-          opacity: 1,
-          ease: 'power5.out',
-          scrollTrigger: {
-            trigger: initialRoot.current,
-            start: 'top 80%',
-            end: 'top top',
-            scrub: 0.2,
-          },
-        }
-      );
-
-      const panels = Array.from(el.querySelectorAll<HTMLElement>('.panel'));
-      const tl = gsap.timeline({ paused: true, defaults: { ease: 'power3.inOut' } });
     const ctx = gsap.context(() => {
       // 첫 진입 애니메이션
       gsap.fromTo(
@@ -75,21 +50,12 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
       const panels = Array.from(el.querySelectorAll<HTMLElement>('.panel'));
       const tl = gsap.timeline({ paused: true, defaults: { ease: 'power3.inOut' } });
 
-      panels.forEach((panel, i) => {
-        const c = panel.querySelector<HTMLElement>('.slide-content');
-        if (!c) return;
-        const stageW = () => stage.clientWidth;
-        const contentW = () => c.getBoundingClientRect().width;
       panels.forEach((panel, i) => {
         const c = panel.querySelector<HTMLElement>('.slide-content');
         if (!c) return;
         const stageW = () => stage.clientWidth;
         const contentW = () => c.getBoundingClientRect().width;
 
-        gsap.set(c, {
-          x: () => stageW(),
-          immediateRender: false,
-        });
         gsap.set(c, {
           x: () => stageW(),
           immediateRender: false,
@@ -106,27 +72,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
           i
         );
       });
-        tl.to(
-          c,
-          {
-            x: () => stageW() - contentW(),
-            duration: 2,
-            immediateRender: false,
-            onStart: () => c.classList.remove('invisible'),
-          },
-          i
-        );
-      });
 
-      ScrollTrigger.create({
-        trigger: el,
-        start: 'top top',
-        end: `+=${panels.length * 100}%`,
-        pin: true,
-        scrub: true,
-        animation: tl,
-        invalidateOnRefresh: true,
-      });
       ScrollTrigger.create({
         trigger: el,
         start: 'top top',
@@ -139,16 +85,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
 
       ScrollTrigger.refresh();
     }, root);
-      ScrollTrigger.refresh();
-    }, root);
 
-    cleanupFnRef.current = () => {
-      const allTriggers = ScrollTrigger.getAll();
-      allTriggers.forEach((st) => {
-        if (st.trigger === el || el.contains(st.trigger as Node)) {
-          st.kill(true);
-        }
-      });
     cleanupFnRef.current = () => {
       const allTriggers = ScrollTrigger.getAll();
       allTriggers.forEach((st) => {
@@ -157,9 +94,6 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
         }
       });
 
-      try {
-        ctx.revert();
-      } catch {}
       try {
         ctx.revert();
       } catch {}
@@ -176,36 +110,19 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
         }
       });
     };
-      // pin-spacer 정리
-      const pinSpacers = document.querySelectorAll('.pin-spacer');
-      pinSpacers.forEach((spacer) => {
-        if (spacer.contains(el) || el.contains(spacer)) {
-          const child = spacer.querySelector('section');
-          if (child && spacer.parentElement) {
-            spacer.parentElement.appendChild(child);
-          }
-          spacer.remove();
-        }
-      });
-    };
 
     return () => {
       cleanupFnRef.current?.();
       cleanupFnRef.current = null;
-      cleanupFnRef.current?.();
-      cleanupFnRef.current = null;
     };
   }, [isDesktop, mounted]);
-  }, [isDesktop, mounted]);
   // SSR 방지
   if (!mounted) {
     return null;
   }
 
   return (
     <>
-      {!isDesktop ? (
-        <MobileSlide key="mobile" />
       {!isDesktop ? (
         <MobileSlide key="mobile" />
       ) : (
@@ -215,22 +132,18 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
               <div className="panel absolute inset-0 overflow-hidden">
                 <MainSlideIntro />
               </div>
-              <div className="panel absolute inset-0 overflow-hidden">
               <div className="panel absolute inset-0 overflow-hidden">
                 <MainSlideTest />
               </div>
-              <div className="panel absolute inset-0 overflow-hidden">
               <div className="panel absolute inset-0 overflow-hidden">
                 <MainSlideCommunity />
               </div>
-              <div className="panel absolute inset-0 overflow-hidden">
               <div className="panel absolute inset-0 overflow-hidden">
                 <MainSlideAbv />
               </div>
             </div>
           </section>
         </div>
-        </div>
       )}
     </>
   );

src/domains/main/components/mainSlide/components/MainSlideIntro.tsx

@@ -5,7 +5,6 @@ function MainSlideIntro() {
         <h2 className="text-3xl lg:text-[5rem] font-extrabold leading-[1.2] text-primary">
           칵테일 <br /> 누구나 쉽게 즐길 수 있어요
         </h2>
-        <p className="text-2xl font-normal text-primary/80">
         <p className="text-2xl font-normal text-primary/80">
           SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
         </p>

src/domains/main/components/mainSlide/components/MainTestDummy.tsx

@@ -71,7 +71,6 @@ function MainTestDummy({ message, option, type }: Props) {
         </section>
       )}
       {type == 'text' && (
-        <div className="flex flex-row gap-2 md:overflow-x-none overflow-x-auto no-scrollbar">
         <div className="flex flex-row gap-2 md:overflow-x-none overflow-x-auto no-scrollbar">
           {DUMMY_CARD.map(({ id, src, cocktailName }) => (
             <MainSlideDummyCard key={id} id={id} src={src} cocktailName={cocktailName} />

src/domains/recipe/components/main/CocktailFilter.tsx

@@ -3,10 +3,8 @@ import { useRouter } from 'next/navigation';
 
 interface Props {
   cocktailsEA: number;
-  cocktailsEA: number;
 }
 
-function CocktailFilter({ cocktailsEA }: Props) {
 function CocktailFilter({ cocktailsEA }: Props) {
   const sortMap = {
     최신순: 'recent',