XRLMS/app/mylecture/page.tsx

"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<CourseStatus>('all');

    // 샘플 강좌 데이터
    const [courses] = useState<Course[]>([
        {
            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 <LoginPage />;
    }

    // 필터에 따른 강좌 필터링
    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 (
        <div className="bg-white relative min-h-screen w-full">
            {/* 헤더 */}
            <header className="absolute content-stretch flex items-center justify-between left-[calc(12.5%+91px)] top-[43px] w-[1332px]">
                <div className="content-stretch flex gap-[99px] items-center relative shrink-0">
                    {/* 로고 */}
                    <button
                        onClick={() => router.push('/')}
                        className="h-[74px] relative shrink-0 w-[72px] cursor-pointer"
                    >
                        <div className="absolute inset-0 overflow-hidden pointer-events-none">
                            <img alt="" className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]" src={imgImage2} />
                        </div>
                    </button>
                    {/* 메뉴 */}
                    <div className="content-stretch flex gap-[24px] items-center relative shrink-0">
                        <div className="content-stretch flex gap-[150px] items-center relative shrink-0">
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre">
                                    교육 과정 목록
                                </p>
                            </div>
                        </div>
                        <div className="content-stretch flex gap-[150px] items-center relative shrink-0">
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre">
                                    학습 자료실
                                </p>
                            </div>
                        </div>
                        <div className="content-stretch flex gap-[150px] items-center relative shrink-0">
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre">
                                    공지사항
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 사용자 메뉴 */}
                <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
                    <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                        <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#1669ca] text-[18px] text-nowrap whitespace-pre">
                            내 강좌실
                        </p>
                    </div>
                    <button
                        onClick={() => {
                            localStorage.removeItem('isLoggedIn');
                            setIsLoggedIn(false);
                            router.push('/');
                        }}
                        className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
                    >
                        <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
                            로그아웃
                        </p>
                    </button>
                </div>
            </header>

            {/* 구분선 */}
            <div className="absolute h-0 left-1/2 top-[150px] translate-x-[-50%] w-full">
                <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
                    <img alt="" className="block max-w-none size-full" src={imgLine2} />
                </div>
            </div>

            {/* 사이드바 */}
            <div className="absolute box-border content-stretch flex flex-col items-center left-[37px] pb-0 pt-4 px-0 top-[192px] w-[250px]">
                <div className="box-border content-stretch flex flex-col gap-2 items-start p-3 relative shrink-0 w-full">
                    <button
                        onClick={() => router.push('/myinfo')}
                        className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer"
                    >
                        <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                            <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                내 정보 수정
                            </p>
                        </div>
                    </button>
                    <button
                        onClick={() => router.push('/mylecture')}
                        className="bg-[#f7f7f7] box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer"
                    >
                        <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                            <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                내 강좌실
                            </p>
                        </div>
                    </button>
                    <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer">
                        <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                            <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                학습 결과
                            </p>
                        </div>
                    </button>
                    <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer">
                        <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                            <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                수강 캘린더
                            </p>
                        </div>
                    </button>
                </div>
            </div>

            {/* 메인 콘텐츠 - 내 강좌실 */}
            <div className="absolute content-stretch flex flex-col gap-[32px] items-start justify-end left-[calc(12.5%+101px)] top-[196px]">
                {/* 필터 섹션 */}
                <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
                    <div className="content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-[717px]">
                        <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                            <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[28px] text-nowrap whitespace-pre">
                                수강 중인 강좌
                            </p>
                        </div>
                        <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
                            <button
                                onClick={() => setFilter('all')}
                                className="content-stretch flex gap-[10px] items-center relative shrink-0 cursor-pointer"
                            >
                                <div className="relative shrink-0 size-[25px]">
                                    {filter === 'all' ? <RadioOn /> : <RadioOff />}
                                </div>
                                <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    전체 보기
                                </p>
                            </button>
                            <button
                                onClick={() => setFilter('completed')}
                                className="content-stretch flex gap-[10px] items-center relative shrink-0 cursor-pointer"
                            >
                                <div className="relative shrink-0 size-[24px]">
                                    {filter === 'completed' ? <RadioOn /> : <RadioOff />}
                                </div>
                                <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    수강 완료한 강좌
                                </p>
                            </button>
                            <button
                                onClick={() => setFilter('in-progress')}
                                className="content-stretch flex gap-[10px] items-center relative shrink-0 cursor-pointer"
                            >
                                <div className="relative shrink-0 size-[24px]">
                                    {filter === 'in-progress' ? <RadioOn /> : <RadioOff />}
                                </div>
                                <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    수강 중인 강좌
                                </p>
                            </button>
                        </div>
                    </div>
                </div>

                {/* 강좌 리스트 */}
                <div className="border border-[#b9b9b9] border-solid box-border content-stretch flex flex-col gap-[30px] items-start p-[20px] relative rounded-[10px] shrink-0 w-[1347px]">
                    {filteredCourses.map((course, index) => (
                        <div key={course.id}>
                            <div className="content-stretch flex gap-[26px] items-center relative shrink-0 w-full">
                                {/* 썸네일 */}
                                <div className="bg-[#f7f7f7] box-border content-stretch flex gap-[10px] h-[165px] items-center justify-center px-[20px] py-[10px] relative rounded-[10px] shrink-0 w-[165px]">
                                    <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#b9b9b9] text-[24px] text-nowrap whitespace-pre">
                                        강좌 관련 썸네일
                                    </p>
                                </div>
                                {/* 강좌 정보 */}
                                <div className="basis-0 content-stretch flex flex-col grow items-start justify-center min-h-px min-w-px relative shrink-0">
                                    <div className="box-border content-stretch flex gap-[133px] items-center justify-center p-[10px] relative shrink-0 w-full">
                                        <div className="content-stretch flex flex-col gap-[10px] items-start leading-[normal] not-italic relative shrink-0 w-[392px]">
                                            <p className="font-bold relative shrink-0 text-[#515151] text-[20px] w-full">
                                                {course.title}
                                            </p>
                                            <p className="font-medium relative shrink-0 text-[#b9b9b9] text-[18px] w-full">
                                                진도율: {course.progress}%
                                            </p>
                                            <p className="font-medium relative shrink-0 text-[#b9b9b9] text-[18px] w-full">
                                                점수: {course.score}점 / {course.maxScore}점
                                            </p>
                                        </div>
                                        {/* 액션 버튼들 */}
                                        <div className="content-stretch flex gap-[10px] items-center justify-end relative shrink-0">
                                            {/* 상태 표시 */}
                                            <div className="box-border content-stretch flex gap-[10px] h-[50px] items-center justify-center p-[10px] relative rounded-[10px] shrink-0 w-[264px]">
                                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#f25200] text-[18px] text-nowrap whitespace-pre">
                                                    {course.status === 'in-progress' && '수강중'}
                                                    {course.status === 'completed' && '수강 완료'}
                                                    {course.status === 'not-started' && '수강 전'}
                                                </p>
                                            </div>
                                            {/* 수강 취소 버튼 */}
                                            {course.status !== 'completed' && (
                                                <button className="border border-[#2b82e8] border-solid box-border content-stretch flex gap-[10px] h-[50px] items-center justify-center p-[10px] relative rounded-[10px] shrink-0 w-[124px] cursor-pointer hover:bg-blue-50 transition-colors">
                                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                                        수강 취소
                                                    </p>
                                                </button>
                                            )}
                                            {/* 이어서 수강 / 수강하기 버튼 */}
                                            {course.status === 'in-progress' && (
                                                <button className="bg-[#599ded] box-border content-stretch flex gap-[10px] h-[50px] items-center justify-center p-[10px] relative rounded-[10px] shrink-0 w-[124px] cursor-pointer hover:bg-[#4a8ddc] transition-colors">
                                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[18px] text-nowrap text-white whitespace-pre">
                                                        이어서 수강
                                                    </p>
                                                </button>
                                            )}
                                            {course.status === 'not-started' && (
                                                <button className="bg-[#599ded] box-border content-stretch flex gap-[10px] h-[50px] items-center justify-center p-[10px] relative rounded-[10px] shrink-0 w-[124px] cursor-pointer hover:bg-[#4a8ddc] transition-colors">
                                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[18px] text-nowrap text-white whitespace-pre">
                                                        수강하기
                                                    </p>
                                                </button>
                                            )}
                                            {course.status === 'completed' && (
                                                <button className="bg-[#599ded] box-border content-stretch flex gap-[10px] h-[50px] items-center justify-center p-[10px] relative rounded-[10px] shrink-0 w-[124px] cursor-pointer hover:bg-[#4a8ddc] transition-colors">
                                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[18px] text-nowrap text-white whitespace-pre">
                                                        다시보기
                                                    </p>
                                                </button>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/* 구분선 */}
                            {index < filteredCourses.length - 1 && (
                                <div className="bg-[#eeeeee] h-px shrink-0 w-full mt-[30px]" />
                            )}
                        </div>
                    ))}
                </div>
            </div>

            {/* 푸터 */}
            <footer className="absolute bg-[#f7f7f7] box-border content-stretch flex flex-col mt-[111px] gap-[10px] h-[225px] items-start left-0 px-[243px] py-[39px] top-[1226px] w-full">
                <div className="content-stretch flex gap-[49px] items-center relative shrink-0">
                    {/* 로고 */}
                    <div className="h-[74px] relative shrink-0 w-[72px]">
                        <div className="absolute inset-0 overflow-hidden pointer-events-none">
                            <img alt="" className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]" src={imgImage2} />
                        </div>
                    </div>
                    {/* 푸터 정보 */}
                    <div className="content-stretch flex flex-col gap-[5px] items-start relative shrink-0 w-[479px]">
                        <div className="content-stretch flex gap-[27px] items-center relative shrink-0 w-full">
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    이용 약관
                                </p>
                            </div>
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    개인정보처리방침
                                </p>
                            </div>
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    고객센터
                                </p>
                            </div>
                        </div>
                        <div className="box-border content-stretch flex flex-col font-medium gap-[10px] items-center justify-center leading-[normal] not-italic p-[10px] relative shrink-0 text-[#515151] text-[16px]">
                            <p className="relative shrink-0 w-[400px]">
                                (12345) 서울특별시 광진구 구의동 123-12(구의타워1)
                            </p>
                            <p className="relative shrink-0 w-[400px]">
                                문의: 1234-1234 (평일 09:00 ~ 18:00)
                            </p>
                            <p className="relative shrink-0 w-[400px]">
                                이메일: qwer1234@go.or.kr
                            </p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}