feat: 타이틀 text 애니메이션 추가

Author: lgrin-byte

src/components/Home/Home.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import styles from "@/components/Home/Home.module.scss";
 import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
 import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
+import AnimationText from "@/components/ui/AnimationText/AnimationText";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
@@ -27,9 +28,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>
+          <AnimationText />
           <Text variant="bodyLg" color="secondary" align="center">
             손쉬운 음식 리뷰 작성
           </Text>

src/components/ui/AnimationText/AnimationText.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from "react";
+
+import classNames from "classnames";
+
+import styles from "@/components/ui/Text/Text.module.scss";
+
+interface Letter {
+  char: string;
+  id: number;
+}
+
+const AnimationText: React.FC = () => {
+  const [firstLineLetters, setFirstLineLetters] = useState<Letter[]>([]);
+  const [secondLineLetters, setSecondLineLetters] = useState<Letter[]>([]);
+  const [hasAnimated, setHasAnimated] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (hasAnimated) return;
+    setHasAnimated(true);
+
+    const firstLine = "영수증으로";
+    const firstLetters = firstLine.split("").map((char, index) => ({
+      char,
+      id: index,
+    }));
+    setFirstLineLetters(firstLetters);
+
+    const firstLineDelay = firstLine.length * 20 + 100;
+    setTimeout(() => {
+      const secondLine = "AI 음식 리뷰 남겨요";
+      const secondLetters = [...secondLine].map((char, index) => ({
+        // split("") 대신 [...string] 사용
+        char,
+        id: index,
+      }));
+      setSecondLineLetters(secondLetters);
+    }, firstLineDelay);
+  }, [hasAnimated]);
+
+  return (
+    <div className={styles.TitleWrapper}>
+      <h1 className={classNames(styles.word)}>
+        {firstLineLetters.map((letter, index) => (
+          <span
+            key={letter.id}
+            className={classNames(
+              styles.letter,
+              styles.Text,
+              styles["color-gradient"],
+              styles[`variant-titleLg`],
+              styles[`align-center`],
+              letter.char === " " && styles.space,
+            )}
+            style={{
+              animationDelay: `${index * 50}ms`,
+              animationName: letter.char === " " ? "none" : styles.textBlur,
+              animationDuration: "0.5s",
+              animationFillMode: "forwards",
+              animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+            }}
+          >
+            {letter.char}
+          </span>
+        ))}
+      </h1>
+      <h1 className={styles.word}>
+        {secondLineLetters.map((letter, index) => (
+          <span
+            key={letter.id}
+            className={classNames(
+              styles.letter,
+              styles.Text,
+              styles["color-gradient"],
+              styles[`variant-titleLg`],
+              styles[`align-center`],
+              letter.char === " " && styles.space,
+            )}
+            style={{
+              animationDelay: `${index * 20}ms`,
+              animationName: letter.char === " " ? "none" : styles.textBlur,
+              animationDuration: "0.5s",
+              animationFillMode: "forwards",
+              animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+            }}
+          >
+            {letter.char}
+          </span>
+        ))}
+      </h1>
+    </div>
+  );
+};
+
+export default AnimationText;

src/components/ui/Text/Text.module.scss

@@ -111,3 +111,48 @@
     justify-content: center;
   }
 }
+
+.TitleWrapper {
+  height: 5.25rem;
+}
+
+.word {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  .letter {
+    display: inline-block;
+    opacity: 0;
+    filter: blur(8px);
+    transform: translateY(20px);
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.appear {
+      opacity: 1;
+      filter: blur(0);
+      transform: translateY(0);
+    }
+  }
+}
+
+@keyframes textBlur {
+  0% {
+    opacity: 0;
+    filter: blur(8px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+
+.space {
+  width: 0.4rem;
+  opacity: 1;
+  visibility: visible;
+}