.

src/client/package.json

@@ -12,6 +12,7 @@
     "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
+    "react-compound-timer": "^1.2.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"

src/client/src/core/Warning.jsx

@@ -3,36 +3,82 @@ import { useAuth } from "../auth/auth-context"
 import Form from "react-bootstrap/Form";
 import Container from "react-bootstrap/Container";
 import { read as readUser } from '../user/api-user';
-import { read as readCourse } from '../course/api-course';
+import { list, read as readCourse } from '../course/api-course';
 import { useEffect } from "react";
+import Card from "react-bootstrap/esm/Card";
 
 function Warning() {
+    const [data, setData] = useState({ name: "", })
+    const [courses, setCourses] = useState({ name: "", description: "", code: "", })
+    const [values, setValues] = useState({
+        title: "",
+        problems: [],
+        show: false,
+        startAt: "",
+        endAt: "",
+        course: "",
+    });
     const { authUser } = useAuth()
+
     useEffect(() => {
+        const abortController = new AbortController()
+        const signal = abortController.signal
         readUser(authUser.user._id, { t: authUser.token }).then(res => {
             setData(res);
         })
-        readCourse("5f7fc9071575948025e29ebb", { t: authUser.token }).then(res => {
-            console.log(res);
-            setCourse(res);
+        list(signal).then(res => {
+            setCourses(res)
         })
-    }, [])
-    const [data, setData] = useState({ name: "", })
-    const [course, setCourse] = useState({ name: "", description: "", code: "", })
+    }, []);
+
+
+    const handleChange = (event) => {
+        const { name, value } = event.target;
+        console.log("name", name, "value", value);
+        console.log("values:", values);
+
+        if (name === "course") {
+            console.log(`${name}: ${courses[value]._id}`);
+            setValues({ ...values, [name]: courses[value]._id });
+        } else {
+            setValues({ ...values, [name]: value });
+        }
+    };
     return (
         <div>
             <Container className="col-sm-6 col-md-5 col-lg-4 p-5">
-                {console.log(data)}
                 <Form.Text className="text-muted">
                     <h1 className="text-center mt-1 pb-3 font-italic text-danger">Korea University</h1>
-                    <p>응시자 정보 </p>
-                    <p>이름 : {data.name}</p>
-                    <p>e-mail : {data.email}</p>
-                    <p>응시 과목 :{course.name}</p>
-                    <p>담당 교수 :{course.description}</p>
-                    {/* <p>시험문제 수 :</p>
+                    <Card className="p-3 ">
+                        <h4 className='card-title mb-4'>응시자 정보 </h4>
+                        <p className="ml-2">이름    :    {data.name}</p>
+                        <p className="ml-2">e-mail    :    {data.email}</p>
+                        <p className="ml-2"> <div className="mb-2">[수강과목]</div>        {courses.map((course) => (<div>{course.name}  ({course.description}교수님) </div>))} </p>
+                        {/* <p className="ml-2">    {courses.map((courses)=>(courses.name +':'+ courses.description))}</p> */}
+
+                        <div className="mt-3 text-left">과목을 선택하세요.</div>
+                        <Form.Control
+                            className="mb-4 mt-2"
+                            as="select"
+                            id="course"
+                            name="course"
+                            onChange={handleChange}
+                        >
+
+                            {courses.map((course, i) => (
+                                <option key={i} value={i}>
+                                    {course.name}
+                                </option>
+                            ))}
+                        </Form.Control>
+                        <div className="text-right">
+                            <a href="#" className="btn btn-danger">Quiz Start</a>
+                            {/* <a href="#" class="card-link">Another link</a> */}
+                        </div>
+                        {/* <p>시험문제 수 :</p>
                     <p>시험 시간 : </p>
                     <p>공지 사항 : </p> */}
+                    </Card>
 
                 </Form.Text>
             </Container>

src/client/src/quiz/NewQuiz.jsx

@@ -77,7 +77,6 @@ function NewQuiz() {
 
   const clickSubmit = (event) => {
     event.preventDefault();
-
     const quizData = {
       title: values.title,
       problems: problems,
@@ -86,14 +85,13 @@ function NewQuiz() {
       course: values.course,
     };
 
-    console.log(quizData);
 
     create({ userId: jwt.user._id }, { t: jwt.token }, quizData).then(
       (data) => {
         if (data.error) {
-          console.log(data.error);
+          console.log("data.error",data.error);
         } else {
-          console.log(data);
+          console.log("data",data);
           setQuiz(data);
           setValues({ ...values, show: true });
         }

src/client/src/quiz/Problems.jsx

 import React from 'react'
 
+
 function Problems() {
-  return (
+
+    // let Time = 0
+    // if (JSON.parse(localStorage.getItem("Set")) === null) {
+    //     Time = 30010
+    // }
+    // else {
+    //     Time = Number(JSON.parse(localStorage.getItem("Set"))[0].Time)
+    // }
+
+
+    // const [question, setQuestion] = useState({
+    //     ...localQnA[0]
+    // })
+    // const [selected, setSelected] = useState("")  //선택한 답을 보여줄 것
+
+    // const [timeout, settimeout] = useState(false)
+    // //for each 사용하기
+    // let Solutions = []          //빈 배열
+    // console.log(localQnA)
+
+    // localQnA.forEach((element) => {
+    //     Solutions.push(Number(element.A))
+    // });
+    // useEffect(() => {
+    //     for (let i = 1; i <= Solutions.length; i++) {
+    //         Answers.push(0)
+    //         localStorage.setItem('Answers', JSON.stringify(Answers))
+    //         localStorage.setItem("Solutions", JSON.stringify(Solutions))
+    //     }
+    //     // eslint-disable-next-line
+    // }, [])
+
+
+
+    // function handleQuestion() {
+    //     setQuestion({ ...localQnA[question.N] })
+    //     setSelected("") //페이지 넘어가면 selected 초기화
+    // }
+
+    // let handleChange = (ev) => {
+    //     setSelected(ev.target.value)  //selected값 변경
+    //     Answers[question.N - 1] = Number(ev.target.id) + 1
+    //     localStorage.setItem('Answers', JSON.stringify(Answers))
+    // }
+    // return (
+    //     <>
+    //         <div className="container-fluid">
+    //             <div className="text-center  font-italic font-weight-bold py-2 text-muted">해석학 2 (이연주 교수)</div>
+    //             <div className="row justify-content-md-center">
+
+    //                 <div className="col-md-auto mt-4">
+    //                     <div className="mb-4small">문제 진척도 {question.N}/{localQnA.length}</div>
+    //                     <span className="h5 text-left text-danger ">
+    //                         <Timer
+    //                             initialTime={Time}
+    //                             direction="backward"
+    //                             checkpoints={[
+    //                                 {
+    //                                     time: 1,
+    //                                     callback: () => alert('시간이 초과되었습니다.'),
+    //                                 },
+    //                                 {
+    //                                     time: 0,
+    //                                     callback: () => settimeout(true),
+
+    //                                 }
+    //                             ]}
+    //                         >
+    //                             {() => (
+    //                                 <>
+    //                                     <Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 30 : 00                        </>
+    //                             )}
+    //                         </Timer>     {/* npm i react-compound-timer */}
+    //                     </span>
+    //                     <span className=" float-right "> {(question.N - 1 === localQnA.length - 1)
+    //                         ? <Link to="/end">
+    //                             <button className="btn btn-outline-success" /*onClick={localStorage.setItem('Solutions', JSON.stringify(Solutions))}*/>제출</button>
+    //                         </Link>
+    //                         : <button type="button" className="btn btn-outline-dark" onClick={handleQuestion}>다음</button>
+    //                     }
+    //                     </span>
+
+
+    //                     <div className="h2 mt-5">
+    //                         <span className='mr-4 font-weight-bold text-danger'>Quiz{question.N}.</span>{question.Q}
+    //                     </div>
+    //                     <div className="mt-2">
+    //                         <form>
+    //                             {question.Choose.map((a, index) =>
+    //                                 <div>
+    //                                     <input type="radio" name='answer' id={index} value={a} onChange={handleChange} checked={selected === String(a)} />
+    //                                     <label className="font-weight-bold" htmlFor={a}>{a}</label>
+    //                                 </div>
+    //                             )}
+    //                         </form>
+    //                         <span className="h5 font-weight-bold"> Your Answer :</span>
+    //                         <span className="h2 font-weight-bold text-danger"> {selected}</span>  {/* 선택한 값 보여줌 */}
+
+    //                     </div>
+
+    //                 </div>
+    //                 <div className="col">
+    //                 </div>
+    //             </div>
+    //         </div>
+    //         {timeout ? <Redirect to='/end' /> : ''}
+    //     </>
+    // )
+
+
+return (
     <div>
-      
+
     </div>
-  )
+)
 }
 
+
 export default Problems