Hotfix/146 quiz

TERMTERM/@types/Quiz.d.ts

@@ -44,6 +44,7 @@ declare module "Quiz" {
     termDescription: string;
     memberSelectedTermName: string;
     isAnswerRight: boolean;
+    statusCode: number;
   }
 
   export type QuizStatus = {

TERMTERM/Container.tsx

@@ -486,11 +486,9 @@ const Container = () => {
               headerShown: true,
               header: (props) => {
                 return (
-                  <BookmarkSingleBar
+                  <BackBar
                     title="정답 확인"
                     onBack={() => props.navigation.pop()}
-                    onBookmark={() => null}
-                    bookmarked={false}
                   />
                 );
               },
@@ -575,11 +573,9 @@ const Container = () => {
               headerShown: true,
               header: (props) => {
                 return (
-                  <BookmarkSingleBar
+                  <BackBar
                     title="정답 확인"
                     onBack={() => props.navigation.pop()}
-                    onBookmark={() => null}
-                    bookmarked={false}
                   />
                 );
               },

TERMTERM/src/components/curation/detail/term/TermPreviewBox.tsx

@@ -13,6 +13,7 @@ import { useTerm } from "@hooks/useTerm";
 import { booleanConverter } from "@utils/booleanConverter";
 import { useArchive } from "@hooks/useArchive";
 import CustomModal from "@components/popup/modal";
+import useRemoveChar from "@hooks/useRemoveChar";
 
 interface Props extends TouchableOpacityProps {
   id: number;
@@ -35,6 +36,7 @@ const TermPreviewBox = ({
   const [sub, main] = useWordReg(name);
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const { archiveTerm, isModalOpen, goToFolderMake, closeModal } = useArchive();
+  const { filteredExplain } = useRemoveChar(description);
 
   return (
     <Container
@@ -67,8 +69,8 @@ const TermPreviewBox = ({
         </PreviewBookmark>
       </UpperBox>
       <Description COLOR={COLOR}>
-        {description !== null
-          ? truncateString(description, 60)
+        {filteredExplain !== null
+          ? truncateString(filteredExplain, 60)
           : "용어 설명이 없어요."}
       </Description>
       <CustomModal

TERMTERM/src/components/home/DailyTermBox.tsx

@@ -2,6 +2,7 @@ import { BookmarkButtonComponent } from "@components/common/Bookmark";
 import { Preview } from "@components/curation/detail/term";
 import CustomModal from "@components/popup/modal";
 import { useArchive } from "@hooks/useArchive";
+import useRemoveChar from "@hooks/useRemoveChar";
 import { useThemeStyle } from "@hooks/useThemeStyle";
 import { useWordReg } from "@hooks/useWordReg";
 import { RootStackParamList } from "@interfaces/RootStackParamList";
@@ -20,6 +21,7 @@ const DailyTermBox = ({ bookmarked, id, name, description }: Preview) => {
   const [sub, main] = useWordReg(name);
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const { archiveTerm, isModalOpen, goToFolderMake, closeModal } = useArchive();
+  const { filteredExplain } = useRemoveChar(description);
 
   return (
     <Container
@@ -35,7 +37,7 @@ const DailyTermBox = ({ bookmarked, id, name, description }: Preview) => {
           {main}
         </Title>
       </TitleWrapper>
-      <Content COLOR={COLOR}>{truncateString(description, 75)}</Content>
+      <Content COLOR={COLOR}>{truncateString(filteredExplain, 75)}</Content>
       <CustomModal
         visible={isModalOpen}
         title={"용어 아카이빙 폴더가 없어요"}

TERMTERM/src/components/quiz/QuizCard.tsx

@@ -1,7 +1,8 @@
 import styled from "styled-components/native";
-import { colorTheme, LIGHT_COLOR_STYLE, TYPO_STYLE } from "@style/designSystem";
+import { colorTheme, TYPO_STYLE } from "@style/designSystem";
 import { useThemeStyle } from "@hooks/useThemeStyle";
 import { screenWidth } from "@style/dimensions";
+import useQuizExplain from "@hooks/useQuizExplain";
 
 interface QuizCardProps {
   title?: string;
@@ -10,11 +11,12 @@ interface QuizCardProps {
 
 const QuizCard = (props: QuizCardProps) => {
   const [COLOR, mode] = useThemeStyle();
+  const { hiddenExplain } = useQuizExplain(props.explain ?? "")
 
   return (
     <CardContainer COLOR={COLOR} mode={mode}>
       <CardText COLOR={COLOR} mode={mode}>
-        {props.explain}
+        {hiddenExplain}
       </CardText>
     </CardContainer>
   );

TERMTERM/src/components/quiz/Types/Start.tsx

@@ -38,7 +38,7 @@ const Start = ({ navigate }: ChildrenProps) => {
   const [countdown, setCountdown] = useState(0);
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const curr = useRecoilValue(quizState);
-  const { currIdx } = curr;
+  const { currIdx, totalReviewIdx } = curr;
   const setQuizStatus = useSetRecoilState(memberQuizSolveState);
   const quizStatus = useRecoilValue(memberQuizSolveState);
 
@@ -67,7 +67,7 @@ const Start = ({ navigate }: ChildrenProps) => {
     return () => {
       clearInterval(interval);
     };
-  }, [quizStatus]);
+  }, [quizStatus, countdown]);
 
   return (
     <>

TERMTERM/src/components/terms/QuizAnswerCard.tsx

@@ -1,3 +1,4 @@
+import useRemoveChar from "@hooks/useRemoveChar";
 import { useThemeStyle } from "@hooks/useThemeStyle";
 import { useWordReg } from "@hooks/useWordReg";
 import { WordProps } from "@interfaces/word";
@@ -20,6 +21,7 @@ interface Props extends TouchableOpacityProps {
 const QuizAnswerCard = ({ word, quiz, detail, ...props }: Props) => {
   const [COLOR, mode] = useThemeStyle();
   const [sub, main] = useWordReg(word?.termName);
+  const { filteredExplain } = useRemoveChar(word?.termDescription);
 
   return (
     <Container
@@ -43,7 +45,7 @@ const QuizAnswerCard = ({ word, quiz, detail, ...props }: Props) => {
         </MainName>
       </NameWrapper>
       <Content COLOR={COLOR} mode={mode}>
-        {word?.termDescription}
+        {filteredExplain}
       </Content>
     </Container>
   );

TERMTERM/src/components/terms/WordCard.tsx

@@ -1,3 +1,4 @@
+import useRemoveChar from "@hooks/useRemoveChar";
 import { useThemeStyle } from "@hooks/useThemeStyle";
 import { useWordReg } from "@hooks/useWordReg";
 import { TEXT_STYLES, TYPO, colorTheme, TYPO_STYLE } from "@style/designSystem";
@@ -20,6 +21,7 @@ interface Props extends TouchableOpacityProps {
 const WordCard = ({ word, quiz, detail, ...props }: Props) => {
   const [COLOR, mode] = useThemeStyle();
   const [sub, main] = useWordReg(word.name);
+  const { filteredExplain } = useRemoveChar(word.description)
 
   return (
     <Container
@@ -43,7 +45,7 @@ const WordCard = ({ word, quiz, detail, ...props }: Props) => {
         </MainName>
       </NameWrapper>
       <Content COLOR={COLOR} mode={mode}>
-        {word.description}
+        {filteredExplain}
       </Content>
     </Container>
   );

TERMTERM/src/hooks/useQuiz.tsx

@@ -1,4 +1,5 @@
 import QuizApi from "@api/QuizApi";
+import { quizState } from "@recoil/quizState";
 import {
   QuizDetail,
   QuizReviewDetail,
@@ -7,6 +8,7 @@ import {
   QuizAnswerResult,
 } from "Quiz";
 import { useEffect, useState } from "react";
+import { useRecoilValue } from "recoil";
 
 /**
  * 퀴즈 관리 훅
@@ -19,6 +21,8 @@ export const useQuiz = () => {
   const [reviewQuizItem, setReviewQuizItem] = useState<QuizDetail[]>();
   const [quizStatus, setQuizStatus] = useState<string>();
   const [quizResultData, setQuizResultData] = useState<QuizAnswerResult>();
+  const curr = useRecoilValue(quizState);
+  const { currIdx, currReviewIdx, totalIdx, totalReviewIdx } = curr;
 
   /** 데일리 퀴즈 */
   const getDailyQuizInfo = async (): Promise<boolean> => {
@@ -53,9 +57,9 @@ export const useQuiz = () => {
   ): Promise<QuizAnswerResult | null> => {
     try {
       const data = await quizApi.registerQuizResult(apiUrl, resultData);
-      // console.log("퀴즈 요청 성공", apiUrl, resultData, data);
+      //console.log("curr.currReviewIdx:", curr.currReviewIdx, "curr.totalReviewIdx: ", curr.totalReviewIdx);
+      //console.log("퀴즈 요청 성공", apiUrl, resultData, data);
       setQuizResultData(data);
-      // console.log("quizResultData in hook : ", quizResultData);
       return data;
     } catch (err) {
       console.log(err);

TERMTERM/src/hooks/useQuizExplain.tsx

@@ -0,0 +1,11 @@
+interface HideWordResult {
+  hiddenExplain: string;
+}
+
+const useQuizExplain = (explain: string): HideWordResult => {
+  const hiddenExplain = explain.replace(/@@(.*?)@@/g, "OO");
+
+  return { hiddenExplain };
+}
+
+export default useQuizExplain;

TERMTERM/src/hooks/useRemoveChar.tsx

@@ -0,0 +1,11 @@
+interface ExplainResult {
+  filteredExplain: string;
+}
+
+const useRemoveChar = (explain: string): ExplainResult => {
+  const filteredExplain = explain.replace(/@@/g, "");
+
+  return { filteredExplain };
+}
+
+export default useRemoveChar;

TERMTERM/src/interfaces/RootStackParamList.ts

@@ -15,7 +15,7 @@ export type RootStackParamList = {
   My: undefined;
   ArchiveBookmark: undefined;
   DailyQuiz: undefined;
-  CompleteQuiz: undefined;
+  CompleteQuiz: {id: number};
   CurationDetail: { id: number };
   MakeFolder: undefined;
   FolderDetailGlance: { id: number };

TERMTERM/src/screens/CompleteQuiz.tsx

@@ -12,15 +12,17 @@ import { Fontisto } from "@expo/vector-icons";
 import QuizApi from "@api/QuizApi";
 import { useRecoilState } from "recoil";
 import { memberQuizSolveState } from "@recoil/quizState";
+import { useQuiz } from "@hooks/useQuiz";
 
 export type Props = StackScreenProps<RootStackParamList, "CompleteQuiz">;
 
-const CompleteQuiz = ({ navigation }: Props) => {
+const CompleteQuiz = ({ navigation, route }: Props) => {
   const [COLOR, mode] = useThemeStyle();
   const [width, setWidth] = useState(112);
   const [score, setScore] = useState(200);
   const quizApi = new QuizApi();
   const [quizSolve, setQuizSolve] = useRecoilState(memberQuizSolveState);
+  const { quizStatus } = useQuiz();
 
   /** 아이콘 너비 계산 함수 */
   const calcWidth = () => {
@@ -53,10 +55,63 @@ const CompleteQuiz = ({ navigation }: Props) => {
     calcWidth();
   }, []);
 
+  let assetPath = "@assets/complete-quiz.png";
+  let titleText = "Daily 용어 퀴즈 완료 🎉";
+  let subTitleText1 = "Daily 용어 퀴즈를 모두 맞춰";
+  let subTitleText2 = `200포인트`;
+  let subTitleText3 = "를 얻었어요!";
+  let subTitleText4 = "내일도 Daily 용어 퀴즈를 응시해보세요";
+
+  if (route.params.id == 2202) {
+    // 데일리 퀴즈 결과 제출 성공 (200)
+    titleText = "Daily 용어 퀴즈 완료 🎉";
+    subTitleText1 = "Daily 용어 퀴즈를 모두 맞춰";
+    subTitleText2 = `200포인트`;
+    subTitleText3 = "를 얻었어요!";
+    subTitleText4 = "내일도 Daily 용어 퀴즈를 응시해보세요";
+  }
+  if (route.params.id == 2212) {
+    // 복습 퀴즈 첫 번째 시도에 모두 정답
+    titleText = "용어 복습 퀴즈 완료 🎉";
+    subTitleText1 = "용어 복습 퀴즈를 모두 맞춰";
+    subTitleText2 = `50포인트`;
+    subTitleText3 = "를 얻었어요!";
+    subTitleText4 = "내일도 Daily 용어 퀴즈를 응시해보세요";
+  }
+  if (route.params.id == 2213) {
+    //	복습 퀴즈 첫 번째 시도에 한 개 이상 오답
+    titleText = "용어 복습 퀴즈 완료 🎉";
+    subTitleText1 = "용어 복습 퀴즈 응시로";
+    subTitleText2 = `10포인트`;
+    subTitleText3 = "를 얻었어요!";
+    subTitleText4 = "3분 후 용어 복습 퀴즈로 학습해보세요";
+  }
+  if (route.params.id == 2214) {
+    // 복습 퀴즈 두 번 이상째 시도에 모두 정답
+    titleText = "용어 복습 퀴즈 완료 🎉";
+    subTitleText1 = "용어 복습 퀴즈를 모두 맞췄어요!";
+    subTitleText2 = ``;
+    subTitleText3 = "내일도 Daily 용어 퀴즈를 응시해보세요";
+    subTitleText4 = "";
+  }
+  if (route.params.id == 2215) {
+    // 복습 퀴즈 두 번 이상째 시도에 한 개 이상 오답
+    titleText = "용어 복습 퀴즈 완료 🎉";
+    subTitleText1 = "용어 복습 퀴즈를 재응시했어요!";
+    subTitleText2 = ``;
+    subTitleText3 = "3분 후 용어 복습 퀴즈로 학습해보세요";
+    subTitleText4 = "";
+  }
+
   return (
     <SafeAreaView style={{ backgroundColor: COLOR.Background.surface }}>
       <Container>
-        <BackBar title="Daily 용어 퀴즈 완료" onBack={() => navigation.pop()} />
+        <BackBar
+          title={
+            route.params.id === 2202 ? "Daily 용어 퀴즈" : "용어 복습 퀴즈"
+          }
+          onBack={() => navigation.pop()}
+        />
         <ContentWrapper>
           <AutoSizedImage
             source={require("@assets/complete-quiz.png")}
@@ -65,19 +120,19 @@ const CompleteQuiz = ({ navigation }: Props) => {
           />
           <TitleBox>
             <Title COLOR={COLOR} mode={mode}>
-              Daily 용어 퀴즈 완료 🎉
+              {titleText}
             </Title>
             <SubTitle COLOR={COLOR} mode={mode}>
-              Daily 용어 퀴즈를 모두 맞춰
+              {subTitleText1}
             </SubTitle>
             <SubTitle COLOR={COLOR} mode={mode}>
               <BoldSub COLOR={COLOR} mode={mode}>
-                {score}포인트
+                {subTitleText2}
               </BoldSub>
-              를 얻었어요!
+              {subTitleText3}
             </SubTitle>
             <SubTitle COLOR={COLOR} mode={mode}>
-              내일도 Daily 용어 퀴즈를 응시해보세요.
+              {subTitleText4}
             </SubTitle>
           </TitleBox>
           <CompleteButton

TERMTERM/src/screens/DailyQuiz.tsx

@@ -54,6 +54,7 @@ const DailyQuiz = ({ navigation }: Props) => {
       termDescription: res?.termDescription as string,
       memberSelectedTermName: res?.memberSelectedTermName as string,
       isAnswerRight: res?.isAnswerRight as boolean,
+      statusCode: res?.statusCode as number,
     })
     navigation.navigate("QuizResult", { id: idx });
   };

TERMTERM/src/screens/QuizResult.tsx

@@ -46,7 +46,7 @@ const QuizResult = ({ navigation, route }: Props) => {
           state={BUTTON_STATE.active}
           onPress={() =>
             currIdx === 5
-              ? navigation.navigate("CompleteQuiz")
+              ? navigation.navigate("CompleteQuiz", {id: quizResult.statusCode})
               : navigation.navigate("DailyQuiz")
           }
           style={{ width: "90%", alignSelf: "center", marginTop: "7%" }}