feat: mobile 기능 소개 애니메이션 기존 코드로 다시 수정

Author: anyl92

app/landing/components/mobile/Component2Mobile.tsx

@@ -1,20 +1,51 @@
-import { motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import "../../styles/snap.modules.sass";
 
 import Phone1 from "./Phone1";
 import Phone2 from "./Phone2";
 import Phone3 from "./Phone3";
 
-import "../../styles/snap.modules.sass";
-
 const Component2Mobile = () => {
-  const fadeInUp = {
-    initial: { opacity: 0, y: 40 },
-    animate: { opacity: 1, y: 0 },
-    transition: { duration: 0.6, ease: "easeOut" },
-  };
+  const [activeSection, setActiveSection] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start end", "end start"],
+  });
+  const opacity = useTransform(scrollYProgress, [0.1, 0.12], [0, 1]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!ref.current || typeof ref === "function") return;
+
+      const sectionTop = ref.current.offsetTop;
+      const scrollY = window.scrollY;
+      const sectionHeight = window.innerHeight * 0.5;
+
+      const currentSection = Math.floor(
+        (scrollY - sectionTop + sectionHeight / 2) / sectionHeight
+      );
+
+      setActiveSection(currentSection);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref]);
 
   return (
-    <div className="snap-container">
+    <motion.div
+      className="mobile-img-cont"
+      ref={ref}
+      style={{
+        opacity,
+        position: "sticky",
+      }}
+    >
       <div className="mobile-func-box">
         <h1 className="mobile-title2">
           4년간의 현장 경험으로 탄생한 솔루션 <br />
@@ -23,24 +54,14 @@ const Component2Mobile = () => {
         <h4 className="mobile-sub-title2">
           방탈출에만 몰입할 수 있는 특별한 기능을 제공합니다.
         </h4>
-      </div>
 
-      <div className="snap-section">
-        <motion.div {...fadeInUp}>
-          <Phone1 />
-        </motion.div>
-      </div>
-      <div className="snap-section">
-        <motion.div {...fadeInUp}>
-          <Phone2 />
-        </motion.div>
-      </div>
-      <div className="snap-section">
-        <motion.div {...fadeInUp}>
-          <Phone3 />
-        </motion.div>
+        <div className="mobile-func-img-box">
+          {activeSection <= 0 && <Phone1 key="phone1" />}
+          {activeSection === 1 && <Phone2 key="phone2" />}
+          {activeSection >= 2 && <Phone3 key="phone3" />}
+        </div>
       </div>
-    </div>
+    </motion.div>
   );
 };
 export default Component2Mobile;

app/landing/components/mobile/Phone2.tsx

@@ -1,9 +1,11 @@
+import { forwardRef, useEffect } from "react";
+import { useAnimation, motion } from "framer-motion";
 import Image from "next/image";
 import "@/(shared)/utils/firebase";
 
 import useAnalytics from "../../../(shared)/hooks/useAnalytics";
 
