Merge branch 'FE/LectureEnrollPage' into 'frontend'

[Front-End] feat: 전체 수강생 관리(Delete) 추가

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

frontend/src/components/LectureEnroll/LectureEnroll.jsx

@@ -2,7 +2,7 @@ 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 }) {
+export default function LectureEnroll({ userName, enrollid, onDelete, enrolled = true }) {
   const { lectureEnrollCancel } = useLectureEnrollCancel();
   const { lectureEnrollAccept } = useLectureEnrollAccept();
 
@@ -28,12 +28,14 @@ export default function LectureEnroll({ userName, enrollid, onDelete }) {
     <div className={styles.enrollLink}>
       <span>{userName}</span>
       <div className={styles.buttonWrapper}>
+        {!enrolled && (
           <button
             onClick={handleAccept}
             className={styles.accept}
           >
             등록
           </button>
+        )}
         <button
           onClick={handleCancel}
           className={styles.reject}

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

@@ -8,6 +8,10 @@
   box-sizing: border-box;
 }
 
+.enrollLink:hover {
+  background-color: var(--background-secondary);
+}
+
 .buttonWrapper {
   display: flex;
   gap: 8px;

frontend/src/pages/LectureEnrollPage/LectureEnrollPage.jsx

@@ -3,36 +3,56 @@ import LectureEnroll from '../../components/LectureEnroll/LectureEnroll';
 import { useParams } from 'react-router-dom';
 import { useLectureEnroll } from '../../hooks/api/useLectureEnroll';
 import { useState, useEffect } from 'react';
+import styles from './LectureEnrollPage.module.css';
 
-export default function QuestionListPage() {
+export default function LectureEnrollPage() {
   const { lectureId } = useParams();
   const { data } = useLectureEnroll(lectureId);
-  const [lectures, setLectures] = useState([]);
-
+  const [newStudents, setNewStudents] = useState([]);
+  const [students, setStudents] = useState([]);
+  console.log(data);
   useEffect(() => {
     if (data?.data) {
-      setLectures(data.data);
+      setNewStudents(data.data[1]);
+      setStudents(data.data[0]);
     }
   }, [data]);
 
+  const handleNewDelete = async (enrollId) => {
+    setNewStudents(newStudents.filter((student) => student.id !== enrollId));
+  };
+
   const handleDelete = async (enrollId) => {
-    setLectures(lectures.filter((lecture) => lecture.id !== enrollId));
+    setStudents(students.filter((student) => student.id !== enrollId));
   };
 
   return (
     <ArticleBoard
-      title="수강신청관리"
+      title="수강신청 관리"
       canCreate={false}
     >
-      {lectures.length &&
-        lectures.map?.((lecture) => (
+      {newStudents.length &&
+        newStudents.map?.((student) => (
           <LectureEnroll
-            key={`${lecture.id}`}
-            enrollid={lecture.id}
-            userName={lecture.userName}
+            key={`${student.id}`}
+            enrollid={student.id}
+            userName={student.userName}
+            onDelete={handleNewDelete}
+            enrolled={false}
+          />
+        ))}
+      <div>
+        <h3 className={styles.title}>전체 수강생 관리</h3>
+        {students.length &&
+          students.map?.((student) => (
+            <LectureEnroll
+              key={`${student.id}`}
+              enrollid={student.id}
+              userName={student.userName}
               onDelete={handleDelete}
             />
           ))}
+      </div>
     </ArticleBoard>
   );
 }

frontend/src/pages/LectureEnrollPage/LectureEnrollPage.module.css

@@ -0,0 +1,6 @@
+.title {
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 700;
+  padding-left: 20px;
+}