Merge pull request #126 from softeerbootcamp4th/feature/7-intro

[fix] 화면 길이 변경되어도 비디오 타임라인 정상 작동
softeerbootcamp4th · Aug 21, 2024 · 753dffc · 753dffc
2 parents 52c07b3 + 25ae48d
commit 753dffc
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/src/mainPage/features/introSection/index.jsx b/src/mainPage/features/introSection/index.jsx
@@ -8,10 +8,12 @@ import SpinningCarVideo from "./car-spin.webm";
 import Pointer from "./pointer.svg";
 
 function IntroSection() {
+  const VIDEO_LENGTH = 2;
   const videoRef = useRef(null);
   const introRef = useRef(null);
-  const carYPosition = useRef({ top: 0, bottom: 10 });
+  const frameRef = useRef(null);
   const [isTimerVisible, setIsTimerVisible] = useState(false);
+  const [videoTimeline, setVideoTimeline] = useState(0);
 
   const titleOpacity = useScrollTransition({
     scrollStart: 0,
@@ -20,12 +22,18 @@ function IntroSection() {
     valueEnd: 0,
   });
 
-  const videoTimeline = useScrollTransition({
-    scrollStart: carYPosition.current.top,
-    scrollEnd: carYPosition.current.bottom,
-    valueStart: 0,
-    valueEnd: 2,
-  });
+  function calculateTimeline() {
+    const frameDOM = frameRef.current;
+    if (frameDOM) {
+      const videoHeight = frameDOM.offsetHeight;
+      const videoTop = frameDOM.getBoundingClientRect().top + window.scrollY;
+      const startScroll = videoTop + videoHeight / 2 - window.innerHeight;
+      const endScroll = startScroll + window.innerHeight;
+      const timeline = ((window.scrollY - startScroll) / (endScroll - startScroll)) * VIDEO_LENGTH;
+
+      setVideoTimeline(timeline);
+    }
+  }
 
   useEffect(() => {
     const introDOM = introRef.current;
@@ -51,14 +59,12 @@ function IntroSection() {
   }, []);
 
   useEffect(() => {
-    const videoDOM = videoRef.current;
-    if (videoDOM) {
-      const rect = videoDOM.getBoundingClientRect();
-      carYPosition.current = {
-        top: rect.top + rect.height * 0.5 - window.innerHeight,
-        bottom: rect.top + rect.height * 0.5,
-      };
-    }
+    window.addEventListener("scroll", calculateTimeline);
+    window.addEventListener("resize", calculateTimeline);
+    return () => {
+      window.removeEventListener("scroll", calculateTimeline);
+      window.removeEventListener("resize", calculateTimeline);
+    };
   }, []);
 
   useEffect(() => {
@@ -85,7 +91,7 @@ function IntroSection() {
         </div>
 
         <div className="relative mt-[800px] flex flex-col items-center">
-          <div className="overflow-hidden">
+          <div ref={frameRef} className="overflow-hidden">
             <video
               src={SpinningCarVideo}
               ref={videoRef}