-const Phone2 = () => {
+const Phone2 = forwardRef<HTMLDivElement>((_, ref) => {
   const { logEvent } = useAnalytics();
   logEvent("screen_view", {
     firebase_screen: "homepage_function_2",
@@ -15,16 +17,61 @@ const Phone2 = () => {
     width: 180,
     height: 350,
   };
+
+  const controls = useAnimation();
+  useEffect(() => {
+    const updateOpacity = () => {
+      if (typeof ref !== "function" && ref?.current) {
+        const viewportHeight = window.innerHeight;
+
+        const start = ref.current.offsetTop + viewportHeight * 0.7;
+        const end = ref.current.offsetTop + viewportHeight * 1.4;
+
+        const { scrollY } = window;
+
+        if (scrollY > start && scrollY < end) {
+          const progress = (scrollY - start) / (end - start);
+          const opacity = 1 - progress;
+          controls.start({ opacity: Math.max(0, opacity) });
+        } else if (scrollY <= start) {
+          controls.start({ opacity: 1 });
+        } else if (scrollY >= end) {
+          controls.start({ opacity: 0 });
+        }
+      }
+    };
+
+    window.addEventListener("scroll", updateOpacity);
+    updateOpacity();
+    return () => {
+      window.removeEventListener("scroll", updateOpacity);
+    };
+  }, [controls, ref]);
+
+  const phoneVariants = {
+    hidden: { y: 50, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+    exit: { y: -50, opacity: 0 },
+  };
+
   return (
-    <>
+    <motion.div
+      className="mobile-img-cont"
+      ref={ref}
+      variants={phoneVariants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      transition={{ duration: 0.5 }}
+    >
       <Image {...imgProps} />
       <div className="mobile-func-description">
         어두운 공간에서 진행하더라도
         <br />
         밝은 빛으로 인한 방해가 없어요.
       </div>
-    </>
+    </motion.div>
   );
-};
+});
 
 export default Phone2;

app/landing/components/mobile/Phone3.tsx

@@ -1,31 +1,77 @@
+import { useAnimation, motion } from "framer-motion";
+import { forwardRef, useEffect } from "react";
 import Image from "next/image";
 import "@/(shared)/utils/firebase";
 
 import useAnalytics from "../../../(shared)/hooks/useAnalytics";
 
-const Phone3 = () => {
+const Phone3 = forwardRef<HTMLDivElement>((_, ref) => {
   const { logEvent } = useAnalytics();
   logEvent("screen_view", {
     firebase_screen: "homepage_function_3",
     firebase_screen_class: "homepage_function_3",
   });
+
   const imgProps = {
     src: "/images/landing/hint_phone3.svg",
     alt: "NEXT ROOM",
     width: 180,
     height: 350,
   };
 
+  const controls = useAnimation();
+  useEffect(() => {
+    const updateOpacity = () => {
+      if (typeof ref !== "function" && ref?.current) {
+        const viewportHeight = window.innerHeight;
+
+        const start = ref.current.offsetTop + viewportHeight * 0.7;
+        const end = ref.current.offsetTop + viewportHeight * 1.8;
+
+        const { scrollY } = window;
+
+        if (scrollY > start && scrollY < end) {
+          const progress = (scrollY - start) / (end - start);
+          const opacity = 1 - progress;
+          controls.start({ opacity: Math.max(0, opacity) });
+        } else if (scrollY <= start) {
+          controls.start({ opacity: 1 });
+        } else if (scrollY >= end) {
+          controls.start({ opacity: 0 });
+        }
+      }
+    };
+    window.addEventListener("scroll", updateOpacity);
+    updateOpacity(); // Call once to set initial value
+
+    return () => {
+      window.removeEventListener("scroll", updateOpacity);
+    };
+  }, [controls, ref]);
+
+  const phoneVariants = {
+    hidden: { y: 50, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+    exit: { y: -50, opacity: 0 },
+  };
   return (
-    <>
+    <motion.div
+      className="mobile-img-cont"
+      ref={ref}
+      variants={phoneVariants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      transition={{ duration: 0.5 }}
+    >
       <Image {...imgProps} />
       <div className="mobile-func-description">
         각 테마의 독특한 분위기로
         <br />
         배경화면을 커스텀해보세요.
       </div>
-    </>
+    </motion.div>
   );
-};
+});
 
 export default Phone3;

app/landing/styles/landing.modules.sass

@@ -327,6 +327,8 @@
   &-main3
     text-align: center
     padding: 80px 0
+    @media (max-width: 767px)
+      padding: 200px 0
 
     img
       @media (max-width: 767px)
@@ -577,6 +579,8 @@
     justify-content: center
     align-items: center
     gap: 20px
+    @media (max-width: 767px)
+      flex-direction: column
 
   &-plan-box
     width: 316px

app/landing/styles/snap.modules.sass

@@ -1,4 +1,12 @@
 .mobile
+  &-wrapper7
+    height: fit-content
+    margin: 106px 0
+    text-align: center
+    // position: relative
+    position: sticky
+    top: 100px
+
   &-title2
     font-size: 20px
     font-weight: 600
@@ -15,32 +23,50 @@
     text-align: center
     margin: 10px 0 40px
 
+  &-img-cont
+    position: relative
+    height: 260vh
+
   &-func-box
     position: sticky
-    top: -2px
+    top: 100px
     display: flex
     flex-direction: column
     align-items: center
     justify-content: flex-start
     background-color: black
 
+  &-func-title2
+    position: sticky
+    font-size: 20px
+    line-height: 28px
+    text-align: center
+    margin-bottom: 20px
+
   &-func-description
     font-size: 14px
     margin-top: 20px
     text-align: center
 
 
+
 .snap-container
-  height: 100vh
   overflow-y: scroll
   scroll-snap-type: y mandatory
   scroll-behavior: smooth
   -webkit-overflow-scrolling: touch
-  position: relative
 
 .snap-section
   scroll-snap-align: start
   height: 100vh
   display: flex
   justify-content: center
   align-items: center
+
+.sticky-title
+  position: sticky
+  top: 0
+  z-index: 10
+  background: white
+  padding: 20px 0
+  text-align: center