최종...

src/client/src/MainRouter.jsx

@@ -3,6 +3,8 @@ import { Route, Switch } from "react-router-dom";
 import Signin from "./auth/Signin";
 import Home from "./core/Home";
 import Menu from "./core/Menu";
+import Warning from "./core/Warning"
+import End from "./core/End"
 import NewQuiz from "./quiz/NewQuiz";
 import Quiz from "./quiz/Quiz";
 import Signup from "./user/Signup";
@@ -19,6 +21,12 @@ function MainRouter() {
         <Route exact path="/">
           <Home />
         </Route>
+        <Route path="/warning">
+          <Warning/>
+        </Route>
+        <Route path="/end">
+          <End/>
+        </Route>
         <Route path="/signin">
           <Signin />
         </Route>

src/client/src/core/End.jsx

+import React from "react";
+import { Link } from 'react-router-dom';
+function End() {
+
+    return (
+        <>
+            <div className="container">
+                <h2>채점표</h2>
+                <table className="table table-bordered" >
+                    <thead>
+                        <tr>
+                            <th>응시자</th>
+                            <th>응시자이름</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        채점결과
+                    {/* {scores.map((score, index) => {
+                        
+                        if (score === -1) {
+                            result = <tr><td>Quiz {index + 1}</td> <td> 정답이 입력되지 않았습니다. </td></tr>
+                        }
+                        else if (score === 1) {
+                            result = <tr><td>Quiz {index + 1}</td> <td> O </td></tr>
+                        }
+                        else {
+                            result = <tr><td>Quiz {index + 1}</td> <td> X</td></tr>
+                        }
+
+                        return result
+                    })} */}
+                        <tr>
+                            <td>총점</td>
+                            <td>00점</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Link to="/">
+                    <a className="btn btn-danger">시험종료</a>
+                </Link>
+            </div>
+
+
+
+
+        </>
+    )
+
+}
+
+export default End;
+

src/client/src/quiz/Problems.jsx

 import React, { useEffect, useState } from "react";
 import { Link, useParams, Redirect } from 'react-router-dom';
-import Card from "react-bootstrap/Card";
-import Button from "react-bootstrap/Button";
-import { listByUserId } from "./api-quiz";
+import { listByUserId, read } from "./api-quiz";
 import authHelpers from "../auth/auth-helpers";
 import Timer from 'react-compound-timer';
 
 function Problems({ problem, number, onUpdate, onRemove }) {
 
-    let Time = 0
+    let Time = 1800100
 
     const [timeout, settimeout] = useState(false)
     const { userId } = useParams();
-    const [quizzes, setQuizzes] = useState([{title : ""}]);
-
+    const [problems, setProblems] = useState([])
+    const [quizzes, setQuizzes] = useState([{ title: "", author: "", course: "", problems: problems, }]);
     const jwt = authHelpers.isAuthenticated();
+    const { quizId } = useParams();
 
     useEffect(() => {
         const abortController = new AbortController();
         const signal = abortController.signal;
 
+        read({ quizId: quizId }, { t: jwt.token }, signal).then((data) => {
+            if (data.error) {
+                console.log(data.error);
+            } else {
+                console.log(data);
+                setQuizzes(data);
+            }
+        });
+
+
         listByUserId({ userId: userId }, { t: jwt.token }, signal).then((data) => {
             if (data.error) {
                 console.log(data.error);
@@ -37,13 +46,13 @@ function Problems({ problem, number, onUpdate, onRemove }) {
     return (
         <>
             <div>
-                {console.log("quizzes=", quizzes[0])}
+                {console.log("quizzes=", quizzes)}
                 <div className="container-fluid">
-                    <div className="text-center  font-italic font-weight-bold py-2 text-muted">{quizzes}</div>
+                    <div className="text-center  font-italic font-weight-bold py-2 text-muted">{quizzes[0].title}</div>
                     <div className="row justify-content-md-center">
 
                         <div className="col-md-auto mt-4">
-                            <div className="mb-4small">문제 진척도 </div>
+                            <div className="mb-4small">문제 진척도 {quizzes[0]._id} </div>
                             <span className="h5 text-left text-danger ">
                                 <Timer
                                     initialTime={Time}
@@ -66,7 +75,10 @@ function Problems({ problem, number, onUpdate, onRemove }) {
                                     )}
                                 </Timer>     {/* npm i react-compound-timer */}
                             </span>
-                            <span className=" float-right "> 버튼자리
+                            <span className=" float-right ">
+                            <Link to="/End">
+                                    <a className="btn btn-danger">제출하기</a>
+                                </Link>
                                 {/* {(question.N - 1 === localQnA.length - 1)
                             ? <Link to="/end">
                                 <button className="btn btn-outline-success" >제출</button>
@@ -76,11 +88,16 @@ function Problems({ problem, number, onUpdate, onRemove }) {
 
 
                             <div className="h2 mt-5">
-                                <span className='mr-4 font-weight-bold text-danger'>Quiz</span>
+                                <span className='mr-4 font-weight-bold text-danger'>Quiz
+                        <div>{quizzes[0].problems}</div>
+                                </span>
                             </div>
                             <div className="mt-2">
                                 <form>
                                     보기자리
+                                    {quizzes.map((quiz,i)=>{
+                                        return <div>{quiz.problems}</div>
+                                    })}
                                 {/* {question.Choose.map((a, index) =>
                                     <div>
                                         <input type="radio" name='answer' id={index} value={a} onChange={handleChange} checked={selected === String(a)} />
@@ -95,7 +112,7 @@ function Problems({ problem, number, onUpdate, onRemove }) {
                         </div>
                     </div>
                 </div>
-                {timeout ? <Redirect to='/end' /> : ''}
+                {timeout ? <Redirect to='/End' /> : ''}
             </div>
         </>
         // <div>

src/client/src/quiz/Quizzes.jsx

@@ -18,7 +18,7 @@ function Quizzes() {
       if (data.error) {
         console.log(data.error);
       } else {
-        // console.log(data);
+        console.log("quizzes=",data);
         setQuizzes(data);
       }
     });
@@ -31,12 +31,12 @@ function Quizzes() {
   return (
     <div>
       All Quizzes Here
-      {console.log("quizzes=", quizzes)}
       {quizzes.map((quiz, i) => {
         return (
           <Link key={i} to={`/quiz/${quiz._id}`}>
             <Card>
               <Card.Body>
+                
                 <Card.Title>제목: {quiz.title}</Card.Title>
                 <Card.Text>만든날: {quiz.created}</Card.Text>
               </Card.Body>

src/server/quiz/quiz.controller.js

@@ -82,7 +82,8 @@ const isProblemAuthor = (req, res, next) => {
 }
 
 const read = async (req, res) => {
-  let quiz = req.quiz
+  let quiz = req.body.quiz
+  console.log("섭에어버", quiz)
   res.json(quiz)
 }