feat: MemeQuizPage의 버튼에 애니메이션 효과 추가

- MemeQuizStart 및 QuizStep 컴포넌트의 버튼을 motion.button으로 변경하여 애니메이션 효과를 추가함
- 버튼 클릭 시 스케일 효과를 적용하여 사용자 경험을 향상시킴

Author: Cllaude99

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

@@ -53,7 +53,7 @@ const ButtonWrapper = styled(motion.div)`
   margin: 0 auto;
 `;
 
-const StartButton = styled.button`
+const StartButton = styled(motion.button)`
   width: 100%;
   height: 52px;
   background-color: ${({ theme }) => theme.palette.gray['gray-10']};

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

@@ -55,7 +55,11 @@ const MemeQuizStart = ({ onNext }: MemeQuizStartProps) => {
             stiffness: 100,
           }}
         >
-          <StartButton onClick={onNext} style={{ position: 'relative' }}>
+          <StartButton
+            onClick={onNext}
+            style={{ position: 'relative' }}
+            whileTap={{ scale: 0.95 }}
+          >
             밈퀴즈 시작하기
           </StartButton>
         </ButtonWrapper>

apps/web/src/pages/MemeQuizPage/components/QuizStep/QuizResultModal.styles.ts

@@ -68,10 +68,6 @@ const NextButton = styled(motion.button)`
   ${({ theme }) => theme.typography.title.subhead1};
   color: ${({ theme }) => theme.palette.common.white};
   cursor: pointer;
-
-  &:hover {
-    opacity: 0.9;
-  }
 `;
 
 export {

apps/web/src/pages/MemeQuizPage/components/QuizStep/QuizResultModal.tsx

@@ -100,9 +100,18 @@ const QuizResultModal = ({
         <NextButton
           initial={{ y: 20, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.4, delay: 0.8 }}
-          whileHover={{ scale: 1.02 }}
-          whileTap={{ scale: 0.98 }}
+          whileTap={{
+            scale: 0.98,
+            transition: {
+              type: 'spring',
+              stiffness: 400,
+              damping: 17,
+            },
+          }}
+          transition={{
+            duration: 0.4,
+            delay: 0.8,
+          }}
           onClick={onNext}
         >
           다음 퀴즈 풀기

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

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
+import { motion } from 'motion/react';
 
 const shimmer = keyframes`
   0% {
@@ -75,7 +76,7 @@ const AnswerContainer = styled.div`
   margin-bottom: 108px;
 `;
 
-const Button = styled.button<{ isSelected?: boolean }>`
+const Button = styled(motion.button)<{ isSelected?: boolean }>`
   width: 100%;
   height: 50px;
   padding: 0 20px;
@@ -89,7 +90,6 @@ const Button = styled.button<{ isSelected?: boolean }>`
   background-color: ${({ theme, isSelected }) =>
     isSelected ? theme.palette.main.pink[95] : theme.palette.gray['gray-9']};
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
 `;
 
 const ButtonIcon = styled.div<{ isSelected?: boolean }>`
@@ -122,7 +122,7 @@ const BottomContainer = styled.div`
   justify-content: center;
 `;
 
-const BottomButton = styled.button<{ disabled?: boolean }>`
+const BottomButton = styled(motion.button)<{ disabled?: boolean }>`
   width: 100%;
   height: 52px;
   border: none;

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

@@ -101,6 +101,12 @@ const QuizStep = ({
                     key={index}
                     onClick={() => handleAnswerSelect(index)}
                     isSelected={isSelected}
+                    whileTap={{ scale: 0.98 }}
+                    transition={{
+                      type: 'spring',
+                      stiffness: 400,
+                      damping: 17,
+                    }}
                   >
                     <ButtonIcon isSelected={isSelected}>
                       <LinkCopiedIcon width={20} height={20} />
@@ -117,7 +123,16 @@ const QuizStep = ({
       </Content>
 
       <BottomContainer>
-        <BottomButton onClick={handleNext} disabled={selectedAnswer === null}>
+        <BottomButton
+          onClick={handleNext}
+          disabled={selectedAnswer === null}
+          whileTap={!selectedAnswer ? {} : { scale: 0.98 }}
+          transition={{
+            type: 'spring',
+            stiffness: 400,
+            damping: 17,
+          }}
+        >
           다음
         </BottomButton>
       </BottomContainer>