diff --git a/src/app/admin/certificates/page.tsx b/src/app/admin/certificates/page.tsx index 87a64db..1c0f92f 100644 --- a/src/app/admin/certificates/page.tsx +++ b/src/app/admin/certificates/page.tsx @@ -1,8 +1,22 @@ 'use client'; +import { useState, useMemo } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; +import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; export default function AdminCertificatesPage() { + // TODO: 나중에 실제 데이터로 교체 + const items: any[] = []; + const [currentPage, setCurrentPage] = useState(1); + + const ITEMS_PER_PAGE = 10; + const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE); + const paginatedItems = useMemo(() => { + const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; + const endIndex = startIndex + ITEMS_PER_PAGE; + return items.slice(startIndex, endIndex); + }, [items, currentPage]); + return (
{/* 메인 레이아웃 */} @@ -25,6 +39,101 @@ export default function AdminCertificatesPage() { {/* 콘텐츠 영역 */}
+ {items.length === 0 ? ( +
+

+ 현재 관리할 수 있는 항목이 없습니다. +

+
+ ) : ( + <> + {/* TODO: 테이블 또는 리스트를 여기에 추가 */} + + {/* 페이지네이션 - 10개 초과일 때만 표시 */} + {items.length > ITEMS_PER_PAGE && (() => { + // 페이지 번호를 10단위로 표시 + const pageGroup = Math.floor((currentPage - 1) / 10); + const startPage = pageGroup * 10 + 1; + const endPage = Math.min(startPage + 9, totalPages); + const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); + + return ( +
+
+ {/* First (맨 앞으로) */} + + + {/* Prev */} + + + {/* Numbers */} + {visiblePages.map((n) => { + const active = n === currentPage; + return ( + + ); + })} + + {/* Next */} + + + {/* Last (맨 뒤로) */} + +
+
+ ); + })()} + + )}
diff --git a/src/app/admin/courses/CourseRegistrationModal.tsx b/src/app/admin/courses/CourseRegistrationModal.tsx index cc0d765..917f1c7 100644 --- a/src/app/admin/courses/CourseRegistrationModal.tsx +++ b/src/app/admin/courses/CourseRegistrationModal.tsx @@ -3,17 +3,21 @@ import React, { useState, useRef, useEffect, useMemo } from "react"; import ModalCloseSvg from "@/app/svgs/closexsvg"; import DropdownIcon from "@/app/svgs/dropdownicon"; -import { getInstructors, type UserRow } from "@/app/admin/id/page"; +import { getInstructors, type UserRow } from "@/app/admin/id/mockData"; +import { type Course } from "./mockData"; type Props = { open: boolean; onClose: () => void; + onSave?: (courseName: string, instructorName: string) => void; + editingCourse?: Course | null; }; -export default function CourseRegistrationModal({ open, onClose }: Props) { +export default function CourseRegistrationModal({ open, onClose, onSave, editingCourse }: Props) { const [courseName, setCourseName] = useState(""); const [instructorId, setInstructorId] = useState(""); const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [errors, setErrors] = useState>({}); const dropdownRef = useRef(null); const modalRef = useRef(null); @@ -28,6 +32,23 @@ export default function CourseRegistrationModal({ open, onClose }: Props) { return instructors.find(inst => inst.id === instructorId); }, [instructors, instructorId]); + // 수정 모드일 때 기존 데이터 채우기 + useEffect(() => { + if (open && editingCourse) { + setCourseName(editingCourse.courseName); + // 강사명으로 instructorId 찾기 + const instructor = instructors.find(inst => inst.name === editingCourse.instructorName); + if (instructor) { + setInstructorId(instructor.id); + } + } else if (!open) { + setCourseName(""); + setInstructorId(""); + setIsDropdownOpen(false); + setErrors({}); + } + }, [open, editingCourse, instructors]); + // 외부 클릭 시 드롭다운 닫기 useEffect(() => { const handleClickOutside = (event: MouseEvent) => { @@ -53,6 +74,28 @@ export default function CourseRegistrationModal({ open, onClose }: Props) { e.stopPropagation(); }; + // 저장 버튼 클릭 핸들러 + const handleSave = () => { + const nextErrors: Record = {}; + + if (!courseName.trim()) { + nextErrors.courseName = "교육 과정명을 입력해 주세요."; + } + if (!instructorId || !selectedInstructor) { + nextErrors.instructor = "강사를 선택해 주세요."; + } + + setErrors(nextErrors); + + if (Object.keys(nextErrors).length > 0) { + return; + } + + if (onSave && selectedInstructor) { + onSave(courseName.trim(), selectedInstructor.name); + } + }; + if (!open) return null; return ( @@ -74,7 +117,7 @@ export default function CourseRegistrationModal({ open, onClose }: Props) { {/* Header */}

- 과목 등록 + {editingCourse ? "교육과정 수정" : "과목 등록"}

{/* 강사 */} @@ -112,7 +171,11 @@ export default function CourseRegistrationModal({ open, onClose }: Props) { + + {/* Prev */} + + + {/* Numbers */} + {visiblePages.map((n) => { + const active = n === currentPage; + return ( + + ); + })} + + {/* Next */} + + + {/* Last (맨 뒤로) */} + + + + ); + })()} @@ -60,7 +263,9 @@ export default function AdminCoursesPage() { setIsModalOpen(false)} + onClose={handleModalClose} + onSave={handleSaveCourse} + editingCourse={editingCourse} /> ); diff --git a/src/app/admin/id/mockData.ts b/src/app/admin/id/mockData.ts new file mode 100644 index 0000000..607aeb4 --- /dev/null +++ b/src/app/admin/id/mockData.ts @@ -0,0 +1,57 @@ +type RoleType = 'learner' | 'instructor' | 'admin'; +type AccountStatus = 'active' | 'inactive'; + +export type UserRow = { + id: string; + joinDate: string; + name: string; + email: string; + role: RoleType; + status: AccountStatus; +}; + +// 임시 데이터 +export const mockUsers: UserRow[] = [ + { id: "1", joinDate: "2024-01-15", name: "김민준", email: "user1@example.com", role: "learner", status: "active" }, + { id: "2", joinDate: "2024-01-20", name: "이서준", email: "user2@example.com", role: "learner", status: "active" }, + { id: "3", joinDate: "2024-02-05", name: "박도윤", email: "user3@example.com", role: "learner", status: "inactive" }, + { id: "4", joinDate: "2024-02-10", name: "최예준", email: "user4@example.com", role: "instructor", status: "active" }, + { id: "5", joinDate: "2024-02-15", name: "정시우", email: "user5@example.com", role: "instructor", status: "active" }, + { id: "6", joinDate: "2024-02-20", name: "강하준", email: "user6@example.com", role: "learner", status: "active" }, + { id: "7", joinDate: "2024-03-01", name: "조주원", email: "user7@example.com", role: "admin", status: "active" }, + { id: "8", joinDate: "2024-03-05", name: "윤지호", email: "user8@example.com", role: "learner", status: "active" }, + { id: "9", joinDate: "2024-03-10", name: "장준서", email: "user9@example.com", role: "learner", status: "inactive" }, + { id: "10", joinDate: "2024-03-15", name: "임건우", email: "user10@example.com", role: "instructor", status: "active" }, + { id: "11", joinDate: "2024-03-20", name: "한서연", email: "user11@example.com", role: "learner", status: "active" }, + { id: "12", joinDate: "2024-04-01", name: "오서윤", email: "user12@example.com", role: "learner", status: "active" }, + { id: "13", joinDate: "2024-04-05", name: "서지우", email: "user13@example.com", role: "instructor", status: "inactive" }, + { id: "14", joinDate: "2024-04-10", name: "신서현", email: "user14@example.com", role: "learner", status: "active" }, + { id: "15", joinDate: "2024-04-15", name: "권민서", email: "user15@example.com", role: "admin", status: "active" }, + { id: "16", joinDate: "2024-04-20", name: "황하은", email: "user16@example.com", role: "learner", status: "active" }, + { id: "17", joinDate: "2024-05-01", name: "안예은", email: "user17@example.com", role: "learner", status: "inactive" }, + { id: "18", joinDate: "2024-05-05", name: "송윤서", email: "user18@example.com", role: "instructor", status: "active" }, + { id: "19", joinDate: "2024-05-10", name: "전채원", email: "user19@example.com", role: "learner", status: "active" }, + { id: "20", joinDate: "2024-05-15", name: "홍지원", email: "user20@example.com", role: "learner", status: "active" }, + { id: "21", joinDate: "2024-05-20", name: "김민수", email: "user21@example.com", role: "instructor", status: "active" }, + { id: "22", joinDate: "2024-06-01", name: "이영희", email: "user22@example.com", role: "learner", status: "active" }, + { id: "23", joinDate: "2024-06-05", name: "박철수", email: "user23@example.com", role: "learner", status: "inactive" }, + { id: "24", joinDate: "2024-06-10", name: "최수진", email: "user24@example.com", role: "admin", status: "active" }, + { id: "25", joinDate: "2024-06-15", name: "정대현", email: "user25@example.com", role: "instructor", status: "active" }, + { id: "26", joinDate: "2024-06-20", name: "강미영", email: "user26@example.com", role: "learner", status: "active" }, + { id: "27", joinDate: "2024-07-01", name: "조성호", email: "user27@example.com", role: "learner", status: "active" }, + { id: "28", joinDate: "2024-07-05", name: "윤지은", email: "user28@example.com", role: "instructor", status: "inactive" }, + { id: "29", joinDate: "2024-07-10", name: "장현우", email: "user29@example.com", role: "learner", status: "active" }, + { id: "30", joinDate: "2024-07-15", name: "임소영", email: "user30@example.com", role: "learner", status: "active" }, +]; + +// 강사 목록 가져오기 함수 export +// TODO: 나중에 DB에서 가져오도록 변경 예정 +// 예: export async function getInstructors(): Promise { +// const response = await fetch('/api/instructors'); +// return response.json(); +// } +export function getInstructors(): UserRow[] { + // 현재는 mock 데이터 사용, 나중에 DB에서 가져오도록 변경 + return mockUsers.filter(user => user.role === 'instructor' && user.status === 'active'); +} + diff --git a/src/app/admin/id/page.tsx b/src/app/admin/id/page.tsx index 8a47af7..0f90742 100644 --- a/src/app/admin/id/page.tsx +++ b/src/app/admin/id/page.tsx @@ -4,70 +4,12 @@ import { useState, useEffect, useRef, useMemo } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; import DropdownIcon from "@/app/svgs/dropdownicon"; import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; +import { mockUsers, type UserRow } from "./mockData"; type TabType = 'all' | 'learner' | 'instructor' | 'admin'; type RoleType = 'learner' | 'instructor' | 'admin'; type AccountStatus = 'active' | 'inactive'; -export type UserRow = { - id: string; - joinDate: string; - name: string; - email: string; - role: RoleType; - status: AccountStatus; -}; - -// 랜덤 데이터 생성 함수 -function generateRandomUsers(count: number): UserRow[] { - const surnames = ['김', '이', '박', '최', '정', '강', '조', '윤', '장', '임', '한', '오', '서', '신', '권', '황', '안', '송', '전', '홍']; - const givenNames = ['민준', '서준', '도윤', '예준', '시우', '하준', '주원', '지호', '준서', '건우', '서연', '서윤', '지우', '서현', '민서', '하은', '예은', '윤서', '채원', '지원']; - const roles: RoleType[] = ['learner', 'instructor', 'admin']; - const statuses: AccountStatus[] = ['active', 'inactive']; - - const users: UserRow[] = []; - const startDate = new Date('2024-01-01'); - const endDate = new Date('2025-03-01'); - - for (let i = 1; i <= count; i++) { - const surname = surnames[Math.floor(Math.random() * surnames.length)]; - const givenName = givenNames[Math.floor(Math.random() * givenNames.length)]; - const name = `${surname}${givenName}`; - const email = `user${i}@example.com`; - - // 랜덤 날짜 생성 - const randomTime = startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()); - const randomDate = new Date(randomTime); - const joinDate = randomDate.toISOString().split('T')[0]; - - const role = roles[Math.floor(Math.random() * roles.length)]; - const status = statuses[Math.floor(Math.random() * statuses.length)]; - - users.push({ - id: String(i), - joinDate, - name, - email, - role, - status, - }); - } - - return users; -} - -const mockUsers: UserRow[] = generateRandomUsers(111); - -// 강사 목록 가져오기 함수 export -// TODO: 나중에 DB에서 가져오도록 변경 예정 -// 예: export async function getInstructors(): Promise { -// const response = await fetch('/api/instructors'); -// return response.json(); -// } -export function getInstructors(): UserRow[] { - // 현재는 mock 데이터 사용, 나중에 DB에서 가져오도록 변경 - return mockUsers.filter(user => user.role === 'instructor' && user.status === 'active'); -} const roleLabels: Record = { learner: '학습자', diff --git a/src/app/admin/lessons/page.tsx b/src/app/admin/lessons/page.tsx index 92a19e4..32b6878 100644 --- a/src/app/admin/lessons/page.tsx +++ b/src/app/admin/lessons/page.tsx @@ -1,8 +1,22 @@ 'use client'; +import { useState, useMemo } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; +import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; export default function AdminLessonsPage() { + // TODO: 나중에 실제 데이터로 교체 + const items: any[] = []; + const [currentPage, setCurrentPage] = useState(1); + + const ITEMS_PER_PAGE = 10; + const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE); + const paginatedItems = useMemo(() => { + const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; + const endIndex = startIndex + ITEMS_PER_PAGE; + return items.slice(startIndex, endIndex); + }, [items, currentPage]); + return (
{/* 메인 레이아웃 */} @@ -25,6 +39,101 @@ export default function AdminLessonsPage() { {/* 콘텐츠 영역 */}
+ {items.length === 0 ? ( +
+

+ 현재 관리할 수 있는 항목이 없습니다. +

+
+ ) : ( + <> + {/* TODO: 테이블 또는 리스트를 여기에 추가 */} + + {/* 페이지네이션 - 10개 초과일 때만 표시 */} + {items.length > ITEMS_PER_PAGE && (() => { + // 페이지 번호를 10단위로 표시 + const pageGroup = Math.floor((currentPage - 1) / 10); + const startPage = pageGroup * 10 + 1; + const endPage = Math.min(startPage + 9, totalPages); + const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); + + return ( +
+
+ {/* First (맨 앞으로) */} + + + {/* Prev */} + + + {/* Numbers */} + {visiblePages.map((n) => { + const active = n === currentPage; + return ( + + ); + })} + + {/* Next */} + + + {/* Last (맨 뒤로) */} + +
+
+ ); + })()} + + )}
diff --git a/src/app/admin/logs/page.tsx b/src/app/admin/logs/page.tsx index 2b11930..8949ede 100644 --- a/src/app/admin/logs/page.tsx +++ b/src/app/admin/logs/page.tsx @@ -1,8 +1,22 @@ 'use client'; +import { useState, useMemo } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; +import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; export default function AdminLogsPage() { + // TODO: 나중에 실제 데이터로 교체 + const items: any[] = []; + const [currentPage, setCurrentPage] = useState(1); + + const ITEMS_PER_PAGE = 10; + const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE); + const paginatedItems = useMemo(() => { + const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; + const endIndex = startIndex + ITEMS_PER_PAGE; + return items.slice(startIndex, endIndex); + }, [items, currentPage]); + return (
{/* 메인 레이아웃 */} @@ -25,6 +39,101 @@ export default function AdminLogsPage() { {/* 콘텐츠 영역 */}
+ {items.length === 0 ? ( +
+

+ 현재 관리할 수 있는 항목이 없습니다. +

+
+ ) : ( + <> + {/* TODO: 테이블 또는 리스트를 여기에 추가 */} + + {/* 페이지네이션 - 10개 초과일 때만 표시 */} + {items.length > ITEMS_PER_PAGE && (() => { + // 페이지 번호를 10단위로 표시 + const pageGroup = Math.floor((currentPage - 1) / 10); + const startPage = pageGroup * 10 + 1; + const endPage = Math.min(startPage + 9, totalPages); + const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); + + return ( +
+
+ {/* First (맨 앞으로) */} + + + {/* Prev */} + + + {/* Numbers */} + {visiblePages.map((n) => { + const active = n === currentPage; + return ( + + ); + })} + + {/* Next */} + + + {/* Last (맨 뒤로) */} + +
+
+ ); + })()} + + )}
diff --git a/src/app/admin/notices/page.tsx b/src/app/admin/notices/page.tsx index 0b02d74..da79fe3 100644 --- a/src/app/admin/notices/page.tsx +++ b/src/app/admin/notices/page.tsx @@ -1,8 +1,22 @@ 'use client'; +import { useState, useMemo } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; +import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; export default function AdminNoticesPage() { + // TODO: 나중에 실제 데이터로 교체 + const items: any[] = []; + const [currentPage, setCurrentPage] = useState(1); + + const ITEMS_PER_PAGE = 10; + const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE); + const paginatedItems = useMemo(() => { + const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; + const endIndex = startIndex + ITEMS_PER_PAGE; + return items.slice(startIndex, endIndex); + }, [items, currentPage]); + return (
{/* 메인 레이아웃 */} @@ -25,6 +39,101 @@ export default function AdminNoticesPage() { {/* 콘텐츠 영역 */}
+ {items.length === 0 ? ( +
+

+ 현재 관리할 수 있는 항목이 없습니다. +

+
+ ) : ( + <> + {/* TODO: 테이블 또는 리스트를 여기에 추가 */} + + {/* 페이지네이션 - 10개 초과일 때만 표시 */} + {items.length > ITEMS_PER_PAGE && (() => { + // 페이지 번호를 10단위로 표시 + const pageGroup = Math.floor((currentPage - 1) / 10); + const startPage = pageGroup * 10 + 1; + const endPage = Math.min(startPage + 9, totalPages); + const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); + + return ( +
+
+ {/* First (맨 앞으로) */} + + + {/* Prev */} + + + {/* Numbers */} + {visiblePages.map((n) => { + const active = n === currentPage; + return ( + + ); + })} + + {/* Next */} + + + {/* Last (맨 뒤로) */} + +
+
+ ); + })()} + + )}
diff --git a/src/app/admin/questions/page.tsx b/src/app/admin/questions/page.tsx index 3dd1785..74238f2 100644 --- a/src/app/admin/questions/page.tsx +++ b/src/app/admin/questions/page.tsx @@ -1,8 +1,22 @@ 'use client'; +import { useState, useMemo } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; +import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; export default function AdminQuestionsPage() { + // TODO: 나중에 실제 데이터로 교체 + const items: any[] = []; + const [currentPage, setCurrentPage] = useState(1); + + const ITEMS_PER_PAGE = 10; + const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE); + const paginatedItems = useMemo(() => { + const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; + const endIndex = startIndex + ITEMS_PER_PAGE; + return items.slice(startIndex, endIndex); + }, [items, currentPage]); + return (
{/* 메인 레이아웃 */} @@ -25,6 +39,101 @@ export default function AdminQuestionsPage() { {/* 콘텐츠 영역 */}
+ {items.length === 0 ? ( +
+

+ 현재 관리할 수 있는 항목이 없습니다. +

+
+ ) : ( + <> + {/* TODO: 테이블 또는 리스트를 여기에 추가 */} + + {/* 페이지네이션 - 10개 초과일 때만 표시 */} + {items.length > ITEMS_PER_PAGE && (() => { + // 페이지 번호를 10단위로 표시 + const pageGroup = Math.floor((currentPage - 1) / 10); + const startPage = pageGroup * 10 + 1; + const endPage = Math.min(startPage + 9, totalPages); + const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); + + return ( +
+
+ {/* First (맨 앞으로) */} + + + {/* Prev */} + + + {/* Numbers */} + {visiblePages.map((n) => { + const active = n === currentPage; + return ( + + ); + })} + + {/* Next */} + + + {/* Last (맨 뒤로) */} + +
+
+ ); + })()} + + )}
diff --git a/src/app/admin/resources/page.tsx b/src/app/admin/resources/page.tsx index f0a0b85..a0828e5 100644 --- a/src/app/admin/resources/page.tsx +++ b/src/app/admin/resources/page.tsx @@ -1,8 +1,22 @@ 'use client'; +import { useState, useMemo } from "react"; import AdminSidebar from "@/app/components/AdminSidebar"; +import ChevronDownSvg from "@/app/svgs/chevrondownsvg"; export default function AdminResourcesPage() { + // TODO: 나중에 실제 데이터로 교체 + const items: any[] = []; + const [currentPage, setCurrentPage] = useState(1); + + const ITEMS_PER_PAGE = 10; + const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE); + const paginatedItems = useMemo(() => { + const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; + const endIndex = startIndex + ITEMS_PER_PAGE; + return items.slice(startIndex, endIndex); + }, [items, currentPage]); + return (
{/* 메인 레이아웃 */} @@ -25,6 +39,101 @@ export default function AdminResourcesPage() { {/* 콘텐츠 영역 */}
+ {items.length === 0 ? ( +
+

+ 현재 관리할 수 있는 항목이 없습니다. +

+
+ ) : ( + <> + {/* TODO: 테이블 또는 리스트를 여기에 추가 */} + + {/* 페이지네이션 - 10개 초과일 때만 표시 */} + {items.length > ITEMS_PER_PAGE && (() => { + // 페이지 번호를 10단위로 표시 + const pageGroup = Math.floor((currentPage - 1) / 10); + const startPage = pageGroup * 10 + 1; + const endPage = Math.min(startPage + 9, totalPages); + const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); + + return ( +
+
+ {/* First (맨 앞으로) */} + + + {/* Prev */} + + + {/* Numbers */} + {visiblePages.map((n) => { + const active = n === currentPage; + return ( + + ); + })} + + {/* Next */} + + + {/* Last (맨 뒤로) */} + +
+
+ ); + })()} + + )}