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>

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 [data, setData] = useState({ name: "" });
+  const [courses, setCourses] = useState([
+    { name: "", description: "", code: "" },
+  ]);
   const [values, setValues] = useState({
     title: "",
     problems: [],
@@ -19,20 +21,19 @@ function Warning() {
     endAt: "",
     course: "",
   });
-    const { authUser } = useAuth()
+  const { authUser } = useAuth();
 
   useEffect(() => {
-        const abortController = new AbortController()
-        const signal = abortController.signal
-        readUser(authUser.user._id, { t: authUser.token }).then(res => {
+    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)
-        })
+    });
+    list(signal).then((res) => {
+      setCourses(res);
+    });
   }, []);
 
-
   const handleChange = (event) => {
     const { name, value } = event.target;
     console.log("name", name, "value", value);
@@ -49,12 +50,22 @@ function Warning() {
     <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>
+          <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>
+            <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">
+              {" "}
+              <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>
@@ -65,7 +76,6 @@ function Warning() {
               name="course"
               onChange={handleChange}
             >
-
               {courses.map((course, i) => (
                 <option key={i} value={i}>
                   {course.name}
@@ -73,7 +83,7 @@ function Warning() {
               ))}
             </Form.Control>
             <div className="text-right">
-                            <Link to="/problems">
+              <Link to={`/problems/${authUser.user._id}`}>
                 <a className="btn btn-danger">Quiz Start</a>
               </Link>
               {/* <a href="#" class="card-link">Another link</a> */}
@@ -82,11 +92,10 @@ function Warning() {
                     <p>시험 시간 : </p>
                     <p>공지 사항 : </p> */}
           </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;