From 166597d0ef6e2dba2846e1b89231476f8e89f4f6 Mon Sep 17 00:00:00 2001
From: darkdulgi <daniel99285@gmail.com>
Date: Tue, 20 Aug 2024 16:10:42 +0900
Subject: [PATCH] =?UTF-8?q?[design]=20=EB=B9=84=EB=94=94=EC=98=A4=20?=
 =?UTF-8?q?=EC=9E=AC=EC=83=9D=20y=EC=A2=8C=ED=91=9C=20=EC=9E=84=EA=B3=84?=
 =?UTF-8?q?=EA=B0=92=EC=9D=84=20=ED=99=94=EB=A9=B4=20=ED=81=AC=EA=B8=B0?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=8F=99=EC=A0=81=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B3=84=EC=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mainPage/features/introSection/index.jsx | 54 +++++++++-----------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/mainPage/features/introSection/index.jsx b/src/mainPage/features/introSection/index.jsx
index c4bf18a9..3fb7fa34 100644
--- a/src/mainPage/features/introSection/index.jsx
+++ b/src/mainPage/features/introSection/index.jsx
@@ -10,6 +10,7 @@ import Pointer from "./pointer.svg";
 function IntroSection() {
   const videoRef = useRef(null);
   const introRef = useRef(null);
+  const carYPosition = useRef({ top: 0, bottom: 10 });
   const [isTimerVisible, setIsTimerVisible] = useState(false);
 
   const titleOpacity = useScrollTransition({
@@ -20,31 +21,12 @@ function IntroSection() {
   });
 
   const videoTimeline = useScrollTransition({
-    scrollStart: 400,
-    scrollEnd: 1000,
+    scrollStart: carYPosition.current.top,
+    scrollEnd: carYPosition.current.bottom,
     valueStart: 0,
     valueEnd: 2,
   });
 
-  const videoScroll = useScrollTransition({
-    scrollStart: 0,
-    scrollEnd: 2160,
-    valueStart: 0, // 명세서의 Y값은 절대값이지만 넘겨줘야 하는 값은 상대값
-    valueEnd: -400,
-  });
-
-  const titleStyle = {
-    opacity: titleOpacity,
-  };
-
-  const videoStyle = {
-    transform: `translateY(${videoScroll}px)`,
-  };
-
-  useEffect(() => {
-    videoRef.current.currentTime = videoTimeline;
-  }, [videoTimeline]);
-
   useEffect(() => {
     const introDOM = introRef.current;
     const observer = new IntersectionObserver((entries) => {
@@ -68,27 +50,41 @@ 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,
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    videoRef.current.currentTime = videoTimeline;
+  }, [videoTimeline]);
+
   return (
     <>
       <section ref={introRef} className="flex flex-col items-center">
-        <div className="z-50 sticky w-full flex justify-center top-[50vh] -translate-y-1/2 pointer-events-none">
+        <div
+          style={{ opacity: titleOpacity }}
+          className="z-50 sticky w-full flex justify-center top-[50vh] -translate-y-1/2 pointer-events-none"
+        >
           <h1
             className={`${style.openTitle} ease-in text-head-l md:text-7xl lg:text-8xl font-bold text-black z-50 text-center`}
-            style={titleStyle}
           >
             The new <br className="inline min-[500px]:hidden" />
             <span className="max-[500px]:sketch-line">IONIQ 5</span>
           </h1>
 
-          <div
-            className="absolute hidden min-[500px]:block top-10 md:top-11 lg:top-[66px] z-0 overflow-hidden scale-[60%] md:scale-75 lg:scale-100"
-            style={titleStyle}
-          >
+          <div className="absolute hidden min-[500px]:block top-10 md:top-11 lg:top-[66px] z-0 overflow-hidden scale-[60%] md:scale-75 lg:scale-100">
             <LineHighlight />
           </div>
         </div>
 
-        <div className="relative mt-[800px] flex flex-col items-center" style={videoStyle}>
+        <div className="relative mt-[800px] flex flex-col items-center">
           <div className="overflow-hidden">
             <video
               src={SpinningCarVideo}
@@ -111,7 +107,7 @@ function IntroSection() {
         <img
           src={Pointer}
           alt="다음으로 넘어가기"
-          className="pt-32 pb-32 animate-bounce"
+          className="pt-60 pb-40 animate-bounce"
           draggable="false"
         />
       </section>