refactor/139 qa-list

TERMTERM/@types/Quiz.d.ts

@@ -35,9 +35,17 @@ declare module "Quiz" {
 
   export type QuizSubmit = {
     quizType: string;
-    results: QuizResult[];
+    result: QuizResult;
   };
 
+  export type QuizAnswerResult = {
+    termId: number;
+    termName: string;
+    termDescription: string;
+    memberSelectedTermName: string;
+    isAnswerRight: boolean;
+  }
+
   export type QuizStatus = {
     status: "NOT_STARTED" | "IN_PROGRESS" | "COMPLETED";
   };

TERMTERM/Container.tsx

@@ -32,6 +32,7 @@ import {
   ReviewQuizIntro,
   ReviewQuiz,
   ReviewQuizResult,
+  QuizReViewDetail,
 } from "@screens/index";
 import ToolBar from "@screens/ToolBar";
 import {
@@ -141,7 +142,7 @@ const Container = () => {
               header: (props) => {
                 return (
                   <BackBar
-                    title={`${currIdx}/${totalIdx}`}
+                    title={`${currIdx + 1}/${totalIdx}`}
                     onBack={() => props.navigation.pop()}
                   />
                 );
@@ -584,6 +585,23 @@ const Container = () => {
               },
             }}
           />
+          <RootStack.Screen
+            name="QuizReviewDetail"
+            component={QuizReViewDetail}
+            options={{
+              headerShown: true,
+              header: (props) => {
+                return (
+                  <BookmarkSingleBar
+                    title="정답 확인"
+                    onBack={() => props.navigation.pop()}
+                    onBookmark={() => null}
+                    bookmarked={false}
+                  />
+                );
+              },
+            }}
+          />
         </RootStack.Navigator>
       </NavigationContainer>
     </SafeAreaView>

TERMTERM/src/api/QuizApi.ts

@@ -1,4 +1,4 @@
-import { QuizDetail, QuizReviewDetail, QuizStatus, QuizSubmit } from "Quiz";
+import { QuizAnswerResult, QuizDetail, QuizReviewDetail, QuizStatus, QuizSubmit } from "Quiz";
 
 import { post, get } from "./AxiosCreate";
 
@@ -16,8 +16,8 @@ class QuizApi {
   };
 
   /** 데일리/복습 퀴즈 결과 제출 */
-  registerQuizResult = async (input: QuizSubmit): Promise<QuizSubmit> => {
-    const data = await post<QuizSubmit>(`/v1/quiz/result`, input);
+  registerQuizResult = async (apiUrl: string, input: QuizSubmit): Promise<QuizAnswerResult> => {
+    const data = await post<QuizAnswerResult>(apiUrl, input);
     return data;
   };
 

TERMTERM/src/components/quiz/AnswerReminder.tsx

@@ -2,6 +2,7 @@ import AutoSizedImage from "@components/common/AutoSizedImage";
 import { useThemeStyle } from "@hooks/useThemeStyle";
 import { colorTheme, TYPO_STYLE } from "@style/designSystem";
 import { screenWidth } from "@style/dimensions";
+import { divideTerm } from "@utils/termCutter";
 import { useEffect, useState } from "react";
 import styled from "styled-components/native";
 
@@ -52,7 +53,7 @@ const AnswerReminder = ({ answer, userAnswer }: AnswerReminderProps) => {
           <>
             내가 생각한 답은{" "}
             <BoldText COLOR={COLOR} mode={mode}>
-              {userAnswer}
+              {divideTerm(userAnswer)[0]}
             </BoldText>
             이에요
           </>

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

@@ -8,8 +8,9 @@ import Clear from "./Clear";
 import { useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "@interfaces/RootStackParamList";
-import { useRecoilValue } from "recoil";
-import { quizState } from "@recoil/quizState";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { memberQuizSolveState, quizState } from "@recoil/quizState";
+import { QuizStatus } from "Quiz";
 
 /**
  * async storage에 저장되는 퀴즈 현재 상태
@@ -23,25 +24,32 @@ enum QuizState {
   IN_PROGRESS = "IN_PROGRESS",
 }
 
+export interface MemberQuizSolveState {
+  quizSolveState: QuizStatus;
+}
+
 /**
  * 용어퀴즈 시작 가능
  */
 const Start = ({ navigate }: ChildrenProps) => {
   const quizApi = new QuizApi();
   const [COLOR, mode] = useThemeStyle();
-  const [quizStatus, setQuizStatus] = useState<string>(QuizState.NOT_STARTED);
-  // TODO : 180초로 추후 재설정
-  const [countdown, setCountdown] = useState(3);
+  // TODO : 시간 바꿔두기
+  const [countdown, setCountdown] = useState(0);
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const curr = useRecoilValue(quizState);
-  const { currIdx } = curr
+  const { currIdx } = curr;
+  const setQuizStatus = useSetRecoilState(memberQuizSolveState);
+  const quizStatus = useRecoilValue(memberQuizSolveState);
 
   const remindQuizStatus = async () => {
     try {
       const res = await quizApi.getDailyQuizStatus();
-      // TODO : 값 바꿔두기
-      setQuizStatus(res.status);
-      // setQuizStatus(QuizState.COMPLETED)
+      setQuizStatus({
+        quizSolveState: {
+          status: res.status,
+        },
+      });
     } catch (err) {
       console.log(err);
     }
@@ -50,7 +58,7 @@ const Start = ({ navigate }: ChildrenProps) => {
   useEffect(() => {
     remindQuizStatus();
     let interval: NodeJS.Timer;
-    if (quizStatus === QuizState.IN_PROGRESS) {
+    if (quizStatus.quizSolveState.status === QuizState.IN_PROGRESS) {
       interval = setInterval(() => {
         setCountdown((prevCountdown) => prevCountdown - 1);
       }, 1000);
@@ -63,22 +71,23 @@ const Start = ({ navigate }: ChildrenProps) => {
 
   return (
     <>
-      {quizStatus === QuizState.NOT_STARTED && currIdx <= 5 && (
-        <>
-          <AutoSizedImage source={require("@assets/test.png")} width={24} />
-          <Title COLOR={COLOR} style={{ marginLeft: 5 }}>
-            Daily 용어 퀴즈를 시작해 볼까요?
-          </Title>
-          <TouchableOpacity onPress={() => navigation.push("QuizIntro")}>
-            <AutoSizedImage
-              source={require("@assets/arrow-button.png")}
-              width={40}
-            />
-          </TouchableOpacity>
-        </>
-      )}
+      {quizStatus.quizSolveState.status === QuizState.NOT_STARTED &&
+        currIdx <= 5 && (
+          <>
+            <AutoSizedImage source={require("@assets/test.png")} width={24} />
+            <Title COLOR={COLOR} style={{ marginLeft: 5 }}>
+              Daily 용어 퀴즈를 시작해 볼까요?
+            </Title>
+            <TouchableOpacity onPress={() => navigation.push("QuizIntro")}>
+              <AutoSizedImage
+                source={require("@assets/arrow-button.png")}
+                width={40}
+              />
+            </TouchableOpacity>
+          </>
+        )}
 
-      {quizStatus === QuizState.IN_PROGRESS && (
+      {quizStatus.quizSolveState.status === QuizState.IN_PROGRESS && (
         <>
           {countdown > 0 ? (
             <>
@@ -98,7 +107,9 @@ const Start = ({ navigate }: ChildrenProps) => {
               <Title COLOR={COLOR} style={{ marginLeft: 5 }}>
                 용어 복습 퀴즈를 통해 다시 학습해요!
               </Title>
-              <TouchableOpacity onPress={() => navigation.push("ReviewQuizIntro")}>
+              <TouchableOpacity
+                onPress={() => navigation.push("ReviewQuizIntro")}
+              >
                 <AutoSizedImage
                   source={require("@assets/arrow-button.png")}
                   width={40}
@@ -109,7 +120,7 @@ const Start = ({ navigate }: ChildrenProps) => {
         </>
       )}
 
-      {quizStatus === QuizState.COMPLETED && (
+      {quizStatus.quizSolveState.status === QuizState.COMPLETED && (
         <Clear navigate={() => navigation.push("QuizReview")} />
       )}
     </>

TERMTERM/src/components/terms/QuizAnswerCard.tsx

@@ -3,12 +3,13 @@ import { useWordReg } from "@hooks/useWordReg";
 import { WordProps } from "@interfaces/word";
 import { TEXT_STYLES, TYPO, colorTheme, TYPO_STYLE } from "@style/designSystem";
 import { screenWidth } from "@style/dimensions";
+import { QuizAnswerResult } from "Quiz";
 import { TouchableOpacityProps } from "react-native";
 import { css } from "styled-components";
 import styled from "styled-components/native";
 
 interface Props extends TouchableOpacityProps {
-  word: WordProps;
+  word: QuizAnswerResult;
   quiz?: boolean;
   detail?: boolean;
 }
@@ -18,7 +19,7 @@ interface Props extends TouchableOpacityProps {
  */
 const QuizAnswerCard = ({ word, quiz, detail, ...props }: Props) => {
   const [COLOR, mode] = useThemeStyle();
-  const [sub, main] = useWordReg(word.name);
+  const [sub, main] = useWordReg(word?.termName);
 
   return (
     <Container
@@ -42,7 +43,7 @@ const QuizAnswerCard = ({ word, quiz, detail, ...props }: Props) => {
         </MainName>
       </NameWrapper>
       <Content COLOR={COLOR} mode={mode}>
-        {word.description}
+        {word?.termDescription}
       </Content>
     </Container>
   );

TERMTERM/src/hooks/useQuiz.tsx

@@ -1,5 +1,11 @@
 import QuizApi from "@api/QuizApi";
-import { QuizDetail, QuizReviewDetail, QuizResult, QuizSubmit } from "Quiz";
+import {
+  QuizDetail,
+  QuizReviewDetail,
+  QuizResult,
+  QuizSubmit,
+  QuizAnswerResult,
+} from "Quiz";
 import { useEffect, useState } from "react";
 
 /**
@@ -12,6 +18,7 @@ export const useQuiz = () => {
     useState<QuizReviewDetail[]>();
   const [reviewQuizItem, setReviewQuizItem] = useState<QuizDetail[]>();
   const [quizStatus, setQuizStatus] = useState<string>();
+  const [quizResultData, setQuizResultData] = useState<QuizAnswerResult>();
 
   /** 데일리 퀴즈 */
   const getDailyQuizInfo = async (): Promise<boolean> => {
@@ -41,14 +48,18 @@ export const useQuiz = () => {
 
   /** 데일리/복습 퀴즈 결과 제출 */
   const registerQuizResultInfo = async (
+    apiUrl: string,
     resultData: QuizSubmit
-  ): Promise<boolean> => {
+  ): Promise<QuizAnswerResult | null> => {
     try {
-      await quizApi.registerQuizResult(resultData);
-      return true;
+      const data = await quizApi.registerQuizResult(apiUrl, resultData);
+      // console.log("퀴즈 요청 성공", apiUrl, resultData, data);
+      setQuizResultData(data);
+      // console.log("quizResultData in hook : ", quizResultData);
+      return data;
     } catch (err) {
       console.log(err);
-      return false;
+      return null;
     }
   };
 
@@ -68,6 +79,7 @@ export const useQuiz = () => {
   const getDailyQuizStatus = async (): Promise<boolean> => {
     try {
       const res = await quizApi.getDailyQuizStatus();
+      console.log("여기 : ", res);
       setQuizStatus(res.status);
       return true;
     } catch (err) {
@@ -87,10 +99,12 @@ export const useQuiz = () => {
     finalQuizReviewItem,
     reviewQuizItem,
     quizStatus,
+    quizResultData,
     getDailyQuizInfo,
     getDailyQuizStatus,
     getFinalQuizReviewInfo,
     getReviewQuizInfo,
     registerQuizResultInfo,
+    setQuizStatus,
   };
 };

TERMTERM/src/interfaces/RootStackParamList.ts

@@ -44,4 +44,5 @@ export type RootStackParamList = {
   ReviewQuiz: undefined;
   ReviewQuizResult: { id: number };
   SelectFolder: { termId: number };
+  QuizReviewDetail: { id: number };
 };

TERMTERM/src/recoil/quizState.tsx

@@ -1,3 +1,4 @@
+import { QuizAnswerResult, QuizReviewDetail, QuizStatus } from "Quiz";
 import { atom } from "recoil";
 
 /**
@@ -12,7 +13,7 @@ export interface QuizState {
 
 const defaultState: QuizState = {
   totalIdx: 5,
-  currIdx: 1,
+  currIdx: 0,
   currReviewIdx: 0,
   totalReviewIdx: 0,
 };
@@ -21,3 +22,57 @@ export const quizState = atom<QuizState>({
   key: "quizState",
   default: defaultState,
 });
+
+/**
+ * 퀴즈 풀이 여부 관련 전역 상태
+ */
+export interface MemberQuizSolveState {
+  quizSolveState: QuizStatus;
+}
+
+const defaultSolveState: MemberQuizSolveState = {
+  quizSolveState: {
+    status: "NOT_STARTED",
+  },
+};
+
+export const memberQuizSolveState = atom<MemberQuizSolveState>({
+  key: "memberQuizSolveState",
+  default: defaultSolveState,
+});
+
+/**
+ * 퀴즈 제출 시 받아오는 값 관련 전역변수
+ */
+const defaultQuizAnswer: QuizAnswerResult = {
+  termId: 0,
+  termName: "",
+  termDescription: "",
+  memberSelectedTermName: "",
+  isAnswerRight: true,
+};
+
+export const eachQuizAnswerResult = atom<QuizAnswerResult>({
+  key: "eachQuizAnswerResult",
+  default: defaultQuizAnswer,
+});
+
+/**
+ * 퀴즈 리뷰에서 사용할 전역 변수
+ */
+const defaultQuizReviewList: QuizReviewDetail[] = [
+  {
+    bookmarked: "NO",
+    isAnswerRight: false,
+    termDescription: "",
+    termId: 0,
+    termName: "",
+    termSource: "",
+    wrongChoices: [],
+  },
+];
+
+export const quizReviewList = atom<QuizReviewDetail[]>({
+  key: "quizReviewList",
+  default: defaultQuizReviewList,
+});