348 lines
16 KiB
TypeScript
348 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo, useEffect, useRef } from "react";
|
|
import AdminSidebar from "@/app/components/AdminSidebar";
|
|
import CourseRegistrationModal from "./CourseRegistrationModal";
|
|
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
|
|
import { getCourses, type Course } from "./mockData";
|
|
|
|
// 날짜를 yyyy-mm-dd 형식으로 변환하는 함수
|
|
const formatDate = (dateString: string): string => {
|
|
if (!dateString) return '';
|
|
try {
|
|
const date = new Date(dateString);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
} catch {
|
|
// 이미 yyyy-mm-dd 형식이거나 파싱 실패 시 원본 반환
|
|
if (dateString.includes('T')) {
|
|
return dateString.split('T')[0];
|
|
}
|
|
return dateString;
|
|
}
|
|
};
|
|
|
|
export default function AdminCoursesPage() {
|
|
const [courses, setCourses] = useState<Course[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingCourse, setEditingCourse] = useState<Course | null>(null);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [showToast, setShowToast] = useState(false);
|
|
const prevModalOpenRef = useRef(false);
|
|
const shouldRefreshRef = useRef(false);
|
|
|
|
// API에서 과목 리스트 가져오기
|
|
useEffect(() => {
|
|
async function fetchCourses() {
|
|
try {
|
|
setIsLoading(true);
|
|
const data = await getCourses();
|
|
console.log('📋 [AdminCoursesPage] 받은 데이터:', data);
|
|
console.log('📋 [AdminCoursesPage] 데이터 개수:', data.length);
|
|
setCourses(data);
|
|
} catch (error) {
|
|
console.error('과목 리스트 로드 오류:', error);
|
|
setCourses([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchCourses();
|
|
}, []);
|
|
|
|
const totalCount = useMemo(() => courses.length, [courses]);
|
|
|
|
const ITEMS_PER_PAGE = 10;
|
|
const sortedCourses = useMemo(() => {
|
|
return [...courses].sort((a, b) => {
|
|
// 생성일 내림차순 정렬 (최신 날짜가 먼저)
|
|
return b.createdAt.localeCompare(a.createdAt);
|
|
});
|
|
}, [courses]);
|
|
|
|
const totalPages = Math.ceil(sortedCourses.length / ITEMS_PER_PAGE);
|
|
const paginatedCourses = useMemo(() => {
|
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
|
const endIndex = startIndex + ITEMS_PER_PAGE;
|
|
return sortedCourses.slice(startIndex, endIndex);
|
|
}, [sortedCourses, currentPage]);
|
|
|
|
const handleSaveCourse = async (courseName: string, instructorName: string) => {
|
|
shouldRefreshRef.current = true; // 새로고침 플래그 설정
|
|
setIsModalOpen(false);
|
|
setEditingCourse(null);
|
|
};
|
|
|
|
const handleRowClick = (course: Course) => {
|
|
setEditingCourse(course);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleModalClose = () => {
|
|
setIsModalOpen(false);
|
|
setEditingCourse(null);
|
|
};
|
|
|
|
const handleRegisterClick = () => {
|
|
setEditingCourse(null);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleDeleteCourse = async () => {
|
|
shouldRefreshRef.current = true; // 새로고침 플래그 설정
|
|
setEditingCourse(null);
|
|
setShowToast(true);
|
|
setTimeout(() => {
|
|
setShowToast(false);
|
|
}, 3000);
|
|
};
|
|
|
|
// 모달이 닫힌 후 리스트 새로고침
|
|
useEffect(() => {
|
|
// 모달이 열렸다가 닫힐 때, 그리고 새로고침 플래그가 설정되어 있을 때만 새로고침
|
|
if (prevModalOpenRef.current && !isModalOpen && shouldRefreshRef.current) {
|
|
shouldRefreshRef.current = false; // 플래그 리셋
|
|
|
|
async function refreshList() {
|
|
try {
|
|
setIsLoading(true);
|
|
const data = await getCourses();
|
|
console.log('📋 [AdminCoursesPage] 새로고침된 데이터:', data);
|
|
console.log('📋 [AdminCoursesPage] 새로고침된 데이터 개수:', data.length);
|
|
setCourses(data);
|
|
} catch (error) {
|
|
console.error('과목 리스트 새로고침 오류:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
refreshList();
|
|
}
|
|
prevModalOpenRef.current = isModalOpen;
|
|
}, [isModalOpen]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-white">
|
|
{/* 메인 레이아웃 */}
|
|
<div className="flex flex-1 min-h-0 justify-center">
|
|
<div className="w-[1440px] flex min-h-0">
|
|
{/* 사이드바 */}
|
|
<div className="flex">
|
|
<AdminSidebar />
|
|
</div>
|
|
{/* 메인 콘텐츠 */}
|
|
<main className="w-[1120px] bg-white">
|
|
<div className="h-full flex flex-col px-8">
|
|
{/* 제목 영역 */}
|
|
<div className="h-[100px] flex items-center">
|
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
교육과정 관리
|
|
</h1>
|
|
</div>
|
|
|
|
{/* 헤더 영역 (제목과 콘텐츠 사이) */}
|
|
<div className="pt-2 pb-4 flex items-center justify-between">
|
|
<p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
|
|
총 {totalCount}건
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={handleRegisterClick}
|
|
className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
|
|
>
|
|
등록하기
|
|
</button>
|
|
</div>
|
|
|
|
{/* 콘텐츠 영역 */}
|
|
<div className="flex-1 pt-2 flex flex-col">
|
|
{isLoading ? (
|
|
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
|
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47] text-center">
|
|
로딩 중...
|
|
</p>
|
|
</div>
|
|
) : courses.length === 0 ? (
|
|
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
|
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47] text-center">
|
|
등록된 교육과정이 없습니다.
|
|
<br />
|
|
과목을 등록해주세요.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-[8px]">
|
|
<div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
|
|
<table className="min-w-full border-collapse">
|
|
<colgroup>
|
|
<col style={{ width: '40%' }} />
|
|
<col style={{ width: '25%' }} />
|
|
<col style={{ width: '20%' }} />
|
|
<col style={{ width: '15%' }} />
|
|
</colgroup>
|
|
<thead>
|
|
<tr className="h-12 bg-gray-50 text-left">
|
|
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">교육과정명</th>
|
|
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강사명</th>
|
|
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">생성일</th>
|
|
<th className="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌포함여부</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{paginatedCourses.map((course) => (
|
|
<tr
|
|
key={course.id}
|
|
className="h-12 cursor-pointer hover:bg-[#F5F7FF] transition-colors"
|
|
onClick={() => handleRowClick(course)}
|
|
>
|
|
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
|
{course.courseName}
|
|
</td>
|
|
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
|
{course.instructorName}
|
|
</td>
|
|
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
|
{formatDate(course.createdAt)}
|
|
</td>
|
|
<td className="border-t border-[#dee1e6] px-4 text-left text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
|
{course.hasLessons ? (
|
|
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]">
|
|
<span className="text-[13px] font-semibold leading-[1.4] text-[#384fbf] whitespace-nowrap">
|
|
포함
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#f1f3f5]">
|
|
<span className="text-[13px] font-semibold leading-[1.4] text-[#4c5561] whitespace-nowrap">
|
|
미포함
|
|
</span>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 페이지네이션 - 10개 초과일 때만 표시 */}
|
|
{courses.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 (
|
|
<div className="pt-8 pb-[32px] flex items-center justify-center">
|
|
<div className="flex items-center justify-center gap-[8px]">
|
|
{/* First (맨 앞으로) */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setCurrentPage(1)}
|
|
aria-label="맨 앞 페이지"
|
|
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
|
|
disabled={currentPage === 1}
|
|
>
|
|
<div className="relative flex items-center justify-center w-full h-full">
|
|
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute left-[2px]" />
|
|
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute right-[2px]" />
|
|
</div>
|
|
</button>
|
|
|
|
{/* Prev */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
|
aria-label="이전 페이지"
|
|
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
|
|
disabled={currentPage === 1}
|
|
>
|
|
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
|
|
</button>
|
|
|
|
{/* Numbers */}
|
|
{visiblePages.map((n) => {
|
|
const active = n === currentPage;
|
|
return (
|
|
<button
|
|
key={n}
|
|
type="button"
|
|
onClick={() => setCurrentPage(n)}
|
|
aria-current={active ? 'page' : undefined}
|
|
className={[
|
|
'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
|
|
active ? 'bg-[#ecf0ff]' : 'bg-white',
|
|
].join(' ')}
|
|
>
|
|
<span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
{/* Next */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
|
aria-label="다음 페이지"
|
|
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
|
|
</button>
|
|
|
|
{/* Last (맨 뒤로) */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setCurrentPage(totalPages)}
|
|
aria-label="맨 뒤 페이지"
|
|
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
<div className="relative flex items-center justify-center w-full h-full">
|
|
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute left-[2px]" />
|
|
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute right-[2px]" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<CourseRegistrationModal
|
|
open={isModalOpen}
|
|
onClose={handleModalClose}
|
|
onSave={handleSaveCourse}
|
|
onDelete={handleDeleteCourse}
|
|
editingCourse={editingCourse}
|
|
/>
|
|
|
|
{/* 삭제 완료 토스트 */}
|
|
{showToast && (
|
|
<div className="fixed right-[60px] bottom-[60px] z-50">
|
|
<div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
|
|
<div className="relative shrink-0 w-[16.667px] h-[16.667px]">
|
|
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
|
|
<path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
|
|
교육과정을 삭제했습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |