Merge branch 'fe/teacherReport' into 'frontend'

[Front-end] 강사 생성 퀴즈 관리 페이지 생성"

See merge request s11-webmobile1-sub2/S11P12A701!112

frontend/src/Router.jsx

@@ -40,6 +40,8 @@ const PasswordResetAuthPage = lazy(async () => await import('./pages/PasswordRes
 const StudentReportPage = lazy(async () => await import('./pages/StudentReportPage'));
 const StudentReportDetailPage = lazy(async () => await import('./pages/StudentReportDetailPage'));
 const LivePage = lazy(async () => await import('./pages/LivePage'));
+const TeacherReportsetPage = lazy(async () => await import('./pages/TeacherReportsetPage'));
+const TeacherReportsetDetailPage = lazy(async () => await import('./pages/TeacherReportsetDetailPage'));
 
 const router = createBrowserRouter([
   {
@@ -87,6 +89,14 @@ const router = createBrowserRouter([
             path: 'report/:reportId',
             element: <StudentReportDetailPage />,
           },
+          {
+            path: 'teacherReportsets',
+            element: <TeacherReportsetPage />,
+          },
+          {
+            path: 'teacherReportsets/:reportsetId',
+            element: <TeacherReportsetDetailPage />,
+          },
           {
             path: 'edit',
             element: <LectureEditPage />,

frontend/src/components/Layout/LectureLayout.jsx

@@ -61,7 +61,7 @@ export default function LectureLayout() {
             <SideLink to={'qna'}>Q&A</SideLink>
             <SideLink to={'freeboard'}>자유게시판</SideLink>
             {userType === 'student' && <SideLink to={'report'}>퀴즈 성적</SideLink>}
-            {userType === 'teacher' && <SideLink to={'quiz'}>퀴즈</SideLink>}
+            {userType === 'teacher' && <SideLink to={'quiz'}>퀴즈 만들기</SideLink>}
             {userType === 'teacher' && <SideLink to={'enroll'}>수강신청관리</SideLink>}
           </SideBar>
           {userType === 'teacher' && (
@@ -88,6 +88,7 @@ export default function LectureLayout() {
                   강의 삭제
                 </span>
               </li>
+              <SideLink to={'teacherReportsets'}>퀴즈 목록</SideLink>
             </SideBar>
           )}
           {userType === 'student' && (

frontend/src/hooks/api/useReportSetDetail.js

@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useReportSetDetail(reportSetId) {
+  return useSuspenseQuery({
+    queryKey: ['reportsetDetail', reportSetId],
+    queryFn: () => instance.get(`${API_URL}/report/teacher/report/${reportSetId}`),
+  });
+}

frontend/src/hooks/api/useReportSets.js

@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useReportSets(lectureId) {
+  return useSuspenseQuery({
+    queryKey: ['reportsetlists', lectureId],
+    queryFn: () => instance.get(`${API_URL}/report/teacher/reportSet/${lectureId}`),
+  });
+}

frontend/src/pages/TeacherReportsetDetailPage/TeacherReportsetDetailPage.jsx

@@ -0,0 +1,28 @@
+import { ArticleLink } from '../../components/ArticleLink';
+import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
+import { useReportSetDetail } from '../../hooks/api/useReportSetDetail';
+import { useParams } from 'react-router-dom';
+
+export default function TeacherReportsetDetailPage() {
+  const { reportsetId } = useParams();
+  const { data } = useReportSetDetail(reportsetId);
+  const reports = data?.data;
+
+  console.log(reports);
+  return (
+    <ArticleBoard
+      title="퀴즈 조회"
+      canCreate={false}
+    >
+      {reports.length &&
+        reports.map?.((report) => (
+          <ArticleLink
+            key={`${report.id}`}
+            title={`${report.name} - ${report.title} 점수: ${report.correctCount}/${report.allCount}`}
+            sub={`${report.date}`}
+            to={`../../report/${report.id}`}
+          />
+        ))}
+    </ArticleBoard>
+  );
+}

frontend/src/pages/TeacherReportsetDetailPage/index.js

@@ -0,0 +1 @@
+export { default } from './TeacherReportsetDetailPage';

frontend/src/pages/TeacherReportsetPage/TeacherReportsetPage.jsx

@@ -0,0 +1,28 @@
+import { ArticleLink } from '../../components/ArticleLink';
+import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
+import { useReportSets } from '../../hooks/api/useReportSets';
+import { useParams } from 'react-router-dom';
+
+export default function TeacherReportsetPage() {
+  const { lectureId } = useParams();
+  const { data } = useReportSets(lectureId);
+  const reports = data?.data;
+
+  console.log(data);
+  return (
+    <ArticleBoard
+      title="퀴즈 관리"
+      canCreate={false}
+    >
+      {reports.length &&
+        reports.map?.((report) => (
+          <ArticleLink
+            key={`${report.reportSetId}`}
+            title={`${report.quizSetTitle}`}
+            sub={`${report.testAt}`}
+            to={`${report.reportSetId}`}
+          />
+        ))}
+    </ArticleBoard>
+  );
+}

frontend/src/pages/TeacherReportsetPage/index.js

@@ -0,0 +1 @@
+export { default } from './TeacherReportsetPage';