[feat] 인트로 문구 애니메이션 구현, 새로고침 시 스크롤 최상단으로 고정

src/App.jsx

@@ -1,12 +1,16 @@
+import { useEffect } from "react";
+import IntroSection from "./introSection";
+
 function App() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    history.scrollRestoration = "manual";
+  }, []);
+
   return (
-    <div className="text-5xl graphic-gradient">
-      <div className="flex flex-col">
-        <span>다람쥐 헌 쳇바퀴에 타고파</span>
-        <span>Hyundai Sans Text Office</span>
-        <span className="font-ds-digital">0123456789</span>
-      </div>
-    </div>
+    <>
+      <IntroSection />
+    </>
   );
 }
 

src/introSection/index.jsx

@@ -1,4 +1,6 @@
 import useScrollTransition from "@/common/useScrollTransition.js";
+import vector from "./vector.svg";
+import style from "./index.module.css";
 
 function IntroSection() {
   const titleOpacity = useScrollTransition({
@@ -14,12 +16,25 @@ function IntroSection() {
 
   return (
     <div className="h-[2160px]">
-      <h1
-        className="text-8xl w-full flex items-center justify-center absolute top-[500px]"
-        style={titleStyle}
-      >
-        The new IONIQ 5
-      </h1>
+      <div className="pointer-events-none fixed w-full flex justify-center top-[500px] -translate-y-1/2">
+        <h1
+          className={`${style.openTitle} ease-in text-8xl z-50`}
+          style={titleStyle}
+        >
+          The new IONIQ 5
+        </h1>
+
+        <div
+          className="absolute top-[66px] z-0 overflow-hidden"
+          style={titleStyle}
+        >
+          <img src={vector} />
+
+          <div
+            className={`${style.openVector} w-full h-full bg-white absolute top-0`}
+          ></div>
+        </div>
+      </div>
     </div>
   );
 }

src/introSection/index.module.css

@@ -0,0 +1,27 @@
+.openTitle {
+  animation: open-title 0.5s ease-in-out;
+}
+
+@keyframes open-title {
+  from {
+    transform: translateY(80px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+
+.openVector {
+  animation: open-vector 0.3s ease-in-out 0.3s forwards;
+}
+
+@keyframes open-vector {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}

tailwind.redefine.js

@@ -69,6 +69,6 @@ export default {
     "title-l": ["32px", "44px"],
     "head-s": ["36px", "52px"],
     "head-m": ["45px", "64px"],
-    "head-l": ["57px", "80px"]
-  }
+    "head-l": ["57px", "80px"],
+  },
 };