feat: 텍스트 그라데이션 애니메이션 추가

Author: sikkzz

src/components/Home/Home.module.scss

@@ -1,3 +1,5 @@
+@use "@/styles/_mixins.scss" as *;
+
 .Home {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -24,6 +26,22 @@
   }
 }
 
+.Title {
+  @include titleLg;
+
+  line-height: 1.5;
+  background-image: var(--color-text-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-align: center;
+  white-space: pre-line;
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient 4s linear infinite;
+}
+
 .HomeTop {
   z-index: 1;
 }
@@ -33,10 +51,6 @@
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
-
-  & > h1 {
-    white-space: pre-line;
-  }
 }
 
 .HomeImage {
@@ -59,3 +73,12 @@
   gap: 0.875rem;
   z-index: 1;
 }
+
+@keyframes gradient {
+  0% {
+    background-position: 0% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}

src/components/Home/Home.tsx

@@ -31,9 +31,7 @@ const Home = () => {
     <div className={styles.Home}>
       <div className={styles.HomeTop}>
         <div className={styles.HomeTitle}>
-          <Text variant="titleLg" color="gradient" align="center" as="h1">
-            {`영수증으로\nAI 음식 리뷰 남겨요`}
-          </Text>
+          <h1 className={styles.Title}>{`영수증으로\nAI 음식 리뷰 남겨요`}</h1>
           <Text variant="bodyLg" color="secondary" align="center">
             손쉬운 음식 리뷰 작성
           </Text>