"use client"; import { useEffect, useState } from 'react'; import { useRouter } from 'next/navigation'; import LoginPage from '../login/page'; import Image from 'next/image'; import logo from '../logo.svg'; import RadioOff from '../../public/svg/radio_off'; import RadioOn from '../../public/svg/radio_on'; const imgImage2 = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png"; const imgLine2 = "http://localhost:3845/assets/6ee8cf4ebb6bc2adb14aab8c9940b3002c20af35.svg"; type CourseStatus = 'all' | 'completed' | 'in-progress'; interface Course { id: number; title: string; progress: number; score: number; maxScore: number; status: 'in-progress' | 'completed' | 'not-started'; } export default function MyLecturePage() { const router = useRouter(); const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoading, setIsLoading] = useState(true); const [filter, setFilter] = useState('all'); // 샘플 강좌 데이터 const [courses] = useState([ { id: 1, title: '원자로 기본 원리와 주료 계동 원리', progress: 10, score: 0, maxScore: 100, status: 'in-progress', }, { id: 2, title: '핵연료 제조 공정 및 특성', progress: 10, score: 0, maxScore: 100, status: 'in-progress', }, { id: 3, title: '핵분열과 핵연료 주기 이해', progress: 10, score: 0, maxScore: 100, status: 'completed', }, { id: 4, title: '핵연료 성능 평가와 열수력 해석', progress: 10, score: 0, maxScore: 100, status: 'not-started', }, ]); useEffect(() => { // 로그인 상태 확인 const loginStatus = localStorage.getItem('isLoggedIn') === 'true'; setIsLoggedIn(loginStatus); setIsLoading(false); }, []); if (isLoading) { return null; // 로딩 중 } // 로그인되지 않았으면 로그인 페이지 표시 if (!isLoggedIn) { return ; } // 필터에 따른 강좌 필터링 const filteredCourses = courses.filter((course) => { if (filter === 'all') return true; if (filter === 'completed') return course.status === 'completed'; if (filter === 'in-progress') return course.status === 'in-progress'; return true; }); return (
{/* 헤더 */}
{/* 로고 */} {/* 메뉴 */}

교육 과정 목록

학습 자료실

공지사항

{/* 사용자 메뉴 */}

내 강좌실

{/* 구분선 */}
{/* 사이드바 */}
{/* 메인 콘텐츠 - 내 강좌실 */}
{/* 필터 섹션 */}

수강 중인 강좌

{/* 강좌 리스트 */}
{filteredCourses.map((course, index) => (
{/* 썸네일 */}

강좌 관련 썸네일

{/* 강좌 정보 */}

{course.title}

진도율: {course.progress}%

점수: {course.score}점 / {course.maxScore}점

{/* 액션 버튼들 */}
{/* 상태 표시 */}

{course.status === 'in-progress' && '수강중'} {course.status === 'completed' && '수강 완료'} {course.status === 'not-started' && '수강 전'}

{/* 수강 취소 버튼 */} {course.status !== 'completed' && ( )} {/* 이어서 수강 / 수강하기 버튼 */} {course.status === 'in-progress' && ( )} {course.status === 'not-started' && ( )} {course.status === 'completed' && ( )}
{/* 구분선 */} {index < filteredCourses.length - 1 && (
)}
))}
{/* 푸터 */}
); }