feat: IntroScreen 로티애니메이션 및 문구 별 애니메이션 추가

#218

client/src/features/workSpace/WorkSpace.tsx

@@ -1,4 +1,5 @@
 import { WorkSpace as WorkSpaceClass } from "@noctaCrdt/WorkSpace";
+import { AnimatePresence } from "framer-motion";
 import { useState, useEffect } from "react";
 import { BottomNavigator } from "@components/bottomNavigator/BottomNavigator";
 import { ErrorModal } from "@components/modal/ErrorModal";
@@ -38,20 +39,13 @@ export const WorkSpace = () => {
     }
   }, [workspaceMetadata]);
 
-  // 에러화면
   if (error) {
     return <ErrorModal errorMessage="서버와 연결할 수 없습니다." />;
   }
-  // 0. 몽고 다 제거
-  // 1. 클라이언트 연결하고 tempblock으로 클라이언트 블럭 생성한다.
-  // 2. 클라이언트를 새로고침한다
-  // 3. 추가된 블럭의 콘솔로그 정보를 본다.
-  // 4. 클라이언트 인스턴스의 clock정보를 본다.
 
-  // 정상화면
   return (
     <>
-      {isLoading && <IntroScreen />}
+      <AnimatePresence mode="wait">{isLoading && <IntroScreen />}</AnimatePresence>
       <div
         className={workSpaceContainer({
           visibility: isInitialized && !isLoading ? "visible" : "hidden",

client/src/features/workSpace/components/IntroScreen.animation.ts

@@ -0,0 +1,56 @@
+export const animation = {
+  initial: {
+    y: -100,
+    opacity: 0,
+  },
+  animate: {
+    y: 0,
+    opacity: 1,
+  },
+  transition: {
+    type: "spring",
+    stiffness: 300,
+    damping: 30,
+    duration: 2,
+  },
+};
+export const containerVariants = {
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+  },
+};
+
+export const topTextVariants = {
+  hidden: {
+    opacity: 0,
+    y: -50,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: 1,
+      duration: 0.4,
+      ease: "easeOut",
+    },
+  },
+};
+
+export const bottomTextVariants = {
+  hidden: {
+    opacity: 0,
+    y: 50,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: 2,
+      duration: 0.3,
+      ease: "easeOut",
+    },
+  },
+};

client/src/features/workSpace/components/IntroScreen.style.ts

@@ -5,8 +5,36 @@ export const IntroScreenContainer = css({
   zIndex: 50,
   position: "fixed",
   inset: 0,
+  flexDirection: "column",
   justifyContent: "center",
   alignItems: "center",
   backgroundSize: "cover",
   transition: "opacity 0.5s ease-in-out",
 });
+
+export const topText = css({
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -160px)",
+  width: "100%",
+  color: "gray.900",
+  textAlign: "center",
+  fontSize: "2xl",
+  opacity: 1,
+  animation: "fadeIn",
+  animationDelay: "0.5s",
+});
+
+export const bottomText = css({
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, 120px)",
+  width: "100%",
+  color: "gray.900",
+  textAlign: "center",
+  fontSize: "4xl",
+  fontWeight: "bold",
+  opacity: 1,
+  animation: "",
+  animationDelay: "0.5s",
+});

client/src/features/workSpace/components/IntroScreen.tsx

@@ -1,10 +1,25 @@
-import { LoadingSpinner } from "@components/lotties/LoadingSpinner";
-import { IntroScreenContainer } from "./IntroScreen.style";
+import { motion } from "framer-motion";
+import { NoctaIcon } from "@components/lotties/NoctaIcon";
+import { containerVariants, bottomTextVariants, topTextVariants } from "./IntroScreen.animation";
+import { IntroScreenContainer, topText, bottomText } from "./IntroScreen.style";
 
 export const IntroScreen = () => {
   return (
-    <div className={IntroScreenContainer}>
-      <LoadingSpinner size={200} />
-    </div>
+    <motion.div
+      className={IntroScreenContainer}
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      transition={{ duration: 0.6, ease: "easeInOut" }}
+      exit={{ opacity: 0 }}
+    >
+      <motion.div variants={topTextVariants} className={topText}>
+        밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터
+      </motion.div>
+      <NoctaIcon size={200} />
+      <motion.div variants={bottomTextVariants} className={bottomText}>
+        Nocta
+      </motion.div>
+    </motion.div>
   );
 };