feat: 밈퀴즈 시작 화면 애니메이션 추가

- MemeQuizStart 컴포넌트에 애니메이션 효과를 추가하여 사용자 경험을 향상시킴
- styled-components를 motion.div로 변경하여 애니메이션 적용 가능하도록 수정함

Author: Cllaude99

apps/web/src/pages/MemeQuizPage/components/MemeQuizStart/MemeQuizStart.styles.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
+import { motion } from 'motion/react';
 
-const Container = styled.div`
+const Container = styled(motion.div)`
   position: relative;
   width: 100%;
   height: 100%;
@@ -14,7 +15,7 @@ const Container = styled.div`
   );
 `;
 
-const TextSection = styled.div`
+const TextSection = styled(motion.div)`
   margin-top: 158px;
   text-align: center;
   width: 100%;
@@ -33,7 +34,7 @@ const Subtitle = styled.p`
   color: ${({ theme }) => theme.palette.common.white};
 `;
 
-const IconSection = styled.div`
+const IconSection = styled(motion.div)`
   margin-top: 61px;
   width: 100%;
   height: 240px;
@@ -42,7 +43,7 @@ const IconSection = styled.div`
   align-items: center;
 `;
 
-const ButtonWrapper = styled.div`
+const ButtonWrapper = styled(motion.div)`
   position: fixed;
   bottom: 0;
   left: 0;

apps/web/src/pages/MemeQuizPage/components/MemeQuizStart/index.tsx

@@ -8,26 +8,58 @@ import {
   ButtonWrapper,
   StartButton,
 } from './MemeQuizStart.styles';
+import { AnimatePresence } from 'motion/react';
 
 interface MemeQuizStartProps {
   onNext: () => void;
 }
 
 const MemeQuizStart = ({ onNext }: MemeQuizStartProps) => {
   return (
-    <Container>
-      <TextSection>
+    <Container
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      <TextSection
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 0.2 }}
+      >
         <Title>{`나 어쩌면 \n밈잘알일지도?!`}</Title>
         <Subtitle>과연 나는 밈잘알일까? 밈퀴즈 풀고 알아보자!</Subtitle>
       </TextSection>
 
-      <IconSection>
+      <IconSection
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{
+          duration: 0.8,
+          delay: 0.4,
+          type: 'spring',
+          bounce: 0.4,
+        }}
+      >
         <MemeQuizStartIcon />
       </IconSection>
 
-      <ButtonWrapper>
-        <StartButton onClick={onNext}>밈퀴즈 시작하기</StartButton>
-      </ButtonWrapper>
+      <AnimatePresence>
+        <ButtonWrapper
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 40 }}
+          transition={{
+            duration: 0.6,
+            delay: 0.6,
+            type: 'spring',
+            stiffness: 100,
+          }}
+        >
+          <StartButton onClick={onNext} style={{ position: 'relative' }}>
+            밈퀴즈 시작하기
+          </StartButton>
+        </ButtonWrapper>
+      </AnimatePresence>
     </Container>
   );
 };