feat: 강의 수강 신청 주고 받기 기능 구현

frontend/src/Router.jsx

@@ -30,6 +30,7 @@ const LectureEditPage = lazy(async () => await import('./pages/LectureEditPage')
 const QuizsetListPage = lazy(async () => await import('./pages/QuizsetListPage'));
 const QuizsetWritePage = lazy(async () => await import('./pages/QuizsetWritePage'));
 const QuizsetDetailPage = lazy(async () => await import('./pages/QuizsetDetailPage'));
+const LectureEnrollPage = lazy(async () => await import('./pages/LectureEnrollPage'));
 
 const router = createBrowserRouter([
   {
@@ -148,6 +149,10 @@ const router = createBrowserRouter([
               },
             ],
           },
+          {
+            path: 'enroll',
+            element: <LectureEnrollPage />,
+          },
         ],
       },
       {

frontend/src/components/Layout/LectureLayout.jsx

@@ -52,6 +52,7 @@ export default function LectureLayout() {
             <SideLink to={'qna'}>Q&A</SideLink>
             <SideLink to={'file'}>수업자료</SideLink>
             <SideLink to={'quiz'}>퀴즈</SideLink>
+            {userType === 'teacher' && <SideLink to={'enroll'}>수강신청관리</SideLink>}
           </SideBar>
           {userType === 'teacher' && (
             <SideBar title="수업 정보">

frontend/src/components/LectureEnroll/LectureEnroll.jsx

@@ -0,0 +1,28 @@
+import styles from './LectureEnroll.module.css';
+import { useLectureEnrollCancel } from '../../hooks/api/useLectureEnrollCancel';
+import { useLectureEnrollAccept } from '../../hooks/api/useLectureEnrollAccept';
+
+export default function LectureEnroll({ userName, enrollid, onDelete }) {
+  const { lectureEnrollCancel } = useLectureEnrollCancel();
+  const { lectureEnrollAccept } = useLectureEnrollAccept();
+
+  const handleAccept = async (e) => {
+    e.preventDefault();
+    await lectureEnrollAccept(enrollid);
+    onDelete(enrollid);
+  };
+
+  const handleCancel = async (e) => {
+    e.preventDefault();
+    await lectureEnrollCancel(enrollid);
+    onDelete(enrollid);
+  };
+
+  return (
+    <div className={styles.enrollLink}>
+      <p>{userName}</p>
+      <button onClick={handleAccept}>등록</button>
+      <button onClick={handleCancel}>삭제</button>
+    </div>
+  );
+}

frontend/src/components/LectureEnroll/LectureEnroll.module.css

@@ -0,0 +1,13 @@
+.enrollLink {
+  border-radius: 8px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 16px 20px;
+  transition: background-color 0.25s;
+}
+
+.enrollLink:hover {
+  background-color: var(--background-secondary);
+}

frontend/src/components/LectureEnroll/index.js

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

frontend/src/hooks/api/useLectureEnroll.js

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

frontend/src/hooks/api/useLectureEnrollAccept.js

@@ -0,0 +1,9 @@
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useLectureEnrollAccept() {
+  const lectureEnrollAccept = (enrollId) => {
+    return instance.put(`${API_URL}/registration/${enrollId}`);
+  };
+  return { lectureEnrollAccept };
+}

frontend/src/hooks/api/useLectureEnrollCancel.js

@@ -0,0 +1,9 @@
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useLectureEnrollCancel() {
+  const lectureEnrollCancel = (enrollId) => {
+    return instance.delete(`${API_URL}/registration/${enrollId}`);
+  };
+  return { lectureEnrollCancel };
+}

frontend/src/pages/LectureEnrollPage/LectureEnrollPage.jsx

@@ -0,0 +1,40 @@
+import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
+import LectureEnroll from '../../components/LectureEnroll/LectureEnroll';
+import { useParams } from 'react-router-dom';
+import { useLectureEnroll } from '../../hooks/api/useLectureEnroll';
+import { useState, useEffect } from 'react';
+
+export default function QuestionListPage() {
+  const { lectureId } = useParams();
+  const { data } = useLectureEnroll(lectureId);
+  const [lectures, setLectures] = useState([]);
+
+  useEffect(() => {
+    if (data?.data) {
+      setLectures(data.data);
+    }
+  }, [data]);
+
+  const handleDelete = async (enrollId) => {
+    setLectures(lectures.filter((lecture) => lecture.id !== enrollId));
+  };
+
+  return (
+    <ArticleBoard
+      title="수강신청관리"
+      canCreate={false}
+    >
+      {lectures.map?.((lecture) => (
+        <LectureEnroll
+          key={`${lecture.id}`}
+          enrollid={lecture.id}
+          userName={lecture.userName}
+          onDelete={handleDelete}
+        />
+      ))}
+    </ArticleBoard>
+  );
+}
+
+//FIXME: 이 페이지에서 딱 처음 수강신청관리 페이지 들어오면 수강신청 관리용 강의들 안뜨는 문제 있음.
+// FIXME: 그리고 왜 그런지는 모르겠는데 강의 목록이 뜨면 HEADER 부분 강의 이름이 안보임.

frontend/src/pages/LectureEnrollPage/index.js

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

frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx

@@ -25,7 +25,9 @@ export default function LectureInfoPage() {
 
     lectureRegister(lectureId)
       .then(() => {
-        navigate(`/lecture/${lectureId}`);
+        // navigate(`/lecture/${lectureId}`);
+        window.alert('강사가 수강신청 수락시 수업이 시작됩니다.');
+        navigate('/');
       })
       .catch((err) => {
         console.log(err);