내 강좌실 생성11
This commit is contained in:
wallace
367
app/mylecture/page.tsx
Normal file
367
app/mylecture/page.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
"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">
|
||||
{/* 로고 */}
|
||||
<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 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 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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user