feat: 메인 화면 애니메이션 추가

src/pages/MainPage/AnimatedText.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from "react";
+import { Text, TextProps } from "@chakra-ui/react";
+
+interface AnimatedTextProps extends TextProps {
+  children: string;
+}
+
+const AnimatedText: React.FC<AnimatedTextProps> = ({
+  children,
+  ...textProps
+}) => {
+  const [displayText, setDisplayText] = useState("");
+  const [isWriting, setIsWriting] = useState(true);
+  const [opacity, setOpacity] = useState(1);
+
+  useEffect(() => {
+    let isMounted = true;
+    const text = children;
+    let currentIndex = 0;
+
+    const animationCycle = () => {
+      if (isWriting) {
+        setOpacity(1);
+        const writeInterval = setInterval(() => {
+          if (isMounted && currentIndex <= text.length) {
+            setDisplayText(text.slice(0, currentIndex));
+            currentIndex++;
+
+            if (currentIndex > text.length) {
+              clearInterval(writeInterval);
+              setTimeout(() => {
+                setIsWriting(false);
+                currentIndex = text.length;
+              }, 4000);
+            }
+          }
+        }, 100);
+
+        return () => clearInterval(writeInterval);
+      } else {
+        const eraseInterval = setInterval(() => {
+          if (isMounted && currentIndex >= 0) {
+            setOpacity(currentIndex / text.length);
+            setDisplayText(text.slice(0, currentIndex));
+            currentIndex--;
+
+            if (currentIndex < 0) {
+              clearInterval(eraseInterval);
+              setTimeout(() => {
+                setIsWriting(true);
+                setOpacity(1);
+                currentIndex = 0;
+              }, 500);
+            }
+          }
+        }, 50);
+
+        return () => clearInterval(eraseInterval);
+      }
+    };
+
+    const cleanup = animationCycle();
+
+    return () => {
+      isMounted = false;
+      if (cleanup) cleanup();
+    };
+  }, [children, isWriting]);
+
+  return (
+    <Text
+      h="30px"
+      display="flex"
+      alignItems="center"
+      fontSize={{ base: "lg", md: "xl" }}
+      mt={-2}
+      fontWeight={"md"}
+      opacity={opacity}
+      transition="opacity 0.5s ease"
+      {...textProps}
+    >
+      {displayText}
+    </Text>
+  );
+};
+
+export default AnimatedText;

src/pages/MainPage/UserPage.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Sidebar } from "./Sidebar/Sidebar";
 import { Box, Button, Flex, Text, Divider } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
+import AnimatedText from "./AnimatedText";
 
 const UserPage = () => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
@@ -79,7 +80,7 @@ const UserPage = () => {
         </Text>
         <Button
           onClick={createNewHistory}
-          fontSize={{ base: "lg", md: "xl" }}
+          fontSize={{ base: "lg", md: "2xl" }}
           bg="#FCF6DC"
           _hover={{ bg: "#CBC096", transform: "scale(1.01)" }}
           mb="30px"
@@ -88,9 +89,9 @@ const UserPage = () => {
         >
           새로운 채팅 시작하기 🚀
         </Button>
-        <Text fontSize={{ base: "lg", md: "2xl" }} mt={-5} fontWeight={"md"}>
-          사이드바를 열어 예전 질문 기록을 확인할 수 있어요!
-        </Text>
+        <AnimatedText>
+          사이드바를 열어 예전 질문 기록을 확인할 수 있습니다!
+        </AnimatedText>
         <Divider />
       </Flex>
     </Box>