From 9ac4fbc29f916f0a9b3ed15507189ecb23e50b29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Thu, 8 Aug 2024 17:01:01 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A0=84=EC=B2=B4=20=EC=88=98=EA=B0=95?=
 =?UTF-8?q?=EC=83=9D=20=EA=B4=80=EB=A6=AC(Delete)=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LectureEnroll/LectureEnroll.jsx           | 16 ++++---
 .../LectureEnroll/LectureEnroll.module.css    |  4 ++
 .../LectureEnrollPage/LectureEnrollPage.jsx   | 44 ++++++++++++++-----
 .../LectureEnrollPage.module.css              |  6 +++
 4 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/pages/LectureEnrollPage/LectureEnrollPage.module.css

diff --git a/frontend/src/components/LectureEnroll/LectureEnroll.jsx b/frontend/src/components/LectureEnroll/LectureEnroll.jsx
index a961f7b..4642464 100644
--- a/frontend/src/components/LectureEnroll/LectureEnroll.jsx
+++ b/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}>
-        <button
-          onClick={handleAccept}
-          className={styles.accept}
-        >
-          등록
-        </button>
+        {!enrolled && (
+          <button
+            onClick={handleAccept}
+            className={styles.accept}
+          >
+            등록
+          </button>
+        )}
         <button
           onClick={handleCancel}
           className={styles.reject}
diff --git a/frontend/src/components/LectureEnroll/LectureEnroll.module.css b/frontend/src/components/LectureEnroll/LectureEnroll.module.css
index 07c5cbf..7a8aa20 100644
--- a/frontend/src/components/LectureEnroll/LectureEnroll.module.css
+++ b/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;
diff --git a/frontend/src/pages/LectureEnrollPage/LectureEnrollPage.jsx b/frontend/src/pages/LectureEnrollPage/LectureEnrollPage.jsx
index 0ebb69c..1b42488 100644
--- a/frontend/src/pages/LectureEnrollPage/LectureEnrollPage.jsx
+++ b/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}
-            onDelete={handleDelete}
+            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>
   );
 }
diff --git a/frontend/src/pages/LectureEnrollPage/LectureEnrollPage.module.css b/frontend/src/pages/LectureEnrollPage/LectureEnrollPage.module.css
new file mode 100644
index 0000000..0742727
--- /dev/null
+++ b/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;
+}