diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index b11b9d0..0b549ed 100644 --- a/frontend/src/App.jsx +++ b/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() { } /> } /> } /> - } /> + } /> } /> } /> diff --git a/frontend/src/api/api.js b/frontend/src/api/api.js index 2cd0305..7dc75ea 100644 --- a/frontend/src/api/api.js +++ b/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, }); diff --git a/frontend/src/api/students.js b/frontend/src/api/students.js new file mode 100644 index 0000000..eac3665 --- /dev/null +++ b/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: ... }] +}; diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx index 914c888..fe0403d 100644 --- a/frontend/src/components/Header.jsx +++ b/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 = "출석코드 생성"; diff --git a/frontend/src/pages/admin/Admin.jsx b/frontend/src/pages/admin/Admin.jsx index fa42daf..6b9e4e9 100644 --- a/frontend/src/pages/admin/Admin.jsx +++ b/frontend/src/pages/admin/Admin.jsx @@ -9,7 +9,7 @@ const Admin = () => {

PIROCHECK

diff --git a/frontend/src/pages/admin/ManageStudent.jsx b/frontend/src/pages/admin/ManageStudent.jsx index eef36a7..252175f 100644 --- a/frontend/src/pages/admin/ManageStudent.jsx +++ b/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 (
- +
+ +
+ {paginatedStudents.map((student, index) => ( + + ))} +
+ + {students.length > studentsPerPage && ( +
+ + + {page} / {totalPages} + + +
+ )} +
); }; -export default MagageStudent; +export default ManageStudent; diff --git a/frontend/src/pages/admin/ManageStudent.module.css b/frontend/src/pages/admin/ManageStudent.module.css index 5e87c6a..014c39f 100644 --- a/frontend/src/pages/admin/ManageStudent.module.css +++ b/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; +}