diff --git a/src/app/(landing)/_components/landing-animations.tsx b/src/app/(landing)/_components/landing-animations.tsx index 2d0bdd64..0b9e585c 100644 --- a/src/app/(landing)/_components/landing-animations.tsx +++ b/src/app/(landing)/_components/landing-animations.tsx @@ -7,7 +7,6 @@ import { cn } from "@/lib/utils"; type GSAPInstance = (typeof import("gsap"))["gsap"]; type GSAPContext = ReturnType; - let gsapRegistration: Promise | null = null; const ensureGsapWithScrollTrigger = async () => { @@ -53,14 +52,13 @@ const LandingSections = ({ sections }: LandingSectionsProps) => { const sectionElements = Array.from( container.querySelectorAll("[data-landing-section]") ); - if (sectionElements.length === 0) return; if (prefersReducedMotion) { sectionElements.forEach((section) => { section .querySelectorAll( - "[data-landing-section-text],[data-landing-section-image]" + "[data-landing-section-text-inner],[data-landing-section-image-inner]" ) .forEach((el) => { el.style.opacity = "1"; @@ -74,15 +72,15 @@ const LandingSections = ({ sections }: LandingSectionsProps) => { sectionElements.forEach((section) => { const layout = section.dataset.landingSectionLayout ?? "default"; const text = section.querySelector( - "[data-landing-section-text]" + "[data-landing-section-text-inner]" ); const image = section.querySelector( - "[data-landing-section-image]" + "[data-landing-section-image-inner]" ); if (!text || !image) return; - const textFromX = layout === "reverse" ? 80 : -80; - const imageFromX = layout === "reverse" ? -80 : 80; + const textFromX = layout === "reverse" ? 40 : -40; + const imageFromX = layout === "reverse" ? -40 : 40; gsap.set(text, { opacity: 0, x: textFromX }); gsap.set(image, { opacity: 0, x: imageFromX }); @@ -93,28 +91,19 @@ const LandingSections = ({ sections }: LandingSectionsProps) => { start: "top 80%", end: "bottom 20%", toggleActions: "play none none reverse", + fastScrollEnd: true, }, }); timeline .to( text, - { - x: 0, - opacity: 1, - duration: 0.5, - ease: "power2.out", - }, + { x: 0, opacity: 1, duration: 0.4, ease: "power1.out" }, 0 ) .to( image, - { - x: 0, - opacity: 1, - duration: 0.5, - ease: "power2.out", - }, + { x: 0, opacity: 1, duration: 0.4, ease: "power1.out" }, 0.1 ); }); @@ -134,7 +123,7 @@ const LandingSections = ({ sections }: LandingSectionsProps) => { id="landing-sections" ref={containerRef} className={cn( - "flex flex-col items-center pt-16", + "flex flex-col items-center overflow-x-hidden pt-16", "gap-12 pc:gap-24", "tablet:scroll-mt-[70px] pc:scroll-mt-[70px]" )} diff --git a/src/app/(landing)/_components/landing-floating-cta.tsx b/src/app/(landing)/_components/landing-floating-cta.tsx index 41e37468..c18f62f6 100644 --- a/src/app/(landing)/_components/landing-floating-cta.tsx +++ b/src/app/(landing)/_components/landing-floating-cta.tsx @@ -54,8 +54,8 @@ const LandingFloatingCTA = ({ footerId }: LandingFloatingCTAProps) => { return (
@@ -64,7 +64,7 @@ const LandingFloatingCTA = ({ footerId }: LandingFloatingCTAProps) => { label="와인 보러가기" scroll={true} className={cn( - "h-[54px] w-[260px] select-none px-8", + "pointer-events-auto h-[54px] w-[260px] select-none px-8", "tablet:w-[320px]", "pc:h-[60px] pc:w-[260px]" )} diff --git a/src/app/(landing)/_components/landing-section.tsx b/src/app/(landing)/_components/landing-section.tsx index 69e5bbf0..2061f6b1 100644 --- a/src/app/(landing)/_components/landing-section.tsx +++ b/src/app/(landing)/_components/landing-section.tsx @@ -2,10 +2,6 @@ import Image from "next/image"; import { cn } from "@/lib/utils"; import { LandingSectionData } from "../_types"; -/** - * 랜딩 페이지 기능 소개 섹션 - * 애니메이션은 상위 컨테이너에서 제어 - */ const LandingSection = ({ title, subtitle, @@ -20,51 +16,61 @@ const LandingSection = ({ data-landing-section data-landing-section-layout={layout} className={cn( - "flex w-full max-w-6xl flex-col items-start gap-8", + "flex w-full max-w-6xl select-none flex-col items-start gap-8", isReverse ? "pc:flex-row-reverse pc:items-center pc:gap-36" : "pc:flex-row pc:items-center pc:gap-36" )} > - {/* 텍스트 영역 */}
-

- {title.map((line, index) => ( - {line} - ))} -

-
- {subtitle.map((line, index) => ( - {line} - ))} +

+ {title.map((line, index) => ( + {line} + ))} +

+
+ {subtitle.map((line, index) => ( + {line} + ))} +
- {/* 이미지 영역 */}
-
+
{imgAlt}