Problems에 userId 추가

src/client/src/App.js

@@ -2,15 +2,11 @@ import React from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom'
 import { AuthProvider } from './auth/auth-context';
 import MainRouter from './MainRouter';
-import Problems from './quiz/Problems';
 function App() {
   return (
     <AuthProvider>
       <BrowserRouter>
         <MainRouter />
-          <Switch>
-            <Route path="/problems" component={Problems}/>
-          </Switch>
       </BrowserRouter>
     </AuthProvider>
   );

src/client/src/MainRouter.jsx

@@ -9,6 +9,7 @@ import Signup from "./user/Signup";
 import Quizzes from "./quiz/Quizzes";
 import EditProblem from "./quiz/EditProblem";
 import NewProblem from "./quiz/NewProblem";
+import Problems from './quiz/Problems';
 
 function MainRouter() {
   return (
@@ -24,6 +25,9 @@ function MainRouter() {
         <Route path="/signup">
           <Signup />
         </Route>
+        <Route path="/problems/:userId">
+          <Problems />
+        </Route>
         <Route path="/quiz/new">
           <NewQuiz />
         </Route>
@@ -37,7 +41,7 @@ function MainRouter() {
           <EditProblem />
         </Route>
         {/* 아래 "/quiz/:quizId" 는 "/quiz/by/:userId"와 순서 바뀌면 안된다. */}
-        <Route path="/quiz/:quizId"> 
+        <Route path="/quiz/:quizId">
           <Quiz />
         </Route>
       </Switch>

src/client/src/core/Home.jsx

-import React from 'react'
-import Signin from '../auth/Signin'
-import { useAuth } from "../auth/auth-context"
-import Warning from './Warning'
+import React from "react";
+import Signin from "../auth/Signin";
+import { useAuth } from "../auth/auth-context";
+import Warning from "./Warning";
 
 function Home() {
-  const { authUser } = useAuth()
-  return (
-    <div>
-      {authUser ? <Warning/>:<Signin />}
-    </div>
-  )
+  const { authUser } = useAuth();
+  return <div>{authUser ? <Warning /> : <Signin />}</div>;
 }
 
-
-
-
-
-export default Home
+export default Home;

src/client/src/core/Warning.jsx

-import React, { useState } from "react"
-import { useAuth } from "../auth/auth-context"
+import React, { useState } from "react";
+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 { list, read as readCourse } from '../course/api-course';
+import { read as readUser } from "../user/api-user";
+import { list, read as readCourse } from "../course/api-course";
 import { useEffect } from "react";
 import Card from "react-bootstrap/esm/Card";
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Redirect } from "react-router-dom";
 
 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);
-        })
-        list(signal).then(res => {
-            setCourses(res)
-        })
-    }, []);
-
+  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();
 
-    const handleChange = (event) => {
-        const { name, value } = event.target;
-        console.log("name", name, "value", value);
-        console.log("values:", values);
+  useEffect(() => {
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    readUser(authUser.user._id, { t: authUser.token }).then((res) => {
+      setData(res);
+    });
+    list(signal).then((res) => {
+      setCourses(res);
+    });
+  }, []);
 
-        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">
-                <Form.Text className="text-muted">
-                    <h1 className="text-center mt-1 pb-3 font-italic text-danger">Korea University</h1>
-                    <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> */}
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    console.log("name", name, "value", value);
+    console.log("values:", values);
 
-                        <div className="mt-3 text-left">과목을 선택하세요.</div>
-                        <Form.Control
-                            className="mb-4 mt-2"
-                            as="select"
-                            id="course"
-                            name="course"
-                            onChange={handleChange}
-                        >
+    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">
+        <Form.Text className="text-muted">
+          <h1 className="text-center mt-1 pb-3 font-italic text-danger">
+            Korea University
+          </h1>
+          <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> */}
 
-                            {courses.map((course, i) => (
-                                <option key={i} value={i}>
-                                    {course.name}
-                                </option>
-                            ))}
-                        </Form.Control>
-                        <div className="text-right">
-                            <Link to="/problems">
-                            <a className="btn btn-danger">Quiz Start</a>
-                            </Link>
-                            {/* <a href="#" class="card-link">Another link</a> */}
-                        </div>
-                        {/* <p>시험문제 수 :</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">
+              <Link to={`/problems/${authUser.user._id}`}>
+                <a className="btn btn-danger">Quiz Start</a>
+              </Link>
+              {/* <a href="#" class="card-link">Another link</a> */}
+            </div>
+            {/* <p>시험문제 수 :</p>
                     <p>시험 시간 : </p>
                     <p>공지 사항 : </p> */}
-                    </Card>
-
-                </Form.Text>
-            </Container>
-        </div>
-    )
+          </Card>
+        </Form.Text>
+      </Container>
+    </div>
+  );
 }
 
-export default Warning
\ No newline at end of file
+export default Warning;

src/client/src/quiz/Problems.jsx

@@ -129,7 +129,7 @@ import Button from "react-bootstrap/Button";
 import { listByUserId } from "./api-quiz";
 import authHelpers from "../auth/auth-helpers";
 
-function Problem({ problem, number, onUpdate, onRemove }) {
+function Problems({ problem, number, onUpdate, onRemove }) {
 
     const { userId } = useParams();
     const [quizzes, setQuizzes] = useState([]);
@@ -199,4 +199,4 @@ function Problem({ problem, number, onUpdate, onRemove }) {
     );
 }
 
-export default Problem;
+export default Problems;