[feat] 스크롤 버튼 추가

Author: ahk0413

src/domains/main/components/3d/Scroll.tsx

@@ -1,22 +1,30 @@
 import Lottie from 'lottie-react';
 import scroll from '@/shared/assets/lottie/ScrollDownAnimation.json';
 
-function Scroll() {
-  // const style = !isDesktop
-  //   ? {
-  //       width: 45,
-  //       height: 45,
-  //     }
-  //   : {
-  //       width: 60,
-  //       height: 60,
-  //     };
+type Props = {
+  ref: React.RefObject<HTMLButtonElement | null>;
+};
+
+function Scroll({ ref }: Props) {
+  const style = {
+    width: 50,
+    height: 50,
+  };
   return (
-    <div className="absolute bottom-18 left-1/2 -translate-x-1/2 rounded-full md:bg-secondary/10 bg-primary/30 z-11 md:w-[60px] md:h-[60px] w-[45px] h-[45px]">
-      <div className="z-11">
-        <Lottie animationData={scroll} aria-hidden loop={true} />
-      </div>
-    </div>
+    <button
+      ref={ref}
+      type="button"
+      onClick={() => {
+        window.scrollBy({
+          top: 1000,
+          behavior: 'smooth',
+        });
+      }}
+      aria-label="아래로 스크롤"
+      className="fixed bottom-18 left-1/2 -translate-x-1/2 rounded-full bg-[#000000]/70 z-11 md:w-[60px] md:h-[60px] flex-center cursor-pointer"
+    >
+      <Lottie animationData={scroll} style={style} aria-hidden loop={true} />
+    </button>
   );
 }
 

src/domains/main/components/FinalLanding.tsx

@@ -16,6 +16,9 @@ function FinalLanding() {
   const [isDesktop, setIsDesktop] = useState(false);
   const [hasMounted, setHasMounted] = useState(false);
 
+  const scrollRef = useRef<HTMLButtonElement>(null);
+  const [showScrollBtn, setShowScrollBtn] = useState(false);
+
   useEffect(() => {
     const checkViewport = () => {
       setIsDesktop(window.innerWidth >= 1024);
@@ -61,6 +64,40 @@ function FinalLanding() {
     };
   }, [isDesktop]);
 
+  // scroll 버튼
+  useEffect(() => {
+    if (!scrollRef.current) return;
+
+    const tl = gsap.to(scrollRef.current, {
+      y: 12,
+      repeat: -1,
+      yoyo: true,
+      duration: 0.8,
+      ease: 'power1.inOut',
+    });
+
+    return () => {
+      tl.kill();
+    };
+  }, [showScrollBtn]);
+
+  useEffect(() => {
+    const updateScrollBtn = () => {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+      const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
+      setShowScrollBtn(scrollTop < maxScroll - 5);
+    };
+
+    updateScrollBtn(); // 초기 체크
+    window.addEventListener('scroll', updateScrollBtn);
+    window.addEventListener('resize', updateScrollBtn);
+
+    return () => {
+      window.removeEventListener('scroll', updateScrollBtn);
+      window.removeEventListener('resize', updateScrollBtn);
+    };
+  }, []);
+
   if (!hasMounted) return null;
 
   return (
@@ -91,8 +128,7 @@ function FinalLanding() {
           )}
         </div>
       )}
-
-      <Scroll />
+      {showScrollBtn && <Scroll ref={scrollRef} />}
     </div>
   );
 }

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

@@ -40,7 +40,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
           ease: 'power5.out',
           scrollTrigger: {
             trigger: initialRoot.current,
-            start: 'top 80%',
+            start: 'top top',
             end: 'top top',
             scrub: 0.2,
           },
@@ -65,7 +65,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
           c,
           {
             x: () => stageW() - contentW(),
-            duration: 2,
+            duration: 1,
             immediateRender: false,
             onStart: () => c.classList.remove('invisible'),
           },

src/domains/main/components/mainSlide/components/mobile/MobileSlideCommunity.tsx

