fix: 퀴즈 문제 잘림 이슈 해결

GlowTales · Aug 28, 2024 · 440ed40 · 440ed40
1 parent 45ecdc6
commit 440ed40
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 26 deletions.
diff --git a/src/components/learn/TaleLearn.tsx b/src/components/learn/TaleLearn.tsx
@@ -28,7 +28,7 @@ const TaleLearn = ({ quizData }: TaleLearnProps) => {
   if (!quizData) {
     return;
   }
-  const totalSteps = quizData.totalSteps;
+  const totalSteps = quizData.totalSteps + 1;
 
   const {
     setChoice,
@@ -60,7 +60,7 @@ const TaleLearn = ({ quizData }: TaleLearnProps) => {
     const postResult = async (languageTaleId: number, answerCounts: number) => {
       try {
         const response = await postAnswerCount(languageTaleId, answerCounts);
-        return response.data
+        return response.data;
       } catch (error) {
         console.error("Error fetching data:", error);
       }
@@ -90,27 +90,36 @@ const TaleLearn = ({ quizData }: TaleLearnProps) => {
       return null;
     } else if (
       currentStep <
-      QUIZ_STAGES[QuizType.MultipleChoice].end(quizData.multipleChoices.length)
+      QUIZ_STAGES[QuizType.MultipleChoice].end(
+        1,
+        quizData.multipleChoices.length
+      )
     ) {
       return quizData.multipleChoices[currentStep - 1];
     } else if (
       currentStep <
       QUIZ_STAGES[QuizType.Essay].end(
+        1,
         quizData.multipleChoices.length,
         quizData.essayQuestions.length
       )
     ) {
-      return quizData.essayQuestions[
-        currentStep - quizData.multipleChoices.length
-      ];
+      const essayIndex =
+        currentStep -
+        QUIZ_STAGES[QuizType.MultipleChoice].end(
+          1,
+          quizData.multipleChoices.length
+        );
+      return quizData.essayQuestions[essayIndex];
     } else {
-      return quizData.sentenceArrangements[
+      const sentenceIndex =
         currentStep -
-          QUIZ_STAGES[QuizType.Essay].end(
-            quizData.multipleChoices.length,
-            quizData.essayQuestions.length
-          )
-      ];
+        QUIZ_STAGES[QuizType.Essay].end(
+          1,
+          quizData.multipleChoices.length,
+          quizData.essayQuestions.length
+        );
+      return quizData.sentenceArrangements[sentenceIndex];
     }
   };
 

diff --git a/src/hooks/useLearning.ts b/src/hooks/useLearning.ts
@@ -9,11 +9,11 @@ const useLearning = (quizData: QuizData) => {
   const [currentStep, setCurrentStep] = useState(0);
   const [isStepCompleted, setIsStepCompleted] = useState<boolean[]>([
     true,
-    ...Array(quizData.totalSteps - 1).fill(false),
+    ...Array(quizData.totalSteps + 1).fill(false),
   ]);
   const [isQuizGraded, setIsQuizGraded] = useState<boolean>(false);
   const [correctAnswers, setCorrectAnswers] = useState<number[]>(
-    Array(quizData.totalSteps).fill(0)
+    Array(quizData.totalSteps + 1).fill(0)
   );
 
   const handleNextStep = async () => {
@@ -26,14 +26,20 @@ const useLearning = (quizData: QuizData) => {
   };
 
   const getCurrentQuizType = (step: number): QuizType => {
-    if (
+    if (step < QUIZ_STAGES[QuizType.SpeakPractice].end(1)) {
+      return QuizType.SpeakPractice;
+    } else if (
       step <
-      QUIZ_STAGES[QuizType.MultipleChoice].end(quizData.multipleChoices.length)
+      QUIZ_STAGES[QuizType.MultipleChoice].end(
+        1,
+        quizData.multipleChoices.length
+      )
     ) {
       return QuizType.MultipleChoice;
     } else if (
       step <
       QUIZ_STAGES[QuizType.Essay].end(
+        1,
         quizData.multipleChoices.length,
         quizData.essayQuestions.length
       )
@@ -94,7 +100,7 @@ const useLearning = (quizData: QuizData) => {
     getCurrentQuizType,
     isQuizGraded,
     setCorrectAnswers,
-    correctAnswers
+    correctAnswers,
   };
 };
 

diff --git a/src/utils/constants/QuizStage.ts b/src/utils/constants/QuizStage.ts
@@ -8,25 +8,37 @@ export enum QuizType {
 export const QUIZ_STAGES = {
   [QuizType.SpeakPractice]: {
     start: 0,
-    end: 1,
+    end: (speakPracticeLength: number) => speakPracticeLength,
   },
   [QuizType.MultipleChoice]: {
-    start: 1,
-    end: (multipleChoicesLength: number) => multipleChoicesLength,
+    start: (speakPracticeLength: number) => speakPracticeLength,
+    end: (speakPracticeLength: number, multipleChoicesLength: number) =>
+      speakPracticeLength + multipleChoicesLength,
   },
   [QuizType.Essay]: {
-    start: (multipleChoicesLength: number) => multipleChoicesLength,
-    end: (multipleChoicesLength: number, essayQuestionsLength: number) =>
-      multipleChoicesLength + essayQuestionsLength,
+    start: (speakPracticeLength: number, multipleChoicesLength: number) =>
+      speakPracticeLength + multipleChoicesLength,
+    end: (
+      speakPracticeLength: number,
+      multipleChoicesLength: number,
+      essayQuestionsLength: number
+    ) => speakPracticeLength + multipleChoicesLength + essayQuestionsLength,
   },
   [QuizType.SentenceArrangement]: {
-    start: (multipleChoicesLength: number, essayQuestionsLength: number) =>
-      multipleChoicesLength + essayQuestionsLength,
+    start: (
+      speakPracticeLength: number,
+      multipleChoicesLength: number,
+      essayQuestionsLength: number
+    ) => speakPracticeLength + multipleChoicesLength + essayQuestionsLength,
     end: (
+      speakPracticeLength: number,
       multipleChoicesLength: number,
       essayQuestionsLength: number,
       sentenceArrangementsLength: number
     ) =>
-      multipleChoicesLength + essayQuestionsLength + sentenceArrangementsLength,
+      speakPracticeLength +
+      multipleChoicesLength +
+      essayQuestionsLength +
+      sentenceArrangementsLength,
   },
 };