From 306d4ad9030af93e5f73363822e636a6281e4c88 Mon Sep 17 00:00:00 2001
From: kasterra <kasterra@naver.com>
Date: Sun, 2 Jun 2024 17:52:20 +0900
Subject: [PATCH] feat(Quiz) : student quiz result view

---
 .../$lectureId+/_layout/QuizResultModal.tsx   | 61 +++++++++++++++++++
 .../lectures+/$lectureId+/_layout/index.tsx   | 16 +++++
 2 files changed, 77 insertions(+)
 create mode 100644 app/routes/_procted+/lectures+/$lectureId+/_layout/QuizResultModal.tsx

diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/QuizResultModal.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/QuizResultModal.tsx
new file mode 100644
index 0000000..db9d12a
--- /dev/null
+++ b/app/routes/_procted+/lectures+/$lectureId+/_layout/QuizResultModal.tsx
@@ -0,0 +1,61 @@
+import Modal from "~/components/Modal";
+import styles from "./modal.module.css";
+import formStyles from "~/components/common/form.module.css";
+import TextInput from "~/components/Input/TextInput";
+import { useParams } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { useAuth } from "~/contexts/AuthContext";
+import { getQuizWithUserId } from "~/API/practice";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const QuizResultModal = ({ isOpen, onClose }: Props) => {
+  const auth = useAuth();
+  const [isLoading, setIsLoading] = useState(true);
+  const params = useParams();
+  const [quizResult, setQuizResult] = useState<
+    {
+      gain_score: number | null;
+      id: number;
+      max_score: number;
+      title: string;
+    }[]
+  >([]);
+  useEffect(() => {
+    async function getData() {
+      const { data } = await getQuizWithUserId(
+        params.lectureId!,
+        auth.userId,
+        auth.token
+      );
+      setQuizResult(data);
+      setIsLoading(false);
+    }
+    getData();
+  }, []);
+  return isLoading ? null : (
+    <Modal
+      title="퀴즈 결과 조회"
+      subtitle="사용자의 퀴즈 결과를 확인합니다"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <form className={styles["modal-body"]}>
+        {quizResult.map((result, idx) => (
+          <TextInput
+            title={`Q${idx + 1}`}
+            name=""
+            value={`${
+              result.gain_score == null ? "점수없음" : result.gain_score
+            }/${result.max_score}`}
+          />
+        ))}
+      </form>
+    </Modal>
+  );
+};
+
+export default QuizResultModal;
diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx
index 4435886..e50f367 100644
--- a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx
+++ b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx
@@ -46,6 +46,7 @@ import { deleteProblem } from "~/API/problem";
 import { deleteTestcase } from "~/API/testCase";
 import DownloadMyCodesModal from "./DownloadMyCodesModal";
 import { LinkElement } from "~/components/Aside/LinkElement";
+import QuizResultModal from "./QuizResultModal";
 const LectureDetail = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [lectures, setLectures] = useState<LectureEntity[]>([]);
@@ -244,6 +245,7 @@ const PracticeDetail = ({
   const [practiceDetail, setPracticeDetail] = useState<SimplePracticeDetail>();
   const [isPracticeEditModalOpen, setIsPracticeEditModalOpen] = useState(false);
   const [isProblemAddModalOpen, setIsProblemAddModalOpen] = useState(false);
+  const [isQuizResultModalOpen, setIsQuizResultModalOpen] = useState(false);
   const [isFoldableOpen, setIsFoldableOpen] = useState(false);
   const [hasQuiz, setHasQuiz] = useState(false);
   const { lectureId } = useParams();
@@ -312,6 +314,14 @@ const PracticeDetail = ({
             title={problem.title}
           />
         ))}
+        {auth.role === "student" && hasQuiz ? (
+          <ButtonElement
+            title="퀴즈 성적 보기"
+            onButtonClick={() => {
+              setIsQuizResultModalOpen(true);
+            }}
+          />
+        ) : null}
         {auth.role === "professor" ? (
           <>
             <ButtonElement
@@ -384,6 +394,12 @@ const PracticeDetail = ({
           practiceId={practiceDetail!.id}
         />
       ) : null}
+      {isQuizResultModalOpen ? (
+        <QuizResultModal
+          isOpen={isQuizResultModalOpen}
+          onClose={() => setIsQuizResultModalOpen(false)}
+        />
+      ) : null}
     </>
   );
 };