[fix]: 서버로부터 수강생 정보 불러오는 api 호출 적용

frontend/src/App.jsx

@@ -6,7 +6,7 @@ import Assignment from "./pages/generation/Assignment";
 import Deposit from "./pages/generation/Deposit";
 import Intro from "./Intro";
 import Admin from "./pages/admin/Admin";
-import MagageStudent from "./pages/admin/ManageStudent.jsx";
+import ManageStudent from "./pages/admin/ManageStudent.jsx";
 import ManageTask from "./pages/admin/ManageTask.jsx";
 import AttendanceCode from "./pages/admin/AttendanceCode";
 import Attendance from "./pages/generation/Attendance";
@@ -22,7 +22,7 @@ function App() {
         <Route path="/attendance" element={<Attendance />} />
         <Route path="/deposit" element={<Deposit />} />
         <Route path="/admin" element={<Admin />} />
-        <Route path="/magagestudent" element={<MagageStudent />} />
+        <Route path="/managestudent" element={<ManageStudent />} />
         <Route path="/magagetask" element={<ManageTask />} />
         <Route path="/attendancecode" element={<AttendanceCode />} />
       </Routes>

frontend/src/api/api.js

@@ -1,7 +1,10 @@
 import axios from "axios";
 
 const api = axios.create({
-  baseURL: "http://api.:8080/api",
+  baseURL: "http://api.pirocheck.org:8080/api",
+  // 수정 필요한지 재검 필요함
+  // "http://api.pirocheck.org:8080/api"
+  // 기존: "http://api.:8080/api"
   withCredentials: true,
 });
 

frontend/src/api/students.js

@@ -0,0 +1,8 @@
+import api from "./api";
+
+export const getStudentsByName = async (name) => {
+  const res = await api.get("/admin/managestudent", {
+    params: { name },
+  });
+  return res.data; // [{ id: ..., name: ... }]
+};

frontend/src/components/Header.jsx

@@ -10,7 +10,7 @@ const Header = () => {
   if (path.includes("assignment")) title = "ASSIGNMENT\nCHECK";
   else if (path.includes("deposit")) title = "DEPOSIT";
   else if (path.includes("attendance")) title = "ATTENDANCE\nCHECK";
-  else if (path.includes("magagestudent")) title = "수강생 관리";
+  else if (path.includes("managestudent")) title = "수강생 관리";
   else if (path.includes("magagetask")) title = "과제 관리";
   else if (path.includes("attendancecode")) title = "출석코드 생성";
 

frontend/src/pages/admin/Admin.jsx

@@ -9,7 +9,7 @@ const Admin = () => {
         <h1 className={styles.pirocheck}>PIROCHECK</h1>
         <button
           className={styles.button}
-          onClick={() => navigate("/magagestudent")}
+          onClick={() => navigate("/managestudent")}
         >
           <p>수강생 관리</p>
         </button>

frontend/src/pages/admin/ManageStudent.jsx

@@ -1,31 +1,86 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { getStudentsByName } from "../../api/students";
 import Header from "../../components/Header";
 import InputBlock from "../../components/InputBlock";
 import style from "./ManageStudent.module.css";
 
-const MagageStudent = () => {
+const ManageStudent = () => {
   const [studentName, setStudentName] = useState([""]);
+  const [page, setPage] = useState(1);
+  const [students, setStudents] = useState([]); // 서버 데이터 저장
+
+  const studentsPerPage = 6;
+
+  useEffect(() => {
+    const fetchStudents = async () => {
+      try {
+        const name = studentName[0] || "";
+        const data = await getStudentsByName(name);
+        setStudents(data);
+      } catch (err) {
+        console.error("수강생 불러오기 실패:", err);
+      }
+    };
+
+    fetchStudents();
+  }, [studentName]);
 
   const handleChange = (index, value) => {
-    const studentNames = [...studentName];
-    studentNames[index] = value;
-    setStudentName(studentNames);
+    const newNames = [...studentName];
+    newNames[index] = value;
+    setStudentName(newNames);
+    setPage(1); // 검색 시 페이지 초기화
   };
 
+  const totalPages = Math.ceil(students.length / studentsPerPage);
+  const paginatedStudents = students.slice(
+    (page - 1) * studentsPerPage,
+    page * studentsPerPage
+  );
+
   return (
     <div className={style.managestudent_wrapper}>
       <Header />
-      <InputBlock
-        inputs={[
-          {
-            type: "text",
-            placeholder: "수강생을 검색하세요",
-          },
-        ]}
-        values={studentName}
-        onChange={handleChange}
-      />
+      <div className={style.under_header}>
+        <InputBlock
+          inputs={[
+            {
+              type: "text",
+              placeholder: "수강생을 검색하세요",
+            },
+          ]}
+          values={studentName}
+          onChange={handleChange}
+        />
+        <div className={style.student_list}>
+          {paginatedStudents.map((student, index) => (
+            <button key={student.id || index} className={style.student_button}>
+              {student.name} <span>&gt;</span>
+            </button>
+          ))}
+        </div>
+
+        {students.length > studentsPerPage && (
+          <div className={style.pagination}>
+            <button
+              onClick={() => setPage((p) => Math.max(p - 1, 1))}
+              disabled={page === 1}
+            >
+              ◀ 이전
+            </button>
+            <span>
+              {page} / {totalPages}
+            </span>
+            <button
+              onClick={() => setPage((p) => Math.min(p + 1, totalPages))}
+              disabled={page === totalPages}
+            >
+              다음 ▶
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
-export default MagageStudent;
+export default ManageStudent;

frontend/src/pages/admin/ManageStudent.module.css

@@ -4,3 +4,44 @@
   flex-direction: column;
   align-items: center;
 }
+.student_list {
+  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+.under_header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.student_button {
+  background-color: #333;
+  color: white;
+  padding: 15px;
+  border-radius: 8px;
+  border: 1px solid #39ff14;
+  text-align: left;
+  font-size: 16px;
+  width: 100%;
+}
+.pagination {
+  margin-top: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+.pagination button {
+  background-color: #111;
+  color: #39ff14;
+  padding: 8px 12px;
+  border: 1px solid #39ff14;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}