feat: 퀴즈 결과 모달 추가 및 QuizStep 컴포넌트 개선

- QuizStep 컴포넌트에 퀴즈 결과를 보여주는 QuizResultModal을 추가하여 사용자 경험을 향상시킴
- 정답 여부에 따라 적절한 메시지를 표시하고, 다음 퀴즈로 넘어가는 기능을 구현함
- 관련 스타일 파일을 추가하여 모달의 디자인을 개선함

Author: Cllaude99

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

@@ -0,0 +1,84 @@
+import styled from '@emotion/styled';
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 0 20px;
+`;
+
+const ModalContainer = styled.div`
+  width: calc(100% - 40px);
+  max-width: calc(${({ theme }) => theme.breakpoints.mobile} - 40px);
+  min-height: 280px;
+  background: ${({ theme }) => theme.palette.common.white};
+  border-radius: 14px;
+  padding: 40px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const IconWrapper = styled.div`
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ResultText = styled.p`
+  ${({ theme }) => theme.typography.title.display4};
+  color: ${({ theme }) => theme.palette.common.black};
+  text-align: center;
+  margin-bottom: 8px;
+`;
+
+const SubText = styled.p`
+  ${({ theme }) => theme.typography.body.body1};
+  color: ${({ theme }) => theme.palette.gray['gray-6']};
+  text-align: center;
+  margin-bottom: 24px;
+`;
+
+const CorrectAnswerText = styled.p`
+  ${({ theme }) => theme.typography.title.subhead1};
+  color: ${({ theme }) => theme.palette.main.pink[60]};
+  text-align: center;
+  margin-bottom: 24px;
+`;
+
+const NextButton = styled.button`
+  width: 100%;
+  height: 52px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(
+    180deg,
+    ${({ theme }) => theme.palette.main.pink[50]},
+    ${({ theme }) => theme.palette.main.pink[80]}
+  );
+  ${({ theme }) => theme.typography.title.subhead1};
+  color: ${({ theme }) => theme.palette.common.white};
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+export {
+  Overlay,
+  ModalContainer,
+  IconWrapper,
+  ResultText,
+  SubText,
+  CorrectAnswerText,
+  NextButton,
+};

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

@@ -0,0 +1,44 @@
+import { QuizCorrectIcon, QuizWrongIcon } from '@/assets/icons';
+import {
+  Overlay,
+  ModalContainer,
+  IconWrapper,
+  ResultText,
+  SubText,
+  CorrectAnswerText,
+  NextButton,
+} from './QuizResultModal.styles';
+
+interface QuizResultModalProps {
+  isCorrect: boolean;
+  correctAnswer: string;
+  onNext: () => void;
+}
+
+const QuizResultModal = ({
+  isCorrect,
+  correctAnswer,
+  onNext,
+}: QuizResultModalProps) => {
+  return (
+    <Overlay>
+      <ModalContainer>
+        <IconWrapper>
+          {isCorrect ? <QuizCorrectIcon /> : <QuizWrongIcon />}
+        </IconWrapper>
+        <ResultText>{isCorrect ? '정답이에요!' : '아쉽네요!'}</ResultText>
+        <SubText>
+          {isCorrect ? '역시 밈잘알이시군요!' : '다음에는 꼭 맞춰보아요!'}
+        </SubText>
+        {!isCorrect && (
+          <CorrectAnswerText>
+            정답은 &quot;{correctAnswer}&quot; 입니다
+          </CorrectAnswerText>
+        )}
+        <NextButton onClick={onNext}>다음 퀴즈 풀기</NextButton>
+      </ModalContainer>
+    </Overlay>
+  );
+};
+
+export default QuizResultModal;

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

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { LinkCopiedIcon } from '@/assets/icons';
+import QuizResultModal from './QuizResultModal';
 import {
   Container,
   Content,
@@ -27,30 +28,36 @@ interface QuizStepProps {
     }[];
   };
   currentStep: string;
-  isFirstQuiz: boolean;
-  onBefore: () => void;
   onAnswer: (currentStep: string, isRight: boolean) => void;
   currentAnswer?: boolean;
 }
 
-const QuizStep = ({
-  quiz,
-  currentStep,
-
-  onAnswer,
-}: QuizStepProps) => {
+const QuizStep = ({ quiz, currentStep, onAnswer }: QuizStepProps) => {
   const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null);
+  const [showResultModal, setShowResultModal] = useState(false);
 
   const handleAnswerSelect = (index: number) => {
     setSelectedAnswer(index);
   };
 
   const handleNext = () => {
+    if (selectedAnswer !== null) {
+      setShowResultModal(true);
+    }
+  };
+
+  const handleNextQuiz = () => {
     if (selectedAnswer !== null) {
       onAnswer(currentStep, quiz.questions[selectedAnswer].isRight);
+      setShowResultModal(false);
+      setSelectedAnswer(null);
     }
   };
 
+  const getCorrectAnswer = () => {
+    return quiz.questions.find((q) => q.isRight)?.message || '';
+  };
+
   const stepNumber = currentStep.replace('quiz', '');
 
   return (
@@ -93,6 +100,14 @@ const QuizStep = ({
           다음
         </BottomButton>
       </BottomContainer>
+
+      {showResultModal && selectedAnswer !== null && (
+        <QuizResultModal
+          isCorrect={quiz.questions[selectedAnswer].isRight}
+          correctAnswer={getCorrectAnswer()}
+          onNext={handleNextQuiz}
+        />
+      )}
     </Container>
   );
 };

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

@@ -66,7 +66,7 @@ const MemeQuizPage = () => {
     };
   }, [quizData]);
 
-  const { Funnel, step, setStep } = useFunnel<keyof typeof quizSteps>(
+  const { Funnel, setStep } = useFunnel<keyof typeof quizSteps>(
     quizSteps[stepsArray[0]],
   );
 
@@ -93,14 +93,7 @@ const MemeQuizPage = () => {
                   <QuizStep
                     quiz={quiz}
                     currentStep={`quiz${index + 1}`}
-                    isFirstQuiz={stepsArray.indexOf(step) === 0}
                     currentAnswer={stepAnswers[`quiz${index + 1}`]}
-                    onBefore={() => {
-                      const currentStepIndex = stepsArray.indexOf(step);
-                      if (currentStepIndex <= 0) return;
-
-                      onNext(stepsArray[currentStepIndex - 1]);
-                    }}
                     onAnswer={(currentStep, isRight) => {
                       setStepAnswers((prev) => ({
                         ...prev,