Style/main page 2#122

src/app/layout.tsx

@@ -8,8 +8,9 @@ import KaKaoScript from './api/kakao/KaKaoScript';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
-import Provider from '@/shared/api/Provider';
+
 import ClientInitHook from '@/domains/login/components/ClientInitHook';
+import Provider from '@/shared/provider/Provider';
 
 export const metadata: Metadata = {
   title: { default: 'SSOUL', template: 'SSOUL | %s' },

src/app/page.tsx

@@ -1,5 +1,12 @@
 import Landing from '@/domains/shared/components/3d/Landing';
 
+import MainSlide from '@/domains/main/components/mainSlide/components/MainSlide';
+
 export default function Home() {
-  return <Landing />;
+  return (
+    <div className="page-layout max-w-full">
+      <Landing />
+      <MainSlide />
+    </div>
+  );
 }

src/app/recipe/[id]/page.tsx

@@ -1,5 +1,6 @@
 import { getApi } from '@/app/api/config/appConfig';
-import DetailMain from '@/domains/recipe/details/DetailMain';
+import DetailMain from '@/domains/recipe/components/details/DetailMain';
+
 import StarBg from '@/domains/shared/components/star-bg/StarBg';
 import { Metadata } from 'next';
 

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

@@ -0,0 +1,187 @@
+'use client';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import MainSlideAbv from './MainSlideAbv';
+
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import MobileSlide from './mobile/MobileSlide';
+import MainSlideIntro from './MainSlideIntro';
+import MainSlideTest from './MainSlideTest';
+import MainSlideCommunity from './MainSlideCommunity';
+
+gsap.registerPlugin(ScrollTrigger);
+
+function MainSlide() {
+  const root = useRef<HTMLDivElement>(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const cleanupFnRef = useRef<(() => void) | null>(null);
+  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 초기 마운트
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 1024);
+    setMounted(true);
+
+    const handleResize = () => {
+      // 디바운스: resize 이벤트를 200ms 지연
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+
+      resizeTimeoutRef.current = setTimeout(() => {
+        const newIsMobile = window.innerWidth < 1024;
+
+        // 모바일 ↔ 데스크탑 전환 시에만 cleanup 실행
+        if (newIsMobile !== isMobile) {
+          // GSAP을 먼저 완전히 정리
+          if (cleanupFnRef.current) {
+            cleanupFnRef.current();
+            cleanupFnRef.current = null;
+          }
+
+          // 상태 업데이트
+          setIsMobile(newIsMobile);
+        }
+      }, 200);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      if (cleanupFnRef.current) {
+        cleanupFnRef.current();
+      }
+    };
+  }, [isMobile]);
+
+  // GSAP 초기화 - 데스크탑에서만
+  useLayoutEffect(() => {
+    if (!mounted) return;
+    if (isMobile) return;
+    if (!root.current) return;
+
+    const el = root.current;
+    const stage = el.querySelector('.stage') as HTMLElement;
+    if (!stage) return;
+
+    // 약간의 지연을 줘서 DOM이 안정화되도록
+    const timer = setTimeout(() => {
+      if (!root.current) return;
+
+      const ctx = gsap.context(() => {
+        const panels = Array.from(el.querySelectorAll<HTMLElement>('.panel'));
+        const tl = gsap.timeline({ paused: true, defaults: { ease: 'none' } });
+
+        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() });
+
+          tl.to(
+            c,
+            {
+              x: () => stageW() - contentW(),
+              duration: 1,
+              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.refresh();
+      }, root);
+
+      // cleanup 함수를 ref에 저장
+      cleanupFnRef.current = () => {
+        // ScrollTrigger를 먼저 완전히 제거
+        const allTriggers = ScrollTrigger.getAll();
+        allTriggers.forEach((st) => {
+          if (st.trigger === el || el.contains(st.trigger as Node)) {
+            st.kill(true);
+          }
+        });
+
+        // GSAP context revert
+        try {
+          ctx.revert();
+        } catch (e) {
+          // 무시
+        }
+
+        // 혹시 남아있는 pin-spacer 수동 제거
+        const pinSpacers = document.querySelectorAll('.pin-spacer');
+        pinSpacers.forEach((spacer) => {
+          if (spacer.contains(el) || el.contains(spacer)) {
+            try {
+              const child = spacer.querySelector('section');
+              if (child && spacer.parentElement) {
+                spacer.parentElement.appendChild(child);
+              }
+              spacer.remove();
+            } catch (e) {
+              // 무시
+            }
+          }
+        });
+      };
+    }, 50);
+
+    return () => {
+      clearTimeout(timer);
+      if (cleanupFnRef.current) {
+        cleanupFnRef.current();
+        cleanupFnRef.current = null;
+      }
+    };
+  }, [isMobile, mounted]);
+
+  // SSR 방지
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <>
+      {isMobile ? (
+        <MobileSlide key="mobile" />
+      ) : (
+        <section key="desktop" ref={root} className="h-screen">
+          <div className="stage relative w-full h-full overflow-hidden">
+            <div className="panel absolute inset-0">
+              <MainSlideIntro />
+            </div>
+            <div className="panel absolute inset-0">
+              <MainSlideTest />
+            </div>
+            <div className="panel absolute inset-0">
+              <MainSlideCommunity />
+            </div>
+            <div className="panel absolute inset-0">
+              <MainSlideAbv />
+            </div>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}
+
+export default MainSlide;

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

@@ -0,0 +1,72 @@
+import Ssury1 from '@/shared/assets/ssury/ssury_level1.webp';
+import Ssury2 from '@/shared/assets/ssury/ssury_level2.webp';
+import Ssury3 from '@/shared/assets/ssury/ssury_level3.webp';
+import Ssury4 from '@/shared/assets/ssury/ssury_level4.webp';
+import Ssury5 from '@/shared/assets/ssury/ssury_level5.webp';
+import Ssury6 from '@/shared/assets/ssury/ssury_level6.webp';
+import MainSsuryDrunk from './MainSsuryDrunk';
+
+function MainSlideAbv() {
+  const SSURY_DRUNK = [
+    {
+      id: 1,
+      src: Ssury1,
+      abv: 5,
+    },
+    {
+      id: 2,
+      src: Ssury2,
+      abv: 11,
+    },
+    {
+      id: 3,
+      src: Ssury3,
+      abv: 26,
+    },
+    {
+      id: 4,
+      src: Ssury4,
+      abv: 46,
+    },
+    {
+      id: 5,
+      src: Ssury5,
+      abv: 66,
+    },
+    {
+      id: 6,
+      src: Ssury6,
+      abv: 86,
+    },
+  ];
+
+  return (
+    <div className="slide-content w-1/2 h-full bg-[#84739e] rounded-tl-[30px] rounded-bl-[30px] p-15 flex flex-col justify-center">
+      <div className="flex flex-col gap-15">
+        <span className="font-black text-[32px]">3</span>
+        <div className="flex flex-col gap-5">
+          <h2 className="text-5xl font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
+            내 알콜도수 UP
+          </h2>
+          <p className="text-xl xl:text-2xl font-normal leading-[1.5]">
+            5도 부터 시작하는 내 알콜도수 <br />글 작성,댓글,좋아요 / 킵으로 알콜도수 UP! <br />
+            알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
+          </p>
+        </div>
+        <div className=" h-[190px] flex flex-col gap-2">
+          <ul className="flex gap-[5%] xl:gap-[10%]">
+            {SSURY_DRUNK.map(({ id, src, abv }) => (
+              <li key={id}>
+                <MainSsuryDrunk src={src} abv={abv} />
+              </li>
+            ))}
+          </ul>
+          <div className="w-full h-3 border border-gray rounded-full relative">
+            <span className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-[#FFCA8D] to-[#FA2424] w-1/2"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default MainSlideAbv;

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

@@ -0,0 +1,24 @@
+function MainSlideCommunity() {
+  return (
+    <div className="slide-content w-3/5 h-full p-15 bg-[#77688d] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center">
+      <div className="flex flex-col justify-center">
+        <div className="flex flex-col gap-15">
+          <span className="text-[32px] font-black">2</span>
+          <div className="flex flex-col gap-5">
+            <h2 className="text-5xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
+              술술 즐기는, 커뮤니티
+            </h2>
+            <p className="text-xl xl:text-2xl text-secondary font-normal leading-[1.5]">
+              칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
+              초보자부터 애호가까지, Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
+              <br />
+              회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
+            </p>
+          </div>
+        </div>
+        <span className="h-[250px]"></span>
+      </div>
+    </div>
+  );
+}
+export default MainSlideCommunity;

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

@@ -0,0 +1,25 @@
+import Keep from '@/shared/assets/icons/keep_36.svg';
+import Image from 'next/image';
+
+interface Props {
+  id: number;
+  src: string;
+  cocktailName: string;
+}
+
+function MainSlideDummyCard({ src, cocktailName }: Props) {
+  return (
+    <div className="relative flex flex-col w-full min-w-[150px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
+      <div className="relative w-full h-[100px]">
+        <Image src={src} fill className="object-cover" alt="" sizes="100px" priority />
+      </div>
+
+      <div className="p-3 flex flex-col gap-1 text-center">
+        <strong className="text-black text-lg">{cocktailName}</strong>
+        <span className="text-gray-500 text-sm">+ 상세보기</span>
+      </div>
+      <Keep className="absolute top-2 right-2" fill="transparent" />
+    </div>
+  );
+}
+export default MainSlideDummyCard;

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

@@ -0,0 +1,19 @@
+import background from '@/shared/assets/images/main_slide.webp';
+import Image from 'next/image';
+
+function MainSlideIntro() {
+  return (
+    <div className="relative w-full p-12 h-full">
+      <Image src={background} alt="" fill className="-z-1" />
+      <div className="flex flex-col gap-8">
+        <h2 className="text-3xl lg:text-5xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
+          칵테일 <br /> 누구나 쉽게 즐길 수 있어요
+        </h2>
+        <p className="text-2xl font-normal">
+          SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
+        </p>
+      </div>
+    </div>
+  );
+}
+export default MainSlideIntro;