@@ -41,6 +41,7 @@ function MobileSlideCommunity() {
                   src={Community01}
                   alt=""
                   fill
+                  sizes="300px"
                   priority
                   className="object-contain object-left-bottom"
                 />
@@ -50,6 +51,7 @@ function MobileSlideCommunity() {
                   src={Community02}
                   alt=""
                   fill
+                  sizes="600px"
                   priority
                   className="object-contain object-left-bottom"
                 />

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

@@ -42,10 +42,10 @@ function MainSlideAbv() {
 
   return (
     <article className="slide-content invisible w-[61%] h-full bg-primary rounded-tl-[30px] rounded-bl-[30px] p-12 flex flex-col">
-      <div className="flex flex-col gap-[4%] h-full">
+      <div className="flex flex-col gap-8 h-full">
         <p className="text-[32px] font-bold ">3</p>
-        <div className="flex flex-col gap-5 h-full justify-between">
-          <header className="flex flex-col gap-10">
+        <div className="flex flex-col gap-8 h-full justify-between">
+          <header className="flex flex-col gap-8">
             <h2 className="text-5xl text-white font-bold">내 알콜도수 UP</h2>
             <p className="text-xl leading-[1.5] font-normal text-white">
               5도 부터 시작하는 내 알콜도수 <br />내 참여에 따라 알콜도수 UP! <br />

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

@@ -5,10 +5,10 @@ import Community02 from '@/shared/assets/images/community_02.webp';
 function MainSlideCommunity() {
   return (
     <article className="slide-content invisible w-[71%] h-full p-12 bg-[#333333] rounded-tl-[30px] rounded-bl-[30px] flex flex-col ">
-      <div className="flex flex-col gap-[4%] h-full">
+      <div className="flex flex-col gap-8 h-full">
         <p className="text-[32px] text-white font-bold">2</p>
         <div className="flex flex-col h-full justify-between">
-          <header className="flex flex-col gap-10">
+          <header className="flex flex-col gap-8">
             <h2 className="text-5xl text-white font-bold">함께 나누는 칵테일 이야기</h2>
             <p className="text-xl leading-[1.5] font-normal text-white">
               다양한 칵테일 레시피들을 SNS로 공유하고
@@ -17,21 +17,23 @@ function MainSlideCommunity() {
             </p>
           </header>
           <div className="flex flex-col w-full gap-5 mt-5" aria-hidden>
-            <div className="relative w-[25%] rounded-2xl aspect-[0.96] overflow-hidden">
+            <div className="relative w-full max-w-[12.5rem] rounded-2xl aspect-[0.96] overflow-hidden">
               <Image
                 src={Community01}
                 alt=""
                 fill
                 priority
+                sizes="200px"
                 className="object-contain object-left-bottom"
               />
             </div>
-            <div className="relative w-[70%] rounded-2xl aspect-[2.09] overflow-hidden">
+            <div className="relative w-full max-w-[37.5rem] rounded-2xl aspect-[2.09] overflow-hidden">
               <Image
                 src={Community02}
                 alt=""
                 fill
                 priority
+                sizes="600px"
                 className="object-contain object-left-bottom"
               />
             </div>

src/domains/main/components/mainSlide/components/pc/MainSlideTest.tsx

@@ -16,10 +16,10 @@ const DUMMY_TEST = [
 function MainSlideTest() {
   return (
     <article className="slide-content invisible w-[80%] p-12 h-full bg-[#4D4D4D] rounded-tl-[30px] rounded-bl-[30px] flex flex-col">
-      <div className="flex flex-col gap-[4%] h-full">
+      <div className="flex flex-col gap-8 h-full">
         <p className="text-[32px] text-white font-bold">1</p>
         <div className="flex flex-col justify-between h-full">
-          <header className="flex flex-col gap-10">
+          <header className="flex flex-col gap-8">
             <h2 className="text-5xl text-white font-bold">AI기반 취향테스트</h2>
             <p className="text-xl leading-[1.5] font-normal text-white">
               복잡한 이름과 긴 설명 때문에 내 취향 칵테일 찾기 어려우셨나요? <br />