164 lines
9.7 KiB
TypeScript
164 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Image from 'next/image';
|
|
import Header from '../components/Header';
|
|
import logo from '../logo.svg';
|
|
|
|
const imgLine2 = "http://localhost:3845/assets/6ee8cf4ebb6bc2adb14aab8c9940b3002c20af35.svg";
|
|
|
|
export default function LectureListPage() {
|
|
const router = useRouter();
|
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [curriculums, setCurriculums] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
// 로그인 상태 확인
|
|
const loginStatus = localStorage.getItem('isLoggedIn') === 'true';
|
|
setIsLoggedIn(loginStatus);
|
|
setIsLoading(false);
|
|
|
|
// TODO: DB에서 교육 과정 목록 가져오기
|
|
// const fetchCurriculums = async () => {
|
|
// const response = await fetch('/api/curriculums');
|
|
// const data = await response.json();
|
|
// setCurriculums(data);
|
|
// };
|
|
// fetchCurriculums();
|
|
}, []);
|
|
|
|
if (isLoading) {
|
|
return null; // 로딩 중
|
|
}
|
|
|
|
// 로그인되지 않았으면 로그인 페이지로 리다이렉트
|
|
if (!isLoggedIn) {
|
|
router.push('/login');
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white relative min-h-screen w-full pb-[199px]">
|
|
{/* 헤더 */}
|
|
<Header activePage="lecturelist" />
|
|
|
|
{/* 구분선 */}
|
|
<div className="absolute h-0 left-1/2 top-[150px] translate-x-[-50%] w-[1920px]">
|
|
<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 content-stretch flex flex-col items-start left-[calc(6.25%+79px)] top-[270px] w-[1521px]">
|
|
{/* 페이지 제목 */}
|
|
<div className="content-stretch flex items-center relative shrink-0 mb-[20px]">
|
|
<p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[28px]">
|
|
교육 과정 목록 ({curriculums.length}건)
|
|
</p>
|
|
</div>
|
|
|
|
{/* 테이블 헤더 */}
|
|
<div className="bg-[rgba(235,247,255,0.5)] content-stretch flex h-[41px] items-center relative shrink-0 w-full">
|
|
<div className="content-stretch flex items-center relative shrink-0 w-full">
|
|
<div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
|
|
<div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
|
|
<p className="leading-[normal]">제목</p>
|
|
</div>
|
|
</div>
|
|
<div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
|
|
<div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
|
|
<p className="leading-[normal]">등록자</p>
|
|
</div>
|
|
</div>
|
|
<div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
|
|
<div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
|
|
<p className="leading-[normal]">등록일</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 내용 */}
|
|
{curriculums.length > 0 ? (
|
|
<div className="content-stretch flex flex-col items-start relative shrink-0 w-full">
|
|
{curriculums.map((curriculum) => (
|
|
<div key={curriculum.id} className="content-stretch flex items-center relative shrink-0 w-full border-[0.5px] border-[#b9b9b9] border-solid">
|
|
<div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
|
|
<p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px]">
|
|
{curriculum.title}
|
|
</p>
|
|
</div>
|
|
<div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
|
|
<p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px]">
|
|
{curriculum.instructorName || '-'}
|
|
</p>
|
|
</div>
|
|
<div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
|
|
<p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px]">
|
|
{curriculum.createdAt ? new Date(curriculum.createdAt).toLocaleDateString('ko-KR') : '-'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="content-stretch flex items-center justify-center relative shrink-0 w-full py-[40px]">
|
|
<p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#b9b9b9] text-[18px]">
|
|
등록된 교육 과정이 없습니다.
|
|
</p>
|
|
</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-[855px] w-[1920px]">
|
|
<div className="content-stretch flex gap-[49px] items-center relative shrink-0">
|
|
<div className="h-[74px] relative shrink-0 w-[72px]">
|
|
<Image
|
|
src={logo}
|
|
alt="로고"
|
|
className="w-full h-full object-contain"
|
|
width={72}
|
|
height={74}
|
|
/>
|
|
</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>
|
|
);
|
|
}
|
|
|