750 lines
30 KiB
TypeScript
750 lines
30 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState, useMemo } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import ChevronDownSvg from '../../svgs/chevrondownsvg';
|
|
|
|
// 드롭다운 아이콘 컴포넌트
|
|
function ArrowDownIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
>
|
|
<path
|
|
d="M4 6L8 10L12 6"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// 검색 아이콘 컴포넌트
|
|
function SearchIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
>
|
|
<path
|
|
d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M19 19L14.65 14.65"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// 태그 컴포넌트
|
|
function StatusTag({ text, type = 'default', color = 'primary' }: { text: string; type?: 'default' | 'emphasis'; color?: 'primary' | 'gray' }) {
|
|
if (type === 'default' && color === 'primary') {
|
|
return (
|
|
<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">
|
|
{text}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
if (type === 'default' && color === 'gray') {
|
|
return (
|
|
<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">
|
|
{text}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<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">
|
|
{text}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type LearnerProgress = {
|
|
id: string;
|
|
courseName: string;
|
|
lessonName: string;
|
|
learnerName: string;
|
|
enrollmentDate: string;
|
|
lastStudyDate: string;
|
|
progressRate: number;
|
|
hasSubmitted: boolean;
|
|
score: number | null;
|
|
isCompleted: boolean;
|
|
};
|
|
|
|
export default function InstructorCoursesPage() {
|
|
const router = useRouter();
|
|
const [userRole, setUserRole] = useState<string>('');
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
// 필터 상태
|
|
const [selectedCourse, setSelectedCourse] = useState<string>('all');
|
|
const [selectedSubmissionStatus, setSelectedSubmissionStatus] = useState<string>('all');
|
|
const [selectedCompletionStatus, setSelectedCompletionStatus] = useState<string>('all');
|
|
const [searchQuery, setSearchQuery] = useState<string>('');
|
|
|
|
// 드롭다운 열림 상태
|
|
const [isCourseDropdownOpen, setIsCourseDropdownOpen] = useState(false);
|
|
const [isSubmissionDropdownOpen, setIsSubmissionDropdownOpen] = useState(false);
|
|
const [isCompletionDropdownOpen, setIsCompletionDropdownOpen] = useState(false);
|
|
|
|
// 데이터
|
|
const [courses, setCourses] = useState<{ id: string; name: string }[]>([]);
|
|
const [learnerProgress, setLearnerProgress] = useState<LearnerProgress[]>([]);
|
|
|
|
const ITEMS_PER_PAGE = 10;
|
|
|
|
// 사용자 정보 및 권한 확인
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
async function fetchUserInfo() {
|
|
try {
|
|
const localStorageToken = localStorage.getItem('token');
|
|
const cookieToken = document.cookie
|
|
.split('; ')
|
|
.find(row => row.startsWith('token='))
|
|
?.split('=')[1];
|
|
|
|
const token = localStorageToken || cookieToken;
|
|
|
|
if (!token) {
|
|
router.push('/login');
|
|
return;
|
|
}
|
|
|
|
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL
|
|
? `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/me`
|
|
: 'https://hrdi.coconutmeet.net/auth/me';
|
|
|
|
const response = await fetch(apiUrl, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
if (response.status === 401) {
|
|
localStorage.removeItem('token');
|
|
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
if (isMounted) {
|
|
router.push('/login');
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (isMounted) {
|
|
const role = data.role || data.userRole || '';
|
|
setUserRole(role);
|
|
|
|
// admin이 아니면 접근 불가
|
|
if (role !== 'ADMIN' && role !== 'admin') {
|
|
router.push('/');
|
|
return;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('사용자 정보 조회 오류:', error);
|
|
if (isMounted) {
|
|
router.push('/login');
|
|
}
|
|
}
|
|
}
|
|
|
|
fetchUserInfo();
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, [router]);
|
|
|
|
// 교육 과정 목록 가져오기
|
|
useEffect(() => {
|
|
async function fetchCourses() {
|
|
try {
|
|
const token = localStorage.getItem('token') || document.cookie
|
|
.split('; ')
|
|
.find(row => row.startsWith('token='))
|
|
?.split('=')[1];
|
|
|
|
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL
|
|
? `${process.env.NEXT_PUBLIC_API_BASE_URL}/subjects`
|
|
: 'https://hrdi.coconutmeet.net/subjects';
|
|
|
|
const response = await fetch(apiUrl, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...(token && { Authorization: `Bearer ${token}` }),
|
|
},
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const coursesArray = Array.isArray(data) ? data : (data.items || data.courses || data.data || []);
|
|
setCourses(coursesArray.map((item: any) => ({
|
|
id: String(item.id || item.subjectId || ''),
|
|
name: item.courseName || item.name || item.subjectName || '',
|
|
})));
|
|
}
|
|
} catch (error) {
|
|
console.error('교육 과정 목록 조회 오류:', error);
|
|
}
|
|
}
|
|
|
|
fetchCourses();
|
|
}, []);
|
|
|
|
// 학습자 진행 상황 데이터 (더미 데이터 - 실제 API로 교체 필요)
|
|
useEffect(() => {
|
|
async function fetchLearnerProgress() {
|
|
try {
|
|
setIsLoading(true);
|
|
// TODO: 실제 API 호출로 교체
|
|
// 현재는 더미 데이터 사용
|
|
const dummyData: LearnerProgress[] = [
|
|
{
|
|
id: '1',
|
|
courseName: '방사선 관리',
|
|
lessonName: '{강좌명}',
|
|
learnerName: '김하늘',
|
|
enrollmentDate: '2025-09-10',
|
|
lastStudyDate: '2025-09-10',
|
|
progressRate: 100,
|
|
hasSubmitted: true,
|
|
score: 100,
|
|
isCompleted: true,
|
|
},
|
|
{
|
|
id: '2',
|
|
courseName: '방사선 관리',
|
|
lessonName: '{강좌명}',
|
|
learnerName: '김하늘',
|
|
enrollmentDate: '2025-09-10',
|
|
lastStudyDate: '2025-09-10',
|
|
progressRate: 100,
|
|
hasSubmitted: true,
|
|
score: 100,
|
|
isCompleted: true,
|
|
},
|
|
{
|
|
id: '3',
|
|
courseName: '방사선 관리',
|
|
lessonName: '{강좌명}',
|
|
learnerName: '김하늘',
|
|
enrollmentDate: '2025-09-10',
|
|
lastStudyDate: '2025-09-10',
|
|
progressRate: 100,
|
|
hasSubmitted: true,
|
|
score: 100,
|
|
isCompleted: true,
|
|
},
|
|
{
|
|
id: '4',
|
|
courseName: '원자로 운전 및 계통',
|
|
lessonName: '6. 원자로 시동, 운전 및 정지 절차',
|
|
learnerName: '김하늘',
|
|
enrollmentDate: '2025-09-10',
|
|
lastStudyDate: '2025-09-10',
|
|
progressRate: 100,
|
|
hasSubmitted: true,
|
|
score: 60,
|
|
isCompleted: true,
|
|
},
|
|
{
|
|
id: '5',
|
|
courseName: '방사선 관리',
|
|
lessonName: '{강좌명}',
|
|
learnerName: '김하늘',
|
|
enrollmentDate: '2025-09-10',
|
|
lastStudyDate: '2025-09-10',
|
|
progressRate: 100,
|
|
hasSubmitted: true,
|
|
score: 30,
|
|
isCompleted: false,
|
|
},
|
|
{
|
|
id: '6',
|
|
courseName: '방사선 관리',
|
|
lessonName: '{강좌명}',
|
|
learnerName: '김하늘',
|
|
enrollmentDate: '2025-09-10',
|
|
lastStudyDate: '2025-09-10',
|
|
progressRate: 100,
|
|
hasSubmitted: true,
|
|
score: 30,
|
|
isCompleted: false,
|
|
},
|
|
{
|
|
id: '7',
|
|
courseName: '방사선 관리',
|
|
lessonName: '{강좌명}',
|
|
learnerName: '김하늘',
|
|
enrollmentDate: '2025-09-10',
|
|
lastStudyDate: '2025-09-10',
|
|
progressRate: 100,
|
|
hasSubmitted: false,
|
|
score: null,
|
|
isCompleted: false,
|
|
},
|
|
];
|
|
setLearnerProgress(dummyData);
|
|
} catch (error) {
|
|
console.error('학습자 진행 상황 조회 오류:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchLearnerProgress();
|
|
}, []);
|
|
|
|
// 필터링된 데이터
|
|
const filteredData = useMemo(() => {
|
|
return learnerProgress.filter((item) => {
|
|
// 교육 과정 필터
|
|
if (selectedCourse !== 'all' && item.courseName !== selectedCourse) {
|
|
return false;
|
|
}
|
|
|
|
// 문제 제출 여부 필터
|
|
if (selectedSubmissionStatus === 'submitted' && !item.hasSubmitted) {
|
|
return false;
|
|
}
|
|
if (selectedSubmissionStatus === 'not-submitted' && item.hasSubmitted) {
|
|
return false;
|
|
}
|
|
|
|
// 수료 여부 필터
|
|
if (selectedCompletionStatus === 'completed' && !item.isCompleted) {
|
|
return false;
|
|
}
|
|
if (selectedCompletionStatus === 'not-completed' && item.isCompleted) {
|
|
return false;
|
|
}
|
|
|
|
// 검색어 필터
|
|
if (searchQuery && !item.learnerName.toLowerCase().includes(searchQuery.toLowerCase())) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
}, [learnerProgress, selectedCourse, selectedSubmissionStatus, selectedCompletionStatus, searchQuery]);
|
|
|
|
// 페이지네이션
|
|
const totalPages = Math.ceil(filteredData.length / ITEMS_PER_PAGE);
|
|
const paginatedData = useMemo(() => {
|
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
|
const endIndex = startIndex + ITEMS_PER_PAGE;
|
|
return filteredData.slice(startIndex, endIndex);
|
|
}, [filteredData, currentPage]);
|
|
|
|
// 드롭다운 외부 클릭 감지
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
const target = event.target as HTMLElement;
|
|
if (!target.closest('.dropdown-container')) {
|
|
setIsCourseDropdownOpen(false);
|
|
setIsSubmissionDropdownOpen(false);
|
|
setIsCompletionDropdownOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-white min-h-screen flex flex-col">
|
|
<div className="flex-1 max-w-[1440px] w-full mx-auto px-0">
|
|
<div className="flex flex-col gap-[10px] h-[100px] items-start px-[32px]">
|
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
강좌 현황
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-[16px] px-[32px] py-[32px]">
|
|
{/* 필터 및 검색 영역 */}
|
|
<div className="flex items-end justify-between gap-[16px]">
|
|
<div className="flex gap-[8px] items-end">
|
|
{/* 교육 과정 드롭다운 */}
|
|
<div className="flex flex-col gap-[4px] relative dropdown-container">
|
|
<label className="text-[14px] font-semibold leading-[1.5] text-[#6c7682]">
|
|
교육 과정
|
|
</label>
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsCourseDropdownOpen(!isCourseDropdownOpen);
|
|
setIsSubmissionDropdownOpen(false);
|
|
setIsCompletionDropdownOpen(false);
|
|
}}
|
|
className="bg-white border border-[#dee1e6] rounded-[8px] h-[40px] px-[12px] py-[6px] flex items-center justify-between gap-[8px] w-[400px]"
|
|
>
|
|
<span className="text-[15px] font-normal leading-[1.5] text-[#6c7682] flex-1 text-left">
|
|
{selectedCourse === 'all' ? '선택 안함' : courses.find(c => c.id === selectedCourse)?.name || '선택 안함'}
|
|
</span>
|
|
<ArrowDownIcon className="size-[16px] text-[#6c7682] shrink-0" />
|
|
</button>
|
|
{isCourseDropdownOpen && (
|
|
<div className="absolute top-full left-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-50 w-[400px] max-h-[200px] overflow-y-auto">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedCourse('all');
|
|
setIsCourseDropdownOpen(false);
|
|
}}
|
|
className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
|
|
>
|
|
선택 안함
|
|
</button>
|
|
{courses.map((course) => (
|
|
<button
|
|
key={course.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedCourse(course.name);
|
|
setIsCourseDropdownOpen(false);
|
|
}}
|
|
className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
|
|
>
|
|
{course.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 문제 제출 여부 드롭다운 */}
|
|
<div className="flex flex-col gap-[4px] relative dropdown-container">
|
|
<label className="text-[14px] font-semibold leading-[1.5] text-[#6c7682]">
|
|
문제 제출 여부
|
|
</label>
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsSubmissionDropdownOpen(!isSubmissionDropdownOpen);
|
|
setIsCourseDropdownOpen(false);
|
|
setIsCompletionDropdownOpen(false);
|
|
}}
|
|
className="bg-white border border-[#dee1e6] rounded-[8px] h-[40px] px-[12px] py-[6px] flex items-center justify-between gap-[8px] w-[190px]"
|
|
>
|
|
<span className="text-[15px] font-normal leading-[1.5] text-[#6c7682] flex-1 text-left">
|
|
{selectedSubmissionStatus === 'all' ? '모든 상태' : selectedSubmissionStatus === 'submitted' ? '제출' : '미제출'}
|
|
</span>
|
|
<ArrowDownIcon className="size-[16px] text-[#6c7682] shrink-0" />
|
|
</button>
|
|
{isSubmissionDropdownOpen && (
|
|
<div className="absolute top-full left-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-50 w-[190px]">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedSubmissionStatus('all');
|
|
setIsSubmissionDropdownOpen(false);
|
|
}}
|
|
className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
|
|
>
|
|
모든 상태
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedSubmissionStatus('submitted');
|
|
setIsSubmissionDropdownOpen(false);
|
|
}}
|
|
className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
|
|
>
|
|
제출
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedSubmissionStatus('not-submitted');
|
|
setIsSubmissionDropdownOpen(false);
|
|
}}
|
|
className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
|
|
>
|
|
미제출
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 수료 여부 드롭다운 */}
|
|
<div className="flex flex-col gap-[4px] relative dropdown-container">
|
|
<label className="text-[14px] font-semibold leading-[1.5] text-[#6c7682]">
|
|
수료 여부
|
|
</label>
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsCompletionDropdownOpen(!isCompletionDropdownOpen);
|
|
setIsCourseDropdownOpen(false);
|
|
setIsSubmissionDropdownOpen(false);
|
|
}}
|
|
className="bg-white border border-[#dee1e6] rounded-[8px] h-[40px] px-[12px] py-[6px] flex items-center justify-between gap-[8px] w-[190px]"
|
|
>
|
|
<span className="text-[15px] font-normal leading-[1.5] text-[#6c7682] flex-1 text-left">
|
|
{selectedCompletionStatus === 'all' ? '모든 상태' : selectedCompletionStatus === 'completed' ? '완료' : '미완료'}
|
|
</span>
|
|
<ArrowDownIcon className="size-[16px] text-[#6c7682] shrink-0" />
|
|
</button>
|
|
{isCompletionDropdownOpen && (
|
|
<div className="absolute top-full left-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-50 w-[190px]">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedCompletionStatus('all');
|
|
setIsCompletionDropdownOpen(false);
|
|
}}
|
|
className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
|
|
>
|
|
모든 상태
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedCompletionStatus('completed');
|
|
setIsCompletionDropdownOpen(false);
|
|
}}
|
|
className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
|
|
>
|
|
완료
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedCompletionStatus('not-completed');
|
|
setIsCompletionDropdownOpen(false);
|
|
}}
|
|
className="w-full px-[12px] py-[8px] text-left text-[15px] font-normal leading-[1.5] text-[#1b2027] hover:bg-[#f1f3f5]"
|
|
>
|
|
미완료
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 검색바 */}
|
|
<div className="bg-white border border-[#dee1e6] rounded-[8px] h-[40px] px-[12px] py-[8px] flex items-center gap-[10px] w-[240px]">
|
|
<input
|
|
type="text"
|
|
placeholder="학습자명으로 검색"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="flex-1 text-[16px] font-normal leading-[1.5] text-[#b1b8c0] outline-none placeholder:text-[#b1b8c0]"
|
|
/>
|
|
<SearchIcon className="size-[20px] text-[#b1b8c0] shrink-0" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 영역 */}
|
|
<div className="border border-[#dee1e6] rounded-[8px] overflow-hidden">
|
|
{isLoading ? (
|
|
<div className="min-h-[400px] flex items-center justify-center">
|
|
<p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
|
|
</div>
|
|
) : filteredData.length === 0 ? (
|
|
<div className="min-h-[400px] flex items-center justify-center">
|
|
<p className="text-[16px] font-medium text-[#333c47]">데이터가 없습니다.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* 테이블 헤더 */}
|
|
<div className="bg-gray-50 h-[48px] flex items-center border-b border-[#dee1e6]">
|
|
<div className="flex-1 border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">교육 과정명</span>
|
|
</div>
|
|
<div className="flex-1 border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌명</span>
|
|
</div>
|
|
<div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">학습자명</span>
|
|
</div>
|
|
<div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">가입일</span>
|
|
</div>
|
|
<div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">마지막 수강일</span>
|
|
</div>
|
|
<div className="w-[76px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">진도율</span>
|
|
</div>
|
|
<div className="w-[112px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">문제 제출 여부</span>
|
|
</div>
|
|
<div className="w-[84px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">평가 점수</span>
|
|
</div>
|
|
<div className="w-[84px] px-[16px] py-[12px] text-center">
|
|
<span className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">수료 여부</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 바디 */}
|
|
<div className="bg-white">
|
|
{paginatedData.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="h-[48px] flex items-center border-b border-[#dee1e6] last:border-b-0"
|
|
>
|
|
<div className="flex-1 border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.courseName}</span>
|
|
</div>
|
|
<div className="flex-1 border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.lessonName}</span>
|
|
</div>
|
|
<div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.learnerName}</span>
|
|
</div>
|
|
<div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.enrollmentDate}</span>
|
|
</div>
|
|
<div className="w-[140px] border-r border-[#dee1e6] px-[16px] py-[12px]">
|
|
<span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.lastStudyDate}</span>
|
|
</div>
|
|
<div className="w-[76px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
|
|
<span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{item.progressRate}%</span>
|
|
</div>
|
|
<div className="w-[112px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
|
|
{item.hasSubmitted ? (
|
|
<StatusTag text="제출" type="default" color="primary" />
|
|
) : (
|
|
<StatusTag text="미제출" type="default" color="gray" />
|
|
)}
|
|
</div>
|
|
<div className="w-[84px] border-r border-[#dee1e6] px-[16px] py-[12px] text-center">
|
|
<span className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">
|
|
{item.score !== null ? `${item.score}점` : '-'}
|
|
</span>
|
|
</div>
|
|
<div className="w-[84px] px-[16px] py-[12px] text-center">
|
|
{item.isCompleted ? (
|
|
<StatusTag text="완료" type="default" color="primary" />
|
|
) : (
|
|
<StatusTag text="미완료" type="default" color="gray" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* 페이지네이션 */}
|
|
{filteredData.length > ITEMS_PER_PAGE && (
|
|
<div className="flex items-center justify-center gap-[8px] pt-[32px]">
|
|
{/* First */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setCurrentPage(1)}
|
|
disabled={currentPage === 1}
|
|
className="flex items-center justify-center rounded-full size-[32px] p-[8.615px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
|
|
>
|
|
<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))}
|
|
disabled={currentPage === 1}
|
|
className="flex items-center justify-center rounded-full size-[32px] p-[8.615px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
|
|
>
|
|
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
|
|
</button>
|
|
|
|
{/* Page Numbers */}
|
|
{Array.from({ length: Math.min(10, totalPages) }, (_, i) => {
|
|
const pageNum = i + 1;
|
|
const isActive = pageNum === currentPage;
|
|
return (
|
|
<button
|
|
key={pageNum}
|
|
type="button"
|
|
onClick={() => setCurrentPage(pageNum)}
|
|
className={`flex items-center justify-center rounded-full size-[32px] text-[16px] leading-[1.4] text-[#333c47] cursor-pointer ${
|
|
isActive ? 'bg-[#ecf0ff]' : 'bg-white'
|
|
}`}
|
|
>
|
|
{pageNum}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
{/* Next */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
|
disabled={currentPage === totalPages}
|
|
className="flex items-center justify-center rounded-full size-[32px] p-[8.615px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
|
|
>
|
|
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
|
|
</button>
|
|
|
|
{/* Last */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setCurrentPage(totalPages)}
|
|
disabled={currentPage === totalPages}
|
|
className="flex items-center justify-center rounded-full size-[32px] p-[8.615px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
|
|
>
|
|
<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>
|
|
);
|
|
}
|
|
|